
Molten Bismuth Shader - flockaroo
https://www.shadertoy.com/view/WdVXWy
======
pierrec
Since we don't get much Shadertoy content here, I'll point out that, while
this is really cool, there have been some much crazier fluid simulations on
Shadertoy.

The most insanely fast fluid sim I've seen there is the one by nimitz:
Chimera's Breath
[https://www.shadertoy.com/view/4tGfDW](https://www.shadertoy.com/view/4tGfDW)

And the most insanely _weird_ ones are hands down those by wyatt. They're
often conceptual intersections between fluid, particle and wave. It's gotten
so weird I have a hard time using words to describe them at this point. For
example:

Communication and Grouping -
[https://www.shadertoy.com/view/wtSSDm](https://www.shadertoy.com/view/wtSSDm)

Branching Paths -
[https://www.shadertoy.com/view/ts33DS](https://www.shadertoy.com/view/ts33DS)

Fluid Mosaic -
[https://www.shadertoy.com/view/MlVfDR](https://www.shadertoy.com/view/MlVfDR)

~~~
ricardobeat
If you think the first one looks cool, check this out:
[https://paveldogreat.github.io/WebGL-Fluid-
Simulation/](https://paveldogreat.github.io/WebGL-Fluid-Simulation/)

It is even more amazing on mobile with multi-touch, I think you can find it in
the app store.

~~~
BlueTemplar
Why no multi-touch on non-mobile ? :'(

~~~
ricardobeat
Well, it uses standard touch* events, so I guess it would work - did you try
it?

~~~
BlueTemplar
I did, doesn't work in Firefox on my Surface Pro 3.

------
haxiomic
This is extremely cool! Amazing work @flockaroo

The implementation very different from other fluid simulations I've seen,
copying the comments from the source:

    
    
        // single pass CFD - with some self consistency fixes
    
        // ...the actual fluid simulation
    
        // this is some "computational flockarooid dynamics" ;)
        // the self-advection is done purely rotational on all scales. 
        // therefore i dont need any divergence-free velocity field. 
        // with stochastic sampling i get the proper "mean values" of rotations 
        // over time for higher order scales.
        //
        // try changing "RotNum" for different accuracies of rotation calculation
        // for even RotNum uncomment the line #define SUPPORT_EVEN_ROTNUM

~~~
flockaroo
thanks :-)

------
andrewstuart
I've just launched RenderToy
[https://www.rendertoy.com](https://www.rendertoy.com) into beta, which
captures websites to animation/HD video. Let me know if you would like to join
the RenderToy beta, or subscribe to hear when we launch.

So if your hardware can't the view shader in the main link, here it is:

 __ __Molten Bismuth Shader

YouTube: [https://www.youtube.com/watch?v=9OE6IrV-
kMk](https://www.youtube.com/watch?v=9OE6IrV-kMk) MP4 download:
[https://zone000.previews.rendertoy.com/video/mp4/805fc41be0b...](https://zone000.previews.rendertoy.com/video/mp4/805fc41be0b24b66af86f409a970ce2c/h264.mp4)

~~~
reitzensteinm
I did something similar a while back, except it was ShaderToy specific and
batch rendered them one frame at a time at 4k (occasionally running in to the
5 second frame limit nVidia cripples its non pro cards with), which I then
downscaled in to 1080p 60fps.

Your renders seem pretty smooth but not perfect by my eye (which may be the
capture, the shaders or my playback hardware). Are you doing it in real time
with a beefy GPU, or using some kind of secret sauce to do general purpose
batch rendering?

[https://www.youtube.com/watch?v=8ErtbHTvRgo](https://www.youtube.com/watch?v=8ErtbHTvRgo)

[https://www.youtube.com/watch?v=o-D0N_7s0OQ](https://www.youtube.com/watch?v=o-D0N_7s0OQ)

[https://www.youtube.com/watch?v=7zjuA4zx8J8](https://www.youtube.com/watch?v=7zjuA4zx8J8)

~~~
andrewstuart
>> I did something similar a while back, except it was ShaderToy specific

RenderToy captures any website to video - let me know if you'd like to try it
out - I need beta testers.

>> Your renders seem pretty smooth but not perfect by my eye

Are you looking at the YouTube or the MP4 - the MP4 videos will be of higher
quality than the YouTube. YouTube videos have many factors out of my control
that might degrade the quality. RenderToy also outputs (very large) lossless
videos you can play with the downcompression yourself to optimise.

There's lots of factors when capturing/rendering video that can influence the
quality and lots of animation simply isn't very suitable to compression.
Optimal YouTube video comes from uploading the lossless video capture so
double compression is avoided but those files are around 500MB to 1GB
depending on factors.

>>Are you doing it in real time

Yes RenderToy is pretty close to real time - it has a real time preview mode
and a slightly slower high resolution capture mode.

~~~
reitzensteinm
By smooth I'm referring to a 60fps capture, rather than the compression
artifacts. I did download one of the videos to check. It looks very smooth for
real time, but not quite perfect.

~~~
andrewstuart
Do you think this looks any better?

[https://www.youtube.com/watch?v=Y041xO6Xdb8](https://www.youtube.com/watch?v=Y041xO6Xdb8)

I had a stern word to the hamsters at the back end who turn the wheels that do
the rendering and I told them to run faster.

------
singularity2001
I forgot that my deep learning box has a GPU which can actually do graphics;)

Wow so smooth and beautiful fullscreen, this effect should be everyone's new
homepage wallpaper.

These linear ruptures when dragging are border conditions of differential
equations?

There was a similar more colorful demo some months ago, someone has the link?

~~~
mrdoob2
FWIW runs at 30fps on a Pixel 3a :)

~~~
J_tt
60.7 fps on the Pixel 3

------
formalsystem
Shaders helped me understand how to program GPUs.

My favorite book on the topic is
[https://thebookofshaders.com/](https://thebookofshaders.com/) (free) and I'd
highly recommend you mess around with it

Blender and Unity also have a graphical language to do shaders which are
really fun to mess around with.

~~~
person_of_color
Is there anything out there that is more complete?

~~~
pjmlp
Plenty, depends if you want books,

[https://www.amazon.com/OpenGL-Shading-Language-Cookbook-
high...](https://www.amazon.com/OpenGL-Shading-Language-Cookbook-high-
quality/dp/1789342252)

[https://www.amazon.de/Graphics-Shaders-Practice-Michael-
Bail...](https://www.amazon.de/Graphics-Shaders-Practice-Michael-
Bailey/dp/1568813341)

[https://www.amazon.de/Real-Time-Rendering-Fourth-Tomas-
Akeni...](https://www.amazon.de/Real-Time-Rendering-Fourth-Tomas-Akenine-
Moller/dp/1138627003)

[https://www.amazon.de/Physically-Based-Rendering-Theory-
Impl...](https://www.amazon.de/Physically-Based-Rendering-Theory-
Implementation/dp/0128006455)

Or grab some online content instead,

[http://www.pbr-book.org/](http://www.pbr-book.org/)

[https://developer.nvidia.com/gpugems/GPUGems/gpugems_pref01....](https://developer.nvidia.com/gpugems/GPUGems/gpugems_pref01.html)

[https://developer.nvidia.com/gpugems/GPUGems2/gpugems2_insid...](https://developer.nvidia.com/gpugems/GPUGems2/gpugems2_inside_front_cover.html)

[https://developer.nvidia.com/gpugems/GPUGems3/gpugems3_pref0...](https://developer.nvidia.com/gpugems/GPUGems3/gpugems3_pref01.html)

[https://developer.download.nvidia.com/CgTutorial/cg_tutorial...](https://developer.download.nvidia.com/CgTutorial/cg_tutorial_frontmatter.html)

Naturally most of the stuff I linked to, doesn't use necessarily GLSL ES,
however it is relatively easy to translate the concepts and ideas into it,
given how most shading languages happen to be either a C or C++ based dialect.

~~~
person_of_color
Nice!

------
person_of_color
Programming shaders is like some black art, just like RF electronics.

~~~
basq
Seriously. I'd sell my soul to the devil to make stuff like that. Wish my
brain was big enough!!

------
weinzierl
I can't view it right now because of my old hardware. A YouTube search for _"
molten bismuth shader"_ turns up only _real_ molten bismuth videos. Has anyone
a link to a video?

~~~
CyanBird
Sadly cant record screen atm, but be sure to check it out when you get home,
it is quite the jewel

Edit: Im WRONG! You CAN record!

Here you go

[https://streamable.com/bnn16](https://streamable.com/bnn16)

~~~
weinzierl
Thanks!

------
voldacar
This is insane - how do people learn to program stuff like this?

~~~
Joe-Z
I attended a game development program at the college I went to and we had
pretty nifty computer graphics classes. Basically you learn how graphics work
on a computer first. There's a lot of tutorials out there and some pretty easy
to learn frameworks for graphics programming. From then on it depends on what
you want to achieve, but basically you'll have to learn and understand a lot
of physics and then translate that into code.

I don't know if this is even remotely the answer you were looking for. But if
you're interested in computer graphics give it a shot! It's super fun and a
good way to learn all kinds of new stuff.

EDIT: Just to not leave you without any references at all, here's a link to
openframeworks, which I used to implement my first exercises in CG:

[https://openframeworks.cc/download/](https://openframeworks.cc/download/)

------
tinus_hn
I like how there is a Shadertoy app for mobile which nicely shows off the
insane power of modern smart phones.

------
stevenhuang
Did something change in the source/environment?

I'm getting compilation failures on load:

    
    
        vec4 c=texelFetch(iChannel0,ivec2(0),0);
        'texelFetch' : no matching overloaded function found
        '=' : dimension mismatch

------
anon1253
If this was some meditative game of sorts (optionally multiplayer) on my phone
I would play it for ages (not sure about the mechanics yet, but I already
spend 5 minutes just fiddling with it in my browser). Truly mesmerizing, cool
stuff!

------
scoopr
For Safari users, try enabling Develop->Experimental Features->WebGL2

------
ryanackley
Very cool site but it's very slow.

I get around 2 fps on that shader. Less on others. I have a GTX 1660.
Definitely not top of the line but it's in the latest generation of video
cards.

~~~
monocasa
I get 18 fps on my Google Pixel.

~~~
slavik81
I get a consistent 25-27fps on my Google Pixel.

------
lbj
I got 80fps in Opera. Is this navier+stokes+surface tension?

~~~
flockaroo
well, actually its a self advection based on rotations only (and therefore
automatically divergence free). so there's actually no explicit navier stokes
equations or pressure/tension physics involved (implicitly one could argue
though...).

------
choeger
Does not seem to work on my Firefox mobile. High fps but static images.

~~~
mintplant
Works well for me in Firefox Preview on Android (the rewrite that will
eventually replace standard Firefox for Android, which I think is in
maintenance-mode now).

------
pjmlp
Not bad, getting 15FPS on mobile.

------
jakeogh
Offtopic: Are we going to get these cookie warnings until the end of time?

~~~
xwdv
Unlikely, eventually people will stop putting them up when it’s widely
believed the laws have no teeth.

~~~
saagarjha
Or when they stop actually using tracking cookies.

~~~
CamperBob2
You're supposed to issue the warning even if you don't use tracking cookies,
aren't you? My understanding is that any persistent storage at all is enough
to trigger the requirement.

~~~
antoineMoPa
I've read that if cookies are stickly required for your app to work (e.g.
keeping a login session), there is no need for the popup (Until you start
adding tracking).

~~~
saagarjha
Right. Many people who put up those notices don’t need them, and in doing so
unfortunately sour public perception for the law. It’s actually not as
stupidly written as people think it is.

