Five-pointed Star with WebGL and JavaScript

posted in My OpenGL and WebGL Examples

Published February 09, 2023

Playground: https://plnkr.co/edit/W49ndxcQemMgkAoP

image.png.ede77d643d0fd72d6ac1f09e7d9273a2.png

My Video:

assets/shaders/default.vert

attribute vec2 aPosition;
uniform mat4 uMvpMatrix;
 
void main() {
    gl_Position = uMvpMatrix * vec4(aPosition, 0.0, 1.0);
}

assets/shaders/default.frag

precision mediump float;
uniform vec3 uColor;
 
void main() {
    gl_FragColor = vec4(uColor, 1.0);
}

index.html

<!DOCTYPE html>
 
<html>
 
<head>
    <meta charset="UTF-8">
    <title>Example</title>
</head>
 
<body>
    <canvas id="renderCanvas" width="300" height="300"></canvas>
 
    <script type="importmap">
        {
            "imports": {
                "gl-matrix": "https://cdn.skypack.dev/gl-matrix@3.4.3"
            }
        }
    </script>
 
    <script type="module">
        import { mat4, vec3 } from "gl-matrix";
 
        let gl, program;
 
        function initWebGLContext(canvasName) {
            const canvas = document.getElementById(canvasName);
            if (canvas === null) {
                console.log(`Failed to get a canvas element with the name "${canvasName}"`);
                return false;
            }
            gl = canvas.getContext("webgl", { alpha: false, premultipliedAlpha: false });
            return true;
        }
 
        async function createShaderProgram(path, vertShaderFileName, fragShaderFileName) {
            let response = await fetch(path + vertShaderFileName);
            const vertShaderSource = await response.text();
            response = await fetch(path + fragShaderFileName);
            const fragShaderSource = await response.text();
 
            const vShader = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vShader, vertShaderSource);
            gl.compileShader(vShader);
            let ok = gl.getShaderParameter(vShader, gl.COMPILE_STATUS);
            if (!ok) {
                console.log("vert: " + gl.getShaderInfoLog(vShader));
                return null;
            };
 
            const fShader = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(fShader, fragShaderSource);
            gl.compileShader(fShader);
            ok = gl.getShaderParameter(vShader, gl.COMPILE_STATUS);
            if (!ok) {
                console.log("frag: " + gl.getShaderInfoLog(fShader));
                return null;
            };
 
            const program = gl.createProgram();
            gl.attachShader(program, vShader);
            gl.attachShader(program, fShader);
            gl.linkProgram(program);
            ok = gl.getProgramParameter(program, gl.LINK_STATUS);
            if (!ok) {
                console.log("link: " + gl.getProgramInfoLog(program));
                return null;
            };
            gl.useProgram(program);
 
            return program;
        }
 
        async function init() {
            if (!initWebGLContext("renderCanvas")) return;
 
            gl.clearColor(0.8, 0.8, 0.95, 1);
            gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
 
            program = await createShaderProgram("assets/shaders/",
                "default.vert", "default.frag");
 
            const vertPositions = [
                0, 0, // 0
                0.1123, 0.1545,
                0, 0.5,
                0, 0, // 1
                0, 0.5,
                -0.1123, 0.1545
            ];
            const vertPosBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, vertPosBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertPositions), gl.STATIC_DRAW);
 
            const aPositionLocation = gl.getAttribLocation(program, "aPosition");
            gl.vertexAttribPointer(aPositionLocation, 2, gl.FLOAT, false, 0, 0);
            gl.enableVertexAttribArray(aPositionLocation);
 
            const projMatrix = mat4.create();
            mat4.ortho(projMatrix, -50, 50, -50, 50, -10, 10);
 
            const viewMatrix = mat4.create();
            mat4.lookAt(viewMatrix, [0, 0, 10], [0, 0, 0], [0, 1, 0]);
 
            const projViewMatrix = mat4.create();
            mat4.mul(projViewMatrix, projMatrix, viewMatrix);
 
            const modelMatrix = mat4.create();
            const mvpMatrix = mat4.create();
            const uMvpMatrixLocation = gl.getUniformLocation(program, "uMvpMatrix");
 
            const uColorLocation = gl.getUniformLocation(program, "uColor");
 
            gl.clear(gl.COLOR_BUFFER_BIT);
 
            // Star
            const radStep = 2 * Math.PI / 5;
            for (let rad = 0; rad < 2 * Math.PI; rad += radStep) {
                mat4.fromTranslation(modelMatrix, [0, 0, 0]);
                mat4.rotateZ(modelMatrix, modelMatrix, rad);
                mat4.scale(modelMatrix, modelMatrix, [50, 50, 1]);
                mat4.mul(mvpMatrix, projViewMatrix, modelMatrix);
                gl.uniformMatrix4fv(uMvpMatrixLocation, false, mvpMatrix);
                gl.uniform3fv(uColorLocation, [0.5, 0, 0]);
                gl.drawArrays(gl.TRIANGLES, 0, 6);
            }
        }
 
        init();
    </script>
</body>
 
</html>

Previous Entry Drawing Box and Sphere Cannon-ES Colliders with WebGL and TypeScript

Next Entry The simplest multiplayer using WebSockets and pure WebGL 1.0 with animation from Resident Evil

1 likes 1 comments