The State of the Art - Airtight Interactive · 2011. 12. 12. · • Freelance web developer and...
Transcript of The State of the Art - Airtight Interactive · 2011. 12. 12. · • Freelance web developer and...
![Page 1: The State of the Art - Airtight Interactive · 2011. 12. 12. · • Freelance web developer and creative technologist • . GPU Rendered Web 3D](https://reader035.fdocuments.net/reader035/viewer/2022071115/5ffbf2fa68e3ed35a177cc02/html5/thumbnails/1.jpg)
The State of the Art3D in the Browser
![Page 2: The State of the Art - Airtight Interactive · 2011. 12. 12. · • Freelance web developer and creative technologist • . GPU Rendered Web 3D](https://reader035.fdocuments.net/reader035/viewer/2022071115/5ffbf2fa68e3ed35a177cc02/html5/thumbnails/2.jpg)
Who Am I?
• Felix Turner
• Freelance web developer and creative technologist
• www.airtightinteractive.com
![Page 3: The State of the Art - Airtight Interactive · 2011. 12. 12. · • Freelance web developer and creative technologist • . GPU Rendered Web 3D](https://reader035.fdocuments.net/reader035/viewer/2022071115/5ffbf2fa68e3ed35a177cc02/html5/thumbnails/3.jpg)
GPU Rendered Web 3D
• Stage3D (ActionScript)
• WebGL (JavaScript)
• Unity3D (JavaScript, C#, Boo)
![Page 4: The State of the Art - Airtight Interactive · 2011. 12. 12. · • Freelance web developer and creative technologist • . GPU Rendered Web 3D](https://reader035.fdocuments.net/reader035/viewer/2022071115/5ffbf2fa68e3ed35a177cc02/html5/thumbnails/4.jpg)
Stage3D
• Flash 11API
• Enables GPU accelerated 2D/3D graphics
• 3D Engines:
• Away 3D 4
• Alternativa 8
• Flare 3D
![Page 5: The State of the Art - Airtight Interactive · 2011. 12. 12. · • Freelance web developer and creative technologist • . GPU Rendered Web 3D](https://reader035.fdocuments.net/reader035/viewer/2022071115/5ffbf2fa68e3ed35a177cc02/html5/thumbnails/5.jpg)
WebGL
• Open Standard Library
• Implemented directly in browser
• 3D Engines:
• Three.js
• J3D
• Processing.js
![Page 6: The State of the Art - Airtight Interactive · 2011. 12. 12. · • Freelance web developer and creative technologist • . GPU Rendered Web 3D](https://reader035.fdocuments.net/reader035/viewer/2022071115/5ffbf2fa68e3ed35a177cc02/html5/thumbnails/6.jpg)
Supported Platforms
• Hardware Requirements
• Recent Graphics Card
• Browser Requirements
• Stage3D - Flash Player 11
• WebGL - Chrome, Firefox, Safari and Opera
![Page 7: The State of the Art - Airtight Interactive · 2011. 12. 12. · • Freelance web developer and creative technologist • . GPU Rendered Web 3D](https://reader035.fdocuments.net/reader035/viewer/2022071115/5ffbf2fa68e3ed35a177cc02/html5/thumbnails/7.jpg)
Core 3D Concepts
• Renderer
• Scene
• Camera
• Geometry, Vertices
• Materials
• Lights
![Page 8: The State of the Art - Airtight Interactive · 2011. 12. 12. · • Freelance web developer and creative technologist • . GPU Rendered Web 3D](https://reader035.fdocuments.net/reader035/viewer/2022071115/5ffbf2fa68e3ed35a177cc02/html5/thumbnails/8.jpg)
Code Comparison
• Away3D
• Three.js
var cube:Cube = new Cube(material, 100,100,100);view.scene.addChild(cube);
var geometry = new THREE.CubeGeometry(100, 100, 100);var cube = new THREE.Mesh(geometry, material);scene.add(cube);
![Page 9: The State of the Art - Airtight Interactive · 2011. 12. 12. · • Freelance web developer and creative technologist • . GPU Rendered Web 3D](https://reader035.fdocuments.net/reader035/viewer/2022071115/5ffbf2fa68e3ed35a177cc02/html5/thumbnails/9.jpg)
Particle Systems
• Allow great number of simultaneous particles
• Each particle must have the same texture
![Page 10: The State of the Art - Airtight Interactive · 2011. 12. 12. · • Freelance web developer and creative technologist • . GPU Rendered Web 3D](https://reader035.fdocuments.net/reader035/viewer/2022071115/5ffbf2fa68e3ed35a177cc02/html5/thumbnails/10.jpg)
Generative Geometry
• Quads
• Lines
![Page 11: The State of the Art - Airtight Interactive · 2011. 12. 12. · • Freelance web developer and creative technologist • . GPU Rendered Web 3D](https://reader035.fdocuments.net/reader035/viewer/2022071115/5ffbf2fa68e3ed35a177cc02/html5/thumbnails/11.jpg)
Shaders
• Work directly on GPU
• Vertex Shaders - modify vertices
• Pixel Shaders - draw pixels
• Written in AGAL (Flash) or GLSL (WebGL)
![Page 12: The State of the Art - Airtight Interactive · 2011. 12. 12. · • Freelance web developer and creative technologist • . GPU Rendered Web 3D](https://reader035.fdocuments.net/reader035/viewer/2022071115/5ffbf2fa68e3ed35a177cc02/html5/thumbnails/12.jpg)
Ready for Primetime?
• Can use WebGL for client sites now
• Need to build alternative content for various devices
![Page 13: The State of the Art - Airtight Interactive · 2011. 12. 12. · • Freelance web developer and creative technologist • . GPU Rendered Web 3D](https://reader035.fdocuments.net/reader035/viewer/2022071115/5ffbf2fa68e3ed35a177cc02/html5/thumbnails/13.jpg)
Looking Forward
• More devices will support GPU 3D
• Sophisticated 3D Games in the browser
• More powerful frameworks and tooling
![Page 14: The State of the Art - Airtight Interactive · 2011. 12. 12. · • Freelance web developer and creative technologist • . GPU Rendered Web 3D](https://reader035.fdocuments.net/reader035/viewer/2022071115/5ffbf2fa68e3ed35a177cc02/html5/thumbnails/14.jpg)
Thanks!
www.airtightinteractive.com/webgltalk