Skip to content
⭐️ A tiny wrapper around three.js built for high-performance WebGL experiences.
Branch: master
Clone or download
Latest commit de6f28a May 21, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo Update dependencies. May 21, 2019
src Switch to TypeScript! May 21, 2019
.editorconfig Switch to TypeScript! May 21, 2019
.gitignore Update dependencies. May 21, 2019
.npmrc Switch to TypeScript! May 21, 2019
LICENSE Initial commit! Jan 28, 2019 Switch to TypeScript! May 21, 2019
package.json Update dependencies. May 21, 2019


npm version gzip size license dependencies TypeScript

THREE.Phenomenon is a tiny wrapper around three.js built for high-performance WebGL experiences.

With it's simple API a mesh can be created that contains multiple instances of a geometry combined with a material. With access to the vertex shader, attributes per instance and uniforms this mesh can be transformed in any way possible (and on the GPU).


  • Below 1kb in size (gzip)
  • Custom instanced geometries
  • Attributes for every instance
  • Support for default materials
  • Compatible with three.js r104


$ npm install --save three.phenomenon


// Import the library
import Phenomenon from 'three.phenomenon';

// Create an instance
Phenomenon({ ... });

The wrapper is also available through THREE.Phenomenon.



Returns an instance of Phenomenon.

The instance provides access to the mesh (with the compiled vertex and fragment shader) and uniforms.


Type: Array

Values used in the program that are stored once, directly on the GPU. Every item in this array needs to have a:

  • name for referencing data in the vertex shader.
  • data function to create the data for each instance.
  • size so it's clear what comes back from the data.

The data function receives the index of the current instance and the total number of instances so calculations can be done based on these values.


Type: Object

Variables used in the program that can be adjusted on the fly. These are accessible through the instance variable and can be updated directly.


Type: String

The vertex shader of the program which will calculate the position of every instance. This will automatically get merged with the shaders that's created based on the provided geometry.


Type: Array

The fragment parameter is optional and can be used to modify specific parts of the provided material's fragment shader. For example: Give every instance a unique color or manually use its position for calculations.


Type: THREE.Geometry

The geometry that will be multiplied. See Geometry for more information.


Type: THREE.Material

The material that is used for the geometry. See Material for more information.


Type: Number
The amount of instances that will be created.


Type: Boolean
Should the mesh cast a shadow?


Are you excited about this library and have interesting ideas on how to improve it? Please tell me or contribute directly!

npm install > npm start > http://localhost:8080


MIT © Colin van Eenige

You can’t perform that action at this time.