How to Create a Basic 2D WebGL Animation?

2D WebGL animation is a technique for creating dynamic, graphical animations using the WebGL API or libraries like Three.js. It uses the power of the GPU to render and animate 2D shapes or objects on a canvas, allowing for smooth and performant visual effects directly in the browser.

Below are the approaches to Creating a Basic 2D WebGL Animation:

Using Raw WebGL for Basic 2D Animation

In this approach, we are using raw WebGL to create a basic 2D animation by defining shaders and a drawing program manually. The animation involves a red square that continuously moves across the canvas, bouncing off the edges. The translation and speed of the square are updated in the drawScene function, which is repeatedly called using requestAnimationFrame for smooth, infinite animation.

Example: The below example uses Raw WebGL to Create a Basic 2D WebGL Animation.

Output:

Using Three.js for 2D WebGL Animation

In this approach, we are using Three.js to create a 2D WebGL animation by setting up a basic scene with an orthographic camera and a red square. The animation involves the square moving across the canvas and bouncing off the edges, with its position updated in the animate function. requestAnimationFrame is used for smooth, continuous rendering.

Example: The below example uses Three.js for 2D WebGL Animation.

Output: