</p> <p>今は円 を描画することができる午前

Question

が、私は周囲の単純なポイントを円上arbitaryポイントを選択し、三角形や のような形を描きたいのWebGLの円の円周上の点を描き何I頂点データ配列には点があります vertexDataから点を選択することができます しかし、その点に点を描画するにはどうすればいいですか？ キャンバス上に点を描画することについては 私はできることを理解しています 属性vec4 a_Position を宣言してから、gl_Position = a_Position

が、円周上に私は を理解していないですあなたはこの円を描くように三角形ファンを使用しているここ おかげ

<script> 
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(1.0, 0, 0, 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: 500}; 
    var ATTRIBUTES = 2; 
    var numFans = 64; 
    var degreePerFan = (2* Math.PI)/numFans; 
    var vertexData = [circle.x, circle.y]; 


// console.log(gl_Position) 
    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); 
    //console.log(angle) 
    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(); 
</script> 

Answer 1

を案内するので、追加の形状を描画して第2のドローコールを必要としてください。ドローコールが高価なので、これはうまく拡張できません。一回のドローコールで複数のシェイプを描画する方法が必要になる可能性が高くなります。

単純な例として、既存の関数の最後に最初の描画呼び出しが終了した後に、uni関数の最後に次のコードを追加して、2番目の小さな円を配置することができます第1の描画の円周は第2の描画呼び出しを使用する。フラグメントシェーダーを指定すると、これも赤い円になりますので、シェーダーを変更して別の色を使用することができます。

// Insert this code at the end of the uni() function, it will make 
// use of variables and GL state already declared earlier in that function. 

// Pick a point along circumference, range 1 to 63 
var selectedPointIndex = 8; 

circle.x = vertexData[selectedPointIndex * 2]; 
circle.y = vertexData[selectedPointIndex * 2 + 1]; 
circle.r = 50; 

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; 
} 
vertexDataTyped = new Float32Array(vertexData); 

buffer = gl.createBuffer(); 
gl.bindBuffer(gl.ARRAY_BUFFER, buffer); 
gl.bufferData(gl.ARRAY_BUFFER, vertexDataTyped, gl.STATIC_DRAW); 

gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 0); 
gl.drawArrays(gl.TRIANGLE_FAN, 0, vertexData.length/ATTRIBUTES);