paveldogreat / webgl-fluid-simulation Goto Github PK

If people are messing with making this work with three.js. I did too.
Then someone showed me this link:
https://codepen.io/PavelDoGreat/pen/zdWzEL

Thanks Pavel.

Hello Pavel,
and thanks for this beautiful script that made alot of people play around with.
Recently this html/java script has been converted to a iphone wallpaper because it's alot of fun to play around with.

Forgive me as these are not really issueses with your code, but rather issueses from us trying to understand the code and altering it, to make it a even better wallpaper, and failing to do so.

Im trying to get the code to drop the fluid effects at random times, where we can select the min and max values, and trying to get the code to make us able to select fade ins, and the speed of the effects. What would be the best, if the effects would pop in from outside the canvas/the screen. sometimes.

If you could help us, it would be great! Many people are using your code as their iphone wallpapers now already.

Thanks alot!

Thank you for this great animation! Absolutely amazing!
I like to use this for our website background.

https://www.zahmundzornig.de/zuz

I change some issue for our needs. Her is one thing I can´t solve on desktop view: Actually the animation starts with a mouse click (mousedown). But I like to start the animation one mousemove. The animation should be start directly after loading only with mouse moving. Any ideas?
Thank you!

mobile version is not free why?

Amazing work!

Would someone already being working in an option where we have a mock mouse moving? so we don't need keep clicking on it and could leave this running in a TV?

hi pavel
i was first introduce your webgl in reddit link
and it's my pleasure to port it to vscode extension too.
thanks for your work...
vscode ext.

Is it possible to use this code as a background/backdrop for a website?

Error while running on chrome desktop

the demo runs on all other browser but not on desktop chrome. It even runs on chrome mobile.
But works fine when i pause.

this is the screenshot of the error

Is it possible to add a picture to the background of this? If so could someone help me do so. I don't know much code and I'm currently using this with lively wallpaper

There is a mouse for recording gif on the computer using the screen recording software. If you can record gif automatically, it will be welcome.

Wonderful simulation it is!
Normally, the density resolution is higher than velocity resolution, and I find that different velocity resolutions will give quite different simulation results.
Would you please give me some ideas about the reason behind this strange phenomena？
Thanks a lot！

How do I use it in unity?Can you give me some ideas!thanks!!!0.0

怎么在hexo 上面播放

HI,

Love what you have done with this !
I would love if it could dance to music and use a projector on the wall for this beautiful display, with same settings and maybe a random setting pattern with a timer.
Not a coder myself unfortunately...

thanks for the beautiful simulation !

I tried the below and it turns the screen black. I've made it work so that it stays permanent after first click. How can i make it permanent from the beginning?

this line, move it to the bottom of a function and change it to pointer.moved = Math.abs(pointer.deltaX) > 0 || Math.abs(pointer.deltaY) > 0;

You will need to change this function:

function updatePointerMoveData (pointer, posX, posY) {
pointer.moved = pointer.down;
pointer.prevTexcoordX = pointer.texcoordX;
pointer.prevTexcoordY = pointer.texcoordY;
pointer.texcoordX = posX / canvas.width;
pointer.texcoordY = 1.0 - posY / canvas.height;
pointer.deltaX = correctDeltaX(pointer.texcoordX - pointer.prevTexcoordX);
pointer.deltaY = correctDeltaY(pointer.texcoordY - pointer.prevTexcoordY);
}

to this:

function updatePointerMoveData (pointer, posX, posY) {
pointer.prevTexcoordX = pointer.texcoordX;
pointer.prevTexcoordY = pointer.texcoordY;
pointer.texcoordX = posX / canvas.width;
pointer.texcoordY = 1.0 - posY / canvas.height;
pointer.deltaX = correctDeltaX(pointer.texcoordX - pointer.prevTexcoordX);
pointer.deltaY = correctDeltaY(pointer.texcoordY - pointer.prevTexcoordY);
pointer.moved = Math.abs(pointer.deltaX) > 0 || Math.abs(pointer.deltaY) > 0;
}

Here's my code:
script.txt

我看了看下面的参考文档，个人目前水平只能用现成demo了，涉及到的数学知识自我感觉有点太难，大学时的高等数学知识忘了太多了

Hey there! That's an amazing WebGL simulation, congratz!

I'm using this simulation in a Webflow project and it's working, however, I would like to change the black background to transparent. Is there a piece of code that I can use to make the background transparent?

Thanks in advance.

Hello,

Wanted to bring to your attention that the simulation isn't working as intended on Safari in MacOS. For some reason, the fluids are just draws as "lines", and not actual fluid. You can look at it on the demo as well.

Live test link: https://helloshivam-2020.netlify.com

Any fix for it would be great!

I want to be able to show the colors in black and white for a project

Love the app!

Would however love if there were more keyboard shortcuts for all the controls and would be great if you could see what shortcuts are available.

Hi Pavel!

