Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web zurich 2020

238 views

Published on

The video of the talk: https://youtu.be/2cft_AEHec4?t=587

"3D miracle basics"
Have you ever seen some WOW effects on the website which you don't know how to make? Let's look at inspiring interactive examples of WebGL application. Then we meet with the basic concepts of 3D. I’ll show you how to write a simple 3D viewer using Three.js library and we add to this some interesting features. Don't be scary, you will love it!

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Web zurich 2020

  1. 1. 3D miracle basics Vasilika Klimova @Lik04kaWeb Zurich
  2. 2. 2 florian-rappl.de Games
  3. 3. 3 Frontend Developer
  4. 4. Community 4
  5. 5. 5 SkillUp School skillup.lu
  6. 6. 3D in web browser 6 viewshape.com
  7. 7. Support 7caniuse.com
  8. 8. 8 Maps / Statistics covid3d.live
  9. 9. 9 Gallery celialopez.fr
  10. 10. 10 Creative Developer mathis-biabiany
  11. 11. 11 Car viewer playcanv.as
  12. 12. 12 Real estate home.by.me
  13. 13. 13 UI buttons dribbble.com/ui-buttons dribbble.com/ui-toggler
  14. 14. 14 Renovation zygotebody.com
  15. 15. Presentation 15 nytimes.com
  16. 16. 16 OpenGL Shading Language JavaScript ++ <canvas>
  17. 17. 17 • Point • Polygon Vertex Polygon Vertex Vertex 3D basics
  18. 18. 18 Polygonal model
  19. 19. 19 Shaders
  20. 20. • C Syntax • Types • Use GPU • JS Strings • Runtime 20 OpenGL Shading Language - GLSL
  21. 21. • bool • int • float • vec2 / vec3 / vec4 • mat2 / mat3 / mat4 • sampler2D 21 Data types
  22. 22. Shaders types 22 •Vertex shaders •Fragment shaders
  23. 23. WebGL point 23
  24. 24. Point 24
  25. 25. 25
  26. 26. 26 @mrdoob
  27. 27. 3D object 27 • Mesh • Geometry • Material • Texture
  28. 28. 28 • Scene • Light • Camera • Renderer Main Classes
  29. 29. Orthographic camera 29 Perspective camera
  30. 30. 30 Materials
  31. 31. 31 Textures
  32. 32. 32 Example Setup Draw threejs.org
  33. 33. 33 Show model from OBJ file • three.min.js • OBJLoader.js • TrackballControls.js
  34. 34. 34 Example animate: function() { requestAnimationFrame(animate); controls.update(); renderer.render(scene, camera); } Request the browser to repeat animate() Draw model Update camera position requestAnimationFrame
  35. 35. 35 vasilika.ru Lika’s 3D model
  36. 36. Particles 36
  37. 37. 37 Interactive Particles tympanus.net
  38. 38. 38 threejs.org/examples
  39. 39. 39 • High GPU Performance • No compilation • Cross-platform (desktop, mobile, VR / AR) • Open standard WebGL Features
  40. 40. Links 40 • discoverthreejs.com • WebGL Fundamentals • WebGL Academy • Mozilla • Three.js Books
  41. 41. Walt Disney 41 All our dreams come true, if we have the courage to pursue them
  42. 42. LuxembourgJS 42 luxembourgjs.com
  43. 43. 43 vasilika.ru Vasilika KlimovaLik04ka Special thanks to @mrmaxm

×