weekends are for leisure

Voxeling - See-through objects, cutouts in WebGL

Tags: #Voxeling  #Javascript  #Webgl 

Cutouts are a way to render objects that are fully transparent in spots, without actually doing alpha-blending or pre-multiplied alpha stuffs. More on those can be found in this article: GPUs prefer premultiplication.

Here’s a great example of cutouts in Minecraft. Notice that the tree is made up of cubes which have a leaf texture applied to them. The texture is transparent within the space surrounding each leaf. No blending occurs; you can simply see through the transparent bits:

Minecraft Tree Cutout

Compare that to these glass blocks in Minecraft. Notice that the glass pane’s color is blended with the pixels behind it:

Minecraft Blending

It’s actually pretty easy to implement cutouts in WebGL. Here are the steps:

Here’s what the result looks like in voxeling:

Voxeling Cutouts