Angular WebGL Fluid Simulation Component

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.

Demo

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

Getting Started

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
| Angular Version | WebGL Fluid Simulation V |
| --------------- | ------------------------- |
| 7.x, 8.x | 1.0.1 |
| 9.x | ^2.0.0 |
| 10.x | ^3.0.0 |
| 11.x | ^4.0.0 |
| 12.x | ^5.0.0 |
| 13.x | ^6.0.0 |
| 14.x | ^7.0.0 |
| 15.x | ^8.0.0 |
| 16.x | ^9.0.0 |
| 17.x | ^10.0.0 |
| 18.x | ^11.0.0 |
| 19.x | ^12.0.0 |
| 20.x | ^20.0.0 |
| 21.x | ^21.0.0 |

$3

Install the npm package.

``
npm i @triangular/fluid-simulation
`

$3

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

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

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

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

$3


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

`

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.

`css
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.

`typescript
@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).

`typescript
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;
}
}
`

Building


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

$3

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

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

$3

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
`

Running the tests

$3

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

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

$3

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

`
npm run lint
``

Built With

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

Contributing

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

Versioning

We use SemVer for versioning.

Authors

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

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

License

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

Acknowledgments

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