- WebGL:笛卡尔坐标系
面向屏幕时:右手坐标系
- <canvas>坐标系
- attribute变量,传输和顶点相关的变量
- 在顶点着色器中声明attribute
- 将attribute变量赋值给gl_Position变量
- 想attribute传输数据
var VSHADER_SOURCE= 'attribute vec4 a_Position;\n'+ 'void main(){\n'+ 'gl_Position=a_Position;\n'+ 'gl_PointSize=10.0;\n'+ '}\n'; var FSHADER_SOURCE= 'void main(){\n'+ 'gl_FragColor=vec4(1.0,0.0,0.0,1.0);\n'+ '}\n'; function main(){ var canvas=document.getElementById("webgl"); var gl=getWebGLContext(canvas); if(!initialShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)) { Console.log("Failed to initailal shader"); return } var a_Position=gl.getAttribLocation(gl.program,'a_Position'); if(a_Position<0) { console.log("Failed to get the storage location of a_Position"); return } gl.vertexAttrib3f(a_Position,0.0,0.0,1.0); gl.clearColor(0.0,0.0,0.0,1.0); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.POINTS,0,1); }
attribute称为存储限定符,表示接下来的变量是一个attribute变量,且为全局变量。
- 变量声明:attribute vec4 a_Position
gl_Position=a_Position
2.获取attribute 变量的存储位置(第二个参数是attribe 修饰的变量的名称)返回attribute的存储位置
var a_Position=gl.getAttribLocation(gl.program,'a_Position');//此处的gl.program是由initShader()函数创建的
3.使用位置向着色器传入值,使用gl.vertexAttrib3f()函数,(第一个参数是location,后面参数是坐标)
gl.vertexAttrib3f(a_Position,0.0,0.0,0.0);
这样做就可以通过javascript代码把坐标位置动态传给着色器,而不用写死在顶点着色器中。
除了有 gl.vertexAttrib3f还有gl.vertexAttrib1f,2f,3f