Frameworks & Libraries

All examples below are passing a div element to the optional container prop in the constructor. This is not required

The element passed must have a width and height set for it to be visible

HTML

index.html

<!doctype html>
<html>
  <body>
    <div style="width: 100vw; height: 100vh;"></div>
    <script type="importmap">
      {
        "imports": {
          "webgl-fluid-enhanced": "https://esm.run/webgl-fluid-enhanced@latest"
        }
      }
    </script>
    <script type="module">
      import WebGLFluidEnhanced from 'webgl-fluid-simulation';
 
      const simulation = new WebGLFluidEnhanced(containerRef.current);
      simulation.start();
 
      window.addEventListener('beforeunload', () => {
        simulation.stop();
      });
    </script>
  </body>
</html>

React

Simulation.tsx

import { useEffect, useRef } from 'react';
import WebGLFluidEnhanced from 'webgl-fluid-enhanced';
 
function Simulation() {
  const containerRef = useRef(null);
 
  useEffect(() => {
    const simulation = new WebGLFluidEnhanced(containerRef.current);
    simulation.start();
 
    return () => {
      simulation.stop();
    };
  }, []);
 
  return <div ref={containerRef} style={{ width: '100vw', height: '100vh' }} />;
}
 
export { Simulation };

When using Next.js make sure to include 'use client'; at the top of the file

Vue 2

Simulation.vue

<template>
  <div ref="container" style="width: 100vw; height: 100vh;"></div>
</template>
 
<script>
import WebGLFluidEnhanced from 'webgl-fluid-enhanced';
 
const Simulation = {
  name: 'Simulation',
  mounted() {
    this.simulation = new WebGLFluidEnhanced(this.$refs.container);
    this.simulation.start();
  },
  beforeDestroy() {
    this.simulation.stop();
  },
};
 
export { Simulation };
</script>

Vue 3

Simulation.vue

<template>
  <div ref="container" style="width: 100vw; height: 100vh"></div>
</template>
 
<script setup>
import { onMounted, onBeforeUnmount, ref } from 'vue';
import WebGLFluidEnhanced from 'webgl-fluid-enhanced';
 
const container = ref(null);
let simulation = null;
 
onMounted(() => {
  simulation = new WebGLFluidEnhanced(container.value);
  simulation.start();
});
 
onBeforeUnmount(() => {
  if (simulation) simulation.stop();
});
</script>

Angular

simulation.component.ts

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import WebGLFluidEnhanced from 'webgl-fluid-enhanced';
 
@Component({
  selector: 'app-simulation',
  template: `<div #container style="width: 100vw; height: 100vh;"></div>`,
})
class SimulationComponent implements OnInit {
  @ViewChild('container') container: ElementRef;
  simulation: WebGLFluidEnhanced;
 
  ngOnInit() {
    this.simulation = new WebGLFluidEnhanced(this.container.nativeElement);
    this.simulation.start();
  }
 
  ngOnDestroy() {
    this.simulation.stop();
  }
}
 
export { SimulationComponent };

Svelte

Simulation.svelte

<script>
  import { onMount, onDestroy } from 'svelte';
  import WebGLFluidEnhanced from 'webgl-fluid-enhanced';
 
  let container: HTMLDivElement;
  let simulation: WebGLFluidEnhanced;
 
  onMount(() => {
    simulation = new WebGLFluidEnhanced(container);
    simulation.start();
  });
 
  onDestroy(() => {
    simulation.stop();
  });
</script>
 
<div bind:this={container} style="width: 100vw; height: 100vh;"></div>

Solid