THREE.Phenomenon

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).

Features:

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

Install

$ npm install --save three.phenomenon

Usage

// Import the library
import Phenomenon from 'three.phenomenon';
 
// Create an instance
Phenomenon({ ... });

The wrapper is also available through THREE.Phenomenon.

API

Phenomenon(options)

Returns an instance of Phenomenon.

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

options.attributes

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.

options.uniforms

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.

options.vertex

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.

options.fragment

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.

options.geometry

Type: THREE.Geometry

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

options.material

Type: THREE.Material

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

options.multiplier

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

options.castShadow

Type: Boolean
Should the mesh cast a shadow?

Contribute

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

License

MIT © Colin van Eenige