[笔记]《webGL编程指南》- WebGL入门

Posted 2020-11-01 symind

gl.crearColor(red, green, blue, alpha)

指定绘图区域的背景色

 

gl.clear(buffer)

将指定的缓冲区设定为预定的值。如果清空的是颜色缓冲区，那么将使用 gl.clearColor() 指定的值（作为预定值）。

 

WebGL 依赖于一种新的称为着色器（shader）的绘图机制。着色器提供了灵活且强大的绘制二维或三维图形的方式，所有 WebGL 程序必须使用它。

 

WebGL 需要两种着色器

顶点着色器（Vertex shader）：顶点着色器是用来描述顶点特性（如位置、颜色等）的程序。顶点（vertex）是指二维或三维控件中的一个点，比如二维或三维图形的端点或交点。

片元着色器（Fragment shader）：进行逐片元处理过程如光照的程序。片元（fragment）是一个 WebGL 术语，你可以将其理解为像素（图像的单元）。

 

程序执行的流程大概是：首先运行 javascript 程序，调用了 WebGL 的相关方法，然后顶点着色器和片元着色器就会执行，在颜色缓冲区内进行绘制，这时就清空了绘图区，最后，颜色缓冲区中的内容会自动在浏览器的 <canvas> 上显示。

 

着色器使用类似于 C 的 OpenGL ES 着色器语言（GLSL ES）来编写。

 

顶点着色器先执行，它对 gl_Position 变量和 gl_PointSize 变量进行赋值，并将它们传入片元着色器，然后片元着色器再执行。实际上，片元着色器接收到的是经过光栅化处理后的片元值。

 

WebGL 程序高阔运行在浏览器中的 JavaScript 和 运行在 WebGL 系统的着色器程序这两个部分。

 

顶点着色器

void main () {
    gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
    gl_PointSize = 10.0;
}

 

顶点着色器的内置变量

类型和变量名	描述
vec4 gl_Position	表示顶点位置
float gl_PointSize	表示点的尺寸

 

 

 

注意，glPosition 变量必须被赋值，否则着色器就无法正常工作。相反，gl_PointSize 并不是必须的，如果你不赋值，着色器就会为其取默认值 1.0。

GLSE 中的数据类型

类型	描述
float	表示浮点数
vec4	表示由四个浮点组成的矢量

 

 

 

着色器提供了内置函数 vec4() 帮助你创建 vec4 类型的变量。

vec4 vec4(v0, v1, v2, v3)

根据 v0，v1，v2，v3 值创建 vec4 对象。

 

由4个分量组成的矢量被称为齐次坐标，因为它能够提高处理三维数据的效率，所以在三维图形系统中被大量使用。虽然齐次坐标是四维的，但是如果其最后一个分量是1.0，那么这个齐次坐标就可以表示“前三个分量为坐标值”的那个点。

 

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

 

片元着色器

片元着色器的作用是处理片元，使其显示在屏幕上。

void main () {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}

类型和变量	描述
vec4 gl_FragColor	指定片元颜色（RGBA 格式）

 

 

绘制操作

gl.drawArrays(mode, first, count)

执行顶点着色器，按照 mode 参数指定的方式绘制图形。

 

WebGL 坐标系统

由于 WebGL 处理的是三维图形，所以它使用三维坐标系统，具有 X 轴，Y 轴和 Z 轴。通常，在 WebGL 中，当你面向计算机屏幕时，X 轴是水平的（正方向为右），Y 轴是垂直的（正方向为下），而 Z 轴垂直与屏幕（正方向为外）。这套坐标系又被称为右手坐标系。

 

使用 attribute 变量

我们的目标是，将位置信息从 JavaScript 程序中传给顶点着色器。有两个方式可以做到这点：attribute 变量和 uniform 变量。使用哪一种变量取决于需传输的数据本身，attribute 变量传输的是那些与顶点相关的数据，而 uniform 变量传输的是哪些对于所有顶点都相同的数据。

在这一行中，关键词 attribute 被称为存储限定符（storage qualifier），它表示接下来的变量是一个 attribute 变量。attribute 变量必须声明成全局变量，数据从着色器外部传给该变量。变量的声明必须按照以下格式：<存储限定符> <类型> <变量名>。

获取 attribute 变量的存储位置

WebGL 会对着色器进行解析，辨识出着色器具有的 attribute 变量，每个变量都具有一个存储地址，以便通过存储地址向变量传输数据。我们使用 gl.getAttribLocation() 来获取 attribute 变量的地址。

gl.getAttribLocation(program, name)

获取由 name 参数指定的 attribute 变量的存储地址。

向 attribute 变量赋值

gl.vertexAttrib3f(location, v0, v1, v2)

将数据 (v0, v1, v2) 传给由 location 参数指定的 attribute 变量。

gl.vertexAttrib1f(location, v0)

gl.vertexAttrib2f(location, v0, v1)

gl.vertexAttrib3f(location, v0, v1, v2)

gl.vertexAttrib4f(location, v0, v1, v2, v3)

uniform 变量

只有顶点着色器才能使用 attribute 变量，使用片元着色器时，你就需要使用 uniform 变量。