cloydlau / webgl-fluid Goto Github PK

Before you start, please make sure to:

• Read the doc
• Have tried the latest version
• Search to see if your issue already exists
• Look for / ask questions on Stack Overflow
• Reproduce the bug in incognito/private mode to avoid interference from browser extensions

Link to minimal reproduction

Steps to reproduce

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.

What is expected?

the hover effect persists throught elements that are hovered above the canvas

What is actually happening?

the effect stops when hovering other elements overlayed above the canvas

System Info

-

Package Manager

None

Any additional comments?

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!!

Before you start, please make sure to:

• Read the doc
• Have tried the latest version
• Search to see if your issue already exists
• Look for / ask questions on Stack Overflow

What problem does this feature solve?

Hi there, I really like what you've created! Would it be possible for you to also provide versions for React Three Fiber?

What does the proposed API look like?

React Three Fiber

When I try to use it with nuxtjs, I get the error window is not defined.

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)",
            }}
        />
    )

Before you start, please make sure to:

• Read the doc
• Have tried the latest version
• Search to see if your issue already exists
• Look for / ask questions on Stack Overflow

What problem does this feature solve?

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.

What does the proposed API look like?

WebGLFluid(document.querySelector('.canvas'), {
    IMMEDIATE: 0 //  Number of immediate splats
    }

Before you start, please make sure to:

• Read the document
• Have tried the latest version
• Search to see if your proposal already exists
• Look for / ask questions through appropriate channels like Stack Overflow

What problem does this feature solve?

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.

What does the proposed API look like?

I didn't find it in the settings. Thank you!