Your SlideShare is downloading. ×
Web3D - Semantic standards, WebGL, HCI
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Web3D - Semantic standards, WebGL, HCI

333,121

Published on

Published in: Technology
1 Comment
7 Likes
Statistics
Notes
  • Flash 3D (11 beta) it's accentually better than current Webgl, scripting and 3d acceleration are extecuted faster (cause code is like java ad 3d is rendered with opengl and directX which is 30% faster on window, and support a much more video cards). WebGL is also not supported on IE, so you need a plugin anyway.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
333,121
On Slideshare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
167
Comments
1
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Web 3D[ semantic standards, webgl, hci ]
  • 2. @victorporof   GSoC  student  at  Mozilla   graphics programmer h8p://github.com/victorporof  embedded devices enthusiast passionate about low-level 3D coding
  • 3. Web 3D
  • 4. Web 3.0D
  • 5. Web 3.0?“computer is generating new information, rather than humans” Conrad Wolfram
  • 6. 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
  • 7. Web 3.0? “first generation Metaverse” John Smart
  • 8. Metaverse¤  web development layer¤  extension of Web 2.0s technologies (and social networks)¤  open video¤  3D simulations¤  augmented reality¤  human-constructed semantic standards
  • 9. 3.0D? © pl4n3
  • 10. 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)
  • 11. 3.0D?¤  software library¤  extends the capability of JavaScript¤  generate interactive 3D graphics¤  any compatible web browser¤  context of the canvas HTML element
  • 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. WebGL 3D computer graphics API without the use of plug-ins
  • 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. Big players The WebGL working group includes Apple, Google, Mozilla, and Opera
  • 19. Big players The WebGL working group includes Apple, Google, Mozilla, and Opera J their browser doesn’t support WebGL
  • 20. 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
  • 21. Libraries¤  GLGE¤  C3DL¤  Copperlicht¤  SpiderGL¤  SceneJS¤  Processing.js¤  Three.js
  • 22. Libraries¤  GLGE¤  C3DL¤  Copperlicht¤  SpiderGL¤  SceneJS¤  Processing.js¤  Three.js
  • 23. Libraries¤  GLGE¤  C3DL¤  Copperlicht¤  SpiderGL¤  SceneJS¤  Processing.js¤  Three.js
  • 24. We’ll see some three.js demos
  • 25. Hot on the internet a while ago…http://www.chromeexperiments.com/webgl
  • 26. Yup, it’s made using WebGLhttp://chrome.angrybirds.com/
  • 27. Hot on the internet right now…http://www.pixelnerve.com/webgl/sss/sss_singlelight.html
  • 28. How does it work?
  • 29. How does it work?
  • 30. The three laws of a GPU: 1.  It’s not a CPU 2.  loves geometry & pixel algebra 3.  thinks like a SIMD*
  • 31. 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
  • 32. Programs¤  Vertex shader¤  Fragment shader¤  Geometry shader ¤  Hot out of the oven ¤  Not very used ¤  Not quite supported ¤  Not really useful (arguable)
  • 33. 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
  • 34. Horror DEFINE LUMINANCE = {0.299, 0.587, 0.114, 0.0}; TEX H0, f[TEX0], TEX4, 2D; TEX H1, f[TEX2], TEX5, CUBE; DP3X H1.xyz, H1, LUMINANCE; MULX H0.w, H0.w, LUMINANCE.w; MULX H1.w, H1.x, H1.x; MOVH H2, f[TEX3].wxyz; MULX H1.w, H1.x, H1.w; DP3X H0.xyz, H2.xzyw, H0; MULX H0.xyz, H0, H1.w; TEX H1, f[TEX0], TEX1, 2D; TEX H3, f[TEX0], TEX3, 2D; MULX H0.xyz, H0, H3; MADX H1.w, H1.w, 0.5, 0.5;
  • 35. Better #version 140 uniform Transformation { mat4 projection; mat4 modelview; }; in vec3 vertex; void main() { gl_Position = projection * modelview * vec4(vertex, 1.0); }
  • 36. Best Make the triangle pretty Color it red Kthxbye
  • 37. Best Make the triangle pretty Color it red Kthxbye
  • 38. Shader toy
  • 39. Interaction¤  Display/ computer screen is 2D¤  Most input devices are 2D ¤  Mouse, trackpad etc.¤  3D environments are 3D
  • 40. Interaction¤  Display/ computer screen is 2D¤  Most input devices are 2D ¤  Mouse, trackpad etc.¤  3D environments are 3D
  • 41. Interaction¤  Display/ computer screen is 2D¤  Most input devices are 2D ¤  Mouse, trackpad etc.¤  3D environments are 3D
  • 42. 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
  • 43. 3D interaction¤  1962 – Sensorama simulator (Morton Heilig) ¤  3D video feedback ¤  motion ¤  audio ¤  haptic (tactile)
  • 44. 3D interaction¤  1962 – Sensorama simulator (Morton Heilig) ¤  3D video feedback ¤  motion ¤  audio ¤  haptic (tactile)
  • 45. 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
  • 46. 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
  • 47. 3D interaction - Output “Currently, users still have difficulty in interpreting 3D space visuals and understanding how interaction occurs”
  • 48. 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
  • 49. 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
  • 50. 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”
  • 51. 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
  • 52. 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)
  • 53. Edusim¤  free and open source¤  3D virtual worlds on an interactive whiteboard¤  direct manipulation ¤  3D virtual learning models ¤  Constructionist Learning
  • 54. 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
  • 55. 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
  • 56. 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
  • 57. Questions? O_o © pl4n3

×