web gl & three.js.key
TRANSCRIPT
![Page 1: Web gl & three.js.key](https://reader033.vdocument.in/reader033/viewer/2022052522/554ca6b5b4c905f0178b56ae/html5/thumbnails/1.jpg)
WebGL & Three.js2012/11/30 Yi-Fan
![Page 2: Web gl & three.js.key](https://reader033.vdocument.in/reader033/viewer/2022052522/554ca6b5b4c905f0178b56ae/html5/thumbnails/2.jpg)
WebGL
Khronos Group, not W3C
A royalty-free, cross-platform API
Based on OpenGL ES 2.0
Combines with other web content
How much time to WebGL became a W3C standard?
![Page 3: Web gl & three.js.key](https://reader033.vdocument.in/reader033/viewer/2022052522/554ca6b5b4c905f0178b56ae/html5/thumbnails/3.jpg)
Browser Support
![Page 4: Web gl & three.js.key](https://reader033.vdocument.in/reader033/viewer/2022052522/554ca6b5b4c905f0178b56ae/html5/thumbnails/4.jpg)
WebGL on Webpage
![Page 5: Web gl & three.js.key](https://reader033.vdocument.in/reader033/viewer/2022052522/554ca6b5b4c905f0178b56ae/html5/thumbnails/5.jpg)
3D Coordinate Systems
![Page 6: Web gl & three.js.key](https://reader033.vdocument.in/reader033/viewer/2022052522/554ca6b5b4c905f0178b56ae/html5/thumbnails/6.jpg)
Cameras, Perspective, Viewports, and Projections
![Page 7: Web gl & three.js.key](https://reader033.vdocument.in/reader033/viewer/2022052522/554ca6b5b4c905f0178b56ae/html5/thumbnails/7.jpg)
Meshes, Polygons, and Vertices
![Page 8: Web gl & three.js.key](https://reader033.vdocument.in/reader033/viewer/2022052522/554ca6b5b4c905f0178b56ae/html5/thumbnails/8.jpg)
Materials, Textures & Lights
![Page 9: Web gl & three.js.key](https://reader033.vdocument.in/reader033/viewer/2022052522/554ca6b5b4c905f0178b56ae/html5/thumbnails/9.jpg)
Transforms and Matrices
![Page 10: Web gl & three.js.key](https://reader033.vdocument.in/reader033/viewer/2022052522/554ca6b5b4c905f0178b56ae/html5/thumbnails/10.jpg)
ShadersExample: WebGL - Three.js + impactJS
![Page 11: Web gl & three.js.key](https://reader033.vdocument.in/reader033/viewer/2022052522/554ca6b5b4c905f0178b56ae/html5/thumbnails/11.jpg)
Higher Level Libraries for WebGL
Three.js
GLGE
SceneJS
CubicVR
and more ...
![Page 12: Web gl & three.js.key](https://reader033.vdocument.in/reader033/viewer/2022052522/554ca6b5b4c905f0178b56ae/html5/thumbnails/12.jpg)
Three.js Dos
Hides 3D rendering details
Object oriented
Fast
Supports interaction
Math
Built-in file format
Extensible
Works with 2D canvas
![Page 13: Web gl & three.js.key](https://reader033.vdocument.in/reader033/viewer/2022052522/554ca6b5b4c905f0178b56ae/html5/thumbnails/13.jpg)
Three.js Dos
Feature rich: prebuilt objects like lights, geometries, particles, lines, animations, ...etc.
Examples
![Page 14: Web gl & three.js.key](https://reader033.vdocument.in/reader033/viewer/2022052522/554ca6b5b4c905f0178b56ae/html5/thumbnails/14.jpg)
Three.js Don’ts
Not a game engine
![Page 15: Web gl & three.js.key](https://reader033.vdocument.in/reader033/viewer/2022052522/554ca6b5b4c905f0178b56ae/html5/thumbnails/15.jpg)
Three.js Animations
Articulated Animation
![Page 16: Web gl & three.js.key](https://reader033.vdocument.in/reader033/viewer/2022052522/554ca6b5b4c905f0178b56ae/html5/thumbnails/16.jpg)
Three.js Animations
Skinned/Skeletal Animation
![Page 17: Web gl & three.js.key](https://reader033.vdocument.in/reader033/viewer/2022052522/554ca6b5b4c905f0178b56ae/html5/thumbnails/17.jpg)
Three.js Animations
Morphs
![Page 18: Web gl & three.js.key](https://reader033.vdocument.in/reader033/viewer/2022052522/554ca6b5b4c905f0178b56ae/html5/thumbnails/18.jpg)
Animations using javascript
setTimeout
setInterval
requestAnimationFrame
![Page 19: Web gl & three.js.key](https://reader033.vdocument.in/reader033/viewer/2022052522/554ca6b5b4c905f0178b56ae/html5/thumbnails/19.jpg)
Reference
Can I use...
Microsoft: no way to support WebGL and meet our security needs
WebGL: Up and Running
Shader
three.js
Better JavaScript animations with requestAnimationFrame