webgl 17.正交投影

96
lesliefang
2017.08.31 19:37* 字数 672
orthographic view.png

现实世界中我们的视野范围是有限的,webgl 中有 2 种方法来指定 viewing volume (视野范围), 一是 orthographic projection (正交投影),二是 perspective projection (透视投影)。

先来看正交投影

box-shaped viewing volume.png

正交投影用一个长方形的盒子去定义 viewing volume , 只有落在盒子里面的物体才可见,盒子外面的物体都不会显示。

我们可以用 Matrix4.setOrtho(left, right, bottom, top, near, far) 计算出正交矩阵

var vertices = new Float32Array([
    0.0, 0.6, -0.4, 0.4, 1.0, 0.4, // The back green one
    -0.5, -0.4, -0.4, 0.4, 1.0, 0.4,
    0.5, -0.4, -0.4, 1.0, 0.4, 0.4,

    0.5, 0.4, -0.2, 1.0, 0.4, 0.4, // The middle yellow one
    -0.5, 0.4, -0.2, 1.0, 1.0, 0.4,
    0.0, -0.6, -0.2, 1.0, 1.0, 0.4,

    0.0, 0.5, 0.0, 0.4, 0.4, 1.0, // The front blue one
    -0.5, -0.5, 0.0, 0.4, 0.4, 1.0,
    0.5, -0.5, 0.0, 1.0, 0.4, 0.4
]);

var projMatrix = new Matrix4();
projMatrix.setOrtho(-1, 1, -1, 1, 0, 0.5);

然后用正交矩阵去对物体做变换

<script id="vertex-shader" type="glsl">
    attribute vec4 a_Position;
    attribute vec4 a_Color;
    uniform mat4 u_ProjMatrix;
    varying vec4 v_Color;

    void main() {
        gl_Position = u_ProjMatrix * a_Position;
        v_Color = a_Color;
    }
</script>
OtthoView.png

这里我们还对键盘添加了监听事件来改变 near 和 far 的值

document.onkeydown = function (ev) {
    switch (ev.keyCode) {
        case 39:
            g_near += 0.01;
            break; // 右方向箭头
        case 37:
            g_near -= 0.01;
            break; // 左方向箭头
        case 38:
            g_far += 0.01;
            break;//上方向箭头
        case 40:
            g_far -= 0.01;
            break;// 左方向箭头
    }

    draw();
};

右键头逐渐增加 near 的值,左箭头减小 near 的值。上箭头增加 far 的值,下箭头减小 far 的值。
按住右箭头不断增加 near 的值会发现从前到后三角形逐渐消失。按住下箭头不断减小 far 的值发现后面 2 个三角形也逐渐消失,因为它们都跑到盒子外面去了。

实验:现在我们把 draw 里面的正交矩阵改成下面这样
projMatrix.setOrtho(-2, 2, -1, 1, g_near, g_far);

运行效果是下面这样的

orthographic view2.png
可以看到投影后水平方向变窄了一倍,这是为什么呢?
coordinate transformation.png
这里涉及到非常重要的坐标转换的概念, canvas 的坐标被限制在 [-1,1] 之间,这个叫作 Normalized Device Coordinates, 这个是跟 canvas 的尺寸无关的坐标,无论 canvas 宽高是多少,映射之后 x,y,z 的取值范围都是 [-1,1]。 而我们写的顶点坐标是在 Object Coordinates(物体坐标系),这个坐标系中 x,y,z 的值时没有任何限制的。
那么是怎么从 Object Coordinates 转换到 Normalized Device Coordinates 的呢???这就是通过投影进行映射的,我们指定一个投影盒子的范围把物体坐标映射到 [-1,1] ,这个投影矩阵可以根据数学公式推导出来。而投影的坐标范围是相对于谁来说的呢???投影坐标肯定是相对于 Object Coordinates 来说的,因为要转换的就是 Object Coordinates, 我们一般都让投影盒子坐标正好包含所有的物体。所以原来 (0.5,0.5) 表示 �X 轴一半, Y 轴一半, 投影水平方向值加倍后 (0.5,0.5) 就表示 X和Y轴的四分之一了。

