Get started with html-gl CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with html-gl CDN - cdnhub.io</title>
    <style>
        canvas {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <script src="https://cdn.cdnhub.io/html-gl/0.3.1/htmlgl.min.js"></script>
    <script>
        const canvas = document.createElement('canvas');
        document.body.appendChild(canvas);

        const gl = new HtmlGLEngine(canvas);
        const shaderProgram = createShaderProgram(gl);

        function createShaderProgram(gl) {
            const vertexShaderSource = `
                attribute vec4 a_position;
                void main() {
                    gl_Position = a_position;
                }
            `;

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

            const vertexShader = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vertexShader, vertexShaderSource);
            gl.compileShader(vertexShader);

            const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(fragmentShader, fragmentShaderSource);
            gl.compileShader(fragmentShader);

            const shaderProgram = gl.createProgram();
            gl.attachShader(shaderProgram, vertexShader);
            gl.attachShader(shaderProgram, fragmentShader);
            gl.linkProgram(shaderProgram);

            return shaderProgram;
        }

        const positionAttributeLocation = gl.getAttribLocation(shaderProgram, 'a_position');
        const positionBuffer = gl.createBuffer();
        const positions = new Float32Array([0, 0, 1, 0, 0, 1]);
        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
        gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

        const a_position = gl.getAttribLocation(shaderProgram, 'a_position');
        gl.enableVertexAttribArray(a_position);
        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
        gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 0, 0);

        const u_mvpMatrixLocation = gl.getUniformLocation(shaderProgram, 'u_mvpMatrix');
        const mvpMatrix = new Float32Array(16);
        gl.uniformMatrix4fv(u_mvpMatrixLocation, false, mvpMatrix);

        const clearColorLocation = gl.getUniformLocation(shaderProgram, 'u_clearColor');
        gl.uniform4f(clearColorLocation, 0.0, 0.0, 0.0, 1.0);

        function render() {
            gl.clearColor(1.0, 0.0, 0.0, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT);
            gl.useProgram(shaderProgram);
            gl.drawArrays(gl.TRIANGLES, 0, 3);
            requestAnimationFrame(render);
        }

        render();
    </script>
</body>
</html>
Get started with html-gl CDN

Stable version

How to start using html-gl CDN

All versions