If I only want the effect for example in different blue tones (but only the blue ones, not red, pink, yellow...), what shall I do to get it? I can't find the way to do this in the code...

Great work, mate. Thanks!

You can currently continue creating splats while the program is paused

Whenever I allow the wallpaper to use my mouse to draw the fluid animations with its movement, I am unable to use the left click button efficiently (if at all). This isn't an issue when I turn off the wallpaper input option. Am I even able to use my desktop with the function on, or is this unavailable by default when using this mode?

The simulation works great on my phone but is way to fast on a gtx1080 without vsync.

I am in the video encoding industry and I use a Raspberry Pi as a make-shift video test signal.

I usually like to use pre-encoded test videos, and just loop them out the HDMI. However, when I use it to re-encode, I don't get large enough bitrates because the video feed was already encoded (even though the HDMI signal is raw RGB).

I'd like to look for a scene that I could use that doesn't involve encoding at all so that I can test encoding for large bitrates. I would like to use a scene like your project here.

However, the performance of a Raspberry Pi won't let me use a browser. I'd need something lower level, meaning OpenGL.

Maybe you could help me? Maybe you know of another scene that I could use that uses OpenGL?

Great demo, love this effect... But there seem to be a problem with multitouch. On Chrome it seems to work fine, but on Firefox the effect is almost not working at all -- there is just a colourful blob, but no diffusion effect.

I'm not quite sure if this is a browser or driver problem or something in scripts.

Browser: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:67.0) Gecko/20100101 Firefox/67.0.
Same effect on Android also on FF 67.

Multi touch on FF67 (not seeing desired effect)

Single touch (looks as I expected)

Hello,

I put the animation on the background of my site, but in terms of optimization Google does not like it at all. Is there a solution to optimize this animation to have the best pagespeed possible?

thanks

I would like to have a fixed color for the splat, How would this be possible within the current version

Your experiment is amazing, congratulations !!

I am using as a background of my personal page, the source code is available at https://github.com/nidorx/alexrodin.info.

Thanks for sharing.

Is there a way to listen to the whole document instead of just canvas? I want the effect to continue over other elements as well, while maintaining their mouse events. Changing canvas to document or window creates a duplicate effect on the canvas.

document.addEventListener('mousedown', e => {
let posX = scaleByPixelRatio(e.offsetX);
let posY = scaleByPixelRatio(e.offsetY);
let pointer = pointers.find(p => p.id == -1);
if (pointer == null)
    pointer = new pointerPrototype();
updatePointerDownData(pointer, -1, posX, posY);
});

document.addEventListener('mousemove', e => {
let pointer = pointers[0];
if (pointer.down) return;
let posX = scaleByPixelRatio(e.offsetX);
let posY = scaleByPixelRatio(e.offsetY);
updatePointerMoveData(pointer, posX, posY);
});

You should add an option to choose how many random splats appear and how often they do. For example: every "x" seconds do "x" number of splats. Or even the possibility do to it in a range. For example: every "x" seconds do "x to y" numbers of splats.

Would it be possible to add a background image that's warped by the shader? To simulate waves through an image instead of just over top of it?

I've started by modifying it as mentioned in #14 but obviously that just applies a static background-image.

Google Chrome 83.0.4103.61 x64

When loading the demo page ( others as well ):

just show like above for one or two second, and then go dark.
Mouse Click cannot light it then.

Console info:

[.WebGL-00000278FED10820] GL_INVALID_OPERATION: Feedback loop formed between Framebuffer and active Texture.
* 256 times
WebGL: too many errors, no more errors will be reported to the console for this context.

• It has worked perfectly until today.
• Another computer ( call it PC1 ) can run normally ( Chrome 81 )
• When PC1's Chrome update to 83, same problem occurred.

So I guess the problem is Chrome's new version.

Can black be made pure black when turning on HDR setting in Windows 10?

Hello,

thanks for this beautiful piece of code O_O
I'd like to use it for a project, the idea would be to start with "paused" status then to remove it. I'd like to remove it when a defined amount of pressure has been done. Is there a var that i can listen/watch to in order to achieve this?
Thanks for your help

Bernard

Well the title already says it all i think but i mean like what do i have to Change for it to permanently draw if you hover over the site?

LG Snow

Hi, this is not a real issue but I just wanted to know if it is possible to get instructions on how to remove the customization bar on the right side and just add this as a background for a website? (I am a beginner to web development)
Any help is appreciated, thanks.

Constant very heavy battery drain caused by random ripple confirmed, which resets with every update just so your aware. It must be running in the background somehow, I know it’s not visually showing so less drain than when display is on but I’m 100% sure with that off the battery stops draining with screen off and vice versa.

Is it possible to use a picture as the background instead of a solid color? If it is, how can I do it?

Hi, I'm using a Iframe on wordpress with this, but getting wierd bugs on scroll.
Only Chrome is giving me this error:

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/6662647093133312

Any suggestions?