metaballs-js
Features
- Create animated metaballs in all numbers, colors, sizes, velocities.
- Light-weight: Written in plain WebGL without any other dependencies.
- Performant: Makes use of GPU hardware acceleration. The performance solely depends on the number of metaballs.
Install
npm install --save metaballs-jsUsage
import initMetaballs from "metaballs-js"; const options = numMetaballs: 100 minRadius: 3 maxRadius: 75 speed: 100 color: '#ff0024' backgroundColor: '#121212' useDevicePixelRatio: true const cssSelector = '#canvasId' // in your HTML<html> <body> <canvas ="canvasId"></canvas> </body></html>Options
| Name | Description | Type | Default Value |
|---|---|---|---|
| numMetaballs | The number of metaballs to display | Number | 100 |
| minRadius | minimum radius of a metaball | Number | 3 |
| maxRadius | maximum radius of a metaball | Number | 7.5 |
| speed | maximum speed of a metaball | Number | 10.0 |
| color | color of the metaballs | String | '#ff0024' |
| backgroundColor | The background color of the canvas | String | '#121212' |
| interactive | Create a metaball at cursor position listening to mouse move events. Valid values are window or canvas |
String or Boolean | false |
| useDevicePixelRatio | Use more pixels matching the device pixel ratio | Boolean | true |
Limitations
Metaballs-js currently uses uniforms to send the metaball positions to the GPU / shaders. There are specific device restrictions on the max number of uniforms, i.e., also on the max number of metaballs one can render at a time. If this happens you will see the following error thrown:
Shader compile failed with: ERROR: too many uniforms
This is especially problematic on mobile phones.
Resources
- The code is largely based on Jamie Wong's excellent tutorial
- Jamie Wong explaining the math
License
MIT © MrToph