Quick Start

Introduction

I wanted to incorporate Pavel Dobryakov's WebGL Fluid Simulation into my personal website, but the original project did not provide the tools for it. Hence, I decided to enhance the original project by:

• Introducing new cool features
• Adding ES Module support
• Providing a minified build for optimized performance
• Eliminating unnecessary boilerplate UI
• Restructuring the code into classes and enforcing strict TypeScript rules for an improved developer experience

Installation

Scaffold a website with your chosen framework (Next.js, Angular, Vue, etc.).

Install the package from the npm registry using your package manager of choice.

npm install webgl-fluid-enhanced

For a simple HTML website you can load the script directly.

Initialization

To initialize the WebGL Fluid Simulation, import the WebGLFluidEnhanced class and create a new instance.

import WebGLFluidEnhanced from 'webgl-fluid-enhanced';
 
const simulation = new WebGLFluidEnhanced();

You can pass an optional container element to the constructor to render the simulation inside it:

const container = document.querySelector('div');
 
const simulation = new WebGLFluidEnhanced(container);

If not provided, the simulation will be rendered in the body element.

Start & Stop

To start the simulation, call the start method on the instance.

simulation.start();

And to stop the simulation, call the stop method.

simulation.stop();

FAQ

Some common questions you may encounter.