Let's create WebGL examples for practice

Recommended Posts

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:

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 03. Drawing and Transforming Triangles
ch03/MultiPoint: https://jsfiddle.net/8Observer8/cty1120m/
ch03/HelloTriangle: https://jsfiddle.net/8Observer8/wk4sksnw/
ch03/HelloQuad: https://jsfiddle.net/8Observer8/g4ctyk7w/
ch03/HelloQuad_FAN: https://jsfiddle.net/8Observer8/v119e8o6/
ch03/HelloTriangle_LINES: https://jsfiddle.net/8Observer8/wwrkaxcf/
ch03/HelloTriangle_LINE_STRIP: https://jsfiddle.net/8Observer8/3ggjz4rm/
ch03/HelloTriangle_LINE_LOOP: https://jsfiddle.net/8Observer8/7vcyquro/
ch03/TranslatedTriangle: https://jsfiddle.net/8Observer8/0dp4xvyt/
ch03/RotatedTriangle: https://jsfiddle.net/8Observer8/gh9s6szm/
ch03/RotatedTriangle_Matrix: https://jsfiddle.net/8Observer8/7ze7pgpu/
ch03/ScaledTriangle_Matrix: https://jsfiddle.net/8Observer8/6xzoe63s/

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 05. Using Colors and Texture Images
ch05/MultiAttributeSize: https://jsfiddle.net/8Observer8/dsfgezbj/
ch05/MultiAttributeSize_Interleaved: https://jsfiddle.net/8Observer8/bshwnden/
ch05/MultiAttributeColor: https://jsfiddle.net/8Observer8/bveykLdf/
ch05/ColoredTriangle: https://jsfiddle.net/8Observer8/mrkpms7d/
ch05/HelloTriangle_FragCoord: https://jsfiddle.net/8Observer8/ft33yo9s/
ch05/TexturedQuad: https://jsfiddle.net/8Observer8/o3vakb3h/
ch05/TexturedQuad_Repeat: https://jsfiddle.net/8Observer8/2s7q68cc/
ch05/TexturedQuad_Clamp_Mirror: https://jsfiddle.net/8Observer8/mqu0wwma/
ch05/MultiTexture: https://jsfiddle.net/8Observer8/ztew5u0p/

Chapter 07. Toward the 3D World
ch07/LookAtTriangles: https://jsfiddle.net/8Observer8/6ab11xpg/
ch07/LookAtRotatedTriangles: https://jsfiddle.net/8Observer8/944dd57h/
ch07/LookAtRotatedTriangles_modelViewMatrix: https://jsfiddle.net/8Observer8/e5t6gj1w/
ch07/LookAtTrianglesWithKeys: https://jsfiddle.net/8Observer8/38ewegg2/
ch07/OrthoView: https://jsfiddle.net/8Observer8/zebt4u7t/
ch07/LookAtTrianglesWithKey_ViewVolume: https://jsfiddle.net/8Observer8/vLcejtm1/
ch07/OrthoView_halfSize: https://jsfiddle.net/8Observer8/uvcd9h4p/
ch07/OrthoView_halfWidth: https://jsfiddle.net/8Observer8/vepodfb8/
ch07/PerspectiveView: https://jsfiddle.net/8Observer8/640pv8qe/
ch07/PerspectiveView_mvp: https://jsfiddle.net/8Observer8/w8yh4Lmj/
ch07/PerspectiveView_mvpMatrix: https://jsfiddle.net/8Observer8/hhwnx145/
ch07/DepthBuffer: https://jsfiddle.net/8Observer8/hyumw026/
ch07/Zfighting: https://jsfiddle.net/8Observer8/foc0b45t/
ch07/HelloCube: https://jsfiddle.net/8Observer8/rkpn5tyw/
ch07/ColoredCube: https://jsfiddle.net/8Observer8/80x8cyom/
ch07/ColoredCube_singleColor: https://jsfiddle.net/8Observer8/pespackq/

