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

Question

我是 webGL 的新手，我正在尝试使用 javascript 让一个简单的方框出现在我的 Canvas 中。我不知道如何调试。如果有人可以帮助我，那就太好了。谢谢!

    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>