three.phenomenon
v1.2.0
Published
A tiny wrapper around three.js built for high-performance WebGL experiences.
Downloads
520
Readme
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