webgl试图绘制一个三角形

时间：2018-10-15 04:45:35

标签： 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 = [
  '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>

2 个答案:

答案 0 :(得分：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>

答案 1 :(得分：1)

一些问题

没有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返回一个着色器，而不是分配一个全局

在WebGL中只有一个着色器并不常见，因此具有创建着色器的功能更为有用

  • 不要在gl.useProgram中呼叫initShader

同样，只有一个着色器并不常见。呼叫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将导致页面失败。缓冲区同样的问题

    不好

     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>

相关问题
最新问题