javascript高级程序设计第15章webgl例子2，代码运行无错但是网页显示空白？

Question

javascript高级程序设计第15章webgl例子2，代码运行无错但是网页显示空白？

发布于
2017-10-02

新手上路，请多包涵

如题，源码如下
<!DOCTYPE html>
<html>
<head>

<title>WebGL Example</title>

</head>
<body>

<canvas id="drawing" width="200" height="200">Your browser doesn't suppor the canvas tag.</canvas>
<script type="x-webgl/x-shader" id="vertex-shader">
attribute vec2 aVertexPosition;

void main() {
    gl_Position = vec4(aVertexPosition, 0.0, 1.0);
}
</script>
<script type="x-webgl/x-shader" id="fragment-shader">
#ifdef GL_ES
precision mediump float;
#endif

uniform vec4 uColor;

void main() {
    gl_FragColor = uColor;
}  
</script>
<script>
window.onload = function(){
    var drawing = document.getElementById("drawing"),
        gl, program, vertexShader, fragmentShader, node;
    
    if (drawing.getContext){
        gl = drawing.getContext("experimental-webgl");
        if (gl){
        
            gl.viewport(0, drawing.height, drawing.width, drawing.height);
            gl.clearColor(1, 1, 1, 1);
            gl.clear(gl.COLOR_BUFFER_BIT);

            //create the vertex shader
            node = document.getElementById("vertex-shader");
            vertexShader = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vertexShader, node.text);
            gl.compileShader(vertexShader);
            
            //create the fragment shader
            node = document.getElementById("fragment-shader");
            fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(fragmentShader, node.text);
            gl.compileShader(fragmentShader);

            //create the shader program
            program = gl.createProgram();
            gl.attachShader(program, vertexShader);
            gl.attachShader(program, fragmentShader);
            gl.linkProgram(program);
            gl.useProgram(program); // source code doesn't have this line
            
            //debugging
            if(!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)){
                console.log(gl.getShaderInfoLog(vertexShader));
            }
                    
            if(!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)){
                console.log(gl.getShaderInfoLog(fragmentShader));
            }
                    
            if(!gl.getProgramParameter(program, gl.LINK_STATUS)){
                console.log(gl.getProgramInfoLog(program));
            }
            
            //define three vertices, x and y for each
            var vertices = new Float32Array([ 0, 1, 1, -1, -1, -1 ]),
                buffer = gl.createBuffer(),
                vertexSetSize = 2,
                vertexSetCount = vertices.length/vertexSetSize,
                uColor, aVertexPosition;

            //put data into the buffer
            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);                    
            gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

            //pass color to fragment shader
            uColor = gl.getUniformLocation(program, "uColor");
            gl.uniform4fv(uColor, [ 0, 0, 0, 1 ]);

            //pass vertex information to shader
            aVertexPosition = gl.getAttribLocation(program, "aVertexPosition");
            gl.enableVertexAttribArray(aVertexPosition);
            gl.vertexAttribPointer(aVertexPosition, vertexSetSize, gl.FLOAT, false, 0, 0);

            //draw the triangle
            gl.drawArrays(gl.TRIANGLES, 0, vertexSetCount);
            
        } else {
            alert("Your browser doesn't support WebGL");
        }
    }
};    
</script>

</body>
</html>

javascript webgl canvas javascript高级程序设计

阅读 2.6k

1 个回答

得票最新

sevody

2384

发布于
2017-10-26

没有调用gl.viewport把剪裁空间坐标对应到画布像素坐标

<!DOCTYPE html>
<html>
<head>

<title>WebGL Example</title>
</head>
<body>
  <canvas id="drawing" width="200" height="200">Your browser doesn't suppor the canvas tag.</canvas>
<script type="x-webgl/x-shader" id="vertex-shader">
attribute vec2 aVertexPosition;

void main() {
    gl_Position = vec4(aVertexPosition, 0.0, 1.0);
}
</script>
<script type="x-webgl/x-shader" id="fragment-shader">
#ifdef GL_ES
precision mediump float;
#endif

uniform vec4 uColor;

void main() {
    gl_FragColor = uColor;
}  
</script>
<script>
  
window.onload = function(){
 
    var drawing = document.getElementById("drawing"),
        gl, program, vertexShader, fragmentShader, node;
    
    if (drawing.getContext){
        gl = drawing.getContext("experimental-webgl");
        if (gl){
        
            gl.viewport(0, drawing.height, drawing.width, drawing.height);
            gl.clearColor(1, 1, 1, 1);
            gl.clear(gl.COLOR_BUFFER_BIT);

            //create the vertex shader
            node = document.getElementById("vertex-shader");
            vertexShader = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vertexShader, node.text);
            gl.compileShader(vertexShader);

            
          //create the fragment shader
            node = document.getElementById("fragment-shader");
            fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(fragmentShader, node.text);
            gl.compileShader(fragmentShader);

            //create the shader program
            program = gl.createProgram();
            gl.attachShader(program, vertexShader);
            gl.attachShader(program, fragmentShader);
            gl.linkProgram(program);
         
            gl.useProgram(program); // source code doesn't have this line
            
            //debugging
            if(!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)){
                console.log(gl.getShaderInfoLog(vertexShader));
            }
                    
            if(!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)){
                console.log(gl.getShaderInfoLog(fragmentShader));
            }
                    
            if(!gl.getProgramParameter(program, gl.LINK_STATUS)){
                console.log(gl.getProgramInfoLog(program));
            }
            
            //define three vertices, x and y for each
            var vertices = new Float32Array([ 0, 1, 1, -1, -1, -1 ]),
                buffer = gl.createBuffer(),
                vertexSetSize = 2,
                vertexSetCount = vertices.length/vertexSetSize,
                uColor, aVertexPosition;

            //put data into the buffer
            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);                    
            gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

            //pass color to fragment shader
            uColor = gl.getUniformLocation(program, "uColor");
            gl.uniform4fv(uColor, [ 1, 0, 0, 1 ]);

            //pass vertex information to shader
            aVertexPosition = gl.getAttribLocation(program, "aVertexPosition");
            gl.enableVertexAttribArray(aVertexPosition);
            gl.vertexAttribPointer(aVertexPosition, vertexSetSize, gl.FLOAT, false, 0, 0);
            
            // 缺少这句
            gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

            //draw the triangle
            gl.drawArrays(gl.TRIANGLES, 0, vertexSetCount);
            
        } else {
            alert("Your browser doesn't support WebGL");
        }
    }
};    
</script>
  </body>
</html>

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

javascript高级程序设计第15章webgl例子2，代码运行无错但是网页显示空白？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何实现一个深拷贝函数？

git提交记录问题？

怎么获取动态弹出对话框的模拟单击？

什么是闭包？闭包有哪些应用场景？

求一个能输入需求就可以写出代码的网站，支持一键部署？