webgl - 最初の小さな正方形のボックスを作成しようとしています

Question

私はwebGLを初めて使っていて、JavaScriptを使ってキャンバスに1つのシンプルな正方形のボックスを表示しようとしました。私はデバッグする方法を知らない。誰かが私を助けることができれば素晴らしいだろう。ありがとう！

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>