Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebGL2 Triangle</title>
</head>
<body>
<canvas id="canvas" width="500" height="450"></canvas>
</body>
</html>
              
            
!

CSS

              
                
              
            
!

JS

              
                /* 
This is a modified version of code from webgl2fundamentals.org.
Read more here: https://demyanov.dev/past-and-future-html-canvas-brief-overview-2d-webgl-and-webgpu
*/
"use strict";

var vertexShaderSource = `#version 300 es
in vec2 a_position;
in vec4 a_color;
uniform float u_PointSize;
out vec4 v_color;
  
void main() {
    v_color = a_color;
    gl_Position = vec4(a_position, 0, 1);
    gl_PointSize = u_PointSize;
}
`;

var fragmentShaderSource = `#version 300 es
precision highp float;
in vec4 v_color;
out vec4 outColor;

void main() {
    outColor = vec4(v_color);
}
`;

function main() {
    const canvas = document.querySelector("#canvas");
    const gl = canvas.getContext("webgl2");
    if (!gl) {
        console.log("Cant get ctx");
        return;
    }

    const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
    const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);

    const program = createProgram(gl, vertexShader, fragmentShader);

    gl.clearColor(0.1, 0.2, 0.4, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);

    gl.useProgram(program);

    /////////////////////////////////////SETTING UP STATE///////////////////////////////////////
    const u_PointSize = gl.getUniformLocation(program, 'u_PointSize');

    // Uniform for point size
    gl.uniform1f(u_PointSize, 100);

    // Attribute locations
    const a_PositionIndex = gl.getAttribLocation(program, 'a_position');
    const a_ColorIndex = gl.getAttribLocation(program, 'a_color');

    // Attribute buffers
    const a_PositionBuffer = gl.createBuffer();
    const a_ColorBuffer = gl.createBuffer();

    // Vertex array object (vao)
    // This tells WebGL how to iterate your attribute buffers
    const vao = gl.createVertexArray();
    gl.bindVertexArray(vao);

    // Pull 2 floats at a time out of the position buffer
    gl.bindBuffer(gl.ARRAY_BUFFER, a_PositionBuffer);
    gl.enableVertexAttribArray(a_PositionIndex);
    gl.vertexAttribPointer(a_PositionIndex, 2, gl.FLOAT, false, 0, 0);

    // Pull 4 floats at a time out of the color buffer
    gl.bindBuffer(gl.ARRAY_BUFFER, a_ColorBuffer);
    gl.enableVertexAttribArray(a_ColorIndex);
    gl.vertexAttribPointer(a_ColorIndex, 4, gl.FLOAT, false, 0, 0);

    // Add some points to the position buffer
    const positions = new Float32Array([
        -0.75, -0.5,
        0, 0.5,
        0.75, -0.5,
    ]);
    gl.bindBuffer(gl.ARRAY_BUFFER, a_PositionBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);

    // Add some points to the color buffer
    const colors = new Float32Array([
        1.0, 0.0, 0.0, 1.0, // red
        0.0, 1.0, 0.0, 1.0, // green
        0.0, 0.0, 1.0, 1.0, // blue
    ]);
    gl.bindBuffer(gl.ARRAY_BUFFER, a_ColorBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
    ////////////////////////////////////////////////////////////////////////////////////////////

    var primitiveType = gl.TRIANGLES;
    var offset = 0;
    var count = 3;
    gl.drawArrays(primitiveType, offset, count);
}

function createShader(gl, type, source) {
    const shader = gl.createShader(type);
    gl.shaderSource(shader, source);
    gl.compileShader(shader);
    const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
    if (success) {
        return shader;
    }

    console.log(gl.getShaderInfoLog(shader));
    gl.deleteShader(shader);
    return undefined;
}

function createProgram(gl, vertexShader, fragmentShader) {
    const program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);
    const success = gl.getProgramParameter(program, gl.LINK_STATUS);
    if (success) {
        return program;
    }

    console.log(gl.getProgramInfoLog(program));
    gl.deleteProgram(program);
    return undefined;
}

main();

              
            
!
999px

Console