Back to Graphics and GPU Programming

Let's create WebGL examples for practice

Graphics and GPU Programming Programming Javascript

Started by 8Observer8 November 20, 2017 10:16 AM

35 comments, last by 8Observer8 6 years, 3 months ago

8Observer8

395

Author

November 22, 2017 01:16 PM

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

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

007_drawing_three_points-with-vbo.png.36b729163908562e571448568663c226.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>

Advertisement

8Observer8

395

Author

November 22, 2017 01:45 PM

WebGL 1.0. Drawing a triangle using gl.LINE_LOOP

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

008_drawing-triangle-with-gl-line-loop.png.46ea4d8fd118562a5fefec1c8ee6485e.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>

WebGL 2.0. Drawing a triangle using gl.LINE_LOOP

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

008_drawing-triangle-with-gl-line-loop.png.5f2c13a94362959d01dbe9dcece8c79a.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

395

Author

November 22, 2017 07:06 PM

WebGL 1.0. Drawing a triangle using gl.TRIANGLES

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

009_drawing-triangle-using-gl-triangles.png.26ef99fe80b5cdb69f4f99c6e8c7e72c.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

395

Author

November 22, 2017 07:18 PM

WebGL 2.0. Drawing a triangle using gl.TRIANGLES

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

009_drawing-triangle-using-gl-triangles.png.7fb641277202f212dd9c8d19f4f1a8d5.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

395

Author

November 23, 2017 02:20 PM

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.5f87a92436a5fbf8df22c49b24cb9a04.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>

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.ef9f1ce00be67fe2410cc820806ca683.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

395

Author

November 23, 2017 07:03 PM

WebGL 1.0. Drawing multiple triangles with random colors

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

011_drawing_multiple_triangles.png.cb70b193191da4d8434480c9fd2613c1.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>

WebGL 2.0. Drawing multiple triangles with random colors

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

011_drawing_multiple_triangles.png.acef16553fbc0c24631ac97ad9a5b57e.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

395

Author

November 24, 2017 12:53 PM

WebGL 1.0. Drawing a line using gl.LINES

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

012_drawing_line.png.2796a16657c65df44c75528d59978327.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>

WebGL 2.0. Drawing a line using gl.LINES

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

012_drawing_line.png.7de19f39e8ea09390a44c3702ad6f479.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>

8Observer8

395

Author

November 24, 2017 01:38 PM

WebGL 1.0. Drawing multiple lines using gl.LINES

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

013_drawing_multiple_lines.png.2d8a82cb7b2ad86bed40fca8965afff8.png


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

<head>
    <meta charset="UTF-8">
    <title>WebGL 1.0. Drawing multiple lines using gl.LINES</title>
    <style>
        #renderCanvas {
            border: 5px solid #41af66;
        }
    </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.411, 0.372, 0.670, 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.9, 0.3, 0.9, 0.3,
            -0.9, -0.3, 0.9, -0.3,
            -0.3, 0.9, -0.3, -0.9,
            0.3, 0.9, 0.3, -0.9
        ]);

        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(0.925, 0.952, 0.905, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

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

</html>

8Observer8

395

Author

November 24, 2017 01:44 PM

WebGL 2.0. Drawing multiple lines using gl.LINES

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

013_drawing_multiple_lines.png.92a403ca881fe46e7f7724c1ba6fa548.png


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

<head>
    <meta charset="UTF-8">
    <title>WebGL 2.0. Drawing multiple lines using gl.LINES</title>
    <style>
        #renderCanvas {
            border: 5px solid #41af66;
        }
    </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(0.411, 0.372, 0.670, 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.9, 0.3, 0.9, 0.3,
            -0.9, -0.3, 0.9, -0.3,
            -0.3, 0.9, -0.3, -0.9,
            0.3, 0.9, 0.3, -0.9
        ]);

        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(0.925, 0.952, 0.905, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

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

</html>

8Observer8

395

Author

November 24, 2017 02:15 PM

WebGL 1.0. Drawing lines with different colors

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

014_drawing_lines_with_different_colors.png.9207a6b5c7d36560234e6219f5a98f52.png


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

<head>
    <meta charset="UTF-8">
    <title>WebGL 1.0. Drawing lines with different colors</title>
    <style>
        #renderCanvas {
            border: 5px solid #9dbdda;
        }
    </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);

        var verticesAndColors = new Float32Array([
            // First line
            -0.9, 0.0,              // Coordinate
            0.850, 0.109, 0.184,    // Color
            0.9, 0.0,               // Coordinate
            0.850, 0.109, 0.184,    // Color
            // Second line
            0.0, 0.9,               // Coordinate
            0.298, 0.850, 0.109,    // Color
            0.0, -0.9,              // Coordinate
            0.298, 0.850, 0.109     // Color
        ]);

        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, 5 * FSIZE, 0);
        gl.enableVertexAttribArray(a_Position);

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

        gl.clearColor(0.968, 0.968, 0.972, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

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

</html>

WebGL 2.0. Drawing lines with different colors

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

014_drawing_lines_with_different_colors.png.2aea4ded1b8ebd25d499cdfc2fdaf551.png


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

<head>
    <meta charset="UTF-8">
    <title>WebGL 2.0. Drawing lines with different colors</title>
    <style>
        #renderCanvas {
            border: 5px solid #9dbdda;
        }
    </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 fragColor;

            void main()
            {
                fragColor = 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);

        var verticesAndColors = new Float32Array([
            // First line
            -0.9, 0.0,              // Coordinate
            0.850, 0.109, 0.184,    // Color
            0.9, 0.0,               // Coordinate
            0.850, 0.109, 0.184,    // Color
            // Second line
            0.0, 0.9,               // Coordinate
            0.298, 0.850, 0.109,    // Color
            0.0, -0.9,              // Coordinate
            0.298, 0.850, 0.109     // Color
        ]);

        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, 5 * FSIZE, 0);
        gl.enableVertexAttribArray(a_Position);

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

        gl.clearColor(0.968, 0.968, 0.972, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

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

</html>

This topic is closed to new replies.

Advertisement

Popular Topics

theish

Can AI Tools Streamline Game Development? For Beginners

Nosey

Ideas for a new genre (anonimous) Game Design and Theory

Avoiding other units without using pathfinding General and Gameplay Programming

elboursicode

I need help about my client netcode Networking and Multiplayer

KielanT

DirectX 12 Renderer Graphics and GPU Programming

pixelamped

What's the best way to make items/upgrades in a rouge-like? General and Gameplay Programming

Advertisement

Recommended Tutorials

Myopic Rhino

Cube Map Rendering Techniques for Direct3D10 Graphics and GPU Programming

A simple method to speed up path finding Artificial Intelligence

Myopic Rhino

Clock Synchronization of Client Programs Networking and Multiplayer

Myopic Rhino

General Collision Detection for Games Using Ellipsoids General and Gameplay Programming

Are You Letting Others In? Career Development