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

Small request, please don't use tinyurl links. There's no benefit to users of this site (a click is a click) and if obfuscates where the link actually ends up — Basic, Jan 09 '15 at 13:23
Usually 100% agree! problem with this one is that the link it goes to is suppppppper long ( like 1595 characters too long for a comment ) so there is some use. Is there some other way you could think of sharing the link ( the actual code of the site is encoded in the url, so theres no need for server side code ) — Cabbibo, Jan 10 '15 at 18:39
You could use [Link syntax](http://stackoverflow.com/questions/19035440/webgl-multiple-canvas-three-js-example#comment44161241_19035440) `[Title](Url)` (or better yet, use the button in the editor which moves the url to the end of the post) so that it's visible on hover but doesn't clutter the question? I admit I hadn't realised the link was that long — Basic, Jan 10 '15 at 18:43
Ah! wonderful. Both of those are techniques I didn't know about!!! — Cabbibo, Jan 11 '15 at 23:16

score 3 · Accepted Answer · edited May 23 '17 at 10:27

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

Well Crap.... I will make a new version and see how it goes! Thanks for the prompt response — Cabbibo, Sep 30 '13 at 21:10

WebGL Multiple Canvas three.js example

1 Answers1