Let's create WebGL examples for practice

8Observer8 · November 20, 2017

The best way to learn is to practice as much as possible. Share your examples here.

What browsers WebGL is supported, you can see here:

WebGL 1.0: https://caniuse.com/#feat=webgl
WebGL 2.0: https://caniuse.com/#feat=webgl2

A brief description of what WebGL is, and references to the specifications: https://www.khronos.org/webgl/

Tutorials:

This book is about WebGL 1.0: WebGL Programming Guide

Source Code for the book: examples.zip

Source Code for the book on JSFiddle:

Chapter 02. Your First Step with WebGL
ch02/HelloCanvas: https://jsfiddle.net/8Observer8/2gky294r/
ch02/HelloPoint1: https://jsfiddle.net/8Observer8/cc72u1u5/
ch02/HelloPoint2: https://jsfiddle.net/8Observer8/uxw657ud/
ch02/ClickedPoints: https://jsfiddle.net/8Observer8/xf4fnc0o/
ch02/ColoredPoints: https://jsfiddle.net/8Observer8/gkkmnpga/

Chapter 04. More Transformations and Basic Animation
ch04/RotatedTriangle_Matrix4: https://jsfiddle.net/8Observer8/t4y7783v/
ch04/RotatedTranslatedTriangle: https://jsfiddle.net/8Observer8/b5yfxojp/
ch04/TranslatedRotatedTriangle: https://jsfiddle.net/8Observer8/o8voebc9/
ch04/RotatingTriangle: https://jsfiddle.net/8Observer8/x9j5vdk7/
ch04/RotatingTranslatedTriangle: https://jsfiddle.net/8Observer8/rkrv0322/
ch04/RotatingTriangle_withButtons: https://jsfiddle.net/8Observer8/wzoLmdzd/

Chapter 09. Hierarchical Objects
ch09/JointModel: https://jsfiddle.net/8Observer8/vqse5egz/
ch09/MultiJointModel: https://jsfiddle.net/8Observer8/sL53wkn3/
ch09/MultiJointModel_segment: https://jsfiddle.net/8Observer8/ygvk7odv/

Gifts
gifts/Particle: https://jsfiddle.net/8Observer8/Ltzt31vk/
gifts/Printf: https://jsfiddle.net/8Observer8/qsw7jtec/
gifts/SpecularCube: https://jsfiddle.net/8Observer8/z4xj9rbv/
gifts/TextTexture: https://jsfiddle.net/8Observer8/qt7q2kuf/
gifts/ThreeDUI: https://jsfiddle.net/8Observer8/zdw1f2st/
gifts/Wave: https://jsfiddle.net/8Observer8/eL9odthz/
gifts/WorldCoordinateSystem: https://jsfiddle.net/8Observer8/6utj3hnk/
appendix/CoordinateSystem: https://jsfiddle.net/8Observer8/dzz056jt/

Appendix
appendix/CoordinateSystem_viewVolume: https://jsfiddle.net/8Observer8/apxLww1q/
appendix/LoadShaderFromFiles: https://jsfiddle.net/8Observer8/wdn9ubhj/

8Observer8 · November 20, 2017

WebGL 1.0. Draw a point

https://jsfiddle.net/8Observer8/L20s5nut/

001_point-in-webgl.png.57f4b1f5acc7594f0441bb88ebf46114.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Shortest Program</title>
</head>

<body>
    <canvas id="renderCanvas" width="200" height="200" style="border: 1px solid rgb(159, 133, 230);"></canvas>

    <script>
        var vertexShaderSource =
            `void main()
            {
                gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
                gl_PointSize = 10.0;
            }`

        var fragmentShaderSource =
            `void main()
            {
                gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
            }`;

        function main()
        {
            var gl = document.getElementById('renderCanvas').getContext('webgl');

            var vShader = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vShader, vertexShaderSource);
            gl.compileShader(vShader);

            var fShader = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(fShader, fragmentShaderSource);
            gl.compileShader(fShader);

            var program = gl.createProgram();
            gl.attachShader(program, vShader);
            gl.attachShader(program, fShader);
            gl.linkProgram(program);
            gl.useProgram(program);

            gl.drawArrays(gl.POINTS, 0, 1);
        }
        main();
    </script>
</body>

</html>

8Observer8 · November 20, 2017

Draw a point with the standard WebGL 2.0

https://jsfiddle.net/8Observer8/9b2k6mr8/

001_point-in-webgl2.png.e688c94cbda386fb3859b1c342ac818d.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Shortest Program</title>
</head>

<body>
    <canvas id="renderCanvas" width="200" height="200" style="border: 1px solid rgb(159, 133, 230);"></canvas>

    <script>
        var vertexShaderSource =
            `#version 300 es

            void main()
            {
                gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
                gl_PointSize = 10.0;
            }`

        var fragmentShaderSource =
            `#version 300 es

            precision mediump float;

            out vec4 outColor;

            void main()
            {
                outColor = vec4(1.0, 0.0, 0.0, 1.0);
            }`;

        function main()
        {
            var gl = document.getElementById('renderCanvas').getContext('webgl2');

            var vShader = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vShader, vertexShaderSource);
            gl.compileShader(vShader);

            var fShader = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(fShader, fragmentShaderSource);
            gl.compileShader(fShader);

            var program = gl.createProgram();
            gl.attachShader(program, vShader);
            gl.attachShader(program, fShader);
            gl.linkProgram(program);
            gl.useProgram(program);

            gl.drawArrays(gl.POINTS, 0, 1);
        }
        main();
    </script>
</body>

</html>

8Observer8 · November 20, 2017

WebGL 1.0. Pass a point coordinate to a vertex shader

https://jsfiddle.net/8Observer8/oLq23Lac/1/

002_pass-point-coord-to-shader-webgl1.png.6f3ebe9217b76f1d857c0748ce13c96c.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Pass a point coordinate to a shader</title>
</head>

