Interactive 3D graphics for web with three.js

2. Interactive 3D graphics for web
with three.js
Andrii Vedilin

3. 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

4. WebGL

5. Example
After the Flood

6. What can you use it for?

7. WebGL
JavaScript API for rendering interactive 2D and 3D graphics inside an
HTML <canvas> elements using computer GPU.

8. WebGL support

9. WebGL based on OpenGL ES
Released by nonprofit Khronos group

10. WebGL Pipeline (simplified)

11. Shaders

12. 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.

13. GLSL Syntax

14. WebGL
Pipeline

15. Look around...

16. “Hello world” in WebGL

17. “Hello world” in WebGL

18. Looks not so simple...

19. three.js

20. 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.

21. Yahoo!

22. three.js
● Created by Ricardo Cabello (Mr doob)
● Open-source (MIT license)
● Big community (~866 contributors)
● Google, Mozilla, Microsoft, Apple, Autodesk using three.js

23. Hierarchy example of three.js

24. Mesh

25. Lights

26. Perspective Camera

27. Orthographic Camera

28. Raycaster

29. Camera Controls

30. Renderer, Scene
● The WebGL renderer displays your
beautifully crafted scenes using
WebGL.
● Scene is like holder where you place
objects, lights.

31. Some practice

32. What’s next?

33. WebVR

34. Tensorfire
TENSORFIRE

35. Questions?

36. Thank you for attention!
Andrii Vedilin
Skype: andreyvedilin
Email: avedilin@dataart.com