WebGL Multiple Canvas three.js example

Question

So I am working on a project that uses multiple different cameras to renderer the scene to different canvases. Essentially I am doing this example:

http://threejs.org/examples/webgl_multiple_canvases_grid.html

The problem I have found with doing this is that the clipping plane for different scenes does weird things at the edges. With Big Objects its fine, as the example shows, but with smaller, some get clipped on the edge. I've made an example showing the problem with this below.

http://tinyurl.com/pjstjjd

I was wondering if there is anyway to fix this. A few different ways I was going to try and explore it are as follows:

• try and overlap the reneders a bit so that the clipping plane is wider.
• See if there is any way to turn off clipping
• cry myself to sleep.

Is there something simple I'm missing, or will I have to dig in deeper.

Thank you very much in advance for your time! Isaac

Answer 1

The problem is you're creating 4 App objects and in each one you create different random spheres. So your 4 views have different sets of spheres in different places. If you want the views to match you have to put the objects in the same places in each App.

I pasted this code at line 129 in your sample

var randomSeed_ = 0;
var RANDOM_RANGE_ = Math.pow(2, 32);

Math.random = function() {
  return (randomSeed_ =
          (134775813 * randomSeed_ + 1) %
           RANDOM_RANGE_) / RANDOM_RANGE_;
};

Which is a random function that returns the same values for each App since randomSeed_ starts at 0 in each app.

It would help to know what you're ultimately trying to achieve. The Three.JS sample you linked to is intended to show how to spread rendering across multiple monitors on 4 different machines in a grid.

This one shows if the monitors are different sizes and not in a grid. This one shows if the monitors are in a circle or semi circle. For example Google's Liquid Galaxy.

This one shows multiple views in a single canvas although at the time of writing this answer it looks like it needs some updating.

This one shows drawing using one large canvas and place holder elements for where to draw