Learn Green Buildings Demos

For Learn Green Buildings, we are transitioning away a downloadable Learner Application as was used in Learn HVAC to a browser based solution. In partnership with SRI's Kuda team, we are using WebGL to make Learn Green Buildings part of this open-source JavaScript API movement, which facilitates dynamic, interactive 3D applications within a web browser—no plug-in required. To view samples, please see the links below.

It of course should be noted that these demos are generated for internal exploration and testing purposes. The final product may look and feel nothing like these mockups. That said, please feel free to contact us with comment and suggestions. Email: admin at su-per-b.org

For most of the demos below, they use a common 3d user interface:

  • Left-click and drag will rotate the model.
  • Wheel on the mouse will zoom in and out.
  • Holding Shift and left-click drag will pan.
  • For individual demos, I list the special keyboard commands next to the demo link.

The demos below are WebGL based.
Although will soon be standard on Chome, Firefox, and Safari, as of right now you may have to download a the latest version of one of these browsers. Both Firefox 4 and the Chrome seem to work great in our tests. You may also have to manually turn on WebGL in Firefox; if so: Type "about:config" in your browser's URL bar - Do a search for "webgl" in the Filter field - Double-click the "enabled_for_all_sites" preference to change it to "true".
Safari does not seem to work yet, and of course, Internet Explorer does not work (why in the world would you be using IE anyways?)

July 29th, 2010: http://www.su-per-b.org/demo9/

Particle system, basic gui, multiple building models


April 27, 2011: http://www.su-per-b.org/demo6/
Combining particle system, GUI, and Basic building model.

April 25, 2011: http://www.su-per-b.org/demo5/part/Particles.html/
New particle system.

April 25, 2011: http://www.su-per-b.org/demo4/
Gui interface with with active buttons to turn on the different system.

April 11, 2011: http://su-per-b.org/kuda1.3/projects/fourth_floor_with_gui/
This uses an HTML/Ajax overlay to display the left nav and the title bar. On this demo if you hit the 'Enter' key, you will orbit around the model and see a one of the blue plane shapes at the top. Then if you click the top button on the left nav you will see the transparency of that object change. There is no progress bar as of yet, on this, so your screen may go black while it loads

These demos below run off of O3D, for which you will have to download the o3d plugin in order to view the them.

Also note that ironically, at the last test, Chrome, although functional, ran these demos incredibly slowly. Firefox worked fine.

April 6th, 2011: http://su-per-b.org/demo3/
This demo is a refinement of the Demo 2 partical system.

Don't want to install the O3D plugin? Watch this video of Demo 3 in action instead.

March 30, 2011: http://su-per-b.org/demo2/
In this demo you can use the links at the top of the screen to select a zone. When you mouse-over the link, then you see a red volume of space that represents the zone. When you click on the link the camera zooms into that zone and shows the diffuser.

March 4th, 2011: http://su-per-b.org/demos/
This first version includes four demos. The first is a simple hot-spot nav system. Navigate using the controls listed above or click the red boxes to move the camera to that location. The seconduses keys "1" to "7" to cycle through the hot-spots. The third demos the particle system. The fourth is a preliminary GUI mockup with active buttons which load static images.