Chaos Ink

(dev.scottdarby.com)

390 points | by parisianka 8 days ago

27 comments

  • pfedak 8 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);
    
    }
  • DonHopkins 8 days ago
    • kbumsik 8 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 8 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 8 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 7 days 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 8 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 7 days 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 8 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 8 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 7 days ago

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

                I guess you found the reason.

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

              • peey 5 days ago

                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.

                • hbcondo714 8 days ago

                  > not on Galaxy S10

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

                  • kbumsik 8 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 8 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 8 days ago

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

                  • jlokier 7 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 7 days ago

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

                    • newhotelowner 8 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 7 days ago

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

                      • gitgud 8 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 8 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 7 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 8 days ago

                            Was this effect achievable with Flash?

                            • franciscop 8 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 7 days ago

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

                            • heyitsguay 8 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 8 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 7 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!

                                • sunnyps 8 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 7 days ago

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

                                  • mNovak 8 days ago

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

                                    • dustractor 8 days ago

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

                                      • wongarsu 8 days ago

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

                                    • drusepth 8 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.

                                      • jchw 8 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 7 days 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.

                                          • FreeFull 5 days ago

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

                                          • shmerl 8 days ago

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

                                            • 1MachineElf 8 days ago

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

                                            • unnouinceput 8 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 8 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 8 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 8 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.

                                                  Q.E.D.

                                                  • mhh__ 7 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 8 days ago

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

                                                      • t0astbread 8 days ago

                                                        I thought the delay was deliberate?

                                                      • fuzzy2 8 days ago

                                                        Pretty cool.

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

                                                        • kbumsik 8 days ago

                                                          Me too. Both are iOS. It is weird.

                                                          What casues this? Maybe something like viewport problem?

                                                          • centimeter 7 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?

                                                            • pronoiac 8 days ago

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

                                                            • AndrewStephens 7 days 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.

                                                              https://sheep.horse/bostoncrossfade/

                                                              Write up:

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

                                                              • dayjah 8 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 8 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 8 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 8 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 8 days ago

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

                                                                    • twic 7 days 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 8 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 8 days ago

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

                                                                      • wdb 8 days ago

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

                                                                        • trungdq88 8 days ago

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

                                                                        • tambourine_man 8 days ago

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

                                                                          • Syzygies 8 days ago

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

                                                                            • tlobes 8 days ago

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

                                                                              • nxpnsv 7 days ago

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

                                                                              • arexxbifs 8 days ago

                                                                                Bumpmapped shadebobs!

                                                                                • twic 7 days ago

                                                                                  Who lives in a GPU on the PC?

                                                                                  • nxpnsv 7 days ago

                                                                                    ahh, sweet memories

                                                                                  • backseatdriver 8 days ago

                                                                                    Jesus Christ

                                                                                    • iseanstevens 8 days ago

                                                                                      Beautiful

                                                                                      • emilfihlman 8 days ago

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

                                                                                        • gttalbot 8 days ago

                                                                                          Nice!

                                                                                          • quda 8 days ago

                                                                                            Source code ?