![GL]( "GL")
我第一次尝试使用WebGL，但似乎遇到了问题。所有代码看起来都不错，我已经通过jshint多次运行了，但是我似乎无法正常运行该程序。我在Chrome操作系统上运行的是Chrome 54稳定版。代码如下。"use strict";//initWebGL functionfunction initWebGL(canvas){ //get a webGL context var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); //if we have a context, we're good to go. if not, alert, and return the nothing that is our empty context if(!gl){ alert("Your browser does not support WebGL"); } return gl;}//shader creation functionfunction createShader(gl, type, source){ //create and compile the shader var shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); //if success, then return the shader. if not, log the shader info, and then delete the shader. if(gl.getShaderParameter(shader, gl.COMPILE_STATUS)){ return shader; } alert(gl.getShaderInfoLog(shader) + ""); gl.deleteShader(shader);}//program creation functionfunction createProgram(gl, vertexShader, fragmentShader){ //create the program and attach the shaders var program = gl.createProgram(); gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.linkProgram(program); //if success, return the program. if not, log the program info, and delete it. if(gl.getProgramParameter(program, gl.LINK_STATUS)){ return program; } alert(gl.getProgramInfoLog(program) + ""); gl.deleteProgram(program);}//main functionfunction start(){ //get the canvas var canvas = document.getElementById("webgl_canvas"); //initialize WebGL var gl = initWebGL(canvas); //keep going if we have a context if(!gl){ return; } //set the clear color gl.clearColor(0.0, 0.0, 0.0, 1.0); //set up depth testing gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL); //clear the color and the depth buffer gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.DEPTH_BUFFER_BIT); //set up the viewport gl.viewport(0, 0, canvas.width, canvas.height); //set up shaders var vertexShaderSource = "attribute vec2 a_position; void main(){gl_Position = vec4(a_position, 0, 1);}"; var fragmentShaderSource = "precision mediump float; void main(){gl_FragColor = vec4(1, 1, 1, 1);}"; var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource); var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource); //set up the program var program = createProgram(gl, vertexShader, fragmentShader); //get the attribute location var positionAttributeLocation = gl.getAttributeLocation(program, "a_position"); //set up a position buffer var positionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); gl.bindBufferData(gl.ARRAY_BUFFER, new Float32Array([0, 0, 0, 0.5, 0.7, 0])); //tell webGL to use the program gl.useProgram(program); //enable the vertex attribute array gl.enableVertexAttribArray(positionAttributeLocation); //tell webgl how to pull out the data gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0); //render gl.drawArrays(gl.TRIANGLES, 0, 3);}canvas{outline:1px solid red;}<html><head><title>WebGL demo</title></head><body onload="start();"><canvas id="webgl_canvas" width="640" height="480"></canvas></body></html> 最佳答案 它有助于按照日志记录到控制台的错误消息来查找the api you're programming against（每种浏览器都有不同的方法来打开其开发人员控制台。在Chrome上为View->Developer->JavaScript Console。在Firefox上为Tools->Web Developer->Web Console。对于其他Safari 。对于Edge see here）getAttributeLocation不存在，您需要getAttribLocation。bindBufferData不存在，您需要bufferData，它也需要使用提示（此处使用STATIC_DRAW）作为第三个参数。"use strict";//initWebGL functionfunction initWebGL(canvas){ //get a webGL context var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); //if we have a context, we're good to go. if not, alert, and return the nothing that is our empty context if(!gl){ alert("Your browser does not support WebGL"); } return gl;}//shader creation functionfunction createShader(gl, type, source){ //create and compile the shader var shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); //if success, then return the shader. if not, log the shader info, and then delete the shader. if(gl.getShaderParameter(shader, gl.COMPILE_STATUS)){ return shader; } alert(gl.getShaderInfoLog(shader) + ""); gl.deleteShader(shader);}//program creation functionfunction createProgram(gl, vertexShader, fragmentShader){ //create the program and attach the shaders var program = gl.createProgram(); gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.linkProgram(program); //if success, return the program. if not, log the program info, and delete it. if(gl.getProgramParameter(program, gl.LINK_STATUS)){ return program; } alert(gl.getProgramInfoLog(program) + ""); gl.deleteProgram(program);}//main functionfunction start(){ //get the canvas var canvas = document.getElementById("webgl_canvas"); //initialize WebGL var gl = initWebGL(canvas); //keep going if we have a context if(!gl){ return; } //set the clear color gl.clearColor(0.0, 0.0, 0.0, 1.0); //set up depth testing gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL); //clear the color and the depth buffer gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.DEPTH_BUFFER_BIT); //set up the viewport gl.viewport(0, 0, canvas.width, canvas.height); //set up shaders var vertexShaderSource = "attribute vec2 a_position; void main(){gl_Position = vec4(a_position, 0, 1);}"; var fragmentShaderSource = "precision mediump float; void main(){gl_FragColor = vec4(1, 1, 1, 1);}"; var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource); var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource); //set up the program var program = createProgram(gl, vertexShader, fragmentShader); //get the attribute location var positionAttributeLocation = gl.getAttribLocation(program, "a_position"); //set up a position buffer var positionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0, 0, 0, 0.5, 0.7, 0]), gl.STATIC_DRAW); //tell webGL to use the program gl.useProgram(program); //enable the vertex attribute array gl.enableVertexAttribArray(positionAttributeLocation); //tell webgl how to pull out the data gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0); //render gl.drawArrays(gl.TRIANGLES, 0, 3);}canvas{outline:1px solid red;}<html><head><title>WebGL demo</title></head><body onload="start();"><canvas id="webgl_canvas" width="640" height="480"></canvas></body></html>关于javascript - WebGL着色器程序不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41051063/ 10-11 12:34