<body>
    <canvas id="renderCanvas" width="200" height="200" style="border: 1px solid #aaaafa;"></canvas>

    <script>
        var vertexShaderSource =
            `attribute vec2 a_Position;

            void main()
            {
                gl_Position = vec4(a_Position, 0.0, 1.0);
                gl_PointSize = 10.0;
            }`;

        var fragmentShaderSource =
            `void main()
            {
                gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
            }`;

        function main()
        {
            var gl = document.getElementById("renderCanvas").getContext("webgl");

            var vShader = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vShader, vertexShaderSource);
            gl.compileShader(vShader);

            var fShader = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(fShader, fragmentShaderSource);
            gl.compileShader(fShader);

            var program = gl.createProgram();
            gl.attachShader(program, vShader);
            gl.attachShader(program, fShader);
            gl.linkProgram(program);
            gl.useProgram(program);

            var a_Position = gl.getAttribLocation(program, "a_Position");
            gl.vertexAttrib2f(a_Position, -0.7, 0.2);

            gl.drawArrays(gl.POINTS, 0, 1);
        }
        main();
    </script>
</body>

</html>

8Observer8 · November 20, 2017

WebGL 2.0. Pass a point coordinate to a vertex shader

https://jsfiddle.net/8Observer8/wabur00e/

002_pass-point-coord-to-shader-webgl2.png.5c3422c06f931e2f108c3fe7a4c081f2.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Pass a point coordinate to a shader</title>
</head>

<body>
    <canvas id="renderCanvas" width="200" height="200" style="border: 1px solid #aaaafa;"></canvas>

    <script>
        var vertexShaderSource =
            `#version 300 es
            
            in vec2 a_Position;

            void main()
            {
                gl_Position = vec4(a_Position, 0.0, 1.0);
                gl_PointSize = 10.0;
            }`;

        var fragmentShaderSource =
            `#version 300 es

            precision mediump float;

            out vec4 outColor;
            
            void main()
            {
                outColor = vec4(1.0, 0.0, 0.0, 1.0);
            }`;

        function main()
        {
            var gl = document.getElementById("renderCanvas").getContext("webgl2");

            var vShader = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vShader, vertexShaderSource);
            gl.compileShader(vShader);

            var fShader = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(fShader, fragmentShaderSource);
            gl.compileShader(fShader);

            var program = gl.createProgram();
            gl.attachShader(program, vShader);
            gl.attachShader(program, fShader);
            gl.linkProgram(program);
            gl.useProgram(program);

            var a_Position = gl.getAttribLocation(program, "a_Position");
            gl.vertexAttrib2f(a_Position, -0.7, 0.2);

            gl.drawArrays(gl.POINTS, 0, 1);
        }
        main();
    </script>
</body>

</html>

8Observer8 · November 20, 2017

WebGL 1.0. Drawing points in a circle by formulas:

x = radius * cos(angle)
y = radius * sin(angle)

https://jsfiddle.net/8Observer8/k3o8yz4q/1/

003_point_array_in_circle.png.22e751c7fd58addb553f5ff9631321a4.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Drawing points in a circle by formulas</title>
</head>

<body>
    <canvas id="renderCanvas" width="300" height="300" style="border: 1px solid #aaaafa"></canvas>

    <script>
        var vertexShaderSource =
            `attribute vec2 a_Position;

            void main()
            {
                gl_Position = vec4(a_Position, 0.0, 1.0);
                gl_PointSize = 4.0;
            }`;

        var fragmentShaderSource =
            `void main()
            {
                gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
            }`;

        function main()
        {
            var gl = document.getElementById("renderCanvas").getContext("webgl");

            var vShader = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vShader, vertexShaderSource);
            gl.compileShader(vShader);

            var fShader = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(fShader, fragmentShaderSource);
            gl.compileShader(fShader);

            var program = gl.createProgram();
            gl.attachShader(program, vShader);
            gl.attachShader(program, fShader);
            gl.linkProgram(program);
            gl.useProgram(program);

            var a_Position = gl.getAttribLocation(program, "a_Position");

            var radius = 0.7;
            for (var angle = 0; angle < 360; angle += 10)
            {
                var x = radius * Math.cos(angle * Math.PI / 180);
                var y = radius * Math.sin(angle * Math.PI / 180);

                gl.vertexAttrib2f(a_Position, x, y);

                gl.drawArrays(gl.POINTS, 0, 1);
            }
        }
        main();
    </script>
</body>

</html>

8Observer8 · November 20, 2017

WebGL 2.0. Drawing points in a circle by formulas:

x = radius * cos(angle)
y = radius * sin(angle)

https://jsfiddle.net/8Observer8/6L2uyka4/

003_point_array_in_circle.png.0b03576ba3e9f384fd2eb4ce0769d14a.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Drawing points in a circle by formulas</title>
</head>

<body>
    <canvas id="renderCanvas" width="300" height="300" style="border: 1px solid #aaaafa"></canvas>

    <script>
        var vertexShaderSource =
            `#version 300 es
            
            in vec2 a_Position;

            void main()
            {
                gl_Position = vec4(a_Position, 0.0, 1.0);
                gl_PointSize = 4.0;
            }`;

        var fragmentShaderSource =
            `#version 300 es
            
            precision mediump float;

            out vec4 outColor;

            void main()
            {
                outColor = vec4(1.0, 0.0, 0.0, 1.0);
            }`;

        function main()
        {
            var gl = document.getElementById("renderCanvas").getContext("webgl2");

            var vShader = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vShader, vertexShaderSource);
            gl.compileShader(vShader);

            var fShader = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(fShader, fragmentShaderSource);
            gl.compileShader(fShader);

            var program = gl.createProgram();
            gl.attachShader(program, vShader);
            gl.attachShader(program, fShader);
            gl.linkProgram(program);
            gl.useProgram(program);

            var a_Position = gl.getAttribLocation(program, "a_Position");

            var radius = 0.7;
            for (var angle = 0; angle < 360; angle += 10)
            {
                var x = radius * Math.cos(angle * Math.PI / 180);
                var y = radius * Math.sin(angle * Math.PI / 180);

                gl.vertexAttrib2f(a_Position, x, y);

                gl.drawArrays(gl.POINTS, 0, 1);
            }
        }
        main();
    </script>
