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.

Interactive 3D graphics for web with three.js, Andrey Vedilin, DataArt

109 views

Published on

Interactive 3D graphics for web with three.js

Published in: Education
  • Be the first to comment

Interactive 3D graphics for web with three.js, Andrey Vedilin, DataArt

  1. 1. Interactive 3D graphics for web with three.js Andrii Vedilin
  2. 2. Agenda ● What is WebGL? ○ WebGL Pipeline, Shader programs ○ “Hello world” in WebGL ● Three.js ○ Basic concepts ○ “Hello world” with three.js ○ Three.js additional features
  3. 3. WebGL
  4. 4. Example After the Flood
  5. 5. What can you use it for?
  6. 6. WebGL JavaScript API for rendering interactive 2D and 3D graphics inside an HTML <canvas> elements using computer GPU.
  7. 7. WebGL support
  8. 8. WebGL based on OpenGL ES Released by nonprofit Khronos group
  9. 9. WebGL Pipeline (simplified)
  10. 10. Shaders
  11. 11. Shader programs WebGL runs on the GPU on your computer. As such you need to provide the code that runs on that GPU. You provide that code in the form of pairs of functions. Those 2 functions are called a vertex shader and a fragment shader and they are each written in a very strictly typed C/C++ like language called GLSL.
  12. 12. GLSL Syntax
  13. 13. WebGL Pipeline
  14. 14. Look around...
  15. 15. “Hello world” in WebGL
  16. 16. “Hello world” in WebGL
  17. 17. Looks not so simple...
  18. 18. three.js
  19. 19. three.js Three.js is a cross-browser JavaScript library/API used to create and display animated 3D computer graphics in a web browser. The aim of the project is to create a lightweight 3D library with a very low level of complexity.
  20. 20. Yahoo!
  21. 21. three.js ● Created by Ricardo Cabello (Mr doob) ● Open-source (MIT license) ● Big community (~866 contributors) ● Google, Mozilla, Microsoft, Apple, Autodesk using three.js
  22. 22. Hierarchy example of three.js
  23. 23. Mesh
  24. 24. Lights
  25. 25. Perspective Camera
  26. 26. Orthographic Camera
  27. 27. Raycaster
  28. 28. Camera Controls
  29. 29. Renderer, Scene ● The WebGL renderer displays your beautifully crafted scenes using WebGL. ● Scene is like holder where you place objects, lights.
  30. 30. Some practice
  31. 31. What’s next?
  32. 32. WebVR
  33. 33. Tensorfire TENSORFIRE
  34. 34. Questions?
  35. 35. Thank you for attention! Andrii Vedilin Skype: andreyvedilin Email: avedilin@dataart.com

×