Web3D - Semantic standards, WebGL, HCI
7 likes46,253 views
The document discusses the topics of Web 3D, WebGL, and 3D interaction on the web. It provides definitions and history for these topics. WebGL allows 3D graphics rendering within web browsers without plugins using OpenGL ES. It works by using shader programs written in GLSL to render 3D graphics on a canvas element. The document discusses challenges with 3D interaction due to the 2D nature of displays and inputs, and covers various techniques for 3D input and output. Examples of 3D applications using these technologies are also mentioned.
![Web 3D
[ semantic standards, webgl, hci ]](https://image.slidesharecdn.com/webgl-110603083827-phpapp02/85/Web3D-Semantic-standards-WebGL-HCI-1-320.jpg)
![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;](https://image.slidesharecdn.com/webgl-110603083827-phpapp02/85/Web3D-Semantic-standards-WebGL-HCI-40-320.jpg)
More Related Content
What's hot (20)
Viewers also liked (19)
Similar to Web3D - Semantic standards, WebGL, HCI (20)
More from Victor Porof (11)
Recently uploaded (20)
Web3D - Semantic standards, WebGL, HCI
- 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
- 6. Web 3.0? “computer is generating new information, rather than humans” Conrad Wolfram
- 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
- 10. 3.0D? © pl4n3
- 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
- 22. Libraries ¤ GLGE ¤ C3DL ¤ Copperlicht ¤ SpiderGL ¤ SceneJS ¤ Processing.js ¤ Three.js
- 23. Libraries ¤ GLGE ¤ C3DL ¤ Copperlicht ¤ SpiderGL ¤ SceneJS ¤ Processing.js ¤ Three.js
- 24. Libraries ¤ GLGE ¤ C3DL ¤ Copperlicht ¤ SpiderGL ¤ SceneJS ¤ Processing.js ¤ Three.js
- 25. We’ll see some three.js demos
- 26. Hot on the internet a while ago… http://www.chromeexperiments.com/webgl
- 27. Yup, it’s made using WebGL http://chrome.angrybirds.com/
- 28. Hot on the internet right now… http://www.pixelnerve.com/webgl/sss/sss_singlelight.html
- 29. How does it work?
- 30. How does it work?
- 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
- 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
- 40. 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;
- 41. Better #version 140 uniform Transformation { mat4 projection; mat4 modelview; }; in vec3 vertex; void main() { gl_Position = projection * modelview * vec4(vertex, 1.0); }
- 42. Best Make the triangle pretty Color it red Kthxbye
- 43. Best Make the triangle pretty Color it red Kthxbye
- 44. Shader toy
- 46. Interaction ¤ Display/ computer screen is 2D ¤ Most input devices are 2D ¤ Mouse, trackpad etc. ¤ 3D environments are 3D
- 47. Interaction ¤ Display/ computer screen is 2D ¤ Most input devices are 2D ¤ Mouse, trackpad etc. ¤ 3D environments are 3D
- 48. Interaction ¤ Display/ computer screen is 2D ¤ Most input devices are 2D ¤ Mouse, trackpad etc. ¤ 3D environments are 3D
- 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)
- 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
- 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
- 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
- 68. Questions? O_o © pl4n3