05 WebGL初始化着色器

2018-03-04 02:15:07 人阅读

案例查看有问题?
全屏试试!

案例解析

 初始化着色器函数initShaders()被定义在了cuon.util.js中

使用:

initShaders(gl, vshader, fshader);

参数:

gl  指定渲染的上下文

vshader  指定顶点着色器程序代码(字符串)

fshader  指定片元着色器程序代码(字符串)

返回值:

true  初始化着色器成功

false  初始化着色器失败

 

顶点着色器

 

[javascript] view plain copy
 
  1. var VSHADER_SOURCE="" +  
  2.     "void main(){\n" +  
  3.     "   gl_Position = vec4(0.0,0.0,0.0,1.0);\n" +//设置坐标  
  4.     "   gl_PointSize = 10.0;\n" +//设置尺寸  
  5.     "}\n";  

首先用js声明了一个变量将书写的GLSL ES着色器语言代码字符串赋值变量。

类似于C语言,必须包含一个main()函数,  void代码这个函数不会有返回值,而且你不能为main()指定参数。

函数内部的两行代码

gl_Position  类型:vec4 表示顶点的位置 必须设置

gl_PointSize  类型:float  表示点的尺寸(像素数) 如果不设置,默认为1.0

GLSL ES数据类型

float 表示是浮点数

vec4表示由四个浮点数组成的矢量

由4个分量组成的矢量被称为齐次坐标,它能够提高处理三维数据的效率,所以被大量使用

齐次坐标:(x,y,z,w)。齐次坐标(x,y,z,w)等价于三维坐标(x/w,y/w,z/w)。所以如果齐次坐标的第四个分量是1,你就可以将它当做单位坐标来使用。w的值必须大于等于0的。如果w趋近于0,那么它所表示的点将趋近于无穷远,所以在齐次坐标系中可以有无穷的概念。齐次坐标的存在,似的用矩阵乘法来描述顶点变换成为可能,三维图形系统在计算过程中,通常使用齐次坐标来表示顶点的三维坐标。

 

片元着色器

 

[javascript] view plain copy
 
  1. //片元着色器程序  
  2. var FSHADER_SOURCE = "" +  
  3.     "void main(){\n" +  
  4.     "   gl_FragColor = vec4(1.0,0.0,0.0,1.0);\n" +//设置颜色  
  5.     "}\n";  

顶点着色器控制点的位置和大小,片元着色器控制点的颜色。片元就是显示在屏幕上的像素(严格意义上来说,片元包括这个像素的位置、颜色和其他信息)。
片元着色器的作用就是处理片元,使其显示在屏幕上。

片元着色器将点的颜色赋值给gl_FragColor变量,该变量是片元着色器唯一的内置变量,它控制着像素在屏幕上的最终颜色。

gl_FragColor 类型:vec4  描述:指定片元颜色(RGBA格式)。

对这个内置变量赋值后,相应的像素就会以这个颜色值显示。类型和顶点着色器中的顶点位置一样,也是vce4类型。四个浮点分量,分别代表RGBA值。

 

绘制操作

 

[javascript] view plain copy
 
  1. //绘制一个点  
  2. gl.drawArrays(gl.POINTS,0,1);  

gl.drawArrays(mode, first, count);执行顶点着色器,安装mode的参数指定的方式绘制图形。
参数:

mode  指定绘制的方式,可接收一下常量符号:gl.POINTS,gl.LINES, gl.LINE_STRIP, gl.LINE_LOOP, gl.TRIANGLES, gl.TRIANGLE_STRIP, gl.TRIANGLE_FAN

first 指定从哪个顶点开始绘制(整数型)

count  指定绘制需要用到多少个顶点(整数型)

返回值:无

错误  INVALID_ENUM  传入的mode参数不是前述参数之一

INVALID_VALUE  参数first或count是负数

 

示例当中由于我们只绘制了单独的点,所以第一个值是gl.POINTS,第二个参数表示从第1个顶点开始画起,第三个参数表示仅绘制的一个点。

 

案例源代码


                                            
展开内容

联系我们

一个人的力量不如两个人的,两个人的力量不如一群人的。欢迎加入大家庭一起共同学习,共同进步。

查看更多