Chapter 08. Lighting Objects
ch08/LightedCube: https://jsfiddle.net/8Observer8/4jchxo84/
ch08/LightedCube_animation: https://jsfiddle.net/8Observer8/ekw3osj7/
ch08/LightedCube_ambient: https://jsfiddle.net/8Observer8/y6qwnfe1/
ch08/LightedTranslatedRotatedCube: https://jsfiddle.net/8Observer8/pa88ujjg/
ch08/PointLightedCube: https://jsfiddle.net/8Observer8/vuq118ue/
ch08/PointLightedCube_animation: https://jsfiddle.net/8Observer8/5bj39hb8/
ch08/PointLightedSphere: https://jsfiddle.net/8Observer8/edz9Lz8f/
ch08/PointLightedSphere_perFragment: https://jsfiddle.net/8Observer8/qzwyow4j/
ch08/PointLightedCube_perFragment: https://jsfiddle.net/8Observer8/8t1umamf/
ch08/LightedCube_perFragment: https://jsfiddle.net/8Observer8/471y2t84/

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/

Chapter 10. Advanced Techniques
ch10/RotateObject: https://jsfiddle.net/8Observer8/1f5hLmff/
ch10/PickObject: https://jsfiddle.net/8Observer8/owue624n/
ch10/PickFace: https://jsfiddle.net/8Observer8/edvw6z90/
ch10/HUD: https://jsfiddle.net/8Observer8/fLxxxs35/
ch10/3DoverWeb: https://jsfiddle.net/8Observer8/tbowcc16/
ch10/Fog: https://jsfiddle.net/8Observer8/6yf9L399/
ch10/Fog_w: https://jsfiddle.net/8Observer8/8aLvthc3/
ch10/RoundedPoints: https://jsfiddle.net/8Observer8/sjs5kmn4/
ch10/LookAtBlendedTriangles: https://jsfiddle.net/8Observer8/apoz294n/
ch10/BlendedCube: https://jsfiddle.net/8Observer8/xsrL2fs5/
ch10/ProgramObject: https://jsfiddle.net/8Observer8/jnd0j6w0/
ch10/FramebufferObject: https://jsfiddle.net/8Observer8/vaLq6d66/
ch10/Shadow: https://jsfiddle.net/8Observer8/jsnfwcae/
ch10/Shadow_highp: https://jsfiddle.net/8Observer8/brjzr00n/
ch10/Shadow_highp_sphere: https://jsfiddle.net/8Observer8/4fmyLy5f/
ch10/OBJViewer: https://jsfiddle.net/8Observer8/pws1x7uv/
ch10/RotatingTriangle_contextLost: https://jsfiddle.net/8Observer8/vs01s8Lz/

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/

Share this post


Link to post
Share on other sites

WebGL 1.0. Draw a point

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

001_point-in-webgl2.png.90278e8724654fdc1e438bdd3fbe8780.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>

 

Share this post


Link to post
Share on other sites

Draw a point with the standard WebGL 2.0

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

001_point-in-webgl2.png.f5c6e847a03059a4b95ad3de4989d4a7.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>

 

Edited by 8Observer8

Share this post


Link to post
Share on other sites

WebGL 1.0. Pass a point coordinate to a shader

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

002_pass-point-coord-to-shader-webgl1.png.6a87c2f93086b18b55d23afe8ab6479a.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>

 

WebGL 2.0. Pass a point coordinate to a shader

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

002_pass-point-coord-to-shader-webgl2.png.8f4ccf6afe6406b08d4d8af3f46b3d58.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>

 

Share this post


Link to post
Share on other sites

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.0f02574ba0970c1159b74e7c92c4a090.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>

 

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.0f02574ba0970c1159b74e7c92c4a090.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>

 

Edited by 8Observer8

Share this post


Link to post
Share on other sites

WebGL 1.0. Pass a point color to a fragment shader

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

004_pass-point-color-to-shader.png.0561a21a7b80eee41552979697011e9a.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>

 

WebGL 2.0. Pass a point color to a fragment shader

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

004_pass-point-color-to-shader.png.25d17bc3c5dc5118270aa1eb46529111.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>

 

Edited by 8Observer8

Share this post


Link to post
Share on other sites

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

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

005_drawing_point-with-vbo.png.a76d151f7a34e4984744c434d1f863ce.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>

 

Share this post


Link to post
Share on other sites

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

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

005_drawing_point-with-vbo.png.ad4ccf0c94707b13f8a6bc5dd89cf6b3.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>

 

Share this post


Link to post
Share on other sites

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

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

006_drawing_multiple_points-with-vbo.png.72a6d178d06fdc70b3e310457fb0feb6.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>

 

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

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

006_drawing_multiple_points-with-vbo.png.25d1ba8c2704ee70224c4783a37ea532.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>

 

Share this post


Link to post
Share on other sites

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

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

007_drawing_three_points-with-vbo.png.4be9fd00a99e1053fe832de59300a837.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>

 

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

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>

 

Edited by 8Observer8

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

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>

 

Edited by 8Observer8

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

WebGL 1.0. Drawing a polygonal chain using gl.LINE_STRIP

https://jsfiddle.net/8Observer8/4ckevug1/

015_drawing_polygonal_chain.png.6943fa46157538834a24a3750e87063b.png

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

<head>
    <meta charset="UTF-8">
    <title>WebGL 1.0. Drawing a polygonal chain using gl.LINE_STRIP</title>
    <style>
        #renderCanvas {
            border: 5px solid #b9ddc7;
        }
    </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 =
            `
            precision mediump float;

            uniform vec3 u_Color;

            void main()
            {
                gl_FragColor = vec4(u_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 vertices = new Float32Array([
            -0.8, -0.8, -0.6, 0.0, -0.4, -0.6, -0.2, 0.2,
            0.0, 0.5, 0.2, -0.7, 0.4, 0.7, 0.6, -0.4, 0.8, 0.8
        ]);

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

        var u_Color = gl.getUniformLocation(program, "u_Color");
        gl.uniform3f(u_Color, 0.278, 0.270, 0.768);

        gl.clearColor(0.984, 0.988, 0.972, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        gl.drawArrays(gl.LINE_STRIP, 0, 9);
    </script>
</body>

</html>

 

WebGL 2.0. Drawing a polygonal chain using gl.LINE_STRIP

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

015_drawing_polygonal_chain.png.c2d5bf9f9fcd21c5f32feed27c3bfa9b.png

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

<head>
    <meta charset="UTF-8">
    <title>WebGL 2.0. Drawing a polygonal chain using gl.LINE_STRIP</title>
    <style>
        #renderCanvas {
            border: 5px solid #b9ddc7;
        }
    </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;

            uniform vec3 u_Color;
            out vec4 fragColor;

            void main()
            {
                fragColor = vec4(u_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 vertices = new Float32Array([
            -0.8, -0.8, -0.6, 0.0, -0.4, -0.6, -0.2, 0.2,
            0.0, 0.5, 0.2, -0.7, 0.4, 0.7, 0.6, -0.4, 0.8, 0.8
        ]);

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

        var u_Color = gl.getUniformLocation(program, "u_Color");
        gl.uniform3f(u_Color, 0.278, 0.270, 0.768);

        gl.clearColor(0.984, 0.988, 0.972, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        gl.drawArrays(gl.LINE_STRIP, 0, 9);
    </script>
</body>

</html>

 

Edited by 8Observer8

Share this post


Link to post
Share on other sites

WebGL 1.0. Drawing a closed polygonal chain using gl.LINE_LOOP

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

016_drawing_closed_polygonal_chain.png.d0ac5208991af613f42fb1ab48af5060.png

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

<head>
    <meta charset="UTF-8">
    <title>WebGL 1.0. Drawing a closed polygonal chain using gl.LINE_LOOP</title>
    <style>
        #renderCanvas {
            border: 5px solid #8f84e9;
        }
    </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 =
            `
            precision mediump float;

            uniform vec3 u_Color;

            void main()
            {
                gl_FragColor = vec4(u_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 vertices = new Float32Array([
            -0.7, -0.4, -0.8, 0.3, 0.0, 0.9, 0.6, 0.5,
            0.7, 0.0, 0.2, -0.7, -0.3, -0.8
        ]);

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

        var u_Color = gl.getUniformLocation(program, "u_Color");
        gl.uniform3f(u_Color, 0.407, 0.768, 0.270);

        gl.clearColor(0.956, 0.968, 0.890, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        gl.drawArrays(gl.LINE_LOOP, 0, 7);
    </script>
</body>

</html>

 

WebGL 2.0. Drawing a closed polygonal chain using gl.LINE_LOOP

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

016_drawing_closed_polygonal_chain.png.3a9ca72ca4559851eadb9e303c2055b7.png

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

<head>
    <meta charset="UTF-8">
    <title>WebGL 2.0. Drawing a closed polygonal chain using gl.LINE_LOOP</title>
    <style>
        #renderCanvas {
            border: 5px solid #8f84e9;
        }
    </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;

            uniform vec3 u_Color;
            out vec4 fragColor;

            void main()
            {
                fragColor = vec4(u_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 vertices = new Float32Array([
            -0.7, -0.4, -0.8, 0.3, 0.0, 0.9, 0.6, 0.5,
            0.7, 0.0, 0.2, -0.7, -0.3, -0.8
        ]);

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

        var u_Color = gl.getUniformLocation(program, "u_Color");
        gl.uniform3f(u_Color, 0.407, 0.768, 0.270);

        gl.clearColor(0.956, 0.968, 0.890, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        gl.drawArrays(gl.LINE_LOOP, 0, 7);
    </script>
</body>

</html>

 

Share this post


Link to post
Share on other sites

WebGL 1.0. Drawing a polygon using gl.TRIANGLE_STRIP

https://jsfiddle.net/8Observer8/586ss160/

017_drawing_polygon_using_triangle_strip.png.df7d7ff44ac8edc5707279683c7da39f.png

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

<head>
    <meta charset="UTF-8">
    <title>WebGL 1.0. Drawing a polygon using gl.TRIANGLE_STRIP</title>
    <style>
        #renderCanvas {
            border: 5px solid #8f84e9;
        }
    </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 vertices = new Float32Array([
            -0.6, 0.3, 1.0, 0.0, 0.0,   // v0 (x, y), (r, g, b)
            -0.4, -0.5, 0.0, 1.0, 0.0,  // v1
            -0.2, 0.7, 0.0, 0.0, 1.0,   // v2
            0.0, -0.5, 1.0, 0.0, 0.0,   // v3
            0.2, 0.7, 0.0, 1.0, 0.0,    // v4
            0.4, -0.5, 0.0, 0.0, 1.0,   // v5
            0.6, 0.3, 1.0, 0.0, 0.0,    // v6
        ]);

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

        var FSIZE = vertices.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.956, 0.968, 0.890, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 7);
    </script>
</body>

</html>

 

WebGL 2.0. Drawing a polygon using gl.TRIANGLE_STRIP

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

017_drawing_polygon_using_triangle_strip.png.e8f6fcaf778967f4d70069d45e8fafee.png

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

<head>
    <meta charset="UTF-8">
    <title>WebGL 2.0. Drawing a polygon using gl.TRIANGLE_STRIP</title>
    <style>
        #renderCanvas {
            border: 5px solid #8f84e9;
        }
    </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 vertices = new Float32Array([
            -0.6, 0.3, 1.0, 0.0, 0.0,   // v0 (x, y), (r, g, b)
            -0.4, -0.5, 0.0, 1.0, 0.0,  // v1
            -0.2, 0.7, 0.0, 0.0, 1.0,   // v2
            0.0, -0.5, 1.0, 0.0, 0.0,   // v3
            0.2, 0.7, 0.0, 1.0, 0.0,    // v4
            0.4, -0.5, 0.0, 0.0, 1.0,   // v5
            0.6, 0.3, 1.0, 0.0, 0.0,    // v6
        ]);

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

        var FSIZE = vertices.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.956, 0.968, 0.890, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 7);
    </script>
</body>

</html>

 

Share this post


Link to post
Share on other sites

WebGL 1.0. Drawing a polygon using gl.TRIANGLE_FAN

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

018_drawing_polygon_using_triangle_fan.png.f8c1149714520b1d94959ffa71da7154.png

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

<head>
    <meta charset="UTF-8">
    <title>WebGL 1.0. Drawing a polygon using gl.TRIANGLE_FAN</title>
    <style>
        #renderCanvas {
            border: 5px solid #8f84e9;
        }
    </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 vertices = new Float32Array([
            -0.6, 0.3, 1.0, 0.0, 0.0,   // v0 (x, y), (r, g, b)
            -0.4, -0.5, 0.0, 1.0, 0.0,  // v1
            0.0, -0.7, 1.0, 0.0, 0.0,   // v2
            0.4, -0.5, 0.0, 0.0, 1.0,   // v3
            0.6, 0.3, 1.0, 0.0, 0.0,    // v4
            0.2, 0.7, 0.0, 1.0, 0.0,    // v5
            -0.2, 0.7, 0.0, 0.0, 1.0,   // v6
        ]);

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

        var FSIZE = vertices.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.956, 0.968, 0.890, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        gl.drawArrays(gl.TRIANGLE_FAN, 0, 7);
    </script>
