12 ms·
Chaos Ink
- gttalbot 6y agoNice!
- chrisseaton 6y agoDoes 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 6y agoProbably just excludes the term that would damp it, so it never loses energy.
- fuzzy2 6y agoPretty cool. However, why is it working on my iPhone 7 but not my iPad Pro 10.5?
- kbumsik 6y agoMe too. Both are iOS. It is weird. What casues this? Maybe something like viewport problem?
- pronoiac 6y agoOn the iPad Pro, requesting the mobile website worked for me.
- centimeter 6y agoIt'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?
- mNovak 6y agoVery cool. Those waves need some attenuation as they spread though!
- dustractor 6y agoThat would make it less afterdarky though. I know that isn't a word but screensavery isn't either.
- wongarsu 6y agoThis is english, I'm pretty sure you can adverb any noun. Dictionaries don't have a monopoly on words.
- tlobes 6y agoFor OSX users, this seems to run best in Safari Technology Preview.
- nxpnsv 6y agoor firefox, it runs fine there for me anyway...
- marcusjt 6y agoAlas I see nothing at all when I visit them page in Chrome or Firefox on my Galaxy S9 (running Android 10)
- moron4hire 6y agoMight be GPU blacklisting. I've encountered it with Chrome on older Samsung hardware. Try force enabling hardware acceleration in chrome://flags or about:config?
- heyitsguay 6y agoAmazing! 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.
- wdb 6y agoKeep finding it funny we keep repeating making all the Flash related demos with the non-Flash frameworks :)
- unnouinceput 6y agoIt 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.
- t0astbread 6y agoI thought the delay was deliberate?
- scandinavian 6y agoI'm getting a steady 144 fps. I don't think the delay is performance related, at least on my PC.
- pierrec 6y agoThe 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 6y agoI 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 6y agoresponse 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.
- pierrec 6y agoIt'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!
- deleted 6y ago[deleted]
- jlokier 6y agoShadertoy 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!
- pfedak 6y agoThe 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); }
- _def 6y agoDoes anyone have some good resources for learning about (writing/understanding) shaders? Everytime I come across them it's like magic to me
- kaibee 6y agohttps://thebookofshaders.com/ https://thebookofshaders.com/
- poutrathor 6y agowhy is first shader of introduction so bad and slow ? https://thebookofshaders.com/00/ https://thebookofshaders.com/00/
- quda 6y agoSource code ?
- DonHopkins 6y agoIt's got nice spinning oscillator attractors (autowaves) like a Belousov–Zhabotinsky reaction! https://en.wikipedia.org/wiki/Belousov%E2%80%93Zhabotinsky_reaction https://en.wikipedia.org/wiki/Belousov%E2%80%93Zhabotinsky_r... https://en.wikipedia.org/wiki/Autowave https://en.wikipedia.org/wiki/Autowave https://en.wikipedia.org/wiki/Autowave_reverberator https://en.wikipedia.org/wiki/Autowave_reverberator
- jchw 6y agoThis 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.
- shmerl 6y agoWorks fine for me (Firefox 82 (beta), Linux, AMD RX 5700 XT, Mesa 20.2.0, llvm 11).
- 1MachineElf 6y agoIt's working for me on Ubuntu 20.04, with PowerColor Vega 56, and Firefox 81.
- FreeFull 6y agoI 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 6y agoI have tried the page again, and now it actually works as intended. I suspect the shader got updated/fixed?
- kbumsik 6y agoThis 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?
- newhotelowner 6y agoI 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 6y agoMore correctly, they 'ensured' that anything not them wasn't going to happen.
- vbezhenar 6y ago1. 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 6y agoWhy 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 6y ago
- emilfihlman 6y agoHmm, interesting that Chrome actually doesn't seem to load the css file at all.
- sunnyps 6y agoTry 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/desynchronized https://developers.google.com/web/updates/2019/05/desynchron...
- wffurr 6y agoOnly on ChromeOS and Windoes Chrome. It will also introduce tearing artifacts into the full screen animations.
- tambourine_man 6y agoRuns incredibly smooth on my 2016 iPhone SE. It’s also beautiful. Congratulations.
- dayjah 6y agoWowza! 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 6y agoTake 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?
- arexxbifs 6y agoBumpmapped shadebobs!
- 1MachineElf 6y agoPlease warn me before transporting my browser to the realm of Hermaeus Mora.
- twic 6y agoFor 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.
- iseanstevens 6y agoBeautiful
- backseatdriver 6y agoJesus Christ
- Syzygies 6y agoThis needs a decent preview image, for example for posting to facebook.
- drusepth 6y agoLooks 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.
- trungdq88 6y agoSo sad, it render a complete black page on my Android phone. Can someone post a screenshot?
- mattigames 6y agoIts 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 https://i.imgur.com/DaM4a9I.png
- trungdq88 6y agoThank you!
- AndrewStephens 6y agoThis 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/ https://sheep.horse/bostoncrossfade/ Write up: https://sheep.horse/2017/9/crossfading_photos_with_webgl_-_boston_bridge_proj.html https://sheep.horse/2017/9/crossfading_photos_with_webgl_-_b...