Click to Play
It’s that time of year again. Dressing up, worshipping demons, shooting
zombies, running away from said zombies, and of course pumpkin carving!
While no substitute for live carving competitions (or pumpkin pie, nom
nom nom..), here’s a fun little WebGL app to decorate your desktop.
On the technical side, the app uses a modified WebGL friendly FXAA
shader originally from Timothy Lottes
results so far are good, especially since MSAA is not yet available in
every browser. I have another demo posted
here that demonstrates an older
version of the FXAA shader. If you look closely at the edges in the
heightmap, you can spot the difference as you toggle antialiasing.
I went through several drawing algorithms before I settled on this one.
I originally wanted to cut and tessellate the polygons, but the amount
of work involved was more than I bargained for (I only had the weekend
to make this!). The pumpkin is planar mapped, so I settled on finding
the triangle the mouse cursor was over, interpolated the UV coordinates,
and apply an alpha value in the texture. The result is what you see. The
glow effect is pretty standard. I render the back-facing polygons to a
texture. Next I draw the front-facing polygons as black, covering up any
back-facing polygons where the alpha is opaque. I then do a standard
blur and enhance. The glow texture is rendered into the framebuffer at a
Procedural Mesh Generation
Rather than rely on a high quality pumpkin mesh that would prolong the
download, I decided to procedurally generate one instead. I also had
plans to randomize the pumpkin shape to add diversity, but lack of time
prevented me from completing this. Here’s a screenshot of the 3-step
You start off with a sphere. Next, proportionately sink the poles and
surrounding vertices towards the centre of the sphere. If you want to
see what this looks like in real-time, open up Blender 3D, create a UV
sphere, and proportionally move the polls inward. You will see how the
effect plays out. This will give you the top and bottom of the pumpkin.
To generate the curves, navigate along the longitude of the sphere and
sink every nth segment. You could use bumpmaps, yes, but that’s cheating
Procedural Texture Generator
The texture of the pumpkin was generated using my
It starts off with a lua script sin wave generator with turbulence. I
used circular 4D simplex noise to make the texture seamless. I then
applied Perlin noise and generated a normal map. The final result is
then shaded and repeated along the x-axis 10 times. Voila.
That’s pretty much it. Feel free to post any questions or comments.
Please log in or register to post a reply.
Works great! And a nice coincidence, as I was just asked to carve a
pumpkin this afternoon a few minutes ago :)
good nut! the artisticness is flowing.