Jump to content
  • Advertisement
8Observer8

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
Advertisement

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
Guest
This topic is now closed to further replies.

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!