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:
Compare that to these glass blocks in Minecraft. Notice that the glass pane’s color is blended with the pixels behind it:
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:
