Open In App

How To Set Up A Basic WebGL Rendering Loop?

Last Updated : 16 Aug, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

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

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

1
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();

Output

2
How To Set Up A Basic WebGL Rendering Loop

G
gauravggeeksforgeeks
Improve
Article Tags :

Explore

Lightbox