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
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.
…
Top comments (0)