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.

of

Web zurich 2020 Slide 1 Web zurich 2020 Slide 2 Web zurich 2020 Slide 3 Web zurich 2020 Slide 4 Web zurich 2020 Slide 5 Web zurich 2020 Slide 6 Web zurich 2020 Slide 7 Web zurich 2020 Slide 8 Web zurich 2020 Slide 9 Web zurich 2020 Slide 10 Web zurich 2020 Slide 11 Web zurich 2020 Slide 12 Web zurich 2020 Slide 13 Web zurich 2020 Slide 14 Web zurich 2020 Slide 15 Web zurich 2020 Slide 16 Web zurich 2020 Slide 17 Web zurich 2020 Slide 18 Web zurich 2020 Slide 19 Web zurich 2020 Slide 20 Web zurich 2020 Slide 21 Web zurich 2020 Slide 22 Web zurich 2020 Slide 23 Web zurich 2020 Slide 24 Web zurich 2020 Slide 25 Web zurich 2020 Slide 26 Web zurich 2020 Slide 27 Web zurich 2020 Slide 28 Web zurich 2020 Slide 29 Web zurich 2020 Slide 30 Web zurich 2020 Slide 31 Web zurich 2020 Slide 32 Web zurich 2020 Slide 33 Web zurich 2020 Slide 34 Web zurich 2020 Slide 35 Web zurich 2020 Slide 36 Web zurich 2020 Slide 37 Web zurich 2020 Slide 38 Web zurich 2020 Slide 39 Web zurich 2020 Slide 40 Web zurich 2020 Slide 41 Web zurich 2020 Slide 42 Web zurich 2020 Slide 43
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

0 Likes

Share

Download to read offline

Web zurich 2020

Download to read offline

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!

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • 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

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!

Views

Total views

704

On Slideshare

0

From embeds

0

Number of embeds

10

Actions

Downloads

2

Shares

0

Comments

0

Likes

0

×