</body>

</html>

 

Share this post


Link to post
Share on other sites

WebGL 2.0. Drawing a polygon using gl.TRIANGLE_FAN

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

018_drawing_polygon_using_triangle_fan.png.2d8ede6042bf28e7c872d47596b0f204.png

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

<head>
    <meta charset="UTF-8">
    <title>WebGL 2.0. Drawing a polygon using gl.TRIANGLE_FAN</title>
    <style>
        #renderCanvas {
            border: 5px solid #8f84e9;
        }
    </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 vertices = new Float32Array([
            -0.6, 0.3, 1.0, 0.0, 0.0,   // v0 (x, y), (r, g, b)
            -0.4, -0.5, 0.0, 1.0, 0.0,  // v1
            0.0, -0.7, 1.0, 0.0, 0.0,   // v2
            0.4, -0.5, 0.0, 0.0, 1.0,   // v3
            0.6, 0.3, 1.0, 0.0, 0.0,    // v4
            0.2, 0.7, 0.0, 1.0, 0.0,    // v5
            -0.2, 0.7, 0.0, 0.0, 1.0,   // v6
        ]);

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

        var FSIZE = vertices.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.956, 0.968, 0.890, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        gl.drawArrays(gl.TRIANGLE_FAN, 0, 7);
    </script>
