
Product
Secure Your AI-Generated Code with Socket MCP
Socket MCP brings real-time security checks to AI-generated code, helping developers catch risky dependencies before they enter the codebase.
webgl-fluid-enhanced
Advanced tools
WebGL Fluid Simulation for modern webpages (works even on mobile)
[!IMPORTANT] The new documentation and playground can be found here.
npm install webgl-fluid-enhanced
webGLFluidEnhanced.config({
SIM_RESOLUTION: 128, // Resolution of the simulation grid
DYE_RESOLUTION: 1024, // Resolution of the dye grid
CAPTURE_RESOLUTION: 512, // Resolution of captured frames
DENSITY_DISSIPATION: 1, // Rate at which density dissipates
VELOCITY_DISSIPATION: 0.2, // Rate at which velocity dissipates
PRESSURE: 0.8, // Pressure value used in the simulation
PRESSURE_ITERATIONS: 20, // Number of pressure iterations
CURL: 30, // Curl value used in the simulation
INITIAL: true, // Enables splats on initial load
SPLAT_AMOUNT: 5, // Number of initial splats (Random number between n and n * 5)
SPLAT_RADIUS: 0.25, // Radius of the splats
SPLAT_FORCE: 6000, // Force applied by the splats
SPLAT_KEY: 'Space', // Keyboard key to spawn new splats (empty to disable)
SHADING: true, // Enables shading in the visualization
COLORFUL: true, // Enables rapid changing of colors
COLOR_UPDATE_SPEED: 10, // Speed of color update
COLOR_PALETTE: [], // Custom color palette (empty by default, uses hex colors)
HOVER: true, // Enables interaction on hover
BACK_COLOR: '#000000', // Background color of the canvas
TRANSPARENT: false, // Makes the canvas transparent if true
BRIGHTNESS: 0.5, // Color brightness (Recommend lower than 1.0 if BLOOM is true)
BLOOM: true, // Enables bloom effect
BLOOM_ITERATIONS: 8, // Number of bloom effect iterations
BLOOM_RESOLUTION: 256, // Resolution of the bloom effect
BLOOM_INTENSITY: 0.8, // Intensity of the bloom effect
BLOOM_THRESHOLD: 0.6, // Threshold for the bloom effect
BLOOM_SOFT_KNEE: 0.7, // Soft knee value for the bloom effect
SUNRAYS: true, // Enables sunrays effect
SUNRAYS_RESOLUTION: 196, // Resolution of the sunrays effect
SUNRAYS_WEIGHT: 1.0, // Weight of the sunrays effect
});
Initialise:
webGLFluidEnhanced.simulation(document.querySelector('canvas'), {
// Optional options
});
Edit config:
webGLFluidEnhanced.config({
// Options
});
Trigger splats:
webGLFluidEnhanced.splats();
Splat at specific coordinates:
// x and y are the coordinates in the HTML document where the splat should occur.
// They represent the position of the center of the splat.
webGLFluidEnhanced.splat(
x,
y,
// dx and dy represent the directional components of the splat's force.
// They determine the direction of the fluid movement caused by the splat.
// These values are best in the range from -1000 to 1000, with 0 representing no force.
dx,
dy,
// color is the color of the fluid added by the splat as a string in hexadecimal format.
// This parameter is optional. If not provided, colors from the palette or then a random color may be used.
color,
);
Pause/resume the simulation:
// drawWhilePaused is an optional boolean that determines whether it is possible to stil draw while the simulation is paused.
webGLFluidEnhanced.pause(drawWhilePaused);
Download a screenshot:
webGLFluidEnhanced.screenshot();
To set background image make sure the TRANSPARENT
option is set to true
, and in the CSS you can set background-image: url('<PHOTO-URL>');
and background-size: 100% 100%;
to fill the whole canvas.
When using the BACK_COLOR
option, the color you provided will be whitened when the BLOOM
option is set to true
.
<!doctype html>
<html>
<body>
<canvas style="width: 100vw; height: 100vh;"></canvas>
<script type="importmap">
{
"imports": {
"webgl-fluid-enhanced": "https://esm.run/webgl-fluid-enhanced@latest"
}
}
</script>
<script type="module">
import webGLFluidEnhanced from 'webgl-fluid-simulation';
webGLFluidEnhanced.simulation(document.querySelector('canvas'), {
COLOR_PALETTE: ['#cc211b', '#f1c593', '#e87e54', '#f193a7', '#ec6fa9'],
HOVER: false,
SPLAT_RADIUS: 0.1,
VELOCITY_DISSIPATION: 0.99,
BLOOM: false,
});
</script>
</body>
</html>
import { useEffect, useRef } from 'react';
import webGLFluidEnhanced from 'webgl-fluid-enhanced';
const App = () => {
const canvasRef = useRef(null);
useEffect(() => {
webGLFluidEnhanced.simulation(canvasRef.current, {
SIM_RESOLUTION: 256,
DENSITY_DISSIPATION: 0.8,
PRESSURE_ITERATIONS: 30,
COLOR_PALETTE: ['#61dafb', '#a8dadc', '#457b9d', '#1d3557', '#f1faee'],
});
}, []);
return <canvas ref={canvasRef} style={{ width: '100vw', height: '100vh' }} />;
};
export default App;
'use client';
import { useEffect, useRef } from 'react';
import webGLFluidEnhanced from 'webgl-fluid-enhanced';
const App = () => {
const canvasRef = useRef(null);
useEffect(() => {
webGLFluidEnhanced.simulation(canvasRef.current!, {
PRESSURE: 0.2,
SUNRAYS: false,
START_SPLATS: 10,
DENSITY_DISSIPATION: 3,
CURL: 100,
COLOR_PALETTE: ['#0000ff', '#111111', '#1d1d1d', '#eaeaea', '#4dba87'],
});
}, []);
return <canvas ref={canvasRef} className='h-screen w-screen' />;
};
export default App;
<!-- Not tested! -->
<template>
<canvas ref="canvas"></canvas>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import WebGLFluid from 'webgl-fluid'
const canvas = ref()
onMounted(() => {
webGLFluidEnhanced.simulation(canvas, {
SPLAT_RADIUS: 0.5,
COLOR_UPDATE_SPEED: 20,
BLOOM: false,
<>});
})
</script>
<style>
canvas {
width: 100vw;
height: 100vh;
}
</style>
// Not tested!
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import webGLFluidEnhanced from 'webgl-fluid-enhanced';
@Component({
selector: 'app-root',
template: `
<canvas #canvasRef style="width: 100vw; height: 100vh;"></canvas>
`,
})
export class AppComponent implements OnInit {
@ViewChild('canvasRef', { static: true }) canvasRef!: ElementRef;
ngOnInit(): void {
webGLFluidEnhanced.simulation(this.canvasRef.nativeElement, {
COLOR_PALETTE: ['#dd0031', '#c3002f', '#dd0031'],
START_SPLATS: 50,
TRANSPARENT: true,
});
}
}
<!-- Not tested! -->
<script>
import { onMount } from 'svelte';
let canvasRef;
onMount(() => {
import('webgl-fluid-enhanced').then(({ default: webGLFluidEnhanced }) => {
webGLFluidEnhanced.simulation(canvasRef, {
SIM_RESOLUTION: 256,
VELOCITY_DISSIPATION: 0.99,
COLOR_PALETTE: ['#ff7f00'],
});
});
});
</script>
<canvas bind:this={canvasRef} style="width: 100vw; height: 100vh;" />
Feel free to open an issue or a pull request! I'm always open to suggestions and improvements, and I have tried to make the development environment as good as possible with a descriptive file structure and TypeScript definitions.
https://github.com/PavelDoGreat/WebGL-Fluid-Simulation
https://github.com/mharrys/fluids-2d
https://github.com/haxiomic/GPU-Fluid-Experiments
The code is available under the MIT license
FAQs
WebGL Fluid Simulation for modern webpages (works even on mobile)
The npm package webgl-fluid-enhanced receives a total of 62 weekly downloads. As such, webgl-fluid-enhanced popularity was classified as not popular.
We found that webgl-fluid-enhanced demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket MCP brings real-time security checks to AI-generated code, helping developers catch risky dependencies before they enter the codebase.
Security News
As vulnerability data bottlenecks grow, the federal government is formally investigating NIST’s handling of the National Vulnerability Database.
Research
Security News
Socket’s Threat Research Team has uncovered 60 npm packages using post-install scripts to silently exfiltrate hostnames, IP addresses, DNS servers, and user directories to a Discord-controlled endpoint.