Webgl 没有渲染我的圈子

Question

我正在尝试学习如何使用 Webgl，并且已经学会了如何绘制三角形、正方形和直线。我在 webgl 中创建我的圈子时遇到问题。

 var InitDemo = function(){
     var canvas = document.getElementById('circle-surface');
     var gl = canvas.getContext('webgl');
    
     //define geomtry
     var vertices = [];
     var origin = [0,0];
     vertices.push(origin);
     for(var i = 0; i <= 360; i+=1){
      var j = i*Math.PI/180;
      var vert = [Math.sin(j),Math.cos(j)];
      vertices.push(vert);
     }
     console.log('the vertices are: '+vertices);
     var vertBuffer = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, vertBuffer);
     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
     //shaders
     var vertSrc = 'attribute vec2 coordinates;'+
        'void main(){' +
        ' gl_Position = vec4(coordinates,0.0,1.0);'+
        '}';
     var vertShader = gl.createShader(gl.VERTEX_SHADER);
     gl.shaderSource(vertShader, vertSrc);
     gl.compileShader(vertShader);
     if (!gl.getShaderParameter(vertShader, gl.COMPILE_STATUS)) {
      console.error('ERROR compiling vertex shader!', gl.getShaderInfoLog(vertShader));
      return;
     }
    
     var fragSrc = 'void main(){'+
         ' gl_FragColor = vec4(1.0,0.0,1.0,1.0);'+
         '}';
     var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
     gl.shaderSource(fragShader, fragSrc);
     gl.compileShader(fragShader);
     if (!gl.getShaderParameter(fragShader, gl.COMPILE_STATUS)) {
      console.error('ERROR compiling fragment shader!', gl.getShaderInfoLog(fragShader));
      return;
     }
    
     var shaderProg = gl.createProgram();
     gl.attachShader(shaderProg, vertShader);
     gl.attachShader(shaderProg, fragShader);
     gl.linkProgram(shaderProg);
     gl.useProgram(shaderProg);
     if (!gl.getProgramParameter(shaderProg, gl.LINK_STATUS)) {
      console.error('ERROR linking program!', gl.getProgramInfoLog(shaderProg));
      return;
     }
     gl.validateProgram(shaderProg);
     if (!gl.getProgramParameter(shaderProg, gl.VALIDATE_STATUS)) {
      console.error('ERROR validating program!', gl.getProgramInfoLog(shaderProg));
      return;
     }
    
     //associate shader and buffer
    
     var coord = gl.getAttribLocation(shaderProg, 'coordinates');
     gl.vertexAttribPointer(coord, 2, gl.FLOAT, gl.FALSE, 2*Float32Array.BYTES_PER_ELEMENT, 0);
     gl.enableVertexAttribArray(coord);
     //Draw
     gl.clearColor(0.0, 0.0, 0.2, 1.0);
     gl.clear(gl.COLOR_BUFFER_BIT);
     gl.drawArrays(gl.TRIANGLE_FAN, 0, vertices.length/2);
    
    
    }

    <!DOCTYPE html>
    <html>
    <head>
     <title>Circle Demo</title>
     <link rel="stylesheet" type="text/css" href="tutorial.css">
    </head>
    <body onload="InitDemo();">
     <canvas id = "circle-surface" width="800px" height="600px"></canvas>
     <script src = "CircleApp.js"></script>
    </body>
    </html>

我在控制台上没有收到任何错误，但由于某种原因它没有显示我想要的圆圈。

Answer 1

你的错误不是OGL部分的错误，而是设置顶点数组时的错误。您为顶点缓冲区生成了二维数组而不是线性一维数组。

您必须使用 vertices.push(origin[0], origin[1]); 而不是 vertices.push(origin);（vert 也是如此）。

您的代码应该看起来像这样：

var vertices = [];
var origin = [0,0];
vertices.push( origin[0], origin[1] );     <-------------------------
for(var i = 0; i <= 360; i+=1){
    var j = i*Math.PI/180;
    var vert = [Math.sin(j),Math.cos(j)];
    vertices.push( vert[0], vert[1] );     <-------------------------
}

更正后的 WebGL 示例：

var InitDemo = function(){

     var canvas = document.getElementById('circle-surface');
     var gl = canvas.getContext('webgl');
    
     //define geomtry
     var vertices = [];
     var origin = [0,0];
      vertices.push( origin[0], origin[1] );  
   
      for(var i = 0; i <= 360; i+=1){
          var j = i*Math.PI/180;
          var vert = [Math.sin(j),Math.cos(j)];
          vertices.push( vert[0], vert[1] );    
      }
      
     console.log('the vertices are: '+vertices);
     var vertBuffer = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, vertBuffer);
     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
     //shaders
     var vertSrc = 'attribute vec2 coordinates;'+
        'void main(){' +
        ' gl_Position = vec4(coordinates,0.0,1.0);'+
        '}';
     var vertShader = gl.createShader(gl.VERTEX_SHADER);
     gl.shaderSource(vertShader, vertSrc);
     gl.compileShader(vertShader);
     if (!gl.getShaderParameter(vertShader, gl.COMPILE_STATUS)) {
      console.error('ERROR compiling vertex shader!', gl.getShaderInfoLog(vertShader));
      return;
     }
    
     var fragSrc = 'void main(){'+
         ' gl_FragColor = vec4(1.0,0.0,1.0,1.0);'+
         '}';
     var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
     gl.shaderSource(fragShader, fragSrc);
     gl.compileShader(fragShader);
     if (!gl.getShaderParameter(fragShader, gl.COMPILE_STATUS)) {
      console.error('ERROR compiling fragment shader!', gl.getShaderInfoLog(fragShader));
      return;
     }
    
     var shaderProg = gl.createProgram();
     gl.attachShader(shaderProg, vertShader);
     gl.attachShader(shaderProg, fragShader);
     gl.linkProgram(shaderProg);
     gl.useProgram(shaderProg);
      
     if (!gl.getProgramParameter(shaderProg, gl.LINK_STATUS)) {
      console.error('ERROR linking program!', gl.getProgramInfoLog(shaderProg));
      return;
     }
     gl.validateProgram(shaderProg);
     if (!gl.getProgramParameter(shaderProg, gl.VALIDATE_STATUS)) {
      console.error('ERROR validating program!', gl.getProgramInfoLog(shaderProg));
      return;
     }
    
     //associate shader and buffer
    
     var coord = gl.getAttribLocation(shaderProg, 'coordinates');
     gl.vertexAttribPointer(coord, 2, gl.FLOAT, gl.FALSE, 2*Float32Array.BYTES_PER_ELEMENT, 0);
     gl.enableVertexAttribArray(coord);
     //Draw
     gl.clearColor(0.0, 0.0, 0.2, 1.0);
     gl.clear(gl.COLOR_BUFFER_BIT);
     gl.drawArrays(gl.TRIANGLE_FAN, 0, vertices.length/2);    
}

InitDemo();

<canvas id = "circle-surface" width="800px" height="600px"></canvas>

Webgl 没有渲染我的圈子

Webgl not rendering my circle

html

javascript

webgl