0

The new examples for multiscreen purpose that you can see here :

webgl_multiple_canvases_circle

webgl_multiple_canvases_complex

webgl_multiple_canvases_grid

Are really cool, they even talk about the google Liquid galaxy project : liquidGalaxy

So, basically, I wonder how would I adapt the app in order to fit the need of multiple screen, lets say four 1920x1080 display, all displaying a nice part of the image.

I end up with a basic proof of concept, where I simply display new window screen content/canvas and sync the mouse position thru a node.js server and socket.io.

This works smoothly until I display window of different size.

See bellow the case where it fails.

For the record, please note that the full app is not working (the screen are not yet ready to be created on different computer), I'd like to first fix this offset issue.

thanks !

Oh, and if you want to try out or contribute, the project is here :

Screeny

Here, you can see the scene is a bit distorded and the window height are different

Here, you can see the scene is a ok and the window height are the same

Thanks again !

gabrielstuff
  • 1,286
  • 1
  • 13
  • 16
  • Can you modify the three.js complex example to put canvases of different heights on one machine? That seems to show it works. Here's an example: http://greggman.com/downloads/examples/three.js/examples/webgl_multiple_canvases_complex_different_heights.html – gman Oct 06 '13 at 00:37
  • Are you doing something special ? The image here : [Image with border](http://i.imgur.com/KCkP3pE.png) shows the border moving as the camera view change vertically ? Also, did you tried the project with synched camera axis by socket.io ? – gabrielstuff Oct 06 '13 at 12:23
  • Ok got it :) you examples makes me think twice. As all the examples are based on one window only, I can not use the windowHalfX and windowHalfY value. Working on it. Thanks – gabrielstuff Oct 06 '13 at 13:04

1 Answers1

0

Ok, this was quiet logical, the windowHalfX value should be passed to each window. Now it works perfectly and code is updated. thanks for your remark !

The solution was to transfered with the mouseMove event the size of the current window and accordingly update all the window based on the window where movement happen.

Going deeper to make a fully working examples for separated computer.

gabrielstuff
  • 1,286
  • 1
  • 13
  • 16
  • If it was me I'd transfer the camera's info (translation, rotation, fov), not the mouse movements. – gman Oct 06 '13 at 20:14
  • well, depend on the final use, I'm just trying to check that the multiscreen / area rendering could be use in real life. So basically, you are right, for non interactive and for simple Scene rendering camera position synching would be the best. I'll keep you posted when the configurator will be ready. – gabrielstuff Oct 07 '13 at 21:16