
SVG heat shimmer - sebg
http://bl.ocks.org/monfera/19845caf6aa383abddaa248a3f0d2ae0
======
dhotson
Oh neat, I didn't know you could do this in SVG. Very cool! Displacement maps
are really useful for achieving a bunch of graphical effects like this.

I used them in WebGL for a couple of different effects in this demo:
[http://dn.ht/picklecat/](http://dn.ht/picklecat/)

It uses a noise texture to do the background warping:
[http://dn.ht/picklecat/clouds.jpg](http://dn.ht/picklecat/clouds.jpg)

It also uses this image
[http://dn.ht/picklecat/mesmercatdisplacement.jpg](http://dn.ht/picklecat/mesmercatdisplacement.jpg)
as a displacement map for
[http://dn.ht/picklecat/mesmercat.png](http://dn.ht/picklecat/mesmercat.png)
to achieve the fake 3d effect on the cat.

~~~
malkia
Wow! That's awesome! Thanks for sharing...

------
monfera
Maker here. I meant it as a way of saying good-bye to SVG as for the past
years I mostly work with WebGL. A couple of other bl.ocks will be up soon.

It turns out that despite its name, Scalable Vector Graphics it isn't. Sure
it's scalable _spatially_ but it's not scalable _temporally_. A.k.a. slow.

SVG only recently became capable of 60FPS (with only a few elements, of
course). Until this year, it was capped at ~40FPS.

Also, SVG was meant for graphics and the HTML DOM wasn't. Yet SVG transforms
are NOT hardware accelerated, click on Paint Flashing in Chrome Dev Tools /
Render:
[http://codepen.io/monfera/pen/JKOqyY](http://codepen.io/monfera/pen/JKOqyY)
Meanwhile HTML transforms are GPU accelerated:
[http://codepen.io/monfera/full/qNVzBm/](http://codepen.io/monfera/full/qNVzBm/)
or
[http://codepen.io/monfera/full/BzmERz/](http://codepen.io/monfera/full/BzmERz/)
(no green rectangles flashing)

There's also a big overhead of just having a lot of SVG elements even if
they're presently off-screen (in which case WebGL wouldn't draw it or even if
you call gl.drawArrays on them it doesn't hit the shaders).

Having done WebGL I feel that a transpiler from SVG filters to WebGL I could
hack together would be an order of magnitude (usually I get an order or two
magnitude speedup when moving a plot to WebGL).

Someone at a major browser vendor confirmed there hasn't been significant work
on SVG for many years. SMIL is now out. The hardware accelerated HTML DOM,
Canvas and WebGL are eating SVG's lunch. I suspect it's one of the reasons the
new D3 4.0 adds more separation of concern between logic and rendering, and
there's a wealth of Canvas based examples from Mike Bostock and others.

To paraphrase Greenspun's tenth rule: Any sufficiently complicated
Canvas/WebGL 2D data visualization contains an ad hoc, informally-specified,
bug-ridden, but FAST implementation of half of SVG. And it's sent down the
network each time, including mountains of font rasterization.

~~~
amelius
I was just in the process of converting all my .png icons into SVG. Should I
reconsider this? Also, how well do other solutions work with CSS?

~~~
monfera
No, SVG is perfect for things like that, and very compact (example coming, or
an existing one, check the header image on twitter/monfera). I'm mostly
concerned about dynamic visualizations.

~~~
amelius
Ah, okay, thanks!

------
amake
It doesn't look right at all on Firefox: the "shimmering" bits are extremely
localized (just a few pixels) whereas in Safari and Chrome they are much more
spread out.

~~~
anotheryou
in FF it just looks like strange codec errors :)

------
leeoniya
or webgl and better:

[http://tympanus.net/Tutorials/HeatDistortionEffect/](http://tympanus.net/Tutorials/HeatDistortionEffect/)

[https://github.com/lbebber/HeatDistortionEffect](https://github.com/lbebber/HeatDistortionEffect)

~~~
themodelplumber
I like the accompanying "laptop fans" effect :D

~~~
pjmlp
On mobiles some WebGL demos have forced me to take out the battery, because I
couldn't even kill the browser application or do the whole long button press
for full restart.

Luckily I don't buy mobile phones that don't allow me to replace the battery.

~~~
stephenr
If the hardware + OS are so deficient that your only way to stop a WebGL demo
is to take out the battery, I'm not sure "lucky" is the word I'd use to
describe your situation.

~~~
swiley
That's Android I guess. The alternative, iOS, can't run vim. Mobile OSs suck.

~~~
stephenr
It took me literally 10 seconds to find
[https://itunes.apple.com/us/app/vim/id492668168?mt=8](https://itunes.apple.com/us/app/vim/id492668168?mt=8)

------
j4_james
I was curious if this could be achieved without the need for JavaScript, and I
see there is an SVG animate element that looks like it ought to do the trick.
In theory you should be able to get the turbulence seed to cycle from 0 to 500
by adding an animate child on the feTurbulence element like this:

    
    
      <feTurbulence id="turb" baseFrequency="0.2" type="turbulence">
        <animate attributeType="XML" attributeName="seed" from="0" to="500" dur="50s" repeatCount="indefinite"/>
      </feTurbulence>
    

It's not quite the same as the JavaScript implementation, which makes the seed
random, but I wouldn't have thought that was necessary in this scenario.

Anyway, while it seems to work OK for me in Firefox, it doesn't look quite
right in Chrome, and it fails completely in IE and Edge. Not sure if I'm doing
it wrong, or SVG animation is just not well supported yet, but this would be
my preferred solution if it could be made to work reliably.

~~~
Arnavion
That is SMIL, and is on the way out. IE never implemented it, and Chrome wants
to remove it (but hasn't yet). CSS animations are the replacement.

[https://developer.mozilla.org/en-
US/docs/Web/SVG/SVG_animati...](https://developer.mozilla.org/en-
US/docs/Web/SVG/SVG_animation_with_SMIL)

[https://groups.google.com/a/chromium.org/forum/#!topic/blink...](https://groups.google.com/a/chromium.org/forum/#!topic/blink-
dev/5o0yiO440LM%5B1-25%5D)

~~~
j4_james
That's disappointing, because CSS wouldn't be a viable replacement in this
case - it can't animate XML attributes like seed. Or is that something they
plan to support one day?

~~~
Arnavion
[https://dev.w3.org/SVG/proposals/css-animation/animation-
pro...](https://dev.w3.org/SVG/proposals/css-animation/animation-
proposal.html#def_attributes)

------
th0ma5
Runs at about 1fps on my phone, heh.

~~~
tiglionabbit
It's about 10fps on my laptop :P

~~~
monfera
it just uses a setInterval with 100ms so your kit might be able to do more -
bl.ocks can be forked with
[http://blockbuilder.org/search](http://blockbuilder.org/search)

------
kazinator
This looks like drops hitting glass (but then disappearing, as if they
vaporized). Or perhaps "heat shimmer" of another type, if we can call it that:
what you might see in your field of vision if you've been running a long
distance along that road, without drinking water.

Heat shimmer has to be sort of stringy due to the currents of different air
densities that move as aggregates. It's mostly vertical as the plumes of hot
air rise from the ground, so most of the distortion is horizontal displacement
(side-to-side jitter).

------
tptacek
What's the difference in how Safari handles this? I use Chrome, and it looks
OK. But just loading the page on Safari slows everything else on my machine
down.

~~~
pcwalton
Safari uses Quartz/Core Graphics for the painting, via OpenGL if applicable.
Chrome uses Skia/Ganesh, sometimes via OpenGL--Chrome is more conservative
about when it enables the OpenGL-based painting than Safari is, I believe.

If everything else on your machine is slowing down, then chances are good that
Safari is hitting some bad case in the way it uses your GPU. CG::OGL may not
be optimized well for this use case. (In general retrofitting CPU-based 2D
graphics APIs to run on GPUs, as both Chrome and Safari attempt to do, is
difficult.) Or the layerization heuristics may be going awry in Safari--unlike
Chrome, which does things manually, Safari has a completely different
implementation of layers that exports the layer structure of the page to the
OS window server.

------
PaulHoule
A WebGL implementation of SVG would crash your browser that much faster

------
tempodox
I definitely need to learn more about SVG. This is really cool.

~~~
monfera
Yes SVG is very powerful denotation.

FWIW I prefer my other current example (I'll wrap up a third one soon),
procedural map generation and reflection bump map with SVG
[http://bl.ocks.org/monfera/21be9bb116a8e5b2423b706155fdb718](http://bl.ocks.org/monfera/21be9bb116a8e5b2423b706155fdb718)
(click the map or move the mouse) or Nadieh Bremer's examples eg.
[http://bl.ocks.org/nbremer/0e98c72b043590769facc5e829ebf43f](http://bl.ocks.org/nbremer/0e98c72b043590769facc5e829ebf43f)

Also if you want to generate SVG programmatically check out
[http://d3js.org](http://d3js.org) and [https://www.dashingd3js.com/svg-paths-
and-d3js](https://www.dashingd3js.com/svg-paths-and-d3js)

------
rado
200% CPU Safari, 80% Chrome.

~~~
ldarcyftw
<1% CPU IE

~~~
mkj
5% chrome, 290% safari tech preview.

Cute effect. Seems a bit repetitive though - maybe randomising the timer might
help too?

