两段代码我看了很久一直觉得是一模一样。
// HelloPoint1.js (c) 2012 matsuda // Vertex shader program var VSHADER_SOURCE = 'void main() {\n' + ' gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' + // Set the vertex coordinates of the point ' gl_PointSize = 10.0;\n' + // Set the point size '}\n'; // Fragment shader program var FSHADER_SOURCE = 'void main() {\n' + ' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + // Set the point color '}\n'; function main(){ // Retrieve <canvas> element var canvas = document.getElementById('webgl'); // Get the rendering context for WebGL var gl = getWebGLContext(canvas); if (!gl) { console.log('Failed to get the rendering context for WebGL'); return; } // Initialize shaders if (!initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)) { console.log('Failed to intialize shaders.'); return; } // Specify the color for clearing <canvas> gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear <canvas> gl.clear(gl.COLOR_BUFFER_BIT); // Draw a point gl.drawArrays(gl.POINTS,0,1); }
//HelloPoint1.js //顶点着色器程序 var V_SOURCE= 'void main(){\n'+ 'gl_Position=vec4(0.0,0.0,0.0,1.0);\n'+//设置坐标 'gl_PointSize=10.0;\n'+//设置尺寸 '}\n'; //片元着色器程序 var F_SOURCE= 'void main(){\n'+ 'gl_FragColor = vec4(1.0,0.0,0.0,1.0};\n'+//设置颜色 '}\n'; function main(){ //获取<canvas>元素 var canvas=document.getElementById('webgl'); //获取绘图上下文 var gl=getWebGLContext(canvas); if(!gl){ console.log('Failed to get the rendering context for WEBGL'); return; } //初始化着色器程序 if(!initShaders(gl,V_SOURCE,F_SOURCE)) { console.log('Failed to initialize shaders.'); return; } //设置<canvas>的背景颜色 gl.clearColor(0.0,0.0,0.0,1.0); //清空<canvas> gl.clear(gl.COLOR_BUFFER_BIT); //绘制一个顶点 gl.drawArrays(gl.POINTS,0,1); }
HTML代码里链接样例页面显示正确,但是链接我的JS文件就报错。不知道哪里有问题。
//初始化着色器程序
这行下面的第一个if后面的括号你用了全角的括号,改成半角的即可。
括号对比:
(
(
请给出错误信息谢谢版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。