</body>

</html>

8Observer8 · November 20, 2017

WebGL 1.0. Pass a point color to a fragment shader

https://jsfiddle.net/8Observer8/x77vfnxk/

004_pass-point-color-to-shader.png.fbc4c109d274602b8bdd34d52022bc07.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebGL 1.0. Pass a point color to a fragment shader</title>
</head>

<body>
    <canvas id="renderCanvas" width="200" height="200" style="border: 1px solid #aaaafa"></canvas>

    <script>
        var vertexShaderSource =
            `void main()
            {
                gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
                gl_PointSize = 10.0;
            }`;

        var fragmentShaderSource =
            `precision mediump float;
            
            uniform vec3 u_PointColor;
                
            void main()
            {
                gl_FragColor = vec4(u_PointColor, 1.0);
            }
            `;

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

        var vShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vShader, vertexShaderSource);
        gl.compileShader(vShader);

        var fShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fShader, fragmentShaderSource);
        gl.compileShader(fShader);

        var program = gl.createProgram();
        gl.attachShader(program, vShader);
        gl.attachShader(program, fShader);
        gl.linkProgram(program);
        gl.useProgram(program);

        var u_PointColor = gl.getUniformLocation(program, "u_PointColor");

        var r = 0.5, g = 0.8, b = 0.5;
        gl.uniform3f(u_PointColor, r, g, b);

        gl.drawArrays(gl.POINTS, 0, 1);
    </script>
</body>

</html>

8Observer8 · November 20, 2017

WebGL 2.0. Pass a point color to a fragment shader

https://jsfiddle.net/8Observer8/vm1m4xhm/

004_pass-point-color-to-shader.png.ceace3174d69c7fdda0bb985036706b0.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebGL 2.0. Pass a point color to a fragment shader</title>
</head>

<body>
    <canvas id="renderCanvas" width="200" height="200" style="border: 1px solid #aaaafa"></canvas>

    <script>
        var vertexShaderSource =
            `#version 300 es
            
            void main()
            {
                gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
                gl_PointSize = 10.0;
            }`;

        var fragmentShaderSource =
            `#version 300 es
            
            precision mediump float;
            
            uniform vec3 u_PointColor;

            out vec4 outColor;
                
            void main()
            {
                outColor = vec4(u_PointColor, 1.0);
            }
            `;

        var gl = document.getElementById("renderCanvas").getContext("webgl2");

        var vShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vShader, vertexShaderSource);
        gl.compileShader(vShader);

        var fShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fShader, fragmentShaderSource);
        gl.compileShader(fShader);

        var program = gl.createProgram();
        gl.attachShader(program, vShader);
        gl.attachShader(program, fShader);
        gl.linkProgram(program);
        gl.useProgram(program);

        var u_PointColor = gl.getUniformLocation(program, "u_PointColor");

        var r = 0.5, g = 0.8, b = 0.5;
        gl.uniform3f(u_PointColor, r, g, b);

        gl.drawArrays(gl.POINTS, 0, 1);
    </script>
</body>

</html>

8Observer8 · November 21, 2017

WebGL. 1.0. Drawing a point with a vertex buffer object (VBO)

https://jsfiddle.net/8Observer8/xmgu6jj8/

005_drawing_point-with-vbo.png.5d4ef6db300e4b587ce0eb09a66ae40f.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebGL 1.0. Drawing a point with a VBO</title>
</head>

<body>
    <canvas id="renderCanvas" width="200" height="200" style="border: 1px solid #aaaafa;"></canvas>

    <script>
        var vertexShaderSource =
            `attribute vec2 a_Position;
            
            void main()
            {
                gl_Position = vec4(a_Position, 0.0, 1.0);
                gl_PointSize = 10.0;
            }`;

        var fragmentShaderSource =
            `void main()
            {
                gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
            }`;

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

        var vShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vShader, vertexShaderSource);
        gl.compileShader(vShader);

        var fShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fShader, fragmentShaderSource);
        gl.compileShader(fShader);

        var program = gl.createProgram();
        gl.attachShader(program, vShader);
        gl.attachShader(program, fShader);
        gl.linkProgram(program);
        gl.useProgram(program);

        var vbo = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0.5, 0.5]), gl.STATIC_DRAW);

        var a_Position = gl.getAttribLocation(program, "a_Position");
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(a_Position);

        gl.drawArrays(gl.POINTS, 0, 1);
    </script>
</body>

</html>

8Observer8 · November 21, 2017

WebGL. 2.0. Drawing a point with a vertex buffer object (VBO)

https://jsfiddle.net/8Observer8/0d2y9kq0/

005_drawing_point-with-vbo.png.f9f14a3f3d022e4fe45dec91588c8985.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebGL 2.0. Drawing a point with a VBO</title>
</head>

<body>
    <canvas id="renderCanvas" width="200" height="200" style="border: 1px solid #aaaafa;"></canvas>

    <script>
        var vertexShaderSource =
            `#version 300 es
            
            in vec2 a_Position;
            
            void main()
            {
                gl_Position = vec4(a_Position, 0.0, 1.0);
                gl_PointSize = 10.0;
            }`;

        var fragmentShaderSource =
            `#version 300 es

            precision mediump float;

            out vec4 outColor;
            
            void main()
            {
                outColor = vec4(1.0, 0.0, 0.0, 1.0);
            }`;

        var gl = document.getElementById("renderCanvas").getContext("webgl2");

        var vShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vShader, vertexShaderSource);
        gl.compileShader(vShader);

        var fShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fShader, fragmentShaderSource);
        gl.compileShader(fShader);

        var program = gl.createProgram();
        gl.attachShader(program, vShader);
        gl.attachShader(program, fShader);
        gl.linkProgram(program);
        gl.useProgram(program);

        var vbo = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0.5, 0.5]), gl.STATIC_DRAW);

        var a_Position = gl.getAttribLocation(program, "a_Position");
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(a_Position);

        gl.drawArrays(gl.POINTS, 0, 1);
    </script>
