The WebGL Aquarium

Controls

Options

Running across multiple machines

The Aquarium demo can by run synchronized across multiple machines.

To run it across multiple machines each machine must be running a browser that supports WebGL and WebSockets. Chromium for example. Next, the clocks of the 5 machines must be in sync. Then start the server. See here for instructions. Finally run the Aquarium with a URL in the following format.

http://address_of_server:port_of_server/aquarium/aquarium.html?settings={net:{sync:true,rotYMult:mult}}

Where address_of_server is the domain name or ip address of the server, port_of_server is the port of the server, and mult is 0 for the center machine, positive for machines to the right of the server and negative for machines to the left.

In other words, if the server is "myserver.com" and your running on port 8080 and you had 5 machines, A, B, C, D, E in that order left to right and you wanted machine C to be the master the URLs would for each machine would be:

Machine A: http://<ipaddressofserver>.com:8080/aquarium/aquarium.html?settings={net:{sync:true,ui:false,slave:true,fovMult:1.0,rotYMult:-2}}
Machine B: http://<ipaddressofserver>.com:8080/aquarium/aquarium.html?settings={net:{sync:true,ui:false,slave:true,fovMult:1.0,rotYMult:-1}}
Machine C: http://<ipaddressofserver>.com:8080/aquarium/aquarium.html?settings={net:{sync:true,ui:true,slave:false,fovMult:1.0,rotYMult:0}}
Machine D: http://<ipaddressofserver>.com:8080/aquarium/aquarium.html?settings={net:{sync:true,ui:false,slave:true,fovMult:1.0,rotYMult:-1}}
Machine E: http://<ipaddressofserver>.com:8080/aquarium/aquarium.html?settings={net:{sync:true,ui:false,slave:true,fovMult:1.0,rotYMult:-2}}

At that point, settings changed on the master should be propagated to the slaves.

Options:

ui:boolean

Whether or not to display a user interface.

sync:boolean

Whether or not to get settings from a server

slave:boolean

Whether or not to send settings to the server. False = send

rotYMult:number

The amount to multiply the field of view for each monitor. Assumes they are all the same size.

fovMult:number

The amount to multiply the field of view offset for each monitor.

The system computes the field of view for the monitor and multiplies by both rotYMult and fovMult to compute how much to rotate the view for each monitor. Think of rotYMult as a per machine setting and fovMult as a global setting. Adjust fovMult to specify the gap between monitors. For example on the Liquid Galaxy in the video above the fovMult is 1.12

fovFudge:number

The amount to multiply the global field of view all monitors.

This is to work around a large array of monitors as the field of view setting is currently for a single monitor. For example if you have 4 monitors across you probably want to set this to 0.25

offset:array

The amount to offset the frustum. Used to make a large virtual monitor. Example: offset:[-1,0] would define a monitor 1 unit left of the center monitor.

offsetMult:number

Amount to multiply the offset by. Think of offset as a per machine setting and offsetMult as a global setting.

Terse Setup

These steps worked for me as of 2017/12/1

On macOS

  1. download the source
  2. install node.js from http://nodejs.org/
    Mine was 8.9.1
  3. cd to the server folder of the samples (ie, "cd webglsamples/server")
  4. install node deps by typing "npm install"
  5. type node server.js
  6. Start Chrome or Firefox
  7. Make the window horizontally about 1/2 the size of your monitor or less
  8. Make a new tab. Pull it off the window so you now have 2 browser windows and arrange the 2 windows (which would both be the same size now) side by side
  9. In the right window use this URL
    http://localhost:8080/aquarium/aquarium.html?settings={net:{sync:true,ui:true,slave:false,fovMult:1.0,rotYMult:0}}
  10. In the left window use this URL
    http://localhost:8080/aquarium/aquarium.html?settings={net:{sync:true,ui:false,slave:true,fovMult:1.0,rotYMult:-1}}

It will take up a few seconds for them to sync I think but it was working for me ;-)

To run it across machines, change "localhost" to the ip address of the machine running node.js

Note: you might have to stop and start node.js which you can do by pressing Ctrl+Break twice in it's window

Implemenation Notes:

The aquarium runs almost entirely based on a clock. That means the position of the camera and every fish will be the same across machines if their clocks are in sync. When in networked mode each machine keeps its clock in sync by periodically asking the server for the current time. Otherwise, using node.js and the websocket library the master sends a JSON string with any new settings to the server. The server then broadcasts those settings to each of the machines.