Hacker News new | past | comments | ask | show | jobs | submit login
Chaos Ink (scottdarby.com)
390 points by parisianka 8 days ago | hide | past | favorite | 82 comments





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);

}

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;
    }

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


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




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?


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


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.


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.


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.


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

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.


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.


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

I guess you found the reason.


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.

This is akin to saying "html5 won't take off". That's what standards are for. Compatibility issues are expected in early stages of implementation.

> not on Galaxy S10

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


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


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!


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

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.


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

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.


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

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.

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.


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.

Was this effect achievable with Flash?

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".

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

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.

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!

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!


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


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

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

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

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

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.

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.

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.

I have tried the page again, and now it actually works as intended. I suspect the shader got updated/fixed?

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

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

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.

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)


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


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.

Q.E.D.


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.

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

I thought the delay was deliberate?

Pretty cool.

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


Me too. Both are iOS. It is weird.

What casues this? Maybe something like viewport problem?


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?


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

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.

https://sheep.horse/bostoncrossfade/

Write up:

https://sheep.horse/2017/9/crossfading_photos_with_webgl_-_b...


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.


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?

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

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?

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

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.

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?

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

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

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

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

Thank you!

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

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

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

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

Bumpmapped shadebobs!

Who lives in a GPU on the PC?

ahh, sweet memories

Jesus Christ

Beautiful

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

Nice!



Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact

Search: