webgl - 试图创建我的第一个小方框

Question

我是webGL的新手，并试图使用javascript在我的画布上显示一个简单的方框。我不知道如何调试。如果有人可以帮助我会很棒。谢谢！

    var gl,
        shaderProgram;
    initGL();
    createShaders();
    draw();
    
    function initGL() { 
      let canvas = document.getElementById("canvas");
      gl = canvas.getContext("webgl");
      gl.viewport(0.0, 0.0, canvas.width, canvas.height);
      gl.clearColor(0.0, 1.0, 1.0, 1.0);  // colors for r, g, b and alpha. these are all normalized values from 0 to 1.
    }
    
    function createShaders(){
      var vs="";
      vs+="void main(void) {";
      vs+="  gl_Position = vec4(0.0, 0.0, 0.0, 1.0)";
      vs+="  gl_PointSize = 10.0;";
      vs+="}";
      
      
      var vertexShader = gl.createShader(gl.VERTEX_SHADER);
      gl.shaderSource(vertexShader, vs);
      gl.compileShader(vertexShader);
      
      var fs="";
      fs+="void main(void) {";
      fs+="  gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0)"; // Fully opaque black
      fs+="}";
      
      var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
      gl.shaderSource(fragmentShader, fs);
      gl.compileShader(fragmentShader);
      
      shaderProgram = gl.createProgram();
      gl.attachShader(shaderProgram, vertexShader);
      gl.attachShader(shaderProgram, fragmentShader);
      gl.linkProgram(shaderProgram);
      gl.useProgram(shaderProgram);
      
    }
    
    function draw(){ 
      gl.clear(gl.COLOR_BUFFER_BIT);
      gl.drawArrays(gl.POINTS, 0, 1);
    }

<canvas id="canvas" width="600" height="600"> </canvas>

Answer 1

请阅读一些different tutorials on WebGL

问题是你得到着色器编译器错误。如果您打开JavaScript控制台，则可能会看到

第一条消息表示您的着色器程序错误

您阅读的任何书籍/网站都应该告诉您检查着色器编译错误，例如

      { 
        const success = gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS);
        if (!success) {
           console.error(gl.getShaderInfoLog(vertexShader));
           return false;
        }
      }

还有像这样的程序链接错误

      { 
        const success = gl.getProgramParameter(shaderProgram, gl.LINK_STATUS);
        if (!success) {
           console.error(gl.getProgramInfoLog(shaderProgram));
           return false;
        }
      }      

那可能会指出你的着色器有问题。你错过了这一行的分号

      gl_Position = vec4(0.0, 0.0, 0.0, 1.0)

请阅读一些更好的教程。另请考虑使用JavaScript multiline template literals。比连接字符串容易得多。

在编译和链接着色器的函数内调用gl.useProgram也是一种反模式。 WebGL应用程序通常有多个着色器程序。

var gl,
        shaderProgram;
    initGL();
    createShaders();
    draw();
    
    function initGL() { 
      let canvas = document.getElementById("canvas");
      gl = canvas.getContext("webgl");
      gl.viewport(0.0, 0.0, canvas.width, canvas.height);
      gl.clearColor(0.0, 1.0, 1.0, 1.0);  // colors for r, g, b and alpha. these are all normalized values from 0 to 1.
    }
    
    function createShaders(){
      var vs=`
      void main(void) {
        gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
        gl_PointSize = 10.0;
      }`;
      
      var vertexShader = gl.createShader(gl.VERTEX_SHADER);
      gl.shaderSource(vertexShader, vs);
      gl.compileShader(vertexShader);
      { 
        const success = gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS);
        if (!success) {
           console.error(gl.getShaderInfoLog(vertexShader));
           return false;
        }
      }
      
      
      var fs=`
      void main(void) {
        gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); // Fully opaque black
      }`;
      
      var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
      gl.shaderSource(fragmentShader, fs);
      gl.compileShader(fragmentShader);
      { 
        const success = gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS);
        if (!success) {
           console.error(gl.getShaderInfoLog(fragmentShader));
           return false;
        }
      }
      
      shaderProgram = gl.createProgram();
      gl.attachShader(shaderProgram, vertexShader);
      gl.attachShader(shaderProgram, fragmentShader);
      gl.linkProgram(shaderProgram);
      { 
        const success = gl.getProgramParameter(shaderProgram, gl.LINK_STATUS);
        if (!success) {
           console.error(gl.getProgramInfoLog(shaderProgram));
           return false;
        }
      }      
      
      gl.useProgram(shaderProgram);
      return true;   // this is bad. You should be returning the program
    }
    
    function draw(){ 
      gl.clear(gl.COLOR_BUFFER_BIT);
      gl.drawArrays(gl.POINTS, 0, 1);
    }

<canvas id="canvas" width="600" height="600"> </canvas>