</body>

</html>

8Observer8 · November 22, 2017

WebGL 1.0. Drawing multiple points with a vertex buffer object (VBO)

https://jsfiddle.net/8Observer8/knec1ex2/

006_drawing_multiple_points-with-vbo.png.c4ad2732ba48195a060bbd56c77e01fd.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebGL 1.0. Drawing multiple points with a vertex buffer object (VBO)</title>
    <style>
        #renderCanvas {
            border: 1px solid #aaaafa;
        }
    </style>
</head>

<body>
    <canvas id="renderCanvas" width="200" height="200"></canvas>

    <script>
        var vertexShaderSource =
            `attribute vec2 a_Position;

            void main()
            {
                gl_Position = vec4(a_Position, 0.0, 1.0);
                gl_PointSize = 7.0;
            }`;

        var fragmentShaderSource =
            `void main()
            {
                gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
            }`;

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

        var vShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vShader, vertexShaderSource);
        gl.compileShader(vShader);

        var fShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fShader, fragmentShaderSource);
        gl.compileShader(fShader);

        var program = gl.createProgram();
        gl.attachShader(program, vShader);
        gl.attachShader(program, fShader);
        gl.linkProgram(program);
        gl.useProgram(program);

        var vertices = [];
        var x, y, radius = 0.7;
        for(var angle = 30; angle < 360; angle += 60)
        {
            x = radius * Math.cos(angle * Math.PI / 180);
            y = radius * Math.sin(angle * Math.PI / 180);
            vertices.push(x, y);
        }

        var vbo = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

        var a_Position = gl.getAttribLocation(program, "a_Position");
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(a_Position);

        gl.drawArrays(gl.POINTS, 0, vertices.length / 2);
    </script>
</body>

</html>

8Observer8 · November 22, 2017

WebGL 2.0. Drawing multiple points with a vertex buffer object (VBO)

https://jsfiddle.net/8Observer8/dwhh99kx/

006_drawing_multiple_points-with-vbo.png.028ae24045ad17ce3eed46ce48261448.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebGL 2.0. Drawing multiple points with a vertex buffer object (VBO)</title>
    <style>
        #renderCanvas {
            border: 1px solid #aaaafa;
        }
    </style>
</head>

<body>
    <canvas id="renderCanvas" width="200" height="200"></canvas>

    <script>
        var vertexShaderSource =
            `#version 300 es
            
            in vec2 a_Position;

            void main()
            {
                gl_Position = vec4(a_Position, 0.0, 1.0);
                gl_PointSize = 7.0;
            }`;

        var fragmentShaderSource =
            `#version 300 es

            precision mediump float;

            out vec4 outColor;

            void main()
            {
                outColor = vec4(1.0, 0.0, 0.0, 1.0);
            }`;

        var gl = document.getElementById("renderCanvas").getContext("webgl2");

        var vShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vShader, vertexShaderSource);
        gl.compileShader(vShader);

        var fShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fShader, fragmentShaderSource);
        gl.compileShader(fShader);

        var program = gl.createProgram();
        gl.attachShader(program, vShader);
        gl.attachShader(program, fShader);
        gl.linkProgram(program);
        gl.useProgram(program);

        var vertices = [];
        var x, y, radius = 0.7;
        for(var angle = 30; angle < 360; angle += 60)
        {
            x = radius * Math.cos(angle * Math.PI / 180);
            y = radius * Math.sin(angle * Math.PI / 180);
            vertices.push(x, y);
        }

        var vbo = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

        var a_Position = gl.getAttribLocation(program, "a_Position");
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(a_Position);

        gl.drawArrays(gl.POINTS, 0, vertices.length / 2);
    </script>
</body>

</html>

8Observer8 · November 22, 2017

WebGL 1.0. Drawing three points with a vertex buffer object (VBO)

https://jsfiddle.net/8Observer8/rns9e7db/

007_drawing_three_points-with-vbo.png.364b7c4c9331367455930b8341fc9763.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebGL 1.0. Drawing three points with a vertex buffer object (VBO)</title>
    <style>
        #renderCanvas {
            border: 1px solid #aaaafa
        }
    </style>
</head>

<body>
    <canvas id="renderCanvas" width="200" height="200"></canvas>

    <script>
        var vertexShaderSource =
            `attribute vec2 a_Position;
            
            void main()
            {
                gl_Position = vec4(a_Position, 0.0, 1.0);
                gl_PointSize = 10.0;
            }`;

        var fragmentShaderSource =
            `void main()
            {
                gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
            }`;

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

        var vShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vShader, vertexShaderSource);
        gl.compileShader(vShader);

        var fShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fShader, fragmentShaderSource);
        gl.compileShader(fShader);

        var program = gl.createProgram();
        gl.attachShader(program, vShader);
        gl.attachShader(program, fShader);
        gl.linkProgram(program);
        gl.useProgram(program);

        var points = [
            0.0, 0.5,   // First point
            -0.5, -0.5, // Second point
            0.5, -0.5   // Third point
        ];

        var vbo = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(points), gl.STATIC_DRAW);

        var a_Position = gl.getAttribLocation(program, "a_Position");
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(a_Position);

        gl.drawArrays(gl.POINTS, 0, points.length / 2);
    </script>
</body>

</html>

8Observer8 · November 22, 2017

WebGL 2.0. Drawing three points with a vertex buffer object (VBO)

https://jsfiddle.net/8Observer8/5Lq7tshs/

