A Meta ball concept visualizer made entirely in JavaScript. With GPU acceleration.
This is just a playground, I personally like to watch it in action, really cool effects.
Initially the project was created entirely using the Web Canvas API. However due to performance issues, even after using buffers aligned with image data for processing the Canvas's pixels, the project was converted to use the WebGL API, you can compare the two versions using the interface.
For each and every pixel in the canvas, sum the radius over the distance from the pixel to the center of the meta ball for every meta ball in the scene. Divide it by 255 and apply as the color for the pixel.
As meta balls approach each other, the color of the pixel will be more and more significant.
| Name | Description |
|---|---|
| Babel / Babelify | For cross-browser compatibility, compiles JS into retro-compatible JS |
| Eslint | For linting and semantic analysis |
| Browserify | For bundling JS files |
| Sass | Superset of CSS |
| Gulp | For building tooling |
| Pure HTML5 Canvas API | For graphics |
| WebGL API | For GPU accelerated graphics |
| Github actions | For CI, building and deploying to github pages |
yarn installto install dependenciesyarn buildto build sourcesyarn startto start the server- Or open the
index.htmlfile at/dist/index.html
- Or open the
For dev environment, you can use gulp dev to run the server and live reload on changes.