OpenGL, WebGL and Three.js

What is OpenGL?

OpenGL is a specification developed and maintained by Khronos Group. OpenGL is a set of rules and guidelines for how a function's input and output should be setup in order to render 3D vector graphics using GPU. Most OpenGL libraries are developed and implemented by graphics card manufacturers and are designed to be supported for that specific hardware.

What is WebGL?

WebGL is a JavaScript API that conforms to OpenGL ES specifications. WebGL allows for 3D graphics rendering in an all modern web browsers as long as the user's device has a compatible GPU. WebGL uses the HTML <canvas> element tag to render graphics to the page.

Three.js

Three.js is a simple to use lightweight library designed to create 3D vector graphics. Three.js comes with built in functions to quickly create 3D object, cameras, scenes and animations.

Lights, Camera, ACTION!!

Following is a boilerplate for setting a scene context and camera for rendering.

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75,
 window.innerWidth/window.innerHeight,
 0.1, 1000);

camera.position.x = 1;
camera.position.y = 1;
camera.position.z = 20;

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

Then, you can add objects creating a new mesh object and defining its geometry and material. Different materials have different textures and react to light differently. There are also different light options such as ambient, which illuminates all objects in the scene, or directional, which is set up like the camera with a position and direction. These new objects are then added to the scene context via the add method. Now you can render the scene using renderer.render() passing in the scene context object and the camera.

const geometry = new THREE.IcosahedronGeometry();
const material = new THREE.MeshPhongMaterial();
const ico = new THREE.Mesh(geometry, material);
const ambient = new THREE.AmbientLight(0x00FF00, 0.35);
const directional = new THREE.DirectionalLight( 0xffffff );
directional.position.set( 1, 1, 0.5 ).normalize();

scene.add( ico, directional, ambient );
renderer.render(scene, camera);

And there you have it, a 3D vector object rendered in the browser.

Sources

learnopengl.com

WebGL: 2D and 3D graphics for the web - Web APIs | MDN

WebGL (Web Graphics Library) is a JavaScript API for rendering high-performance interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins. WebGL does so by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML <canvas> elements. This conformance makes it possible for the API to take advantage of hardware graphics acceleration provided by the user's device.

developer.mozilla.org

mrdoob / three.js

JavaScript 3D Library.

three.js

JavaScript 3D library

The aim of the project is to create an easy-to-use, lightweight, cross-browser, general-purpose 3D library. The current builds only include a WebGL renderer but WebGPU (experimental), SVG and CSS3D renderers are also available as addons.

Examples — Docs — Manual — Wiki — Migrating — Questions — Forum — Discord

Usage

This code creates a scene, a camera, and a geometric cube, and it adds the cube to the scene. It then creates a WebGL renderer for the scene and camera, and it adds that viewport to the document.body element. Finally, it animates the cube within the scene for the camera.

import * as THREE from 'three';
const width = window.innerWidth, height = window.innerHeight;

// init

const camera = new THREE.PerspectiveCamera( 70, width / height, 0.01, 10 );
camera.position.

…

View on GitHub

khronos.org

threejs.org