007_drawing_three_points-with-vbo.png.aae1e87ba91208e1bc89895f2d4b4ae3.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebGL 2.0. Drawing three points with a vertex buffer object (VBO)</title>
    <style>
        #renderCanvas {
            border: 1px solid #aaaafa
        }
    </style>
</head>

<body>
    <canvas id="renderCanvas" width="200" height="200"></canvas>

    <script>
        var vertexShaderSource =
            `#version 300 es
            
            in vec2 a_Position;
            
            void main()
            {
                gl_Position = vec4(a_Position, 0.0, 1.0);
                gl_PointSize = 10.0;
            }`;

        var fragmentShaderSource =
            `#version 300 es

            precision mediump float;

            out vec4 outColor;
            
            void main()
            {
                outColor = vec4(1.0, 0.0, 0.0, 1.0);
            }`;

        var gl = document.getElementById("renderCanvas").getContext("webgl2");

        var vShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vShader, vertexShaderSource);
        gl.compileShader(vShader);

        var fShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fShader, fragmentShaderSource);
        gl.compileShader(fShader);

        var program = gl.createProgram();
        gl.attachShader(program, vShader);
        gl.attachShader(program, fShader);
        gl.linkProgram(program);
        gl.useProgram(program);

        var points = [
            0.0, 0.5,   // First Point
            -0.5, -0.5, // Second Point
            0.5, -0.5   // Third Point
        ];

        var vbo = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(points), gl.STATIC_DRAW);

        var a_Position = gl.getAttribLocation(program, "a_Position");
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(a_Position);

        gl.drawArrays(gl.POINTS, 0, points.length / 2);
    </script>
</body>

</html>

8Observer8 · November 22, 2017

WebGL 1.0. Drawing a triangle using gl.LINE_LOOP

https://jsfiddle.net/8Observer8/yrfkn23v/1/

008_drawing-triangle-with-gl-line-loop.png.08a59b5435ac44514cf001074f4bcb77.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebGL 1.0. Drawing a triangle using gl.LINE_LOOP</title>
    <style>
        #renderCanvas {
            border: 1px solid #aaaafa
        }
    </style>
</head>

<body>
    <canvas id="renderCanvas" width="250" height="250"></canvas>

    <script>
        var vertexShaderSource =
            `attribute vec2 a_Position;
            
            void main()
            {
                gl_Position = vec4(a_Position, 0.0, 1.0);
            }`;

        var fragmentShaderSource =
            `void main()
            {
                gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
            }`;

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

        var vShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vShader, vertexShaderSource);
        gl.compileShader(vShader);

        var fShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fShader, fragmentShaderSource);
        gl.compileShader(fShader);

        var program = gl.createProgram();
        gl.attachShader(program, vShader);
        gl.attachShader(program, fShader);
        gl.linkProgram(program);
        gl.useProgram(program);

        var points = [
            0.0, 0.7,   // First point
            -0.7, -0.7, // Second point
            0.7, -0.7   // Third point
        ];

        var vbo = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(points), gl.STATIC_DRAW);

        var a_Position = gl.getAttribLocation(program, "a_Position");
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(a_Position);

        gl.drawArrays(gl.LINE_LOOP, 0, points.length / 2);
    </script>
</body>

</html>

8Observer8 · November 22, 2017

WebGL 2.0. Drawing a triangle using gl.LINE_LOOP

https://jsfiddle.net/8Observer8/c2yauem0/1/

008_drawing-triangle-with-gl-line-loop.png.e76faf4b9c3f0ab93a352824295ba514.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebGL 2.0. Drawing a triangle using gl.LINE_LOOP</title>
    <style>
        #renderCanvas {
            border: 1px solid #aaaafa
        }
    </style>
</head>

<body>
    <canvas id="renderCanvas" width="250" height="250"></canvas>

    <script>
        var vertexShaderSource =
            `#version 300 es
            
            in vec2 a_Position;
            
            void main()
            {
                gl_Position = vec4(a_Position, 0.0, 1.0);
            }`;

        var fragmentShaderSource =
            `#version 300 es

            precision mediump float;

            out vec4 outColor;
            
            void main()
            {
                outColor = vec4(1.0, 0.0, 0.0, 1.0);
            }`;

        var gl = document.getElementById("renderCanvas").getContext("webgl2");

        var vShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vShader, vertexShaderSource);
        gl.compileShader(vShader);

        var fShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fShader, fragmentShaderSource);
        gl.compileShader(fShader);

        var program = gl.createProgram();
        gl.attachShader(program, vShader);
        gl.attachShader(program, fShader);
        gl.linkProgram(program);
        gl.useProgram(program);

        var points = [
            0.0, 0.7,   // First point
            -0.7, -0.7, // Second point
            0.7, -0.7   // Third point
        ];

        var vbo = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(points), gl.STATIC_DRAW);

        var a_Position = gl.getAttribLocation(program, "a_Position");
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(a_Position);

        gl.drawArrays(gl.LINE_LOOP, 0, points.length / 2);
    </script>
</body>

</html>

8Observer8 · November 22, 2017

WebGL 1.0. Drawing a triangle using gl.TRIANGLES

https://jsfiddle.net/8Observer8/knv9p87s/

009_drawing-triangle-using-gl-triangles.png.064449ada1443ecd4b589014c0172621.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebGL 1.0. Drawing a triangle using gl.TRIANGLES</title>
    <style>
        #renderCanvas {
            border: 1px solid #aaaafa
        }
    </style>
</head>

<body>
    <canvas id="renderCanvas" width="250" height="250"></canvas>

    <script>
        var vertexShaderSource =
            `attribute vec2 a_Position;
            
            void main()
            {
                gl_Position = vec4(a_Position, 0.0, 1.0);
            }`;

        var fragmentShaderSource =
            `void main()
            {
                gl_FragColor = vec4(0.4, 0.7, 0.4, 1.0);
            }`;

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

        var vShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vShader, vertexShaderSource);
        gl.compileShader(vShader);

        var fShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fShader, fragmentShaderSource);
        gl.compileShader(fShader);

        var program = gl.createProgram();
        gl.attachShader(program, vShader);
        gl.attachShader(program, fShader);
        gl.linkProgram(program);
        gl.useProgram(program);

        var points = [
            0.0, 0.7,   // First point
            -0.7, -0.7, // Second point
            0.7, -0.7   // Third point
        ];

        var vbo = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(points), gl.STATIC_DRAW);

        var a_Position = gl.getAttribLocation(program, "a_Position");
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(a_Position);

        gl.drawArrays(gl.TRIANGLES, 0, points.length / 2);
    </script>
</body>

</html>

8Observer8 · November 22, 2017

WebGL 2.0. Drawing a triangle using gl.TRIANGLES

https://jsfiddle.net/8Observer8/g27b94rn/

009_drawing-triangle-using-gl-triangles.png.02b1748d8b4ee19b5537c990dfe25106.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebGL 2.0. Drawing a triangle using gl.TRIANGLES</title>
    <style>
        #renderCanvas {
            border: 1px solid #aaaafa
        }
    </style>
</head>

<body>
    <canvas id="renderCanvas" width="250" height="250"></canvas>

    <script>
        var vertexShaderSource =
            `#version 300 es
            
            in vec2 a_Position;
            
            void main()
            {
                gl_Position = vec4(a_Position, 0.0, 1.0);
            }`;

        var fragmentShaderSource =
            `#version 300 es

            precision mediump float;

            out vec4 outColor;
            
            void main()
            {
                outColor = vec4(0.4, 0.7, 0.4, 1.0);
            }`;

        var gl = document.getElementById("renderCanvas").getContext("webgl2");

        var vShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vShader, vertexShaderSource);
        gl.compileShader(vShader);

        var fShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fShader, fragmentShaderSource);
        gl.compileShader(fShader);

        var program = gl.createProgram();
        gl.attachShader(program, vShader);
        gl.attachShader(program, fShader);
        gl.linkProgram(program);
        gl.useProgram(program);

        var points = [
            0.0, 0.7,   // First point
            -0.7, -0.7, // Second point
            0.7, -0.7   // Third point
        ];

        var vbo = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(points), gl.STATIC_DRAW);

        var a_Position = gl.getAttribLocation(program, "a_Position");
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(a_Position);

        gl.drawArrays(gl.TRIANGLES, 0, points.length / 2);
    </script>
</body>

</html>

8Observer8 · November 23, 2017

WebGL 1.0. Pass vertex colors to a shader program using VBO

https://jsfiddle.net/8Observer8/vtq4cypy/1/

010_pass-vertex-colors-using-vbo.png.0f9dfc1a3912b8c853fce1cb49a10239.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebGL 1.0. Pass vertex colors using VBO</title>
    <style>
        #renderCanvas {
            border: 1px solid #aaaafa;
        }
    </style>
</head>

<body>
    <canvas id="renderCanvas" width="250" height="250"></canvas>

    <script>
        var vertexShaderSource =
            `
            attribute vec2 a_Position;
            attribute vec3 a_Color;
            varying vec3 v_Color;
            
            void main()
            {
                gl_Position = vec4(a_Position, 0.0, 1.0);
                v_Color = a_Color;
            }`;

        var fragmentShaderSource =
            `precision mediump float;
            
            varying vec3 v_Color;

            void main()
            {
                gl_FragColor = vec4(v_Color, 1.0);
            }`;

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

        var vShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vShader, vertexShaderSource);
        gl.compileShader(vShader);

        var fShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fShader, fragmentShaderSource);
        gl.compileShader(fShader);

        var program = gl.createProgram();
        gl.attachShader(program, vShader);
        gl.attachShader(program, fShader);
        gl.linkProgram(program);
        gl.useProgram(program);

        gl.clearColor(0.9, 0.9, 1.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        var verticesAndColors = new Float32Array([
            0.0, 0.7,       // Coordinate
            1.0, 0.0, 0.0,  // Color
            -0.7, -0.7,
            0.0, 1.0, 0.0,
            0.7, -0.7,
            0.0, 0.0, 1.0
        ]);

        var vbo = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
        gl.bufferData(gl.ARRAY_BUFFER, verticesAndColors, gl.STATIC_DRAW);

        var FSIZE = verticesAndColors.BYTES_PER_ELEMENT;

        var a_Position = gl.getAttribLocation(program, "a_Position");
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 5, 0);
        gl.enableVertexAttribArray(a_Position);

        var a_Color = gl.getAttribLocation(program, "a_Color");
        gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 5, FSIZE * 2);
        gl.enableVertexAttribArray(a_Color);

        gl.drawArrays(gl.TRIANGLES, 0, 3);
    </script>
</body>

</html>

8Observer8 · November 23, 2017

WebGL 2.0. Pass vertex colors to a shader program using VBO

https://jsfiddle.net/8Observer8/em98vuu4/1/

010_pass-vertex-colors-using-vbo.png.94eefade837336efe5fa3aa99ab1ebe3.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebGL 1.0. Pass vertex colors using VBO</title>
    <style>
        #renderCanvas {
            border: 1px solid #aaaafa;
        }
    </style>
</head>

