Question

我是webgl的新手，我从循环中生成的顶点创建了一个圆圈，我希望在大圆周上的某个点上生成一个随机形状（小圆圈）。任何人都可以提供一些信息我怎么能实现这个目标这是我的圆圈代码：

var vertexShaderText = [
  'uniform vec2 u_resolution;',
  '',
  'attribute vec2 a_position;',
  '',
  'void main()',
  '{',
  '',
  'vec2 clipspace = a_position / u_resolution * 1.0 ;',
  '',
  'gl_Position = vec4(clipspace * vec2(1, -1), 0, 1);',
  '}'
].join("\n");
var fragmentShaderText = [
  'precision mediump float;',
  '',
  'void main(void)',
  '{',
  '',
  'gl_FragColor = vec4(0, 0, 0, 1.0);',
  '',
  '}'

].join("\n");
var uni = function(){
  var canvas = document.getElementById("game-surface");
  var gl = canvas.getContext("webgl",{antialias: true});
  console.log("This is working");

  gl.clearColor(0.412,0.412,0.412,1);
  gl.clear(gl.COLOR_BUFFER_BIT);


  var vertextShader = gl.createShader(gl.VERTEX_SHADER);
  var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

  gl.shaderSource(vertextShader,vertexShaderText);
  gl.shaderSource(fragmentShader,fragmentShaderText);

  gl.compileShader(vertextShader);
  gl.compileShader(fragmentShader);

  if(!gl.getShaderParameter(vertextShader,gl.COMPILE_STATUS)){
    console.error("Error with vertexshader",gl.getShaderInfoLog(vertextShader));
    return;
  }
  if(!gl.getShaderParameter(fragmentShader,gl.COMPILE_STATUS)){
    console.error("Error with fragmentShader",gl.getShaderInfoLog(fragmentShader));
    return;
  }



  var program =gl.createProgram();
  gl.attachShader(program,vertextShader);
  gl.attachShader(program,fragmentShader);
  gl.linkProgram(program);
  gl.useProgram(program);
  if(!gl.getProgramParameter(program,gl.LINK_STATUS)){
    console.error("Error linking program",gl.getProgramInfoLog(program));
    return;
  }
  gl.validateProgram(program);
  if(!gl.getProgramParameter(program,gl.VALIDATE_STATUS)){
    console.error("Error validating",gl.getProgramInfoLog(program));
  }

  var circle = {x: 0, y:0, r: 55};
  var ATTRIBUTES = 2;
  var numFans = 32;
  var degreePerFan = (2* Math.PI) / numFans;
  var vertexData = [circle.x, circle.y];

  for(var i = 0; i <= numFans; i++) {
    var index = ATTRIBUTES * i + 2; // there is already 2 items in array
    var angle = degreePerFan * (i+0.1);
    vertexData[index] = circle.x + Math.cos(angle) * circle.r;
    vertexData[index + 1] = circle.y + Math.sin(angle) * circle.r;
  }
  console.log(vertexData);
  var vertexDataTyped = new Float32Array(vertexData);

  var buffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  gl.bufferData(gl.ARRAY_BUFFER, vertexDataTyped, gl.STATIC_DRAW);

  var resolutionLocation = gl.getUniformLocation(program, "u_resolution");
  gl.uniform2f(resolutionLocation, canvas.width, canvas.height);

  gl.enableVertexAttribArray(positionLocation);

  var positionLocation = gl.getAttribLocation(program, "a_position");
  gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 0);
  gl.drawArrays(gl.TRIANGLE_FAN, 0, vertexData.length/ATTRIBUTES);
};
uni();

<canvas id="game-surface"></canvas>

Answer 1

很难回答你的问题，因为WebGL只是一个光栅化库，所以有几千种方法可以在某处绘制某些东西。

所以，你可以

添加更多积分

您生成了圆点。为你想要绘制的任何其他内容生成更多内容。
在不同的地方和大小中多次绘制同一个圆圈

让我们说你想在大圆圈上画一个小圆圈。 Compute a matrix to scale and reorient大圆where you want it to be，更新矩阵，再次绘制圆圈。
画出更多东西

就像你画圆圈一样，画一个像方形的东西，把它放在圆的边缘。
另外1000种......

沿圆周上的点生成随机形状

1 个答案: