WebGL: Low-Level 3D Rendering

Use WebGL to create high-performance 3D graphics directly in the browser using JavaScript.

<canvas id="webglCanvas"></canvas>
<script>
const canvas = document.getElementById('webglCanvas');
const gl = canvas.getContext('webgl');

gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.clearColor(0.1, 0.1, 0.1, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.enable(gl.DEPTH_TEST);

// Shader programs and rendering logic
const vsSource = `attribute vec4 aVertexPosition; void main() { gl_Position = aVertexPosition; }`;
const fsSource = `void main() { gl_FragColor = vec4(0.8, 0.2, 0.4, 1.0); }`;
const shaderProgram = createShaderProgram(vsSource, fsSource);

function createShaderProgram(vertexSource, fragmentSource) {
    const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexSource);
    const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
    const program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);
    return program;
}

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

gl.useProgram(shaderProgram);
gl.drawArrays(gl.TRIANGLES, 0, 3);
</script>