【WebGL之巅】02-绘制一个点_v1

By yesmore on 2021-07-24
阅读时间 4 分钟
文章共 998
阅读量

对应《WebGL编程指南》代码:02-HelloPoint1

要点:着色器、着色器代码规范、vec4(齐次坐标)、gl.drawArrays()

步骤

  1. 获取<canvas>元素
  2. 获取WebGL上下文
  3. 初始化着色器
  4. 设置<canvas>背景色
  5. 清除<canvas>
  6. 绘图

知识点

  1. 着色器

    顶点着色器:用来描述顶点特性(位置、颜色等)的程序。顶点是指二维或三维空间中的一个点(端点或交点)。

    片元着色器:进行逐片元处理过程如’光照‘的程序。片元是一个WebGL术语,可理解为像素(图像的单元)。

  2. 代码规范

    因为着色器程序代码必须预先处理成单个字符串形式,所以用+将多行字符串连成长字符串,当着色器内部出错时,可以获取出错行号,也可以不使用\n

1
2
3
4
5
6
7
8
9
10
11
12
// 顶点着色器程序
var VSHADER_SOURCE =
'void main() {\n' +
'gl_Position = vec4(0.1, 0.1, 0.0, 1.0);\n' + //设置坐标
'gl_PointSize = 10.0;\n' + //设置尺寸
'}\n';

// 片元着色器程序
var FSHADER_SOURCE=
'void main(){\n'+
'gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);\n'+ //设置颜色
'}\n';
  1. initShaders(gl, vshader, fshader)初始化着色器,

    返回值:true/false

    作用:将字符串形式的着色器代码从js传给webgl系统,并建立着色器。

    运行位置:着色器运行在WebGL系统,而不是js程序中。

  2. WebGL程序 = 运行在浏览器中的js + 运行在WebGL系统的着色器程序

  3. vec4:表示三个浮点数组成的矢量(vector)
  4. vec4(v0, v1, v2, v3)

    作用:创建vec4类型的变量

    返回值:由v0~v3组成的vec4对象

    参数:X、Y、Z坐标 + 1.0

  5. 齐次坐标:由4个分离组成的矢量被称为其次坐标。

    齐次坐标用如下符号描述:(x,y,z,w),等价于(x/w, y/w, z/w)。所以当w等于1,就可以当成三维坐标使用。w值必须大于0,若w趋近于0, 那么它表示的点趋近于无穷远。

    作用:用矩阵乘法来描述顶点变化称为可能。

  6. 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, 指定绘制需要多少个顶点(整数型),顶点着色器执行的次数,每次处理一个顶点。执行完后,片元着色器开始执行
    返回值:无
    错误:/
  7. WebGL坐标系统:右手坐标系(暂时这么认为)

1

1

  1. WebGL不需要交换颜色缓冲区

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Draw a point</title>
</head>
<body onload="main()">
<canvas id="webgl" width="400" height="400">
Please use the browser supporting "canvas".
</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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// HelloPoint1.js
// 顶点着色器程序
var VSHADER_SOURCE =
'void main() {\n' +
'gl_Position = vec4(-0.5, -0.5, 0.0, 1.0);\n' + //设置坐标:顶点位置
'gl_PointSize = 10.0;\n' + //设置尺寸(px数),默认值1.0
'}\n';

// 片元着色器程序
var FSHADER_SOURCE=
'void main(){\n'+
'gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);\n'+ //设置颜色,RGBA格式
'}\n';

function main() {
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, VSHADER_SOURCE, FSHADER_SOURCE)){
console.log('Failed to initialize shaders.');
return ;
}

gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

gl.drawArrays(gl.POINTS, 0, 1);
}

效果

1


Tips: Please indicate the source and original author when reprinting or quoting this article.