2. @victorporof
GSoC
student
at
Mozilla
graphics
programmer
h8p://github.com/victorporof
embedded
devices
enthusiast
passionate about
low-level 3D coding
7. Web 3.0?
Definitions vary greatly
¤ Sematic web
¤ “web of data” that enables machines to understand the
semantics, or meaning of information
¤ machine-readable metadata about pages and how they
are related to each other
¤ Personalization
8. Web 3.0?
“first generation Metaverse”
John Smart
9. Metaverse
¤ web development layer
¤ extension of Web 2.0's technologies (and social networks)
¤ open video
¤ 3D simulations
¤ augmented reality
¤ human-constructed semantic standards
11. 3.0D?
The wrong way
¤ X3D/ VRML (slow, XML)
¤ Java 3D (slower)
¤ QuickTime VR (fake panoramas)
¤ 3DMLW (similar to X3D, scripting in Lua)
¤ Flash (proprietary, limited, and of course - slow)
12. 3.0D?
¤ software library
¤ extends the capability of JavaScript
¤ generate interactive 3D graphics
¤ any compatible web browser
¤ context of the canvas HTML element
13. 3.0D?
¤ software library
¤ extends the capability of JavaScript
¤ generate interactive 3D graphics
¤ any compatible web browser
¤ context of the canvas HTML element
14. 3.0D?
¤ software library
¤ extends the capability of JavaScript
¤ generate interactive 3D graphics
¤ any compatible web browser
¤ context of the canvas HTML element
15. WebGL
3D computer graphics API
without the use of plug-ins
16. WebGL
3D computer graphics API
without the use of plug-ins
17. WebGL
3D computer graphics API
without the use of plug-ins
18. WebGL
3D computer graphics API
without the use of plug-ins
19. Big players
The WebGL working group includes
Apple, Google, Mozilla, and Opera
20. Big players
The WebGL working group includes
Apple, Google, Mozilla, and Opera
J
their browser
doesn’t support WebGL
21. When?
¤ Canvas 3D experiments started by Vladimir Vukićević
¤ at Mozilla
¤ prototype in 2006
¤ end of 2007: both Mozilla and Opera had made their
own separate implementations
¤ early 2009: Mozilla and Khronos started the WebGL
Working Group
33. The three laws of a GPU:
1. It’s not a CPU
2. loves geometry &
pixel algebra
3. thinks like a SIMD*
34. The three laws of a GPU:
1. It’s not a CPU
2. loves geometry &
pixel algebra
3. thinks like a SIMD*
*SIMD = is a class of parallel computers: single instruction, multiple data
35.
36.
37.
38. Programs
¤ Vertex shader
¤ Fragment shader
¤ Geometry shader
¤ Hot out of the oven
¤ Not very used
¤ Not quite supported
¤ Not really useful (arguable)
39. GLSL
¤ GLslang J
¤ high level shading language
¤ based on the C programming language
¤ (yes, it’s high level!)
¤ looks a lot better than first shader languages
49. 3D interaction
¤ a form of human-computer interaction
¤ users are should be able to move and perform
interaction in 3D space
¤ the 3D space used for interaction can be
¤ the real physical space
¤ virtual space representation simulated in the computer
¤ a combination of both
50. 3D interaction
¤ 1962 – Sensorama simulator (Morton Heilig)
¤ 3D video feedback
¤ motion
¤ audio
¤ haptic (tactile)
51. 3D interaction
¤ 1962 – Sensorama simulator (Morton Heilig)
¤ 3D video feedback
¤ motion
¤ audio
¤ haptic (tactile)
52.
53. 3D interaction
¤ should be intuitive
¤ after all, humans interact in three dimensions in the real world
¤ interaction devices – 3D interfaces
¤ used in applications that feature virtual environments, and
augmented and mixed realities
54. 3D interaction
¤ should be intuitive
¤ after all, humans interact in three dimensions in the real world
¤ interaction devices – 3D interfaces
¤ used in applications that feature virtual environments, and
augmented and mixed realities
55. 3D interaction - Output
“Currently, users still have difficulty in
interpreting 3D space visuals and
understanding how interaction occurs”
56. 3D interaction - Output
¤ visual displays
¤ Head-mounted displays and CAVEs
Cave Automatic Virtual Environment
¤ semi-immersive displays allow users to see both
¤ auditory displays
¤ specially useful when supplying location and spatial
information to the users
¤ haptic displays
¤ tactile feedback or feeling
57. 3D interaction - Output
¤ natural way for humans to move around in a three-
dimensional world
¤ many sensory cues present in real environments are
missing from virtual environments
¤ sensory cue = “a statistic or signal that can be extracted
from the sensory input by a perceiver, that indicates the
state of some property of the world that the perceiver is
interested in perceiving”
¤ 2D surface = inconsistencies in depth perception
58. 3D interaction - Input
“Using 3D representations is not enough to
create 3D interaction.
The users must have a way of performing
actions in 3D as well”
59. 3D interaction - Input
¤ special/ modified input devices
¤ ex: 3D mouse
¤ trackers
¤ detect or monitor head, hand or body movements
¤ important for presenting the correct viewpoint
¤ coordinate the spatial and sound information
¤ ex: motion trackers, eye trackers, data gloves, bodysuits
60. 3D interaction input techniques
¤ selection and manipulation
¤ selecting, rotating and moving an object
¤ direct-hand manipulation is the most natural technique
¤ navigation
¤ wayfinding
¤ travel
¤ system control (menus, gestures, voice commands)
¤ symbolic input (add or edit text, ex: annotation)
61. Edusim
¤ free and open source
¤ 3D virtual worlds on an interactive whiteboard
¤ direct manipulation
¤ 3D virtual learning models
¤ Constructionist Learning
62. Open Cobalt Project
¤ free and open source software platform (Smalltalk)
¤ constructing, accessing, and sharing virtual world
¤ on local area networks
¤ across the Internet
¤ without any requirement for centralized servers
¤ create deeply collaborative and hyperlinked multi-user
virtual workspaces
63.
64.
65. Mozilla - Tilt Project
¤ 3D visualization of a webpage
¤ WebGL
¤ visualization tool
¤ a developer-friendly environment for debugging
¤ information displayed on request:
¤ document’s structure
¤ nesting of the DOM tree
¤ each node’s type, class, id, and other attributes if available
66.
67. Mozilla – Tilt Project
¤ https://github.com/victorporof/Tilt
¤ http://blog.mozilla.com/Tilt
¤ Shedule: April 25th – August 22nd
¤ Deliverables:
¤ Firefox extension + export to compatible browsers
¤ WebGL javascript library designed to facilitate creating web
page DOM visualizations