4 ms·

If you want to keep zooming in the browser and have snappy gpu accelerated performance while basically never hitting “reached limit of numerical precision,” che

If you want to keep zooming in the browser and have snappy gpu accelerated performance while basically never hitting “reached limit of numerical precision,” check out https://mandeljs.hgreer.com https://mandeljs.hgreer.com . The math to make this possible gets pretty funky: I go over the tricks I used at https://www.hgreer.com/JavascriptMandelbrot/ https://www.hgreer.com/JavascriptMandelbrot/

sapiogram 3y ago
No scrolling with the scroll wheel though :(
- QuadmasterXLII 3y ago
  The whole thing is a tower of spaghetti bit hacks in the name of depth and speed. Embarassingly, it actually can't actually render zoom levels that aren't powers of two and I'm not sure how to change that.
  - LoganDark 3y ago
    Can you make it so that the position you clicked stays at the same position after each zoom, rather than centering it on your cursor? That way you can click multiple times to zoom in on the same point.
tda 3y ago
Thanks for creating this, I had some fun exploring the set. What does the scale parameter stand for?
- QuadmasterXLII 3y ago
  The color of each pixel is fragColor = vec4(vec3(cos(c), cos(1.1214 * c) , cos(.8 * c)) / 2. + .5, 1.); Where c is the number of iterations divided by the scale.
deleted 3y ago
[deleted]
tweetle_beetle 3y ago
That really is very fast! (I don't know if this is a known compromise of your technique (I couldn't find it mentioned), but I occassionally get a ring of varying thickness centred in the render with an inverted coluring to the rest of the pixels, or sometimes a solid colour. It varies is size and comes and goes without an obvious correlation to zoom level.)
- QuadmasterXLII 3y ago
  Yeah, I've been chasing that for a while. I've traced it to subnormal float handling. Here's the scenario: if you multiply the 32 bit float float 1 x 2^-127 by 1/8, you can't get 1x2^-130 because 130 isn't representable in a 8 bit exponent. On the CPU or a modern GPU, this is special cased to result in a "subnormal" float: .125 x 2^-127. However, this adds a ton of extra complexitity to the FPU. Old GPUs just gave up and say "It's zero." WebGL standardized on the old GPU behavior, so a modern GPU running webgl sets a flag to behave like the old GPUs. I'm representing complex numbers as (real_mantissa + i * imag_mantissa) * 2^exp where real_mantissa and imag_mantissa are themselves 32 bit floats, and I can reduce the frequency of the colored rings in my shader by keeping the mantissas around ~1000 instead of ~1 (and reducing the exponent to keep the value the same) so that they are less likely to go subnormal, but I can't seem to get rid of the colored rings entirely. I don't actually know the pathway through the code from subnormal underflow -> colored rings, but if you run a CUDA renderer with the same algorithm, the rings appear when you set the flag for "round subnormal floats to zero."
rini17 3y ago
Wow nice! Though I seem to get artifacts both in Brave and Firefox on Android: https://imgur.com/a/vo2ZVOQ https://imgur.com/a/vo2ZVOQ https://mandeljs.hgreer.com/?;re=-0.7511657205365670203843639774552089934530490111591009144698105615134409163147211074829101562500000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000;im=-0.0274264026908177785756285077183171411794829680117716735887611889666004572063684463500976562499999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999;r=0.00000000745058059692361646080000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000;iterations=1000 https://mandeljs.hgreer.com/?;re=-0.751165720536567020384363...

sapiogram 3y ago

No scrolling with the scroll wheel though :(

QuadmasterXLII 3y ago
The whole thing is a tower of spaghetti bit hacks in the name of depth and speed. Embarassingly, it actually can't actually render zoom levels that aren't powers of two and I'm not sure how to change that.
- LoganDark 3y ago
  Can you make it so that the position you clicked stays at the same position after each zoom, rather than centering it on your cursor? That way you can click multiple times to zoom in on the same point.

tda 3y ago

Thanks for creating this, I had some fun exploring the set. What does the scale parameter stand for?

QuadmasterXLII 3y ago
The color of each pixel is fragColor = vec4(vec3(cos(c), cos(1.1214 * c) , cos(.8 * c)) / 2. + .5, 1.); Where c is the number of iterations divided by the scale.

deleted 3y ago

[deleted]

tweetle_beetle 3y ago

That really is very fast! (I don't know if this is a known compromise of your technique (I couldn't find it mentioned), but I occassionally get a ring of varying thickness centred in the render with an inverted coluring to the rest of the pixels, or sometimes a solid colour. It varies is size and comes and goes without an obvious correlation to zoom level.)

QuadmasterXLII 3y ago
Yeah, I've been chasing that for a while. I've traced it to subnormal float handling. Here's the scenario: if you multiply the 32 bit float float 1 x 2^-127 by 1/8, you can't get 1x2^-130 because 130 isn't representable in a 8 bit exponent. On the CPU or a modern GPU, this is special cased to result in a "subnormal" float: .125 x 2^-127. However, this adds a ton of extra complexitity to the FPU. Old GPUs just gave up and say "It's zero." WebGL standardized on the old GPU behavior, so a modern GPU running webgl sets a flag to behave like the old GPUs. I'm representing complex numbers as (real_mantissa + i * imag_mantissa) * 2^exp where real_mantissa and imag_mantissa are themselves 32 bit floats, and I can reduce the frequency of the colored rings in my shader by keeping the mantissas around ~1000 instead of ~1 (and reducing the exponent to keep the value the same) so that they are less likely to go subnormal, but I can't seem to get rid of the colored rings entirely. I don't actually know the pathway through the code from subnormal underflow -> colored rings, but if you run a CUDA renderer with the same algorithm, the rings appear when you set the flag for "round subnormal floats to zero."

rini17 3y ago

Wow nice! Though I seem to get artifacts both in Brave and Firefox on Android: https://imgur.com/a/vo2ZVOQ https://imgur.com/a/vo2ZVOQ https://mandeljs.hgreer.com/?;re=-0.7511657205365670203843639774552089934530490111591009144698105615134409163147211074829101562500000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000;im=-0.0274264026908177785756285077183171411794829680117716735887611889666004572063684463500976562499999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999;r=0.00000000745058059692361646080000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000;iterations=1000 https://mandeljs.hgreer.com/?;re=-0.751165720536567020384363...