Skip to content
⭐️ A tiny wrapper around three.js built for high-performance WebGL experiences.
TypeScript
Branch: master
Clone or download
Latest commit de6f28a May 21, 2019
Permalink
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
README.md Switch to TypeScript! May 21, 2019
package.json Update dependencies. May 21, 2019

README.md

THREE.Phenomenon

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

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

You can’t perform that action at this time.