ES Module support for WebGL-Fluid-Simulation.
🕹 Playground
)
- Hover to activate by default, can also be Click
- Background image
- Control whether to trigger multiple random splats initially
npm i webgl-fluid<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<canvas style="width: 100vw; height: 100vh;" />
<script type="importmap">
{
"imports": {
"webgl-fluid": "https://cdn.jsdelivr.net/npm/[email protected]/dist/webgl-fluid.mjs"
}
}
</script>
<script type="module">
import WebGLFluid from 'webgl-fluid'
WebGLFluid(document.querySelector('canvas'), {
// options
})
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<canvas style="width: 100vw; height: 100vh;" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
WebGLFluid(document.querySelector('canvas'), {
// options
})
</script>
</body>
</html>WebGLFluid(document.querySelector('canvas'), {
IMMEDIATE: true, // Whether to trigger multiple random splats when initialized
TRIGGER: 'hover', // Can be change to 'click'
SIM_RESOLUTION: 128,
DYE_RESOLUTION: 1024,
CAPTURE_RESOLUTION: 512,
DENSITY_DISSIPATION: 1,
VELOCITY_DISSIPATION: 0.3,
PRESSURE: 0.8,
PRESSURE_ITERATIONS: 20,
CURL: 30,
SPLAT_RADIUS: 0.35,
SPLAT_FORCE: 6000,
SHADING: true,
COLORFUL: true,
COLOR_UPDATE_SPEED: 10,
PAUSED: false,
BACK_COLOR: { r: 0, g: 0, b: 0 },
TRANSPARENT: false,
BLOOM: true,
BLOOM_ITERATIONS: 8,
BLOOM_RESOLUTION: 256,
BLOOM_INTENSITY: 0.8,
BLOOM_THRESHOLD: 0.6,
BLOOM_SOFT_KNEE: 0.7,
SUNRAYS: true,
SUNRAYS_RESOLUTION: 196,
SUNRAYS_WEIGHT: 1.0,
})Background color will be whitened by 13 on each RGB color values when options.BLOOM is true.
Set it to false to get pure color.
CSS
canvas {
width: 100vw;
height: 100vh;
background-image: url("xxx.png");
background-size: 100% 100%;
}JS
WebGLFluid(document.querySelector('canvas'), {
TRANSPARENT: true
})<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<canvas style="width: 100vw; height: 100vh;" />
<script src="src/index.js"></script>
</body>
</html>// src/index.js
import WebGLFluid from 'webgl-fluid'
WebGLFluid(document.querySelector('canvas'), {
// options
})<template>
<canvas ref="canvas" />
</template>
<script setup>
import { onMounted, ref } from 'vue'
import WebGLFluid from 'webgl-fluid'
const canvas = ref()
onMounted(() => {
WebGLFluid(canvas.value)
})
</script>
<style>
canvas {
width: 100vw;
height: 100vh;
}
</style><template>
<canvas ref="canvas" />
</template>
<script>
import WebGLFluid from 'webgl-fluid'
export default {
mounted() {
WebGLFluid(this.$refs.canvas)
}
}
</script>
<style>
canvas {
width: 100vw;
height: 100vh;
}
</style>Detailed changes for each release are documented in the release notes.