var VERTEX_SHADER_SOURCE =
'void main() {\n' +
' gl_Position = vec4(0.0,0.0,0.0,1.0);\n' +
' gl_PointSize = 10.0;\n' +
'}\n';
var FRAGMENT_SHADER_SOURCE =
'void main() {\n' +
' gl_FragColor = vec4(1.0,0.0,0.0,1.0);\n' +
'}\n';
var canvas = document.getElementById("canvas");
var gl = canvas.getContext('webgl');
if (!initShaders(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)) {
alert('Failed to init shaders');
}
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.POINTS, 0, 1);
function initShaders(gl, vertexShaderSource, fragmentShaderSource) {
var program = createProgram(gl, vertexShaderSource, fragmentShaderSource);
if (!program) {
console.log('Failed to create program');
return false;
}
gl.useProgram(program);
gl.program = program;
return true;
}
function loadShader(gl, type, source) {
// create shader object
var shader = gl.createShader(type);
if (shader == null) {
console.log('unable to create shader');
return null;
}
// set shader source code
gl.shaderSource(shader, source);
// compile the shader
gl.compileShader(shader);
// check compile status
var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
if (!compiled) {
var error = gl.getShaderInfoLog(shader);
console.log('Failed to compile shader: ' + error);
return null;
}
return shader;
}
function createProgram(gl, vertexShaderSource, fragmentShaderSource) {
var vertexShader = loadShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
var fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
if (!vertexShader || !fragmentShader) {
return null;
}
// create a program object
var program = gl.createProgram();
if (!program) {
console.log('gl.createProgram failed');
return null;
}
// attach the shader objects
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
// link the program object
gl.linkProgram(program);
// check link status
var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
if (!linked) {
var error = gl.getProgramInfoLog(program);
console.log('Failed to link program: ' + error);
gl.deleteProgram(program);
gl.deleteShader(vertexShader);
gl.deleteShader(fragmentShader);
return null;
}
return program;
}
对于初学者来说 initShaders 的具体实现可以先忽略，这个方法主要是编译链接 shader 的。仔细读一遍也基本能看懂，编译链接 shader 是固定套路，基本都是这么写的。
那么什么是 shader（着色器） 呢？
- shader 其实就是运行在 GPU 中的一段程序，因为图形学是对 GPU 进行编程。
图形图像从输入到 GPU 到显示在显示器上，中间要经过一系列的处理，这一系列的处理流程叫作 GPU 的 PipeLine (管线)。 - GPU PipeLine 要求程序必须提供 Vertex shader 和 Fragment shader。
- Vertex shader 用来处理 vertex (顶点)，一个顶点中包含图形的 position (位置) 、color 等信息。每一个顶点都会输入到 Vertex shader 中执行一次，你可能会问一个图形可能有成千上万个顶点，每个顶点都执行一次 Vertex shader 是不是会很慢？因为 GPU 被设计成可以并行的处理数据，所以这些顶点并不是串行处理的，而是可以瞬间并行处理完毕。这也是设计 GPU 的初衷，高效处理图形图像。
- Fragment shader 用来处理 Fragment (片元) 。fragment 就是显示在屏幕上的 pixel (像素)。 Fragment shader 用来计算每个像素的颜色，对于每个 fragment 都会执行一次 Fragment shader。
来看看 shader 的代码
// vertex shader
var VERTEX_SHADER_SOURCE =
'void main() {\n' +
' gl_Position = vec4(0.0,0.0,0.0,1.0);\n' +
' gl_PointSize = 10.0;\n' +
'}\n';
// fragment shader
var FRAGMENT_SHADER_SOURCE =
'void main() {\n' +
' gl_FragColor = vec4(1.0,0.0,0.0,1.0);\n' +
'}\n';
- shader 使用 GLSL ES (OpenGL ES shading language) 语言编写的，这是一个类 C 语言，很容易看懂。
- \n 换行主要是为了方便调试时显示行号
- gl_Position = vec4(0.0,0.0,0.0,1.0)
gl_Position 是 vertex shader 的内置变量，必须赋值，表示图形的坐标
vec4 表示一个含有 4 个元素的 vector (向量)
- gl_PointSize = 10.0
gl_PointSize 也是内置变量，只有画点时才有效。这里给了一个固定值。
- gl_FragColor = vec4(1.0,0.0,0.0,1.0)
gl_FragColor 是 fragment shader 的内置变量，指定每个 fragment 的颜色，这里给了一个红色 (RGBA)
gl.drawArrays(gl.POINTS, 0, 1)
gl.drawArrays(mode, first, count)
mode 表示要画图形的类型，可以是 gl.POINTS, gl.LINES，gl.TRIANGLES 等
first 从第几个顶点开始画
count 一共画多少个顶点
这样我们就画了一个红色的点，但这个点的坐标在哪里呢？我们来看一下 webgl 坐标系。
webgl 默认是右手坐标系， z 轴从屏幕里面出来，眼睛默认在 (0, 0, 0) 位置往屏幕里面看。
什么是右手坐标系，自己用右手比划一下就明白了
而 canvas 和 webgl 坐标的映射关系是下面这样的
canvas draw area 不一定是正方形的，一般都是长方形的。不论是正方形还是长方形，映射之后 canvas 左下角是 (-1.0,-1.0,-1.0) , 右上角是 (1.0,1.0,1.0)，中间是 (0.0,0.0,0.0)
那是怎么映射过来的呢？后面讲投影的时候就知道了。
我们点的坐标是 vec4(0.0,0.0,0.0,1.0) 所以画在了中间， 最后的 1.0 表示什么呢？
这是一个 homogeneous coordinate （齐次坐标）。简单来说 齐次坐标 (x, y, z, w) 等价于 3维坐标 (x/w, y/w, z/w)。当 w=1.0 时就可以用齐次坐标来表示3维坐标。
为什么要引入齐次坐标，齐次坐标有什么用？这个我理解的也不清楚，也是比较迷惑的地方。
我的理解是 1. 当 w=0 时齐次坐标可以表示无穷远 2. 矩阵变换都是用 4×4 的齐次坐标来计算的
练习：
- 试试改变点的位置 gl_Position = vec4(0.5, 0.0, 0.0, 1.0)
- 试试改变点的颜色
