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

Question

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

这是我们的程序。

首先，我使用 webgl 上下文创建了 canvas。
已创建顶点着色器和片段着色器。
将顶点着色器和片段着色器编译成程序。

设置相关数据缓冲区并在其中传递 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.

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

triangle not being shown in basic webgl program

javascript

webgl

html5-canvas