cloydlau / webgl-fluid Goto Github PK
View Code? Open in Web Editor NEWESM support for https://github.com/PavelDoGreat/WebGL-Fluid-Simulation.
Home Page: https://cloydlau.github.io/playground/webgl-fluid/
License: MIT License
ESM support for https://github.com/PavelDoGreat/WebGL-Fluid-Simulation.
Home Page: https://cloydlau.github.io/playground/webgl-fluid/
License: MIT License
Hi there, I really like what you've created! Would it be possible for you to also provide versions for React Three Fiber?
React Three Fiber
Amazing work here, it's absolutely mesmerizing.
But whenever I'm adding TRANSPARENT: TRUE
, it's not really transparent. See attached pictures:
useEffect(() => {
WebGLFluid(document.querySelector("canvas"), {
IMMEDIATE: false, // Whether to trigger multiple random splats when initialized
TRIGGER: "click", // Can be change to 'click'
SIM_RESOLUTION: 256,
DYE_RESOLUTION: 1024,
CAPTURE_RESOLUTION: 512,
DENSITY_DISSIPATION: 1.5,
VELOCITY_DISSIPATION: 2,
PRESSURE: 0.55,
PRESSURE_ITERATIONS: 20,
CURL: 1,
SPLAT_RADIUS: 0.05,
SPLAT_FORCE: 6000,
SHADING: true,
COLORFUL: false,
COLOR_UPDATE_SPEED: 10,
PAUSED: false,
BACK_COLOR: { r: 0, g: 0, b: 0 },
// TRANSPARENT: true,
BLOOM: true,
BLOOM_ITERATIONS: 8,
BLOOM_RESOLUTION: 256,
BLOOM_INTENSITY: 0.15,
BLOOM_THRESHOLD: 0.3,
BLOOM_SOFT_KNEE: 0.7,
SUNRAYS: true,
SUNRAYS_RESOLUTION: 196,
SUNRAYS_WEIGHT: 0.5,
})
}, [])
return (
<canvas
style={{
height: "100%",
width: "100%",
backgroundColor: "transparent",
// filter: "blur(15px)",
}}
/>
)
Right now a random amount of splats are created. It would be fairly easy to change the boolean to a number. Use the value as a multiplier.
WebGLFluid(document.querySelector('.canvas'), {
IMMEDIATE: 0 // Number of immediate splats
}
When I try to use it with nuxtjs, I get the error window is not defined.
add an html element of a higher stacking context above the canvas and try to get the canvas effect to work while hovering on the overlayed element.
the hover effect persists throught elements that are hovered above the canvas
the effect stops when hovering other elements overlayed above the canvas
-
None
I would like the fluids to move by themselves constantly.
And they were interactive on hovering the mouse too.
And is it possible to customize 2-3 colors for fluid? So that they are not generated randomly.
I didn't find it in the settings. Thank you!
Hi, thanks for creating this version with a mouseover trigger as default setting. I'm trying to get this to run on my server but I can't seem to figure it out. I download the files and put them in my server but the index just displays a blank page. What am I doing wrong? Thanks!!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.