
Show HN: I Implemented Shadow Volumes in WebGL - erkaman
https://mikolalysenko.github.io/regl/www/gallery/shadow-volume.js.html
======
erkaman
Hi guys. This is a reference implementation of shadow volumes that I
implemented with the help of Mikola Lysenko. This demo was implemented to
demonstrate the stencil buffer manipulation features of our WebGL Framework
regl:
[https://github.com/mikolalysenko/regl](https://github.com/mikolalysenko/regl)

I provide a video here:
[https://www.youtube.com/watch?v=oO0LJWy5COg](https://www.youtube.com/watch?v=oO0LJWy5COg)
in case the demo won't run.

Since these shadows are shadow volumes, there are no jaggies whatsoever. Even
if you zoom them in, they remain crisp and clear. That is one advantage of
shadow volumes compared with shadow maps, but it is also the only real
advantage of the method I can come up; I personally think shadow volumes is a
pretty terrible technique. Drawing the shadow silhouette eats fill-rate,
constructing the silhouette can be very CPU-intensive, and the technique in
general is quite tricky to implement, compared with shadow mapping.
Personally, I can't find a single reason that a sane person would use this
technique nowadays. But some may disagree with me, I suppose...

I mainly implemented this demo to provide a reference implementation of shadow
volumes. In particular, this is an implementation of Carmack's
Reverse([https://en.wikipedia.org/wiki/Shadow_volume#Depth_fail](https://en.wikipedia.org/wiki/Shadow_volume#Depth_fail)),
or depth fail, as some people like to call it. My implementation follows the
description on Wikipedia pretty closely. I provide the source code here:
[https://github.com/mikolalysenko/regl/blob/gh-
pages/example/...](https://github.com/mikolalysenko/regl/blob/gh-
pages/example/shadow-volume.js)

I want others to be able to learn from this code how shadow volumes can be
implemented, so I have littered the code with comments. I hope that at least
someone will find it interesting.

