没有打印出来点请教

来源：2-4 绘制一个点

老白一个

2022-12-08

没有打印出来点，控制台提示，没有找到错误点，麻烦老师了

WebGL: INVALID_OPERATION: useProgram: program not valid
INVALID_OPERATION: drawArrays: no valid shader program in use

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../lib/index.js"></script>
</head>
<body>
    <canvas id="canvas" width="400" height="400">
      此浏览器不支持 canvas
    </canvas>
</body>
</html>
<script>
  const ctx = document.getElementById('canvas')
  const gl = ctx.getContext('webgl')

  // 着色器
  // 创建着色器
  const VERTEX_SHADER_SORUCE = `
    void main(){
      gl_Position = vec4(0.0,0.0,0.0,1.0);
      gl_Position = 10.0;
    }
  `;

  const FRAGEMNT_SHADER_SOURCE = `
    void main(){
      gl_FragColor = vec4(1.0,0.0,0.0,1.0);
    }
  `; // 片元着色器

  // // 创建着色器
  const vertexShader = gl.createShader(gl.VERTEX_SHADER)
  const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)

  gl.shaderSource(vertexShader,VERTEX_SHADER_SORUCE)
  gl.shaderSource(fragmentShader,FRAGEMNT_SHADER_SOURCE)

  // 编译着色器
  gl.compileShader(vertexShader)
  gl.compileShader(fragmentShader)

  // 创建一个程序对象
  const program = gl.createProgram();
  
  gl.attachShader(program,vertexShader)
  gl.attachShader(program,fragmentShader)
  
  gl.linkProgram(program)
  gl.useProgram(program)
  
  // 执行绘制
  
  // 要绘制图形是什么，从哪里开始, 使用几个顶点
  gl.drawArrays(gl.POINTS, 0, 1)

</script>

写回答

2回答