</body>

</html>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Forum Statistics

    • Total Topics
      628710
    • Total Posts
      2984334
  • Similar Content

    • By jeevium
      My 1st Android game developed with React-Native and called Math Warriors
    • By PistachioPro
      Hi all! Long time no post. We've been on extended hiatus from game development for several years, but came out of hiding to develop a fun little browser game. It's called surviv.io, and you can find it (appropriately) at http://surviv.io. It's strongly influenced by way too many hours spent playing PUBG. Spawn in, grab some loot, and be the last person standing. Please check it out and let us know what you think!


       
    • By Connor Rust
      I am currently attempting to make a navigation mesh for our 2D top down game, which is a multiplayer game using Node.js as the server communication. At the moment, I have implemented A* over an obstacle hardnessmap, which is awfully slow and laggy at times when we test our game on Heroku. I have been trying to find an algorithm to automatically generate the navmesh after map creation, instead of me having to do this manually. I am currently attempting to use Delaunay's Triangulation Divide and Conquer algorithm, but I am running into some issues. I have already asked a question on StackOverflow and am not getting many suggestions and help from it, so I figured I would come here. Is there another algorithm that might be better to use for the navmesh generation in comparison to Deluanay's Triangulation? My current implementation seems extremely buggy during the merge step and I cannot find the error. I have checked over the code countless times, comparing it to the description of the algorithm from http://www.geom.uiuc.edu/~samuelp/del_project.html. 
      My current code is this:
      class MapNode { constructor(x, y) { this.position = new Vector(x, y); this.neighbors = []; } distance(n) { return this.position.distance(n.position); } inNeighbor(n) { for (let i = 0; i < this.neighbors.length; i++) { if (this.neighbors[i] === n) return true; } return false; } addNeighbor(n) { this.neighbors = this.neighbors.filter((node) => node != n); this.neighbors.push(n); } addNeighbors(arr) { let self = this; arr.forEach((n) => self.neighbors.push(n)); } removeNeighbor(n) { this.neighbors = this.neighbors.filter((neighbor) => neighbor != n); } } class Triangle { constructor(p1, p2, p3) { this.p1 = p1; this.p2 = p2; this.p3 = p3; this.neighbors = []; } addNeighbors(n) { this.neighbors.push(n); } } function genSubMat(matrix, ignoreCol) { let r = []; for (let i = 0; i < matrix.length - 1; i++) { r.push([]); for (let j = 0; j < matrix[0].length; j++) { if (j != ignoreCol) r[i].push(matrix[i + 1][j]); } } return r; } function determinantSqMat(matrix) { if (matrix.length != matrix[0].length) return false; if (matrix.length === 2) return matrix[0][0] * matrix[1][1] - matrix[1][0] * matrix[0][1]; let det = 0; for (let i = 0; i < matrix.length; i++) { let r = genSubMat(matrix, i); let tmp = matrix[0][i] * determinantSqMat(r); if (i % 2 == 0) det += tmp; else det -= tmp; } return -det; } // if d is in the circle formed by points a, b, and c, return > 0 // d is on circle, return 0 // d is outside of circle, return < 0 function inCircle(a, b, c, d) { let arr = [a, b, c, d]; let mat = [ [], [], [], [] ]; for (let i = 0; i < arr.length; i++) { mat[i][0] = 1; mat[i][1] = arr[i].position.x; mat[i][2] = arr[i].position.y; mat[i][3] = arr[i].position.x * arr[i].position.x + arr[i].position.y * arr[i].position.y; } return determinantSqMat(mat); } function walkable(from, to, hardnessMap) { let diff = new Vector(to.x - from.x, to.y - from.y); if (Math.abs(diff.x) > Math.abs(diff.y)) diff.scale(Math.abs(1 / diff.x)); else diff.scale(Math.abs(1 / diff.y)); let current = new Vector(from.x + diff.x, from.y + diff.y); while (Math.round(current.x) != to.x || Math.round(current.y) != to.y) { if (hardnessMap[Math.floor(current.y)][Math.floor(current.x)] === 1) return false; current.x += diff.x; current.y += diff.y; } return true; } function getLowest(nodes) { let lowest = nodes[0]; for (let i = 1; i < nodes.length; i++) { if (nodes[i].position.y < lowest.position.y) lowest = nodes[i]; } return lowest; } // returns the angle between 2 vectors, if cw is true, then return clockwise angle between, // else return the ccw angle between. b is the "hinge" point function angleBetween(a, b, c, cw) { let ba = new Vector(a.position.x - b.position.x, a.position.y - b.position.y); let bc = new Vector(c.position.x - b.position.x, c.position.y - b.position.y); let v0 = new Vector(0, 1); let angleBA = v0.angleBetween(ba) * 180 / Math.PI; if (angleBA < 0) angleBA += 360; let angleBC = v0.angleBetween(bc) * 180 / Math.PI; if (angleBC < 0) angleBC += 360; let smallest = Math.min(angleBA, angleBC); let largest = Math.max(angleBA, angleBC); let angle = largest - smallest; return (cw) ? angle : 360 - angle; } function sortSmallestAngle(a, b, list, cw) { list.sort((m, n) => { let vab = new Vector(a.position.x - b.position.x, a.position.y - b.position.y); let vmb = new Vector(m.position.x - b.position.x, m.position.y - b.position.y); let vnb = new Vector(n.position.x - b.position.x, n.position.y - b.position.y); if (cw) return vab.angleBetween(vmb, cw) - vab.angleBetween(vnb, cw); else return vab.angleBetween(vnb, cw) - vab.angleBetween(vmb, cw); }); } // a is in list, b is in the other list function getPotential(a, b, list, cw) { sortSmallestAngle(b, a, list, cw); for (let i = 0; i < list.length - 1; i++) { let angle = angleBetween(b, a, list[i], cw); if (angle > 180) return false; else if (inCircle(a, b, list[i], list[i + 1]) <= 0) return list[i]; else { a.removeNeighbor(list[i]); list[i].removeNeighbor(a); } } let potential = list[list.length - 1]; if (potential) { let angle = angleBetween(a, b, potential, cw); if (angle > 180) return false; return potential; } return false; } function merge(leftNodes, rightNodes, leftBase, rightBase, hardnessMap) { leftBase.addNeighbor(rightBase); rightBase.addNeighbor(leftBase); let newLeft = leftNodes.filter((n) => n != leftBase); let newRight = rightNodes.filter((n) => n != rightBase); let potentialLeft = getPotential(leftBase, rightBase, newLeft, false); let potentialRight = getPotential(rightBase, leftBase, newRight, true); if (!potentialLeft && !potentialRight) return; else if (potentialLeft && !potentialRight) merge(newLeft, newRight, potentialLeft, rightBase, hardnessMap); else if (potentialRight && !potentialLeft) merge(newLeft, newRight, leftBase, potentialRight, hardnessMap); else { if (inCircle(leftBase, rightBase, potentialLeft, potentialRight) <= 0) merge(newLeft, newRight, potentialLeft, rightBase, hardnessMap); if (inCircle(leftBase, rightBase, potentialRight, potentialLeft) <= 0) merge(newLeft, newRight, leftBase, potentialRight, hardnessMap); } } // divide and conquer algorithm function delaunay(nodes, hardnessMap) { if (nodes.length <= 3) { for (let i = 0; i < nodes.length; i++) for (let j = 0; j < nodes.length; j++) if (i != j) nodes[i].addNeighbor(nodes[j]); return nodes; } else { nodes.sort((a, b) => { let tmp = a.position.x - b.position.x; if (tmp === 0) return b.position.y - a.position.y; return tmp; }); let l = nodes.length; let leftNodes; let rightNodes; if (l === 4) { leftNodes = delaunay(nodes.slice(0, 3), hardnessMap); rightNodes = delaunay(nodes.slice(3, 4), hardnessMap); } else { leftNodes = delaunay(nodes.slice(0, Math.floor(nodes.length / 2)), hardnessMap); rightNodes = delaunay(nodes.slice(Math.floor(nodes.length / 2), nodes.length), hardnessMap); } let leftBase = getLowest(leftNodes); let rightBase = getLowest(rightNodes); merge(leftNodes, rightNodes, leftBase, rightBase, hardnessMap); console.log("=============================MergeComplete================================"); return nodes; } }  
    • By francoisdiy
      Francois DIY is written in 100% JavaScript and runs quite smoothly on the PC environment. Currently there are no plans to rewrite the code in other languages as there would be little improvement. It is open source and free to hack. I suggest using an editor with a code navigator or function lister for ease of access. There is also a built-in JavaScript debugger as well.
      Why JavaScript? The main purpose is to allow the app to demo on the browser as well as run on the PC. There are no plans to port to small devices. Possible future port with be on a tablet if they are powerful enough in the future. Not sure if recoding will be done in JavaScript.
    • By Sailingdom
      How do i enable players coming to a game from being timedout while waiting for other gamers to join? Must be from the app side not the gamer side.
  • Popular Now