对应《WebGL编程指南》代码:02-HelloPoint1
要点:着色器、着色器代码规范、vec4(齐次坐标)、gl.drawArrays()
步骤
- 获取
<canvas>
元素 - 获取WebGL上下文
- 初始化着色器
- 设置
<canvas>
背景色 - 清除
<canvas>
- 绘图
知识点
-
着色器
顶点着色器:用来描述顶点特性(位置、颜色等)的程序。
顶点
是指二维或三维空间中的一个点(端点或交点)。片元着色器:进行逐片元处理过程如’光照‘的程序。
片元
是一个WebGL术语,可理解为像素
(图像的单元)。 -
代码规范
因为着色器程序代码必须预先处理成单个字符串形式,所以用
+
将多行字符串连成长字符串,当着色器内部出错时,可以获取出错行号,也可以不使用\n
1 | // 顶点着色器程序 |
-
initShaders(gl, vshader, fshader)初始化着色器,
返回值:true/false
作用:将字符串形式的着色器代码从js传给webgl系统,并建立着色器。
运行位置:着色器运行在WebGL系统,而不是js程序中。
-
WebGL程序 = 运行在浏览器中的js + 运行在WebGL系统的着色器程序
-
vec4:表示三个浮点数组成的矢量(vector)
-
vec4(v0, v1, v2, v3)
作用:创建vec4类型的变量
返回值:由v0~v3组成的vec4对象
参数:X、Y、Z坐标 + 1.0
-
齐次坐标:由4个分离组成的矢量被称为其次坐标。
齐次坐标用如下符号描述:(x,y,z,w),等价于(x/w, y/w, z/w)。所以当w等于1,就可以当成三维坐标使用。w值必须大于0,若w趋近于0, 那么它表示的点趋近于无穷远。
作用:用矩阵乘法来描述顶点变化称为可能。
-
gl.drawArrays()
1
2
3
4
5
6
7作用:执行顶点着色器,按照mode参数指定的方式绘制图形
参数:
mode,指定绘制的方式(gl.POINTS/gl.LINES/gl.LINE_STRIP/gl.LINE_LOOP/gl.TRIANGLES/gl.TRIANGLE_STRIP/gl.TRIANGLE_FAN)。
first, 指定从那个顶点开始绘制(整数型),0表示从第一个顶点开始画起。
count, 指定绘制需要多少个顶点(整数型),顶点着色器执行的次数,每次处理一个顶点。执行完后,片元着色器开始执行
返回值:无
错误:/ -
WebGL坐标系统:右手坐标系(暂时这么认为)
- WebGL不需要交换颜色缓冲区
实例
1 |
|
1 | // HelloPoint1.js |
效果
Tips: Please indicate the source and original author when reprinting or quoting this article.