沿着圓周上的一個點生成隨機形狀

Question

我是webgl的新手，我從循環中生成的頂點創建了一個圓，我想要在圓周上的某個點上生成一個隨機形狀（小圓圈）大circle.Can任何人提供我如何，我可以達致這 一些信息，下面是我的圈子代碼：

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更多的途徑......