webgl-tutorial/webgl_17_OrthographicProjection.html at master · Paweled/webgl-tutorial · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>正交投影</title>
</head>
<body>

<canvas id="canvas" width="400" height="400">
    Please use a browser that supports "canvas"
</canvas>
<p id="nearfar"></p>

<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();

    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>
</body>
</html>