<body>
    <canvas id="renderCanvas" width="250" height="250"></canvas>

    <script>
        var vertexShaderSource =
            `#version 300 es

            in vec2 a_Position;
            in vec3 a_Color;
            out vec3 v_Color;
            
            void main()
            {
                gl_Position = vec4(a_Position, 0.0, 1.0);
                v_Color = a_Color;
            }`;

        var fragmentShaderSource =
            `#version 300 es
            
            precision mediump float;
            
            in vec3 v_Color;
            out vec4 outColor;

            void main()
            {
                outColor = vec4(v_Color, 1.0);
            }`;

        var gl = document.getElementById("renderCanvas").getContext("webgl2");

        var vShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vShader, vertexShaderSource);
        gl.compileShader(vShader);

        var fShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fShader, fragmentShaderSource);
        gl.compileShader(fShader);

        var program = gl.createProgram();
        gl.attachShader(program, vShader);
        gl.attachShader(program, fShader);
        gl.linkProgram(program);
        gl.useProgram(program);

        gl.clearColor(0.9, 0.9, 1.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        var verticesAndColors = new Float32Array([
            0.0, 0.7,       // Coordinate
            1.0, 0.0, 0.0,  // Color
            -0.7, -0.7,
            0.0, 1.0, 0.0,
            0.7, -0.7,
            0.0, 0.0, 1.0
        ]);

        var vbo = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
        gl.bufferData(gl.ARRAY_BUFFER, verticesAndColors, gl.STATIC_DRAW);

        var FSIZE = verticesAndColors.BYTES_PER_ELEMENT;

        var a_Position = gl.getAttribLocation(program, "a_Position");
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 5, 0);
        gl.enableVertexAttribArray(a_Position);

        var a_Color = gl.getAttribLocation(program, "a_Color");
        gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 5, FSIZE * 2);
        gl.enableVertexAttribArray(a_Color);

        gl.drawArrays(gl.TRIANGLES, 0, 3);
    </script>
</body>

</html>

8Observer8 · November 23, 2017

WebGL 1.0. Drawing multiple triangles with random colors

https://jsfiddle.net/8Observer8/g87rvebk/

011_drawing_multiple_triangles.png.27f2c52028063187ebefcf735ef5c99a.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebGL 1.0. Drawing multiple triangles with random colors</title>
    <style>
        #renderCanvas {
            border: 1px solid #aaaafa;
        }
    </style>
</head>

<body>
    <canvas id="renderCanvas" width="250" height="250"></canvas>

    <script>
        var vertexShaderSource =
            `
            attribute vec2 a_Position;
            attribute vec3 a_Color;
            varying vec3 v_Color;

            void main()
            {
                gl_Position = vec4(a_Position, 0.0, 1.0);
                v_Color = a_Color;
            }`;

        var fragmentShaderSource =
            `
            precision mediump float;

            varying vec3 v_Color;

            void main()
            {
                gl_FragColor = vec4(v_Color, 1.0);
            }`;

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

        var vShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vShader, vertexShaderSource);
        gl.compileShader(vShader);

        var fShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fShader, fragmentShaderSource);
        gl.compileShader(fShader);

        var program = gl.createProgram();
        gl.attachShader(program, vShader);
        gl.attachShader(program, fShader);
        gl.linkProgram(program);
        gl.useProgram(program);

        function getColorArray(num)
        {
            var arr = [];
            var r = Math.random();
            var g = Math.random();
            var b = Math.random();
            for (var i = 0; i < num; i++)
            {
                arr.push(r, g, b);
            }
            return arr;
        }

        var firstTriangleCoords = [0.0, 0.5, -0.5, -0.5, 0.5, -0.5];
        var secondTriangleCoords = [-0.9, -0.9, -0.5, -0.9, -0.9, -0.5];
        var thirdTriangleCoords = [0.9, -0.9, 0.9, -0.5, 0.5, -0.9];
        var fourthTriangleCoords = [0.9, 0.9, 0.5, 0.9, 0.9, 0.5];
        var fifthTriangleCoords = [-0.9, 0.9, -0.9, 0.5, -0.5, 0.9];

        var firstTriangleRandomColors = getColorArray(3);
        var secondTriangleRandomColors = getColorArray(3);
        var thirdTriangleRandomColors = getColorArray(3);
        var fourthTriangleRandomColors = getColorArray(3);
        var fifthTriangleRandomColors = getColorArray(3);

        var verticesAndColors = firstTriangleCoords
            .concat(secondTriangleCoords)
            .concat(thirdTriangleCoords)
            .concat(fourthTriangleCoords)
            .concat(fifthTriangleCoords)
            .concat(firstTriangleRandomColors)
            .concat(secondTriangleRandomColors)
            .concat(thirdTriangleRandomColors)
            .concat(fourthTriangleRandomColors)
            .concat(fifthTriangleRandomColors);

        var floatArray = new Float32Array(verticesAndColors);

        var vbo = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
        gl.bufferData(gl.ARRAY_BUFFER, floatArray, gl.STATIC_DRAW);

        var a_Position = gl.getAttribLocation(program, "a_Position");
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(a_Position);

        var FSIZE = floatArray.BYTES_PER_ELEMENT;

        var a_Color = gl.getAttribLocation(program, "a_Color");
        gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, 0, FSIZE * 30);
        gl.enableVertexAttribArray(a_Color);

        gl.clearColor(0.9, 1.0, 0.9, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        gl.drawArrays(gl.TRIANGLES, 0, 15);
    </script>
</body>

</html>

8Observer8 · November 23, 2017

WebGL 2.0. Drawing multiple triangles with random colors

https://jsfiddle.net/8Observer8/sa45xehb/

011_drawing_multiple_triangles.png.85eeab8934112c66b62726860ba7fc47.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebGL 1.0. Drawing multiple triangles with random colors</title>
    <style>
        #renderCanvas {
            border: 1px solid #aaaafa;
        }
    </style>
</head>

