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:

  • Create your texture with alpha transparency
  • Use UNPACK_PREMULTIPLY_ALPHA_WEBGL when you load your PNG into WebGL, like here
  • Turn off face culling when rendering objects with this texture if you want the far side of the object to be visible through the cutouts, like here
  • Make sure the WebGL depth test is on
  • In your shader, check for an alpha value and discard if it’s below the appropriate threshold, like here

Here’s what the result looks like in voxeling:

Voxeling Cutouts