Downloaded 50 times
More Related Content
![[JS EXPERIENCE 2018] Jogos em JavaScript com WebGL - Juliana Negreiros, Codem...](https://cdn.slidesharecdn.com/ss_thumbnails/15h20-15h50-juliananegreiros-180706162350-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Similar to ENEI16 - WebGL with Three.js
![3D Web Programming [Thanh Loc Vo , CTO Epsilon Mobile ]](https://cdn.slidesharecdn.com/ss_thumbnails/thanhlocvo-3dprogramming-131125060122-phpapp02-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
ENEI16 - WebGL with Three.js
- 1. WebGL with three.js ENEI2016 José Ferrão
- 2. Setup Text editor (sublime,emacs, vim, brackets, notepad, ...) Web Browser (Firefox, chrome, edge, ...) Phyton 3.0+ 2 Files Files for the workshop available at github.com/tentone/enei2016
- 3. Presentation José Manuel MirandaFerrão MIECT, Aveiro University 3 tentone@outlook.com github.com/tentone twitter.com/tentonej
- 4. 4 IDKwGL (github.com/tentone/idkwgl) • WebGLbased library for 3D graphics •My first contact with WebGL
- 5. 5 nunuStudio (github.com/tentone/nunuStudio) • IDEfor web 3D and VR applications development • Based on three.js
- 6.
- 7.
- 8. Objectives • Introduce baseconcepts about graphic programming • Explore the three.js library • Introduce WebVR with three.js 8
- 9. Javascript • Originally developedby Brendan Eich in 1995 • JavaScript is standardized by the ECMAScript specifications • A browser reads the code and runs it directly 9 • Javascript is getting faster • But still ... stop using it for everything ... please
- 10.
- 11. WebGL • WebGL isa Javascript API for rendering 3D graphics using the computer GPU • No plugins are required • WebGL specification is close the to the OpenGL ES 2.0 specification • Graphics programming can be hard • Mathematics • GLSL 11
- 12. How to drawan Owl 12 “Afunandcreateguideforbeginners” First step Draw 2 circles Second step Draw the rest of the damn Owl
- 13. Rendering pipeline 13 “From datato screen”
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21. GLSL GLSL is aC-like language that runs in the GPU to draw images 21 Fragment shader Operate at pixel level and are used to control how the objects surface is draw Vertex shader Operate on the vertex level and can be used to deform objects
- 22.
- 23. Shadertoy (www.shadertoy.com) Website toshare GLSL shaders 23
- 24.
- 25.
- 26. • Cross-browser highlevel library for WebGL graphics • User all over the internet • Compreensive API for beginners 26 three.js (www.threejs.org) Released by Ricardo Cabello to GitHub in 2010 github.com/mrdoob twitter.com/mrdoob
- 27.
- 28.
- 29.
- 30.
- 31. Can we makeit move? 31
- 32.
- 33. Scale 33 ቊ x′ = 2∙ x y′ = 2 ∙ y
- 34. Rotation 34 ቊ x′ = cos 45∙ x − sin(45) ∙ y y′ = sin 45 ∙ x + cos(45) ∙ y
- 35. Translation 35 ቐ 𝑥′ = 𝑥+ 𝑤 ∙ 10 𝑦′ = 𝑦 𝑤 = 1
- 36. Matrix Transformations 𝑥′ =𝑎 ∙ 𝑥 + 𝑏 ∙ 𝑦 + 𝑐 ∙ 𝑧 + 𝑑 ∙ 𝑤 𝑦′ = 𝑒 ∙ 𝑥 + 𝑓 ∙ 𝑦 + 𝑔 ∙ 𝑧 + ℎ ∙ 𝑤 𝑧′ = 𝑖 ∙ 𝑥 + 𝑗 ∙ 𝑦 + 𝑘 ∙ 𝑧 + 𝑚 ∙ 𝑤 𝑤′ = 𝑛 ∙ 𝑥 + 𝑜 ∙ 𝑦 + 𝑝 ∙ 𝑧 + 𝑞 ∙ 𝑤 36 𝑥′ 𝑦′ 𝑧′ 𝑤′ = 𝑎 𝑏 𝑐 𝑑 𝑒 𝑓 𝑔 ℎ 𝑖 𝑗 𝑘 𝑚 𝑛 𝑜 𝑝 𝑞 ∙ 𝑥 𝑦 𝑧 1 • Most of the graphic API’s apply linear transformations using transformation matrixes • A transformation matrix is multiplied by the model vertices to get the transformated vertices
- 37. 3D Objects • Objectsare represented in a 3D space • Position • Scale • Rotation • Objects are organized in a tree structure • Parents properties affect the children objects
- 38.
- 39.
- 40.
- 41.
- 42. Mouse and keyboardinput 42
- 43.
- 44.
- 45.
- 46.
- 47. Lights Ambient Diffuse SpecularCombined + + =
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54. Shading 54 Smooth shading (per pixel) Flatshading (per vertex)
- 55. Shading 55 Smooth shading (per pixel) Flatshading (per vertex)
- 56.
- 57.
- 58.
- 59. Basic Material 59 •Simple material •Supports coloring • Transparency • Alpha maps • No lighting
- 60. Lambert Material 60 • Everythingthat is supported in basic material • Per vertex lighting • Environment mapping
- 61. Phong Material 61 • Perpixel lighting • Specular component • Normal maps • Specular maps • Displacement maps
- 62. PBR Material 62 • Metalnessand roughness • Based on a physical model • Allows designers to collect material characteristics from the real world • Clear coat
- 63.
- 64.
- 65.
- 66. UV Mapping 66 UV mappingis the process of projecting a 2D image to a 3D model surface
- 67.
- 68.
- 69.
- 70. Normal Mapping 70 Original w/Normal map
- 71. Normal Mapping 71 Original 4M Triangles Simplified 500Triangles Simplified + Normal map
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79. Tesselation 79 • Consists inrepeatedly subdividing the a geometry into a finer mesh • The GPU generates more vertices and triangles dynamically • Used with displacement mapping to improve object quality dynamically
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87. Shadows Point, directional andspot ligths can cast shadows 87
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 94.
- 95.
- 96.
- 97.
- 98.
- 99.
- 100. WebVR (w3c.github.io/webvr/) • WebVRis an JavaScript API that provides access to Virtual Reality devices, in your browser. • WebVR is still an experimental feature • Special builds of browsers are required for now 100
- 101.
- 102. WebVR 102 Microsoft Edge (Announced) Google Chrome WebVR1.1 Mozilla Firefox WebVR 1.1 Samsung Gear VR Browser
- 103.
- 104.
- 105. Performance tips • Polygoncount • Reduce polygon count and use normal maps • Buffered Geometry vs Geometry • Material performance • Basic and Lambert materials peform better • Object count • Merge geometries when possible 105
- 106.
- 107. A-Frame • VR WebApps written in HTML • Entity-component ecosystem • Built on top of three.js 107
- 108. WebGL 2.0 • Basedon OpenGL 3 ES 108
- 109.
- 110. References THREE.JS - http://threejs.org/(September 18, 2016) AlteredQualia - http://alteredqualia.com/ (September 18, 2016) Open.gl - https://open.gl/drawing (October 04, 2016) OpenGL Tutorial - http://www.opengl-tutorial.org/ (October 04, 2016) FlatIcon - http://www.flaticon.com/ (October 04, 2016) nunuStudio - https://github.com/tentone/nunustudio (October 05, 2016) Acko.net - https://acko.net/ (October 05, 2016) Oculus - https://developer.oculus.com/webvr/ (October 05, 2016) NVIDIA - http://www.nvidia.com/object/tessellation.html (October 05 2016) 110