home_pro2_step2's Introduction
<html> <head> <title>WebGL Aquarium Notes</title> <style> BODY { font-family: sans-serif; } PRE { background-color: #ccc; margin-left: 4em; margin-right: 4em; } TABLE TD { border: 1px solid black; padding: 0.5em; vertical-align: top; } OL>LI { margin-top: 1em; } </style> </head> <body> <h1>The WebGL Aquarium</h1> <h2>Controls</h2> <ul> <li>Use the mouse to change various settings.</li> <li>Click the * to bring up more settings.</li> <li>Press SPACE to change the view.</li> <li>Press L for sharks with frikken lasers. Looks best from an outside view.</li> </ul> <h2>Options</h2> <ul> <li> <h3>numFish</h3> <p>set the number of fish</p> <pre><a href="aquarium.html?numFish=1234">https://webglsamples.github.io/aquarium/aquarium.html?numFish=1234</a></pre> </li> <li> <h3>canvasWidth, canvasHeight</h3> <p>set the canvas size, default value: 1024 * 1024</p> <pre><a href="aquarium.html?canvasWidth=1920&canvasHeight=1080">https://webglsamples.github.io/aquarium/aquarium.html?canvasWidth=1920&canvasHeight=1080</a></pre> </li> <li> <h3>fillWindow</h3> <p>set the canvas size to always fit the window, default value: false</p> <pre><a href="aquarium.html?fitWindow=true">https://webglsamples.github.io/aquarium/aquarium.html?fitWindow=true</a></pre> </li> </ul> <h2>Running across multiple machines</h2> <p>The Aquarium demo can by run synchronized across multiple machines.</p> <iframe width="800" height="450" src="https://www.youtube.com/embed/64TcBiqmVko?rel=0" frameborder="0" allowfullscreen></iframe> <p>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. <a href="../server/README.html">See here for instructions</a>. Finally run the Aquarium with a URL in the following format.</p> <pre>http://address_of_server:port_of_server/aquarium/aquarium.html?settings={net:{sync:true,rotYMult:mult}}</pre> <p>Where <i>address_of_server</i> is the domain name or ip address of the server, <i>port_of_server</i> is the port of the server, and <i>mult</i> is 0 for the center machine, positive for machines to the right of the server and negative for machines to the left.</p> <p>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:</p> <pre> 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}} </pre> <p>At that point, settings changed on the master should be propagated to the slaves.</p> <h3>Options:</h3> <table> <tr><td>ui:</td><td>boolean</td><td><p>Whether or not to display a user interface.</p></td></tr> <tr><td>sync:</td><td>boolean</td><td><p>Whether or not to get settings from a server</p></td></tr> <tr><td>slave:</td><td>boolean</td><td><p>Whether or not to send settings to the server. False = send</p></td></tr> <tr><td>rotYMult:</td><td>number</td><td><p>The amount to multiply the field of view for each monitor. Assumes they are all the same size.</p></td></tr> <tr><td>fovMult:</td><td>number</td><td><p>The amount to multiply the field of view offset for each monitor.</p><p>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</p></td></tr> <tr><td>fovFudge:</td><td>number</td><td><p>The amount to multiply the global field of view all monitors.</p><p>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</p></td></tr> <tr><td>offset:</td><td>array</td><td><p>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.</p></td></tr> <tr><td>offsetMult:</td><td>number</td><td><p>Amount to multiply the offset by. Think of offset as a per machine setting and offsetMult as a global setting.</p></tr> </table> <h3>Terse Setup</h3> <p>These steps worked for me as of 2017/12/1</p> <p>On macOS</p> <ol> <li>download the source</li> <li>install node.js from <a href="http://nodejs.org/">http://nodejs.org/</a><br/> Mine was 8.9.1</li> <li> <li>cd to the server folder of the samples (ie, "cd webglsamples/server")</li> <li>install node deps by typing "npm install"</li> <li>type node server.js</li> <li>Start Chrome or Firefox</li> <li>Make the window horizontally about 1/2 the size of your monitor or less</li> <li>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</li> <li>In the right window use this URL<br/> <a href="http://localhost:8080/aquarium/aquarium.html?settings={net:{sync:true,ui:true,slave:false,fovMult:1.0,rotYMult:0}}">http://localhost:8080/aquarium/aquarium.html?settings={net:{sync:true,ui:true,slave:false,fovMult:1.0,rotYMult:0}}</a></li> <li>In the left window use this URL<br/> <a href="http://localhost:8080/aquarium/aquarium.html?settings={net:{sync:true,ui:false,slave:true,fovMult:1.0,rotYMult:-1}}">http://localhost:8080/aquarium/aquarium.html?settings={net:{sync:true,ui:false,slave:true,fovMult:1.0,rotYMult:-1}}</a></li> </ol> <p>It will take up a few seconds for them to sync I think but it was working for me ;-)</p> <p>To run it across machines, change "localhost" to the ip address of the machine running node.js</p> <p>Note: you might have to stop and start node.js which you can do by pressing Ctrl+Break twice in it's window</p> <h2>Implemenation Notes:</h2> <p>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.</p> </body> </html>
home_pro2_step2's People
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.