基本 webgl 程序中未显示三角形

Question

我正在尝试创建一个简单的 webgl 程序来绘制一个带有一些渐变的三角形。

这里是我们的程序。

1. 首先，我使用webgl context 创建了画布。
2. 创建了顶点着色器和片段着色器。
3. 将顶点着色器和片段着色器编译到程序中。

4. 设置相关数据缓冲区并在其中传递 vertex 和 color 数据。 但是即使在控制台中也没有显示任何内容我找不到任何错误

   var canvas = document.createElement('canvas')
   canvas.width = window.innerWidth
   canvas.height = window.innerHeight
   document.body.appendChild(canvas)
   
   //craete a canavs webgl context as a base to draw upon
   var gl = canvas.getContext('webgl')
   //  clear canvas with any color you want
   gl.clearColor(0.75, 0.85, 0.8, 1.0)
   gl.clear(gl.COLOR_BUFFER_BIT)
   
   
   // webgl pipeline need 2 shaders 1) vertex shader & fragment shader
   // crate a vertex shader & compile it
   var vertexShader = gl.createShader(gl.VERTEX_SHADER)
   gl.shaderSource(vertexShader, [
     'attribute vec4 aVertexColor;',
     'varying lowp vec4 vColor;',
   
     'attribute vec2 position;',
     'void main() {',
       'gl_Position = vec4(position, 0.0, 1.0);',
        'vColor = aVertexColor;',
   
     '}'
   ].join('\n'))
   gl.compileShader(vertexShader)
   
       if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
           console.error('ERROR compiling vertex shader!', gl.getShaderInfoLog(vertexShader));
       }
   
   
   // create a fragment shader & compile it 
   var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)
   gl.shaderSource(fragmentShader, [
     'varying lowp vec4 vColor;',
     'void main() {',
       'gl_FragColor = vColor;',
     '}'
   ].join('\n'))
   gl.compileShader(fragmentShader)
   
       if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
           console.error('ERROR compiling fragment shader!', gl.getShaderInfoLog(fragmentShader));
       }
   
   
   //craete a program that will be offloaded to the GPU
   var program = gl.createProgram()
   
   //attach vertex shader & fragment shaders to the the program
   gl.attachShader(program, vertexShader)
   gl.attachShader(program, fragmentShader)
   
   //link program
   gl.linkProgram(program)
   
       gl.linkProgram(program);
       if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
           console.error('ERROR linking program!', gl.getProgramInfoLog(program));
       }
       gl.validateProgram(program);
       if (!gl.getProgramParameter(program, gl.VALIDATE_STATUS)) {
           console.error('ERROR validating program!', gl.getProgramInfoLog(program));
       }
   
   //define vertex positions as float32 array elemnets
   var vertices = new Float32Array([
     -0.5, -0.5,
     0.5,  -0.5,
     0.0,   0.5
   ])
   
   
   
   
   //create  buffer where data will be stored
   var buffer = gl.createBuffer()
   // mark the given buffer as current/active buffer
   gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
   //add data to the active buffer
   gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
   
   
   
   const colors = [
       1.0,  1.0,  1.0,  1.0,    // white
       1.0,  0.0,  0.0,  1.0,    // red
       0.0,  1.0,  0.0,  1.0,    // green
     ];
   
   const colorBuffer = gl.createBuffer();
   gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
   gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
   
   
   
   //tell webgl to use the progr that we created
   gl.useProgram(program)
   
   program.aVertexColor = gl.getAttribLocation(program, 'aVertexColor'),
   gl.vertexAttribPointer(program.aVertexColor,4,gl.FLOAT,false,0,0);
   gl.enableVertexAttribArray(program.aVertexColor);
   
   
   //get location of the attribute `position` defined in our shader program
   program.position = gl.getAttribLocation(program, 'position')
   gl.enableVertexAttribArray(program.position)
   gl.vertexAttribPointer(program.position, 2, gl.FLOAT, false, 0, 0)
   
   
   gl.drawArrays(gl.TRIANGLES, 0, vertices.length / 2)
   

Answer 1

问题在于将数据绑定到position 着色器属性。 vertexAttribPointer 绑定当前绑定到ARRAY_BUFFER 目标的缓冲区。当您拨打电话gl.vertexAttribPointer(program.position, 2, gl.FLOAT, false, 0, 0) 时，colorBuffer 已绑定。所以 WebGL 尝试从中读取位置。如果您在该调用之前添加gl.bindBuffer(gl.ARRAY_BUFFER, buffer)，则为triangle's rendered as expected。