webgl 试图画一个三角形

Question

我一直在尝试画一个三角形，但它没有出现在 canvas

这是我的绘制函数代码：

function draw() {
    gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight)gl.clear(gl.COLOR_BUFFER_BIT)       
    gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 
                buffer.itemSize, gl.FLOAT, false, 0, 0); 
    gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute)
      
        //Draw the triangle
    gl.drawArrays(gl.TRIANGLES, 0, buffer.numberOfItems)
}

这是全部作品：

const vertexShaderText = [
  'attribute vec3 vertexPos;',
  '',
  'void main() {',
  '  gl_Position = vec4(vertexPos, 1.0);',
  '}'
].join('\n')

const fragmentShaderText = [
  'precision mediump float;',
  '',
  'void main() {',
  '  gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);',
  '}'
].join('\n')

let gl, shaderProgram, buffer

function startup() {
  const canvas = document.getElementById('myCanvas')
  gl = canvas.getContext('webgl')

  initShader()
  initBuffer()

  gl.clearColor(0.0, 0.0, 0.0, 1.0)

  draw()
}

function initShader() {

  // VERTEX SHADER
  let vertexShader = gl.createShader(gl.VERTEX_SHADER)
  gl.shaderSource(vertexShader, vertexShaderText)
  gl.compileShader(vertexShader)

  if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
    alert('vertex', gl.getShaderInfoLog(vertexShader))
    return
  }

  let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)
  gl.shaderSource(fragmentShader, fragmentShaderText)
  gl.compileShader(fragmentShader)

  if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
    alert('fragment', gl.getShaderInfoLog(fragmentShader))
    return
  }


  shaderProgram = gl.createProgram()

  gl.attachShader(shaderProgram, vertexShader)
  gl.attachShader(shaderProgram, fragmentShader)

  gl.linkProgram(shaderProgram)

  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
    alert('Failed to setup shaders')
  }

  gl.useProgram(shaderProgram)

  shaderProgram.vertextPositionAttribute = gl.getAttribLocation(shaderProgram, 'vertexPos')
  //gl.enableVertexAttribArray(shaderProgram.vertextPositionAttribute)

}

function initBuffer() {
  buffer = gl.createBuffer()

  gl.bindBuffer(gl.ARRAY_BUFFER, buffer)

  const triangleVertices = [
    0.0, 0, 5, 0.0, -0.5, -0.5, 0.0,
    0.5, -0.5, 0.0
  ]

  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW)

  buffer.itemSize = 3
  buffer.numberOfItems = 3
  console.log(shaderProgram)
}

function draw() {
  gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight) 
  gl.clear(gl.COLOR_BUFFER_BIT)

  gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,
    buffer.itemSize, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute)  
  //Draw the triangle
  gl.drawArrays(gl.TRIANGLES, 0, buffer.numberOfItems)
}

startup()

<canvas id="myCanvas" width="500" height="500"></canvas>

Answer 1

存在一些问题：

从未设置属性 gl.viewportWidth 和 gl.viewportHeight：

gl = canvas.getContext('webgl')
gl.viewportWidth = canvas.clientWidth;
gl.viewportHeight = canvas.clientHeight;

在顶点坐标数组中是,而不是.

const triangleVertices = [
     0.0,  0,5, 0.0, // <---- this line
    -0.5, -0.5, 0.0, 
     0.5, -0.5, 0.0
]

还有一个错字，你写的是vertextPositionAttribute而不是vertexPositionAttribute，当你得到属性索引时：

shaderProgram.vertextPositionAttribute = // <--- typo
    gl.getAttribLocation(shaderProgram, 'vertexPos')

但总的来说，您的代码有效：

  const vertexShaderText = [
    'attribute vec3 vertexPos;',
    '',
    'void main() {',
    '  gl_Position = vec4(vertexPos, 1.0);',
    '}'
].join('\n')

const fragmentShaderText = [
    'precision mediump float;',
    '',
    'void main() {',
    '  gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);',
    '}'
].join('\n')

let gl, shaderProgram, buffer

