HN Explorer

75 comments

[ 3.0 ms ] story [ 131 ms ] thread
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.

gpderetta
Are you sure it is running accelerated? I'm getting around 2 fps on my crappy almost 10 year old embedded intel gpu in full screen.

I get 18fps windowed.

It is beautiful btw.

garaetjjte
That's definitely some WebGL/browser issue. I have stable 60 fps windowed. (on RX580)
gimmeThaBeet
Something seems funky there. I have a 970 (2014), I'm getting every bit of 60fps in chrome and FF. Doesn't sound like it's being accelerated.
blondin
yep. same. i get 60fps on my old razer stealth with an intel integrated gfx chip.
monocasa
I get 18 fps on my Google Pixel.
slavik81
I get a consistent 25-27fps on my Google Pixel.
dvh
40-50 fps on Intel(R) Celeron(R) CPU J3455 @ 1.50GHz with integrated graphics card
BubRoss
I get a solid 60fps on my phone. The resolution in portrait mode is 760 x 260. It could be due to your monitor resolution, webgl settings, lack of acceleration or some other bottleneck.
[dead] Chris_Chambers
What? How did you get it to work on mobile? I just see a black rectangle. This has been my only experience with shadertoy links on iOS for years across various different iOS devices.
Darkstack
Got 144FPS on my 1060 6GB (Firefox).
diggan
Well, I'm on a laptop (Carbon X1) with IntelHD Graphics 620 and Firefox 70 on Ubuntu and getting 30 FPS with some 35-ish peaks, so probably something is wrong on your end.
newnewpdro
That's what I see in firefox with hardware acceleration disabled.
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...).
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?
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
[deleted]
(comment deleted)
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
pjmlp
Not bad, getting 15FPS on mobile.
[dead] Chris_Chambers
What? How did you get it to work on mobile? I just see a black rectangle. This has been my only experience with shadertoy links on iOS for years, across various different iOS devices.
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

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

Branching Paths - https://www.shadertoy.com/view/ts33DS

Fluid Mosaic - https://www.shadertoy.com/view/MlVfDR

twic
The wyatt ones look extremely biological to me. Communication and Grouping is slime mold aggregation seen through a phase or differential interference contrast microscope. Branching Paths is some sort of slime mold or fungus colony growth. Fluid Mosaic is epithelial morphogenesis.
ricardobeat
If you think the first one looks cool, check this out: 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.

Sendotsh
That’s completely and utterly mesmerising. So cool.
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.
dEnigma
While I was playing with it I wondered whether I could somehow make it into a line wallpaper, but then I discovered that there is an app version in the Play Store that has that exact feature.
kristiandupont
>we don't get much Shadertoy content here

That makes me curious: where would I go for more? /r/shadertoy is invite-only, and I'm not sure it's what I want?

EDIT: there's a Twitter feed: https://twitter.com/shadertoy

kibwen
I've been on a cosmic horror kick recently and those latter ones feel unsettlingly relevant.
kleer001
You too?

I've got Prince of Darkness, The Void, Mandy, and the soon to come Color out of Space on my watch list. I'm pretty sure I've seen most of the rest high quality stuff. Annihilation, etc...

k_sze
Some of the examples in this thread load up as empty for me. e.g. the Fluid Mosaic one. Anybody knows why?
k_sze
Answering my own question: tracking protection breaks some of the examples because some of them try to pull scripts from, e.g. SoundCloud.
tinus_hn
I like how there is a Shadertoy app for mobile which nicely shows off the insane power of modern smart phones.
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).
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.
phkahler
>> My understanding is that any persistent storage at all is enough to trigger the requirement.

Does that include logging an IP address?

BlueTemplar
IPs are considered personal information, so, yes ?
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.
[dead] jakeogh
Only if the site is hosted in nanny-EU.
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/

andrewstuart
I've just launched RenderToy 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 MP4 download: https://zone000.previews.rendertoy.com/video/mp4/805fc41be0b...

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=o-D0N_7s0OQ

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.
formalsystem
Shaders helped me understand how to program GPUs.

My favorite book on the topic is 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.de/Graphics-Shaders-Practice-Michael-Bail...

https://www.amazon.de/Real-Time-Rendering-Fourth-Tomas-Akeni...

https://www.amazon.de/Physically-Based-Rendering-Theory-Impl...

Or grab some online content instead,

http://www.pbr-book.org/

https://developer.nvidia.com/gpugems/GPUGems/gpugems_pref01....

https://developer.nvidia.com/gpugems/GPUGems2/gpugems2_insid...

https://developer.nvidia.com/gpugems/GPUGems3/gpugems3_pref0...

https://developer.download.nvidia.com/CgTutorial/cg_tutorial...

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.

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!
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
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!!
[dead] ronaluma
why this tools always are slow in safari and works perfect on chrome? Isn't it safari better in performance than chrome?
scoopr
For Safari users, try enabling Develop->Experimental Features->WebGL2