完整代码

<script id="vertex-shader" type="glsl">
    attribute vec4 a_Position;
    attribute vec4 a_Color;
    uniform mat4 u_ProjMatrix;
    varying vec4 v_Color;

    void main() {
        gl_Position = u_ProjMatrix * a_Position;
        v_Color = a_Color;
    }
</script>

<script id="fragment-shader" type="glsl">
    precision mediump float;
    varying vec4 v_Color;
    void main() {
       gl_FragColor = v_Color;
    }
</script>

<script src="lib/cuon-matrix.js"></script>
<script src="lib/myutils.js"></script>

<script>
    var VERTEX_SHADER_SOURCE = document.getElementById('vertex-shader').text;
    var FRAGMENT_SHADER_SOURCE = document.getElementById('fragment-shader').text;

    var canvas = document.getElementById("canvas");
    var gl = canvas.getContext('webgl');

    if (!initShaders(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)) {
        alert('Failed to init shaders');
    }

    var vertices = new Float32Array([
        0.0, 0.6, -0.4, 0.4, 1.0, 0.4, // The back green one
        -0.5, -0.4, -0.4, 0.4, 1.0, 0.4,
        0.5, -0.4, -0.4, 1.0, 0.4, 0.4,

        0.5, 0.4, -0.2, 1.0, 0.4, 0.4, // The middle yellow one
        -0.5, 0.4, -0.2, 1.0, 1.0, 0.4,
        0.0, -0.6, -0.2, 1.0, 1.0, 0.4,

        0.0, 0.5, 0.0, 0.4, 0.4, 1.0, // The front blue one
        -0.5, -0.5, 0.0, 0.4, 0.4, 1.0,
        0.5, -0.5, 0.0, 1.0, 0.4, 0.4
    ]);

    initVertexBuffers(gl, vertices);
    gl.clearColor(0.0, 0.0, 0.0, 1.0);

    var u_projMatrix = gl.getUniformLocation(gl.program, 'u_ProjMatrix');

    var g_near = 0.0, g_far = 0.5;
    var projMatrix = new Matrix4();
    projMatrix.setOrtho(-1, 1, -1, 1, g_near, g_far);

    var nf = document.getElementById('nearfar');
    function draw() {
        nf.innerHTML = 'near: ' + Math.round(g_near * 100) / 100 + ', far: ' + Math.round(g_far * 100) / 100;
        projMatrix.setOrtho(-1, 1, -1, 1, g_near, g_far);
        gl.uniformMatrix4fv(u_projMatrix, false, projMatrix.elements);

        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawArrays(gl.TRIANGLES, 0, 9);
    }

    document.onkeydown = function (ev) {
        switch (ev.keyCode) {
            case 39:
                g_near += 0.01;
                break; // 右方向箭头
            case 37:
                g_near -= 0.01;
                break; // 左方向箭头
            case 38:
                g_far += 0.01;
                break;//上方向箭头
            case 40:
                g_far -= 0.01;
                break;// 左方向箭头
        }

        draw();
    };

    draw();

    function initVertexBuffers(gl, vertices) {
        var vertexBuffer = gl.createBuffer();
        if (!vertexBuffer) {
            console.log('Failed to create buffer object');
            return -1;
        }

        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

        var FSIZE = vertices.BYTES_PER_ELEMENT;

        var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
        gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, 6 * FSIZE, 0);
        gl.enableVertexAttribArray(a_Position);

        var a_Color = gl.getAttribLocation(gl.program, 'a_Color');
        gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, 6 * FSIZE, 3 * FSIZE);
        gl.enableVertexAttribArray(a_Color);
    }
</script>

练习:

  1. 把投影矩阵改为 projMatrix.setOrtho(-2, 2, -2, 2, g_near, g_far) 观察效果,解释为什么???

查看源码

webgl
Web note ad 1