function startup() {
    const canvas = document.getElementById('myCanvas')
    gl = canvas.getContext('webgl')

    gl.viewportWidth = canvas.clientWidth;
    gl.viewportHeight = canvas.clientHeight;
      
    initShader()
    initBuffer()

    gl.clearColor(0.0, 0.0, 0.0, 1.0)
    
    draw()
}

function initShader() {
    
    // VERTEX SHADER
    let vertexShader = gl.createShader(gl.VERTEX_SHADER)
    gl.shaderSource(vertexShader, vertexShaderText)
    gl.compileShader(vertexShader)

    if(!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
        alert('vertex', gl.getShaderInfoLog(vertexShader))
        return
    }

    let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)
    gl.shaderSource(fragmentShader, fragmentShaderText)
    gl.compileShader(fragmentShader)

    if(!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
        alert('fragment', gl.getShaderInfoLog(fragmentShader))
        return
    }
    

    shaderProgram = gl.createProgram()

    gl.attachShader(shaderProgram, vertexShader )
    gl.attachShader(shaderProgram, fragmentShader)

    gl.linkProgram(shaderProgram)

    if(!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
        alert('Failed to setup shaders')
    }

    gl.useProgram(shaderProgram)

    shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, 'vertexPos')
    //gl.enableVertexAttribArray(shaderProgram.vertextPositionAttribute)
  
}

function initBuffer() {
    buffer = gl.createBuffer()

    gl.bindBuffer(gl.ARRAY_BUFFER, buffer)

    const triangleVertices = [
          0.0,  0.5, 0.0,
        -0.5, -0.5, 0.0,
          0.5, -0.5, 0.0
    ]

    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW)

    buffer.itemSize = 3
    buffer.numberOfItems = 3
    console.log(shaderProgram)
}

function draw() {
    gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight)
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 
    
    gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 
            buffer.itemSize, gl.FLOAT, false, 0, 0); 
    gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);

    //Draw the triangle
    gl.drawArrays(gl.TRIANGLES, 0, buffer.numberOfItems)

    requestAnimationFrame(draw);
}

startup()

<canvas id="myCanvas" width="500" height="500"></canvas>

Answer 2

一些问题

没有`gl.viewportWidth`和`gl.viewportHeight`

使用gl.canvas.width和gl.canvas.height。

有一个网站教授如何使用 gl.viewportWidth 和 gl.viewportHeight。它可以说是一种反模式。这些变量不是 WebGL 的一部分。它们是示例添加到 WebGL 上下文中的用户变量。这样做的理由绝对为零，因为它们总是必须手动更新，并且实际宽度和高度始终可用。

`triangleVertices`

中的错字

下面第二个逗号应该是句点

不好

 const triangleVertices = [
    0.0, 0, 5, 0.0, -0.5, -0.5, 0.0,  
    0.5, -0.5, 0.0
  ]

好

 const triangleVertices = [
    0.0, 0.5, 0.0, -0.5, -0.5, 0.0,  
    0.5, -0.5, 0.0
  ]

这样它就可以运行了，但这是另一个错字

vertextPositionAttribute 应该是 vertexPositionAttribute

  shaderProgram.vertextPositionAttribute = gl.getAttribLocation(shaderProgram, 'vertexPos')
  //gl.enableVertexAttribArray(shaderProgram.vertextPositionAttribute)

也就是说，这里有很多建议。

为着色器使用多行模板文字

而不是

const vertexShaderText = [
  'attribute vec3 vertexPos;',
  '',
  'void main() {',
  '  gl_Position = vec4(vertexPos, 1.0);',
  '}'
].join('\n')

这样做

const vertexShaderText = `
  attribute vec3 vertexPos;

  void main() {
    gl_Position = vec4(vertexPos, 1.0);
  }
`;

轻松多了！对多行字符串使用反引号而不是引号

制作 initShader return 着色器而不是分配全局

在 WebGL 中只有一个着色器并不常见，因此拥有一个创建着色器的函数会更有用

不要在 initShader

gl.useProgram

同样，只有一个着色器并不常见。调用gl.useProgram一般属于draw

不要给浏览器对象添加属性，尤其是 WebGL 对象

不好

shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, 'vertexPos');

好（多种方式之一）

