Chaos Ink
dev.scottdarby.com
dev.scottdarby.com
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);
} distanceToLine(mousePrevFrame.xy, mouse.xy, gl_FragCoord.xy) 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;
}https://en.wikipedia.org/wiki/Belousov%E2%80%93Zhabotinsky_r...
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?
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...
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.
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.
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.
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.
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.
I guess you found the reason.
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.
Seems to be working great on my Galaxy S9. 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.
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!
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.
Apple decided that Flash is not the future when they launched iphone/iOS.
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!
[1] https://developers.google.com/web/updates/2019/05/desynchron...
(edit: just to be clear, I'm not the author but this issue is common enough)
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!)
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.
However, why is it working on my iPhone 7 but not my iPad Pro 10.5?
What casues this? Maybe something like viewport problem?
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?
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...
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.