<body>
    <canvas id="renderCanvas" width="250" height="250"></canvas>

    <script>
        var vertexShaderSource =
            `#version 300 es

            in vec2 a_Position;
            in vec3 a_Color;
            out vec3 v_Color;

            void main()
            {
                gl_Position = vec4(a_Position, 0.0, 1.0);
                v_Color = a_Color;
            }`;

        var fragmentShaderSource =
            `#version 300 es

            precision mediump float;

            in vec3 v_Color;
            out vec4 outColor;

            void main()
            {
                outColor = vec4(v_Color, 1.0);
            }`;

        var gl = document.getElementById("renderCanvas").getContext("webgl2");

        var vShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vShader, vertexShaderSource);
        gl.compileShader(vShader);

        var fShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fShader, fragmentShaderSource);
        gl.compileShader(fShader);

        var program = gl.createProgram();
        gl.attachShader(program, vShader);
        gl.attachShader(program, fShader);
        gl.linkProgram(program);
        gl.useProgram(program);

        function getColorArray(num)
        {
            var arr = [];
            var r = Math.random();
            var g = Math.random();
            var b = Math.random();
            for (var i = 0; i < num; i++)
            {
                arr.push(r, g, b);
            }
            return arr;
        }

        var firstTriangleCoords = [0.0, 0.5, -0.5, -0.5, 0.5, -0.5];
        var secondTriangleCoords = [-0.9, -0.9, -0.5, -0.9, -0.9, -0.5];
        var thirdTriangleCoords = [0.9, -0.9, 0.9, -0.5, 0.5, -0.9];
        var fourthTriangleCoords = [0.9, 0.9, 0.5, 0.9, 0.9, 0.5];
        var fifthTriangleCoords = [-0.9, 0.9, -0.9, 0.5, -0.5, 0.9];

        var firstTriangleRandomColors = getColorArray(3);
        var secondTriangleRandomColors = getColorArray(3);
        var thirdTriangleRandomColors = getColorArray(3);
        var fourthTriangleRandomColors = getColorArray(3);
        var fifthTriangleRandomColors = getColorArray(3);

        var verticesAndColors = firstTriangleCoords
            .concat(secondTriangleCoords)
            .concat(thirdTriangleCoords)
            .concat(fourthTriangleCoords)
            .concat(fifthTriangleCoords)
            .concat(firstTriangleRandomColors)
            .concat(secondTriangleRandomColors)
            .concat(thirdTriangleRandomColors)
            .concat(fourthTriangleRandomColors)
            .concat(fifthTriangleRandomColors);

        var floatArray = new Float32Array(verticesAndColors);

        var vbo = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
        gl.bufferData(gl.ARRAY_BUFFER, floatArray, gl.STATIC_DRAW);

        var a_Position = gl.getAttribLocation(program, "a_Position");
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(a_Position);

        var FSIZE = floatArray.BYTES_PER_ELEMENT;

        var a_Color = gl.getAttribLocation(program, "a_Color");
        gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, 0, FSIZE * 30);
        gl.enableVertexAttribArray(a_Color);

        gl.clearColor(0.9, 1.0, 0.9, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        gl.drawArrays(gl.TRIANGLES, 0, 15);
    </script>
</body>

</html>

8Observer8 · November 24, 2017

WebGL 1.0. Drawing a line using gl.LINES

https://jsfiddle.net/8Observer8/9sbza8uL/

012_drawing_line.png.9164096f6116652f11bc243deb8effce.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebGL 1.0. Drawing a line using gl.LINES</title>
    <style>
        #renderCanvas {
            border: 5px solid #aaaafa;
        }
    </style>
</head>

<body>
    <canvas id="renderCanvas" width="250" height="250"></canvas>

    <script>
        var vertexShaderSource =
            `
            attribute vec2 a_Position;

            void main()
            {
                gl_Position = vec4(a_Position, 0.0, 1.0);
            }`;

        var fragmentShaderSource =
            `
            void main()
            {
                gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
            }`;

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

        var vShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vShader, vertexShaderSource);
        gl.compileShader(vShader);

        var fShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fShader, fragmentShaderSource);
        gl.compileShader(fShader);

        var program = gl.createProgram();
        gl.attachShader(program, vShader);
        gl.attachShader(program, fShader);
        gl.linkProgram(program);
        gl.useProgram(program);

        var vertices = new Float32Array([
            -0.7, -0.7, 0.7, 0.7
        ]);

        var vbo = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

        var a_Position = gl.getAttribLocation(program, "a_Position");
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(a_Position);

        gl.clearColor(245/255, 250/255, 200/255, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        gl.drawArrays(gl.LINES, 0, 2);
    </script>
</body>

</html>

8Observer8 · November 24, 2017

WebGL 2.0. Drawing a line using gl.LINES

https://jsfiddle.net/8Observer8/a5tm6jLa/

012_drawing_line.png.faa4bcb8893b4fbec9b11b18d1a15cbf.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebGL 2.0. Drawing a line using gl.LINES</title>
    <style>
        #renderCanvas {
            border: 5px solid #aaaafa;
        }
    </style>
</head>

<body>
    <canvas id="renderCanvas" width="250" height="250"></canvas>

    <script>
        var vertexShaderSource =
            `#version 300 es

            in vec2 a_Position;

            void main()
            {
                gl_Position = vec4(a_Position, 0.0, 1.0);
            }`;

        var fragmentShaderSource =
            `#version 300 es

            precision mediump float;
            out vec4 fragColor;

            void main()
            {
                fragColor = vec4(1.0, 0.0, 0.0, 1.0);
            }`;

        var gl = document.getElementById("renderCanvas").getContext("webgl2");

        var vShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vShader, vertexShaderSource);
        gl.compileShader(vShader);

        var fShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fShader, fragmentShaderSource);
        gl.compileShader(fShader);

        var program = gl.createProgram();
        gl.attachShader(program, vShader);
        gl.attachShader(program, fShader);
        gl.linkProgram(program);
        gl.useProgram(program);

        var vertices = new Float32Array([
            -0.7, -0.7, 0.7, 0.7
        ]);

        var vbo = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

        var a_Position = gl.getAttribLocation(program, "a_Position");
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(a_Position);

        gl.clearColor(245/255, 250/255, 200/255, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        gl.drawArrays(gl.LINES, 0, 2);
    </script>
</body>

</html>

Let's create WebGL examples for practice

Recommended Posts

Link to comment

Share on other sites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

8Observer8

8Observer8

8Observer8

Posted Images

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members