目录

WebGL Samples


Structure of WebGL Application

WebGL application code is a combination of JavaScript and OpenGL Shader Language.

  • JavaScript is required to communicate with the CPU.
  • OpenGL Shader Language is required to communicate with the GPU.

https://raw.githubusercontent.com/ayamir/blog-imgs/main/webgl_application_structure.jpg

Samples

2D coordinates

 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
<!DOCTYPE html>
<html>
    <body>
        <canvas width="300" height="300" id="my_canvas"></canvas>
        <script>
            // 1. Prepare the canvas and get context
            let canvas = document.getElementById("my_canvas");
            let gl = canvas.getContext("experimental-webgl");

            // 2. Define the geometry and store it in buffer objects
            let vertices = [
                -0.5,
                0.5, // vertex 1
                -0.5,
                -0.5, //
                0.0,
                -0.5
            ];
            // Create buffer object
            let vertex_buffer = gl.createBuffer();
            // Bind an empty array buffer to it
            gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
            // Pass the vertices data to the buffer
            gl.bufferData(
                gl.ARRAY_BUFFER,
                new Float32Array(vertices),
                gl.STATIC_DRAW
            );
            // Unbind the buffer
            gl.bindBuffer(gl.ARRAY_BUFFER, null);

            // 3. Create and compile Shader programs

            // Vertex shader source code
            let vertCode =
                "attribute vec2 coordinates;" +
                "void main(void) {" +
                " gl_Position = vec4(coordinates, 0.0, 1.0);" +
                "}";
            // Create a vertex shader object
            let vertShader = gl.createShader(gl.VERTEX_SHADER);
            // Attach vertex shader source code
            gl.shaderSource(vertShader, vertCode);
            // Compile the vertex shader
            gl.compileShader(vertShader);

            // Fragment shader source code
            let fragCode =
                "void main(void) {" +
                "gl_FragColor = vec4(0.0, 0.0, 0.0, 0.1);" +
                "}";
            let fragShader = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(fragShader, fragCode);
            gl.compileShader(fragShader);

            // Create a shader program object to store combined shader program
            let shaderProgram = gl.createProgram();
            // Attact vertex and fragment shader
            gl.attachShader(shaderProgram, vertShader);
            gl.attachShader(shaderProgram, fragShader);
            // Link both programs
            gl.linkProgram(shaderProgram);
            // Use the combined shader program object
            gl.useProgram(shaderProgram);

            // 4. Associate the shader programs to buffer objects

            // Bind vertex buffer object
            gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
            // Get the attribute location
            let coord = gl.getAttribLocation(shaderProgram, "coordinates");
            // Point an attribute to the currently bound VBO
            gl.vertexAttribPointer(coord, 2, gl.FLOAT, false, 0, 0);
            // Enable the attribute
            gl.enableVertexAttribArray(coord);

            // 5. Drawing the required object (triangle)

            // Clear the canvas
            gl.clearColor(0.5, 0.5, 0.5, 0.9);
            // Enable the depth test
            gl.enable(gl.DEPTH_TEST);
            // Clear the color buffer bit
            gl.clear(gl.COLOR_BUFFER_BIT);
            // Set the view port
            gl.viewport(0, 0, canvas.width, canvas.height);
            // Draw the triangle
            gl.drawArrays(gl.TRIANGLES, 0, 3);
        </script>
    </body>
</html>