https://github.com/vaneenige/three.phenomenon
⭐️ A tiny wrapper around three.js built for high-performance WebGL experiences.
https://github.com/vaneenige/three.phenomenon
instances particles shader threejs webgl wrapper
Last synced: 6 months ago
JSON representation
⭐️ A tiny wrapper around three.js built for high-performance WebGL experiences.
- Host: GitHub
- URL: https://github.com/vaneenige/three.phenomenon
- Owner: vaneenige
- License: mit
- Created: 2019-01-28T21:09:20.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-05-21T16:37:50.000Z (over 6 years ago)
- Last Synced: 2025-03-29T15:05:22.339Z (6 months ago)
- Topics: instances, particles, shader, threejs, webgl, wrapper
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/three.phenomenon
- Size: 18.6 KB
- Stars: 358
- Watchers: 14
- Forks: 12
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# THREE.Phenomenon
[](https://www.npmjs.com/package/three.phenomenon)
[](https://unpkg.com/three.phenomenon)
[](https://github.com/vaneenige/three.phenomenon/blob/master/LICENSE)
[](https://github.com/mrdoob/three.js/)
[](https://www.typescriptlang.org/)
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
```js
// 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