Javascript webgl正在尝试绘制三角形

我一直试图画一个三角形，但它没有出现在画布上

这是我的绘图功能代码：

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=[
'属性vec3 vertexos；'，
'',
“void main（）{”，
“gl_位置=vec4（顶点曝光，1.0）；”，
'}'
].join（“\n”）
常量fragmentShaderText=[
“精密中泵浮动；”，
'',
“void main（）{”，
“gl_FragColor=vec4（1.0,1.0,1.0,1.0）；”，
'}'
].join（“\n”）
让gl、着色器程序、缓冲区
函数启动（）{
const canvas=document.getElementById（'myCanvas'）
gl=canvas.getContext（'webgl'）
initShader（）
initBuffer（）
gl.clearColor（0.0,0.0,0.0,1.0）
画（）
}
函数initShader（）{
//顶点着色器
让vertexShader=gl.createShader（gl.VERTEX\U着色器）
gl.shaderSource（vertexShader，vertexShaderText）
gl.compileShader（顶点着色器）
if（！gl.getShaderParameter（vertexShader，gl.COMPILE_状态））{
警报（'vertex'，gl.getShaderInfoLog（vertexShader））
返回
}
让fragmentShader=gl.createShader（gl.FRAGMENT\u着色器）
gl.shaderSource（fragmentShader，fragmentShaderText）
gl.compileShader（碎片着色器）
if（！gl.getShaderParameter（fragmentShader，gl.COMPILE_状态））{
警报（'fragment'，gl.getShaderInfoLog（fragmentShader））
返回
}
shaderProgram=gl.createProgram（）
gl.attachShader（着色器程序、顶点着色器）
gl.attachShader（着色器程序、碎片着色器）
总账链接程序（着色器程序）
if（！gl.getProgramParameter（着色器程序，gl.LINK_状态））{
警报（'设置着色器失败'）
}
gl.useProgram（着色器程序）
shaderProgram.vertextPositionAttribute=gl.GetAttriblLocation（shaderProgram，'VertExps'）
//gl.enableVertexAttributeArray（shaderProgramm.vertextPositionAttribute）
}
函数initBuffer（）{
buffer=gl.createBuffer（）
gl.bindBuffer（gl.ARRAY\u BUFFER，BUFFER）
常数三角形=[
0.0, 0, 5, 0.0, -0.5, -0.5, 0.0,
0.5, -0.5, 0.0
]
gl.bufferData（gl.ARRAY\u BUFFER、新Float32Array（triangleVertices）、gl.STATIC\u DRAW）
buffer.itemSize=3
buffer.numberOfItems=3
console.log（着色器程序）
}
函数绘图（）{
总图视口（0，0，总图视口宽度，总图视口高度）
总账清除（总账颜色\u缓冲\u位）
gl.VertexAttribute指针（ShaderProgramm.vertexPositionAttribute，
buffer.itemSize，gl.FLOAT，false，0,0）；
gl.enableVertexAttributeArray（shaderProgramm.vertexPositionAttribute）
//画三角形
gl.DrawArray（gl.TRIANGLES，0，buffer.numberOfItems）
}
启动（）

存在一些问题：

从不设置属性

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
]

但一般来说，您的代码是有效的：

const vertexShaderText=[
'属性vec3 vertexos；'，
'',
“void main（）{”，
“gl_位置=vec4（顶点曝光，1.0）；”，
'}'
].join（“\n”）
常量fragmentShaderText=[
“精密中泵浮动；”，
'',
“void main（）{”，
“gl_FragColor=vec4（1.0,1.0,1.0,1.0）；”，
'}'
].join（“\n”）
让gl、着色器程序、缓冲区
函数启动（）{
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）
画（）
}
函数initShader（）{
//顶点着色器
让vertexShader=gl.createShader（gl.VERTEX\U着色器）
gl.shaderSource（vertexShader，vertexShaderText）
gl.compileShader（顶点着色器）
if（！gl.getShaderParameter（vertexShader，gl.COMPILE_状态））{
警报（'vertex'，gl.getShaderInfoLog（vertexShader））
返回
}
让fragmentShader=gl.createShader（gl.FRAGMENT\u着色器）
gl.shaderSource（fragmentShader，fragmentShaderText）
gl.compileShader（碎片着色器）
if（！gl.getShaderParameter（fragmentShader，gl.COMPILE_状态））{
警报（'fragment'，gl.getShaderInfoLog（fragmentShader））
返回
}
shaderProgram=gl.createProgram（）
gl.attachShader（着色器程序、顶点着色器）
gl.attachShader（着色器程序、碎片着色器）
总账链接程序（着色器程序）
if（！gl.getProgramParameter（着色器程序，gl.LINK_状态））{
警报（'设置着色器失败'）
}
gl.useProgram（着色器程序）
shaderProgram.vertexPositionAttribute=gl.GetAttributeLocation（shaderProgram，“vertexPos”）
//gl.enableVertexAttributeArray（shaderProgramm.vertextPositionAttribute）
}
函数initBuffer（）{
buffer=gl.createBuffer（）
gl.bindBuffer（gl.ARRAY\u BUFFER，BUFFER）
常数三角形=[
0.0,  0.5, 0.0,
-0.5, -0.5, 0.0,
0.5, -0.5, 0.0
]
gl.bufferData（gl.ARRAY\u BUFFER、新Float32Array（triangleVertices）、gl.STATIC\u DRAW）
buffer.itemSize=3
buffer.numberOfItems=3
console.log（着色器程序）
}
函数绘图（）{
总图视口（0，0，总图视口宽度，总图视口高度）
gl.clear（gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT）；
gl.VertexAttribute指针（ShaderProgramm.vertexPositionAttribute，
buffer.itemSize，gl.FLOAT，false，0,0）；
gl.enableVertexAttributeArray（shaderProgramm.vertexPositionAttribute）；
//画三角形
gl.DrawArray（gl.TRIANGLES，0，buffer.numberOfItems）
请求动画帧（绘制）；
}
启动（）

一些问题

没有

gl.viewportWidth

和

gl.viewportHeight

使用

gl.canvas.width

和

gl.canvas.height

有一个网站教授如何使用

gl.viewportWidth

和

gl.viewportHeight

。这可以说是一种反模式。这些变量不是WebGL的一部分。它们是示例添加到WebGL上下文中的用户变量。绝对没有理由这样做，因为它们总是需要手动更新，并且实际宽度

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

 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
  ]

  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);
  }
`;

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

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

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

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