How To Set Up A Basic WebGL Rendering Loop?

WebGL Rendering Loop is important for creating dynamic, interactive graphics on the web. By continuously rendering frames, it allows for smooth animations and real-time updates.

In this article, we will explore two different approaches to setting up a basic WebGL rendering loop :

Table of Content

Basic WebGL Rendering Loop with Vanilla JavaScript
Basic WebGL Rendering Loop with Three.js

1. Basic WebGL Rendering Loop with Vanilla JavaScript

In this approach, we are using vanilla JavaScript to create a basic WebGL rendering loop. The loop continuously clears the canvas with a random color on each frame using the requestAnimationFrame method, which ensures smooth and efficient rendering.

Example: The below example uses a Basic WebGL Rendering Loop with Vanilla JavaScript.

HTML

<!DOCTYPE html>

<head>
    <title>Example 1</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        canvas {
            border: 1px solid #000;
        }

        h1 {
            color: green;
            font-size: 2em;
            margin-bottom: 20px;
        }

        h3 {
            font-size: 1.5em;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>Approach 1: Basic WebGL Rendering Loop with Vanilla JavaScript</h3>
    <canvas id="webgl-canvas" width="500" height="500"></canvas>
    <script src="script.js"></script>
</body>

</html>

JavaScript

const canvas = document.getElementById('webgl-canvas');
const gl = canvas.getContext('webgl');

if (!gl) {
    console.error('WebGL not supported');
}

function clearScreen() {
    const r = Math.random();
    const g = Math.random();
    const b = Math.random();
    gl.clearColor(r, g, b, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    requestAnimationFrame(clearScreen);
}

clearScreen();

Output

How To Set Up A Basic WebGL Rendering Loop

2. Basic WebGL Rendering Loop with Three.js

In this approach, we use the Three.js library to set up a basic WebGL rendering loop. We create a scene, camera, and renderer, and then add a rotating cube to the scene. The cube's color changes continuously in the rendering loop, creating a dynamic visual effect.

Example: The below example uses a Basic WebGL Rendering Loop with Three.js.

HTML

<!DOCTYPE html>

<head>
    <title>Example 2</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        canvas {
            border: 1px solid #000;
            width: 300px;
            height: 300px;
        }

        h1 {
            color: green;
            font-size: 2em;
            margin-bottom: 20px;
        }

        h3 {
            font-size: 1.5em;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>Approach 2: Basic WebGL Rendering Loop with Three.js</h3>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="script.js"></script>
</body>

</html>

JavaScript

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000); 
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(300, 300); 

document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry(2, 2, 2);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

function animate() {
    requestAnimationFrame(animate);

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    const r = Math.random();
    const g = Math.random();
    const b = Math.random();
    cube.material.color.setRGB(r, g, b);

    renderer.render(scene, camera);
}

animate();

How To Set Up A Basic WebGL Rendering Loop?

1. Basic WebGL Rendering Loop with Vanilla JavaScript

Output

2. Basic WebGL Rendering Loop with Three.js

Output

Explore