How To Set Up A Basic WebGL Rendering Loop?
Last Updated :
16 Aug, 2024
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 :
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>
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 Loop2. 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>
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
How To Set Up A Basic WebGL Rendering Loop
Similar Reads
How to Set Up a WebGL Project? WebGL is the JavaScript API that allows you to render 3D and 2D graphics within a web browser without needing plugins. It provides a way to interact with the graphics hardware directly and is built on top of OpenGL ES. Setting up a WebGL project involves configuring your development environment, cre
3 min read
How to Use Shaders to Apply Color in WebGL? Shaders in WebGL are small programs that run on the GPU to control the rendering pipeline. They allow you to manipulate the appearance and position of shapes on the screen. In this example, we use vertex and fragment shaders to apply a uniform color to a shape, making it possible to change the shape
8 min read
How To Manage Data in WebGL? WebGL (Web Graphics Library) is a JavaScript API that allows you to create 3D graphics that run in any web browser without needing plugins. It's a powerful tool for rendering interactive 3D and 2D graphics, utilizing the capabilities of the GPU. To effectively create and manipulate these graphics, m
6 min read
How To Create And Use Buffers in WebGL? Buffers in WebGL are important for storing and managing vertex and index data used in rendering. They allow for efficient transfer of data from JavaScript to the GPU, enabling smooth and flexible graphics rendering. By creating and binding buffers, you can manage vertex attributes and indices for va
4 min read
How to Load 3D Models in WebGL? 3D Models in WebGL are digital representations of objects within a 3D space, rendered directly in the browser. They can range from simple shapes to complex designs and are crucial for creating immersive and interactive graphics on the web. Below are the approaches to Creating a 3D Model in WebGL:Tab
6 min read
How To Compile Shaders In WebGL? Shaders in WebGL are small programs written in GLSL (OpenGL Shading Language) that run on the GPU to control the rendering of graphics. Compiling a shader means converting the GLSL code into a format that the GPU can execute, which involves creating a shader object, attaching source code, and proces
6 min read