webgl 3.画一个点

one point.png

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 coord.png

webgl 默认是右手坐标系， z 轴从屏幕里面出来，眼睛默认在 (0, 0, 0) 位置往屏幕里面看。
什么是右手坐标系，自己用右手比划一下就明白了

right hand.png

而 canvas 和 webgl 坐标的映射关系是下面这样的

canvas coord.png

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 的齐次坐标来计算的

练习：

1. 试试改变点的位置 gl_Position = vec4(0.5, 0.0, 0.0, 1.0)
2. 试试改变点的颜色

查看源码