WebGL中的第三个小程序(着色器)
拎着红杯子的黄鸭子 人气:0<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Draw a point</title> </head> <body onload="main()"> <canvas id="webgl" width="400" height="400"> </canvas> <script src="lib/webgl-utils.js"></script> <script src="lib/webgl-debug.js"></script> <script src="lib/cuon-utils.js"></script> <script src="HelloPoint1.js"></script> </body> </html>
var VSHADER_SOURC= 'void main() {\n'+ 'gl_Position=vec4(0.0,0.0,0.0,1.0);\n'+ 'gl_PointSize=10.0;\n'+ '}\n';//GLSL ES语言 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(!gl) { console.log("Failed to initialize shaders"); return; } gl.clearColor(0.0,0.0,0.0,1.0); gl.clear(gl); gl.drawArrays(gl.POINTS,0,1); }
js代码中有两个着色器:顶点着色器和片元着色器(着色器可以让光照上去之后,或者观察着的角度发生变化,对场景的影响)
着色器程序部分代码会被处理成字符串以换行结束,可以检查错误的行号。
initialShader()函数执行如下
将着色器代码从JavaScript传给WebGL的系统,建立着色器,顶点着色器先执行,对gl_position和gl_pointSize复制,然后传入片元着色器,片元着色器再执行。
WebGL程序包括运行在浏览器中的Javascript和运行在WebGL系统中的着色器程序两部分。
- 顶点着色器
GLSE ES是一种强类型语言,必须指明变量类型。
这里出现了两种float 和vec4两种类型,vect由4个浮点型组成的矢量,一个点是有3个坐标组成的,此处有4个
叫做齐次坐标,能够提高处理三维数据的效率,(x,y,z,w)表示(x/w,y/w,z/w),如果w趋近于0,则表示点趋向于无穷远,并且有利于使用矩阵乘法
三维坐标系统中一般使用其次坐标表示顶点的三维坐标。
- 片元着色器
片元着色器控制点的颜色
vec4 gl_FragColor=vec4(1.0,0.0,0.0,1.0)
- gl.drawArrays(mode,first,count)函数,这个函数会使顶点着色器执行count此
mode:gl.POINTS,gl.LINES,gl.LINE_STRIP,gl.LINE_LOOP...
first:从哪个点开始,count用到几个顶点。
顶点着色器的main函数执行完,片元着色器main()执行将颜色赋值给gl_FragColor,
加载全部内容