Ever wondering how to render multiple scenes into multiple canvases? Efficiently? Here's a method for doing that.

Actually you need only one canvas! You just pick some divs, let's say #scene1, #scene2 and a rendering function renderFunction that draws triangle for example. GLOVERLAY automatically creates fullscreen transparent canvas that draws the scene with renderFunction into areas accomodated by the divs #scene1, #scene2.

You can have multiple renderFunction functions which means for example one scene is rendered in the first div and the other one is rendered into another div. Cool huh?

var gl;
// you need to initialize WebGL context yourself
var relations = [{renderFunction: function () { drawSomething(gl); }, placeholders: ['#scene1', '#scene2']}];
overlay = GLOVERLAY(gl, relations);
overlay.render(); // do it in rendering loop

Copyright David Hrachovy