Download (704 KB)


This example shows how partially transparent objects can be rendered efficiently with WebRender. The trick with this example is the use of two canvases with only a single instance of WebRender. Instead of having our shaders do the quite expensive task of calculating the colour of a transparent object, we hand that task to the browser which can use native code or hardware acceleration.

First we draw our scene with objects that are not transparent, the blue and red cubes, and using our callback function, copy the pixel data into the back canvas. Then we clear only the colour buffer and draw our transparent objects, the green cube. The callback function then copies the pixel data into the front canvas. When placed over each other using CSS, the green cube appears transparent, but behind the blue cube since the depth buffer was not cleared.

This is a fairly basic trick, but important if you want to draw scenes with transparent objects.