Three.js

A very useful JavaScript graphics library which uses WebGL build by Mr. Doob (Ricardo Cabello, Google).

• threejs.org

Getting Started

1. Install three using npm:

   npm i three

2. Import into your main JS script

   import * as THREE from 'three';
   // or const THREE = require('three');
   

You can import specific components from examples as follows:

import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
import {Stats} from 'three/examples/jsm/libs/stats.module.js';

Instancing

See instancing example.

There are two main ways of instancing in three.js:

• Using an InstancedMesh
• Merging geometries (since we don't have a geometry shader)

Shaders

See ShaderMaterial.

Color Spaces

By default, three.js works in Linear color space. This means that input colors are converted from SRGB to linear before rendering, most color calculations happen in linear color space, the final color is converted to SRGB for display.

1. THREE.Color values are converted from SRGB to Linear color space on CPU at https://github.com/mrdoob/three.js/blob/0af9729d0c143a86a1d725d6e2c3ad83301f3f34/src/math/Color.js#L211 2. Textures are converted from their source color space to linear. This is done by https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/unpackColorSpace. 3. When rendering directly to canvas or XR, shaders output in SRGB. When rendering to a rendertarget, shaders output in linear. See https://github.com/mrdoob/three.js/blob/e04b9f7bd7f5b17103339d343168bfab2d6e0ace/src/renderers/WebGLRenderer.js#L2198 for the CPU side and https://github.com/mrdoob/three.js/blob/e04b9f7bd7f5b17103339d343168bfab2d6e0ace/src/renderers/shaders/ShaderChunk/colorspace_fragment.glsl.js for the GPU side. 4. If using postprocessing, make sure to use an Output pass to convert the linear render target into SRGB.

See https://discourse.threejs.org/t/updates-to-color-management-in-three-js-r152/50791