Hacker News

Chaos Ink(dev.scottdarby.com)

388 pointsparisianka posted 2 days ago82 Comments
pfedak said 2 days ago:

The main shader:

uniform vec3 mouse; uniform vec2 resolution; uniform sampler2D texture;

vec3 computeNormal( vec4 n ) {

  // pixel scale
  vec2 un = 1.0 / resolution;
  vec2 uv = gl_FragCoord.xy / resolution;

  // tex sample neighbour-4;
  vec3 n_r = texture2D( texture, uv + vec2( 1., 0. ) * un ).xyz;
  vec3 n_l = texture2D( texture, uv - vec2( 1., 0. ) * un ).xyz;
  vec3 n_u = texture2D( texture, uv + vec2( 0., 1. ) * un ).xyz;
  vec3 n_d = texture2D( texture, uv - vec2( 0., 1. ) * un ).xyz;

  // partial differences n-4;
  vec4 dn = vec4( n.z );
  dn -= vec4( n_r.z, n_l.z, n_u.z, n_d.z );

  // right - left, up - down;
  vec2 xy = vec2( dn.x - dn.y, dn.z - dn.w );
  xy += n_r.xy + n_l.xy + n_u.xy + n_d.xy;
  xy *= 0.89;

  float z = length(xy) * 0.1;

  return vec3( xy, z ) * 0.25;

void main() {

  vec2 uv = gl_FragCoord.xy / resolution;

  // normal sampling
  vec4 height = texture2D( texture, uv );

  float vel = height.a; // previous velocity
  float elasticity = 0.002;
  float viscosity = 0.06;
  vel += - (height.z - 0.01) * elasticity - vel * viscosity;

  // compute normal advection
  vec3 normal = computeNormal( height );
  normal.z += height.z + vel;

  float dist = distance( mouse.xy,  gl_FragCoord.xy);
  float mouseRadius = 10.0;
  float peak = 1.9; // max-height
  if ( dist <= mouseRadius ) {
    float dst = ( mouseRadius - dist ) / mouseRadius;
    normal.z += pow( abs(dst), 1.9 ) * peak * 2.5;
    normal.xy -= normal.xy * pow( abs(dst), 1.9 ) * 0.1;
    normal.z = min( peak, normal.z );

  gl_FragColor = clamp( vec4( normal, vel ), -1.0, 1.0);

heyitsguay said a day ago:

If you add a `uniform vec3 mousePrevFrame` that tracks the previous mouse position, you can get smoother drawing in main() by replacing your distance function in the line `float dist = distance(mouse.xy, gl_FragCoord.xy)` with a custom

  distanceToLine(mousePrevFrame.xy, mouse.xy, gl_FragCoord.xy) 
defined as

  float distanceToLine(vec2 p1, vec2 p2, vec2 p0) {
    float d12 = distance(p1, p2);
    if (d12 == 0) {
      return distance(p1, p0);
    return abs((p2.y - p1.y) * p0.x - (p2.x - p1.x) * p0.y + p2.x * p1.y - p2.y * p1.x) / d12;
_def said a day ago:

Does anyone have some good resources for learning about (writing/understanding) shaders? Everytime I come across them it's like magic to me

kaibee said a day ago:
poutrathor said 13 hours ago:

why is first shader of introduction so bad and slow ? https://thebookofshaders.com/00/

_spduchamp said a day ago:

There is an online workshop next month... https://interaccess.org/workshop/2020/sep/generating-images-...

sabellito said a day ago:
DonHopkins said 2 days ago:
kbumsik said 2 days ago:

This unfourtunatly is why GPU-enabled JavaScript on the web won't take off.

It works on iPhone and Windows desktop but does not work on iPad Pro 11, not on Galaxy S10, not on some Linux desktops. So, it is inconsistent even within the same iOS ecosystem.

Some might say the OP misconfigured or I need to go about:config, but these kinds of thing should be trivial for developers/users.

Even Flash used to work out of the box across platforms. Why things going backwards?

sunnyps said 2 days ago:

First of all, just extrapolating from someone's side/hobby/demo project to all WebGL pages is naive. The effort put into a demo is orders of magnitude less than a real site.

Second, "GPU-enabled JavaScript" has already taken off. Ever used Google Maps or Google Earth - both use WebGL heavily? Or maybe you read the NYTimes who occasionally produce pages with a heavy WebGL focus[1].

[1] https://www.nytimes.com/interactive/2015/01/09/sports/the-da...

kbumsik said 2 days ago:

I mean, these kinds of things should work without highly paid devs like googlers. I have seen a lot of WebGL projects on HN and they always have had issues on some recent devices.

The biggest problem with the WebGL compatibility issue is that it is unpredictable. We don't know which devices work until we open the page. Maybe I am expecting too much, but this degree of inconsistency shouldn't happen to hobby projects neither.

iainmerrick said a day ago:

I think most of this is just WebGL 1 (AKA OpenGL ES 2) versus WebGL 2 (AKA OpenGL ES 3).

If you restrict yourself to the basic parts of WebGL 1 your app will work almost everywhere, as compatibility is excellent on all recent phones and OSes.

There’s a lot of nice stuff in WebGL 2 (eg float textures, vertex textures) but as soon as you try to use it you either sacrifice compatibility on a bunch of devices, or you have to check for various extensions to try to figure out what’s going to work, and try to fall back gracefully if possible.

rewq4321 said 2 days ago:

I've never had problems with three.js, which is what most people use for WebGL-powered content.

Are you claiming that there's less effort in coding up a native graphics program that works across all platforms?

Certainly native has the edge on performance (WebGPU will shorten the gap a bit), but on ease of multi-device compatability? I could be convinced, but it seems hard to believe. The whole idea of the browser (these days) is to make cross-platform stuff easier to develop.

rikroots said a day ago:

The demo seems to be built on top of three.js - I can spot lots of THREE tags in the bundled javascript file.

vbezhenar said 2 days ago:

1. Flash is not a standard. Flash is developed by a single company. There could not be any compatibility issues because of that. Web is moving to that direction with Chromium engine being used everywhere, but it's not there yet.

2. Flash is relatively high-level API when it comes to graphics. Shaders are low level and while they should work everywhere, I guess, one could still run into compatibility issues between different video adapters.

systemvoltage said 2 days ago:

Why are we talking about on Flash? That's the weakest part of the argument.

The main point OP is pointing out is the inconsistency of WebGL. Even if he didn't make a point about Flash, the central message would be unaffected.

pvorb said 2 days ago:

> Why are we talking about on Flash? That's the weakest part of the argument.

I guess you found the reason.

ralfd said 2 days ago:

iPads are masquerading as a Mac to avoid getting a gimped mobile website. Request a mobile website in Safari (aA button in address bar) and it works.

jlokier said 2 days ago:

The worst was a laptop I had running Ubuntu and the nVidia driver.

When any WebGL page was opened in Firefox, it crashed the X server.

You didn't even get a blank page, and of course lost whatever you were working on at the time.

fierarul said 2 days ago:

... and, if it can crash the X server it might also be the gateway for an exploit.

hbcondo714 said 2 days ago:

> not on Galaxy S10

Seems to be working great on my Galaxy S9. What isn't supposed to work?

kbumsik said 2 days ago:

> What isn't supposed to work

I am not saying it's not supposed to work. It's my Galaxy S10 with Chrome that doesn't work.

Your comment shows the problem I am pointing out: we don't know even which devices isn't supposed to work, it's almost random.

thesandlord said 2 days ago:

There might be something wrong with your phone, my S10 with Chrome is working well.

Edit: Actually, I remembered now there are two versions of the S10, the Snapdragon and the Exynos variants. I have the Snapdragon one, might be a difference.

I'm not sure if desktop graphics are any better. It's a reason why a lot of people choose consoles, no chance of incompatibility. But even then you have ports and games that are poorly made!

Baeocystin said 2 days ago:

FWIW, it's working on my S10/Chrome as well.

newhotelowner said 2 days ago:

I don't need to download everything to try it. I don't have to trust a random site to try something.

Apple decided that Flash is not the future when they launched iphone/iOS.

silly-silly said 2 days ago:

More correctly, they 'ensured' that anything not them wasn't going to happen.

gitgud said 2 days ago:

Doesn't work on my Samsung s10. Maybe there should at least be a browser permissions popup for the GPU, like the location access popup.

vii said 2 days ago:

There were plenty of platform specific problems with Flash. Steve Jobs famously ranted about it https://en.wikipedia.org/wiki/Thoughts_on_Flash

That said, cross platform compatibility is always going to be hard. I'm still amazed that Adobe let that platform die. It has taken so long and so much effort to recover equivalent functionality, and in some cases we are still lagging what Flash could do.

on_and_off said 2 days ago:

let's be honest, the fact that allowing flash would also allow webapps not controlled by apple to go on the platform was a huge factor.

tomlagier said 2 days ago:

Was this effect achievable with Flash?

franciscop said 2 days ago:

Javascript APIs used to have that same problem where you didn't know in which browser it'd work until you actually tried it and it did take off quite spectacularly. Just give it some years for platforms like Apple to catch up, but there needs to be pressure with people complaining that "it doesn't work on iPad Pro 11".

josefx said 2 days ago:

Apple catching up on OpenGL related functionality? Is the sky green where you live?

heyitsguay said 2 days ago:

Amazing! Something I have learned from similar experiments in the past - instead of drawing a circle each frame, try drawing a (rounded) line between the current frame's cursor location and the previous frame's cursor location. Cursor movement looks much smoother that way.

pierrec said 2 days ago:

It's well done, though anyone who regularly browses Shadertoy or similar websites has probably been desensitized to old-school (yes, old school!) liquid demos compared to what the cool kids do these days... but well done nonetheless!

jlokier said 2 days ago:

Shadertoy demos are really awesome.

But I'm always a little disappointed to find most them render as "Shader Error" for me. That's still better than all the WebGL demos that show a blank screen and don't seem to know they have failed!

said 2 days ago:
sunnyps said 2 days ago:

Try the "desynchronized" canvas attribute[1]. It should lead to a noticeable latency improvement on ChromeOS and Windows.

[1] https://developers.google.com/web/updates/2019/05/desynchron...

wffurr said a day ago:

Only on ChromeOS and Windoes Chrome. It will also introduce tearing artifacts into the full screen animations.

mNovak said 2 days ago:

Very cool. Those waves need some attenuation as they spread though!

dustractor said 2 days ago:

That would make it less afterdarky though. I know that isn't a word but screensavery isn't either.

wongarsu said 2 days ago:

This is english, I'm pretty sure you can adverb any noun. Dictionaries don't have a monopoly on words.

drusepth said 2 days ago:

Looks neat. Doesn't seem to work with my Razer Blade Stealth touchscreen though (touching to move mouse doesn't work like normal, touchpad has to be what moves it). Would be super cool with multitouch support.

AndrewStephens said a day ago:

This is a very nice effect. WebGL shaders allow some really cool tricks with 2d images, and the JavaScript required is not too onerous even if you don’t use a library to help.

I used WebGL to crossfade between photographs in different (slightly cheesy) ways.


Write up:


jchw said 2 days ago:

This is not working correctly for me with Firefox 81, Linux, with AMD GPU. I get a flickery mess. Seems to work OK on my iPhone, though.

FreeFull said a day ago:

I also get a flickery mess, on Linux + Firefox 81 with Haswell Intel Graphics. I suspect that there is some sort of uninitialised buffer/variable somewhere, and different drivers handle it differently.

1MachineElf said 2 days ago:

It's working for me on Ubuntu 20.04, with PowerColor Vega 56, and Firefox 81.

shmerl said 2 days ago:

Works fine for me (Firefox 82 (beta), Linux, AMD RX 5700 XT, Mesa 20.2.0, llvm 11).

unnouinceput said 2 days ago:

It has a bit of delay. And that's why I prefer native vs web applications when performance and end user experience is paramount. This effect is implemented in ZBrush for decades now, on lesser hardware with no delay between mouse movements. Currently web applications just reinvent the wheel from old desktop ones.

pierrec said 2 days ago:

The delay (or more accurately smoothing) of the mouse position is a hack to make the mouse trail look more like a streak rather than repetitive little blobs. I call it a hack because the proper solution would be to have a line-shaped source that extends between the last and current mouse positions. Native might allow you to marginally pump up the FPS, but that wouldn't save you from the little blobs.

(edit: just to be clear, I'm not the author but this issue is common enough)

Wowfunhappy said 2 days ago:

I think the experience might benefit from showing the mouse pointer, or some other cursor that actually tracks your mouse and shows the blobs current "target". You will undoubtably lose something in the process, but I think it would be worth the tradeoff.

Right now, it feels difficult to control. I can never quite get the blob to do what I want, which is crucial for an interactive experience.

(What you have is already neat though!)

unnouinceput said 2 days ago:

response for @pierrec / @scandinavian / @t0astbread:

If you move the mouse slowly there is little to no delay between the movement and the "bubbles". Moving faster and faster and the "bubbles" are falling behind more and more. This effect is even more evident when moving at the same speed in straight lines vs moving in circular motion. Which tells me there is a performance drop.

This does not happen at all in ZBrush. Do try it, it has this effect implemented for decades. I remember playing with it in 2003 on a P3 350 MHz / Win 2k as OS. There was absolutely no "loss" of mouse movements nor "bubbles" skipped as it is the case here.


mhh__ said 2 days ago:

I don't think we'll ever have native performance on the web as long as things like spectre are still present on earth. This would be a good opportunity to kick JavaScript, but I both expect and hope that we will move on from it eventually.

scandinavian said 2 days ago:

I'm getting a steady 144 fps. I don't think the delay is performance related, at least on my PC.

t0astbread said 2 days ago:

I thought the delay was deliberate?

fuzzy2 said 2 days ago:

Pretty cool.

However, why is it working on my iPhone 7 but not my iPad Pro 10.5?

kbumsik said 2 days ago:

Me too. Both are iOS. It is weird.

What casues this? Maybe something like viewport problem?

pronoiac said 2 days ago:

On the iPad Pro, requesting the mobile website worked for me.

centimeter said 2 days ago:

It's shocking how bad the code sharing is across iOS derivatives.

For example, the Notes app on MacOS and iPadOS will sort checklists so that completed items are moved to the bottom, but iOS will not. How the hell did they manage not to share that bit of code?

dayjah said 2 days ago:

Wowza! Takes me back to lava lamps and those pin mould things back in the 90s! Kudos!

I’d love this on a touch screen picture frame in my house were folks could play with it! I’d easily pay $150 for that.

OkGoDoIt said 2 days ago:

Take an old iPad and put it in a frame? Might be able to do it for $150 or less. This runs fine on my old iPad Air 2, possibly it works on even older devices?

marcusjt said 2 days ago:

Alas I see nothing at all when I visit them page in Chrome or Firefox on my Galaxy S9 (running Android 10)

moron4hire said 2 days ago:

Might be GPU blacklisting. I've encountered it with Chrome on older Samsung hardware. Try force enabling hardware acceleration in chrome://flags or about:config?

1MachineElf said 2 days ago:

Please warn me before transporting my browser to the realm of Hermaeus Mora.

twic said a day ago:

For me, it's solidly H. R. Giger - something about the juxtaposition of large smoothly shaded areas and messes of intricate detail, plus the moody monochromatism, and the fact that it has come straight from hell.

chrisseaton said 2 days ago:

Does the liquid keep moving eternally even if you aren't interacting with it? Where does that energy come from to keep parts of it rotating like that?

Bjartr said 2 days ago:

Probably just excludes the term that would damp it, so it never loses energy.

wdb said 2 days ago:

Keep finding it funny we keep repeating making all the Flash related demos with the non-Flash frameworks :)

trungdq88 said 2 days ago:

So sad, it render a complete black page on my Android phone. Can someone post a screenshot?

mattigames said 2 days ago:

Its a ball you move with your mouse that creates some sort of liquid metal ripple effect where the ball went and ends up looking like: https://i.imgur.com/DaM4a9I.png

trungdq88 said a day ago:

Thank you!

tambourine_man said 2 days ago:

Runs incredibly smooth on my 2016 iPhone SE. It’s also beautiful. Congratulations.

Syzygies said 2 days ago:

This needs a decent preview image, for example for posting to facebook.

tlobes said 2 days ago:

For OSX users, this seems to run best in Safari Technology Preview.

nxpnsv said a day ago:

or firefox, it runs fine there for me anyway...

arexxbifs said 2 days ago:

Bumpmapped shadebobs!

twic said a day ago:

Who lives in a GPU on the PC?

nxpnsv said a day ago:

ahh, sweet memories

backseatdriver said 2 days ago:

Jesus Christ

iseanstevens said 2 days ago:


gttalbot said 2 days ago:


emilfihlman said 2 days ago:

Hmm, interesting that Chrome actually doesn't seem to load the css file at all.

quda said 2 days ago:

Source code ?