If you want to use a fancy WebGL fluid simulation in your Angular App, this small demo can get you started.

You can see the component running in the background of the example app. Press p to toggle the pause, and press s to download a screenshot of the simulation. Press w to create more splashes.

You can find the live demo at: https://fluid-simulation.akehir.com.

If you just want to use the library, follow the following 3 simple steps. For contributing, or building the library locally, see the section on building the library.

Supported Angular Versions

Install the npm package.

npm i @triangular/fluid-simulation

Then, add the FluidSimulationModule to the imports of your app.

If you're using standalone components, you can skip this step.

import { FluidSimulationModule } from '@triangular/fluid-simulation';

@NgModule({
    declarations: [
      AppComponent,
      ...,
    ],
    imports: [
      ...,
      FluidSimulationModule.forRoot(),
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Now you can use the provided component to create a canvas element with the simulation.

<webgl-fluid-simulation></webgl-fluid-simulation>

Depending on whether you want to use certain features, or positions for the module, you can add styles as follows. It is important to note, that the canvas itself should not be absolutely positioned.

webgl-fluid-simulation {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  z-index: -1;
}

webgl-fluid-simulation canvas {
  width: 100%;
  height: 100%;
  /* the canvas position cannot be absolute, otherwise the js resize will bug out */
  position: fixed;
}

You can configure your module by using the FluidSimulationModule.forRoot() method.

@NgModule({
  declarations: [
    AppComponent,
    ExampleComponent,
  ],
    imports: [
      BrowserModule,
      FluidSimulationModule.forRoot({
        SCREENSHOT_KEY_CODE: 'KeyS',
        PAUSE_KEY_CODE: 'KeyP',
        SPLASH_KEY: 'w',
        DITHERING_TEXTURE: true,
        DITHERING_TEXTURE_URI: 'assets/LDR_LLL1_0.png',
      }),
    ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

In order to change the config interactively (for instance pausing and playing the simulation, or changing the settings) , you can use the provided service.

The service will be extended to include more functionality (for example triggering screenshots or adding splashes).

import { Component } from '@angular/core';
import { FluidSimulationService } from '@triangular/fluid-simulation';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css'],
})
export class ExampleComponent {

  constructor(private fluidSimulation: FluidSimulationService) { }

    onClick() {
      // Toggle the simulation
      this.fluidSimulation.PAUSED = !this.fluidSimulation.PAUSED;
    }
}

As a pre-requisite to build the library, you need to install all the dependencies via npm install or yarn.

Before the sample app can be run, you need to build the library itself.

npm run ng -- build fluid-simulation-lib --progress=false

After building the library, it is either possible to build the sample app, via

npm run ng -- build example-app --prod --progress=false

,or to run the sample app with a local dev server:

npm run ng -- serve

There are not many tests, but those that are can be run with:

npm run test -- --no-watch --progress=false --code-coverage --browsers ChromeHeadless

The project follows the angular style guide and lints with the following command:

npm run lint

• WebGL - 3D Graphics for the Web
• Angular - The web framework used
• NPM - Dependency Management
• Gitlab - Source Control & CI Runner

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

We use SemVer for versioning.

• Raphael Ochsenbein - Angular Part - Akehir
• Pavel Dobryakovn - JavaScript WebGL Fluid Simulation - PavelDoGreat

See also the list of contributors who participated in this project.

This project is licensed under the MIT License - see the LICENSE.md file for details

• Pavel Dobryakov for creating the original JavaScript WebGL Fluid Simulation
• angularindepth for a tutorial for creating an angular library
• PurpleBooth for the readme template