WebGL2Samples/samples/draw_instanced_ubo.html at master · WebGLSamples/WebGL2Samples · 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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<!-- Ported from the OpenGL Samples Pack: github.com/g-truc/ogl-samples/blob/master/tests/gl-320-draw-instanced.cpp -->
<html lang="en">

<head>
    <title>WebGL 2 Samples - draw_instanced_ubo</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="info">WebGL 2 Samples - draw_instanced_ubo</div>
    <p id="description">This samples demonstrates the use of uniform buffer object</p>

    <script id="vs" type="x-shader/x-vertex">
        #version 300 es
        #define POSITION_LOCATION 0

        precision highp float;
        precision highp int;

        layout(std140, column_major) uniform;

        uniform Transform
        {
            mat4 MVP[2];
        } transform;

        layout(location = POSITION_LOCATION) in vec2 pos;
        flat out int instance;

        void main()
        {
            instance = gl_InstanceID;
            gl_Position = transform.MVP[gl_InstanceID] * vec4(pos, 0.0, 1.0);
        }
    </script>

    <script id="fs" type="x-shader/x-fragment">
        #version 300 es
        precision highp float;
        precision highp int;
        layout(std140) uniform;

        uniform Material
        {
            vec4 Diffuse[2];
        } material;

        flat in int instance;
        out vec4 color;

        void main()
        {
            color = material.Diffuse[instance % 2];
        }
    </script>

    <script src="utility.js"></script>
    <script>
    (function () {
        'use strict';

        var canvas = document.createElement('canvas');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        document.body.appendChild(canvas);

        var gl = canvas.getContext('webgl2', { antialias: false });
        var isWebGL2 = !!gl;
        if(!isWebGL2) {
            document.getElementById('info').innerHTML = 'WebGL 2 is not available.  See <a href="https://www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">How to get a WebGL 2 implementation</a>';
            return;
        }

        // -- Init program
        var program = createProgram(gl, getShaderSource('vs'), getShaderSource('fs'));
        gl.useProgram(program);

        // -- Init Buffer
        var vertexPosBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexPosBuffer);
        var vertices = new Float32Array([
            -0.3, -0.5,
             0.3, -0.5,
             0.0,  0.5
        ]);
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

        var uniformTransformLocation = gl.getUniformBlockIndex(program, 'Transform');
        var uniformMaterialLocation = gl.getUniformBlockIndex(program, 'Material');
        gl.uniformBlockBinding(program, uniformTransformLocation, 0);
        gl.uniformBlockBinding(program, uniformMaterialLocation, 1);

        var uniformTransformBuffer = gl.createBuffer();
        gl.bindBuffer(gl.UNIFORM_BUFFER, uniformTransformBuffer);
        var transforms = new Float32Array([
            1.0, 0.0, 0.0, 0.0,
            0.0, 1.0, 0.0, 0.0,
            0.0, 0.0, 1.0, 0.0,
            -0.5, 0.0, 0.0, 1.0,

            1.0, 0.0, 0.0, 0.0,
            0.0, 1.0, 0.0, 0.0,
            0.0, 0.0, 1.0, 0.0,
            0.5, 0.0, 0.0, 1.0
        ]);
        gl.bufferData(gl.UNIFORM_BUFFER, transforms, gl.DYNAMIC_DRAW);
        gl.bindBuffer(gl.UNIFORM_BUFFER, null);

        var uniformMaterialBuffer = gl.createBuffer();
        gl.bindBuffer(gl.UNIFORM_BUFFER, uniformMaterialBuffer);
        var materials = new Float32Array([
            1.0, 0.5, 0.0, 1.0,
            0.0, 0.5, 1.0, 1.0
        ]);
        gl.bufferData(gl.UNIFORM_BUFFER, materials, gl.STATIC_DRAW);
        gl.bindBuffer(gl.UNIFORM_BUFFER, null);

        // -- Render
        gl.clearColor(0,0,0,1);
        gl.clear(gl.COLOR_BUFFER_BIT);

        gl.bindBufferBase(gl.UNIFORM_BUFFER, 0, uniformTransformBuffer);
        gl.bindBufferBase(gl.UNIFORM_BUFFER, 1, uniformMaterialBuffer);

        var vertexPosLocation = 0; // set with GLSL layout qualifier
        gl.enableVertexAttribArray(vertexPosLocation);
        gl.vertexAttribPointer(vertexPosLocation, 2, gl.FLOAT, false, 0, 0);
        gl.drawArraysInstanced(gl.TRIANGLES, 0, 3, 2);

        // -- Delete WebGL resources
        gl.deleteBuffer(vertexPosBuffer);
        gl.deleteBuffer(uniformTransformBuffer);
        gl.deleteBuffer(uniformMaterialBuffer);
        gl.deleteProgram(program);
    })();
    </script>
    <div id="highlightedLines"  style="display: none">#L89-L117</div>
</body>
</html>