Coming soon... 3D without plugins

WebGL. OK, what is it...

• Hardware-assisted 3D rendering in browser
• Standards-based, multi-vendor support, no plugin required
• Appearing in browsers big and small
• based on OpenGL-es 2.0
• plugin adoption still a problem
• plugin/browser barrier a pain
• leave implementation up to the browser folks, things are better

Alternatives?

• Flash/Papervision3D
• Silverlight/Balder
• Java Applet/OpenGL/JOGL
• Flash10
• Unity3D plugin
• Torque3D plugin
• Google NaCl
• Google O3D -- WebGL prototype
• VRML -- 3D as markup, Windows-only plugin

Didn't it take years to get html5?

• It's a multivendor standard, implemented in open and closed browsers
• This one is not going to disappear or falter like VRML
• Nightly browser builds have it, supported as long as you have OpenGL
• iOS has the best adoption rate in the industry
• millions of handhelds will be WebGL-ready overnight
• android mobiles will follow, slowly
• don't hold your breath for windows mobile
• make a reasonable fallback for non-WebGL browsers and you will rock
• choose html5 or flash based on your audience

Microsoft resistance?

• Web standards and OpenGL... two thing MS already hated
• WebGL opens up another web standards battle
• Windows machines vs. OpenGL API
• Google Angle (Almost Native Graphics Layer Engine)
• Browsers do WebGL through Angle+Direct3D
• IE will never support WebGL
• WebGL working group Apple, Google, Mozilla, Opera (not MS)

Processing.js as a WebGL framework

• Quickest results
• Java-based syntax, several books document it
• Some Processing extensions are not yet in PJS, eg Network
• No fine-grained control over WebGL constructs, less flexible
• A quick demo

Features, recommendations

• Take advantage of interactive and 3D rendering
• Use the mouse and keyboard
• Move or alternate the camera
• Move light sources
• Use curved surfaces to see light effects
• Plan for effects like shadows to provide visual cues
• Use realistic approximations for gravity and other physics
• Be aware of principles of vision
• A quick Pong reloaded

Is the restaurant on the ridge?

...or in the valley?

Matrix stack

• Many frameworks borrow this idea from OpenGL
• Easily added to WebGL using the programmable pipeline
• Matrix is 4x4 to provide both rotation and translation
• Don't worry about matrix math, just ask for your transforms
• If you don't need to preserve the stack, just reset the xform matrix

consider a robot

• push a matrix # whole robot
• apply translation (to position the whole robot), modifies the top matrix
• place robot body
• push a matrix # left arm
• apply translation (to left side)
• apply rotate for the left arm
• place the left arm
• ... place fingers
• pop matrix # left arm
• push a matrix # right arm
• apply translation (to right side)
• apply rotate for the right arm
• place the right arm
• ... place fingers
• pop matrix # right arm
• pop matrix # whole robot
• Swing, robot

I wanted eye-popping 3d

• Active/Passive stereo
• OpenGL supports active stereo, a quad-buffering mode
• No surprise, WebGL leaves this out
• Anaglyphs in WebGL? Maybe.
• You can make people use the red/blue glasses
• Welcome to the world of the future
• But processingjs can't do it
• Active stereo... Java applets (eg Processing/J)
• Adjust stereo 3d depth so at the edges it meets (or falls behind) the window border
• Processing.js anaglyph attempt
• cue headache

Think multiple platforms

• Why write your 3D in java/android, objc/iOS, flash/web
• Write it once in WebGL
• Native apps can embed a webview
• An even more Mobile-friendly web
• Rethink mouse clicking/interacting
• This very tricky part can be written just once

You blinked!

• Use flash to access web cam
• demos are out there that add you to the scene
• Unfortunately, none of them work at the moment
• HTML5 webcam API will nail this
• Add to an object like Utah teapot

Websocket connection

  websock = new WebSocket("ws://localhost:8080");
  websock.onopen = function(evt) {
    console.log("opened websocket")
    websock.send("Hello Web Socket!");
  };
  websock.onmessage = function(evt) {
    console.log("received message " + evt.data);
  };
  websock.onclose = function(evt) {
    console.log("I really should try to connect again");
  };
            

Eventmachine

 require 'em-websocket'
 
 EventMachine::WebSocket.start(:host => "0.0.0.0", :port => 8080) do |ws|
  ws.onopen    { ws.send "Hello Client!"}
  ws.onmessage { |msg| ws.send "Pong: #{msg}" }
  ws.onclose   { puts "WebSocket closed" }
 end
            

run...

ProcessingJS prototyping

• mix JS with Processing
• Not optimized
• Lots of WebGL features are inaccessible
• Implement in a full js framework later

Grown-up WebGL

• X3DOM
• GLGE
• WebGLU
• SpiderGL
• C3DL
• CopperLicht

Shaders

• WebGL uses a C-like language for shaders
• Vertex shader takes coordinates, typically transforms by top matrix
• Fragment shader deals with color for fragments

  

SpiderGL examples

• Simple example
• Shadow demo

Summary

• WebGL will be the best way to do 3D on the web (eventually)
• Quick prototypes in ProcessingJS
• Watch for iOS to be the fastest adopter
• Next audience in high adopters will be developers, techies
• Have a backup plan for desktops and slow adopters
• Unity, Torque frameworks will probably target WebGL
• Frameworks like CopperLicht will likely work toward other platforms
• Consider WebGL as its own multiplatform framework

Questions