image.png
要使用
WebGL进行绘图就必须使用着色器。在代码中，着色器程序是以字符串的形式“嵌入”在JavaScript文件中的，在程序真正开始运行前就已经设置好了。
WebGL需要两种着色器：顶点着色器和片元着色器。
- 顶点着色器
用来描述顶点的位置、颜色等特性。顶点是指二维或三维空间中的一个点，比如二维或三维图形的端点或交点。
- 片元着色器
进行逐片元处理过程如光照的程序。片元是一个WebGL术语，你可以将其理解为像素。
- GLES中的数据类型
| 类型 | 描述 |
|---|---|
| float | 表示浮点数 |
| vec4 | 表示由四个浮点数组成的矢量 |
- 片元着色器的内置变量
| 类型和变量名 | 描述 |
|---|---|
| vec4 gl_FragColor | 指定片元颜色（RGBA格式） |
// Vertex shader program
var VSHADER_SOURCE =
'void main() {\n' +
' gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' + // Set the vertex coordinates of the point
' gl_PointSize = 10.0;\n' + // Set the point size
'}\n';
// Fragment shader program
var FSHADER_SOURCE =
'void main() {\n' +
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + // Set the point color
'}\n';
function main() {
// Retrieve <canvas> element
var canvas = document.getElementById('webgl');
// Get the rendering context for WebGL
var gl = getWebGLContext(canvas);
if (!gl) {
console.log('Failed to get the rendering context for WebGL');
return;
}
// Initialize shaders
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log('Failed to intialize shaders.');
return;
}
// Specify the color for clearing <canvas>
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// Clear <canvas>
gl.clear(gl.COLOR_BUFFER_BIT);
// Draw a point
gl.drawArrays(gl.POINTS, 0, 1);
}
- gl.drawArrays()
gl.drawArrays(gl.POINTS, 0, 1);
gl.drawArrays()是一个强大的函数，它可以用来绘制各种图形。因为我们绘制的是单独的点，所以设置第1个参数为gl.POINTS；设置第2个参数为0，表示从第1个顶点开始画起；第3个参数count为1，表示在这个简单的程序中仅绘制了1个点。
当程序调用gl.drawArrays()时，顶点着色器将被执行count次，每次处理一个顶点。
WebGL程序包括运行在浏览器中的JavaScirpt和运行在WebGL系统的着色器程序这两部分。
gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0);
gl.vertexAttrib3f()是一系列同族函数中的一个，该系列函数的任务就是从JavaScript向顶点着色器中的attribute变量传值。gl.vertexAttrib1f()传输1个单精度值(v0)，gl.vertexAttrib2f()传输2个值(v0和v1)，而gl.vertexAttrib4f()传输4个值(v0、v1、v2和v3)
3f中的3代表参数个数，f表示浮点数，如果是i则表示整数。如果函数名后面跟着一个v,就表示函数也可以接收数组作为参数。在这种情况下，函数名中的数字表示数组中的元素个数。
var positions = new Float32Array([1.0,2.0,3.0,1.0])
gl.vertexAttrib4fv(a_Position, positions)