const shaderProgramInfo = {}
shaderProgramInfo.program = initShader(...)
shaderProgramInfo.vertexPositionAttribute =
    gl.getAttribLocation(shaderProgramInfo.program, 'vertexPos');

这是因为如果 initShader 失败（例如上下文丢失），您的 gl.createProgram 将为 null 并且尝试将属性分配给 null 将导致您的页面失败。与 buffer

相同的问题

不好

 const buffer = gl.createBuffer();
 ...
 buffer.itemSize = 3
 buffer.numberOfItems = 3

好（多种方式之一）

 const bufferInfo = {
   buffer: gl.createBuffer(),
 }
 ...
 bufferInfo.itemSize = 3
 bufferInfo.numberOfItems = 3

先调用gl.bindBuffer再调用gl.vertexAttribPointer

您的代码可以运行，因为只有一个缓冲区。如果有 2 个缓冲区，它可能会停止工作，因为 gl.vertexAttribPointer 引用当前绑定的缓冲区
考虑阅读更好的教程。

我会推荐 https://webglfundamentals.org

const vertexShaderText = `
  attribute vec3 vertexPos;
  
  void main() {
    gl_Position = vec4(vertexPos, 1.0);
  }
`;

const fragmentShaderText = `
  precision mediump float;
  
  void main() {
    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
  }
`;

let gl, shaderProgramInfo, bufferInfo

function startup() {
  const canvas = document.getElementById('myCanvas')
  gl = canvas.getContext('webgl')

  shaderProgramInfo = {
    program: initShader(gl, vertexShaderText, fragmentShaderText),
  };
  shaderProgramInfo.vertexPositionAttribute = gl.getAttribLocation(shaderProgramInfo.program, 'vertexPos');

  bufferInfo = initBuffer()

  gl.clearColor(0.0, 0.0, 0.0, 1.0)

  draw()
}

function initShader(gl, vertexShaderText, fragmentShaderText) {

  // VERTEX SHADER
  let vertexShader = gl.createShader(gl.VERTEX_SHADER)
  gl.shaderSource(vertexShader, vertexShaderText)
  gl.compileShader(vertexShader)

  if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
    alert('vertex', gl.getShaderInfoLog(vertexShader))
    return
  }

  let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)
  gl.shaderSource(fragmentShader, fragmentShaderText)
  gl.compileShader(fragmentShader)

  if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
    alert('fragment', gl.getShaderInfoLog(fragmentShader))
    return
  }

  const shaderProgram = gl.createProgram()

  gl.attachShader(shaderProgram, vertexShader)
  gl.attachShader(shaderProgram, fragmentShader)

  gl.linkProgram(shaderProgram)

  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
    alert('Failed to setup shaders')
  }

  return shaderProgram;
}

function initBuffer() {
  buffer = gl.createBuffer()

  gl.bindBuffer(gl.ARRAY_BUFFER, buffer)

  const triangleVertices = [
    0.0, 0.5, 0.0, -0.5, -0.5, 0.0,
    0.5, -0.5, 0.0
  ]

  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW)

  return {
    buffer,
    itemSize: 3,
    numberOfItems: 3,
  };
}

function draw() {
  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); 
  gl.clear(gl.COLOR_BUFFER_BIT)

  gl.useProgram(shaderProgramInfo.program)

  gl.bindBuffer(gl.ARRAY_BUFFER, bufferInfo.buffer);
  gl.vertexAttribPointer(shaderProgramInfo.vertexPositionAttribute,
    bufferInfo.itemSize, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(shaderProgramInfo.vertexPositionAttribute)  
  //Draw the triangle
  gl.drawArrays(gl.TRIANGLES, 0, bufferInfo.numberOfItems)
}

startup()

<canvas id="myCanvas" width="500" height="500"></canvas>

webgl 试图画一个三角形

webgl trying to draw a triangle

javascript

shader

glsl

webgl

没有`gl.viewportWidth`和`gl.viewportHeight`

`triangleVertices`

webgl 试图画一个三角形

webgl trying to draw a triangle

javascript

shader

glsl

webgl

没有gl.viewportWidth和gl.viewportHeight

triangleVertices

没有`gl.viewportWidth`和`gl.viewportHeight`

`triangleVertices`