webgl 3.画一个点

作者: lesliefang | 来源:发表于2017-08-25 10:33 被阅读58次

webgl 3.画一个点
WebGL（画一个点）
webgl 4.画一个点2
webgl基础图形
3. Building and running a WebGL
WebGL 的 Hello World
webgl 9.画一个圆
webgl 8.画一个正方形
threejs Light
threejs Light

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

练习：