0
Description
Pumpkin Carving
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.
Anti-Aliasing
On the technical side, the app uses a modified WebGL friendly FXAA shader originally from Timothy Lottes blog. The 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.
Drawing
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 later stage.
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 process.
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 TexGen tool.
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.
