What’s webGL

WebGL (Web Graphics Library) was introduced in 2011.

WebGL is a rasterization API developed by the Khronos Group, Inc., based on OpenGL ES (a lightweight version of OpenGL). It enables efficient 3D rendering directly within web browsers.

Since it is compatible with major browsers, users do not need to download or install any external applications to run WebGL apps.

Below are the first browser versions to fully support WebGL.

WebGL supports 3D transformations, textures, shading (such as surface color, brightness, shadows, gloss), and lighting effects. It uses shaders — vertex shaders (for calculating positions) and fragment shaders (for calculating color and texture per pixel) — to control rendering in real time.

Note: What are vertex and fragment shaders?

WebGL relies on small programs (shaders) that run on the GPU.

• Vertex Shader: Calculates vertex positions and determines where to draw them. It also calculates relationships with the camera and light sources.
• Fragment Shader: Calculates color and textures (such as shadows and transparency) for each pixel.

Using frameworks like Three.js, default vertex and fragment shaders are provided, so you don’t need to handle them manually when creating simple 3D scenes.。

The Three Essential Components of WebGL for Rendering 3D Scenes

Camera

Defines the viewpoint in 3D space, acting like a human eye. You can set the camera’s position, orientation, and field of view to control the overall scene’s appearance.

Renderer

The engine that performs the drawing. Using WebGL, it actually renders the scene on the screen. In Three.js, this is handled by the WebGLRenderer class.

Scene

A container that manages objects, cameras, and lights. Objects are placed within the scene, illuminated by lights, and then rendered by the renderer.

How WebGL Works: The Flow

1. Setup: Place cubes, cameras, lights, and other objects in the scene.
2. Vertex Shader Processing: Calculate positions for each object.
3. Fragment Shader Processing: Determine color, texture, and shadows at the pixel level.
4. Drawing: Render the results on the screen.

Popular Technologies in This Field: Three.js and Unity

Both Three.js and Unity are widely used for 3D graphics and game development.

Three.js is excellent for creating web-based 3D graphics, while Unity excels in developing unique 2D and 3D game user experiences.

About Three.js

Three.js is a JavaScript library that uses WebGL to render 3D graphics. It is mainly used for rendering 3D graphics in web browsers. It is lightweight and suitable for interactive data visualization and 3D animations.

For JavaScript developers, Three.js offers an attractive option to create interactive visuals and animations relatively easily.

About Unity

Unity uses OpenGL and DirectX for creating games and interactive experiences, but when building for WebGL targets, it uses WebGL technology.

Programming in Unity is primarily done in C#, and shaders use ShaderLab or HLSL. Since Unity internally uses WebGL for rendering in WebGL builds, developers don’t have to worry about the underlying WebGL details and can mainly work inside the Unity editor with C#.

Comparison: Three.js vs Unity

3D modeling, animation creation, and rendering tools include Blender, Maya, and Cinema 4D. Characters created in Blender can be imported into Unity or Three.js, allowing users to interact with models within web browsers or applications.