Василика Климова Artec3D Artec 3D web player

1. Artec 3D web player
Василика Климова
@Lik04ka

2. Frontend
2

3. Artec 3D
artec3d.com
shapify.me
viewshape.com
3

4. 3D моделирование
4

5. 3D сканирование
5
• Artec Studio
• Artec SDK

6. 3D модели
6

7. 3D в браузере
7
viewshape.com

8. WebGL
8
OpenGL
Shading Language
<canvas/>

9. Поддержка
9

10. Three.js
10

11. Three.js
Сообщество
11
Babylon.js Сообщество

12. Three.js
Editor
12
threejs/editor

13. Three.js
Docs
13

14. Three.js
Examples
14
threejs/examples

15. 3D термины
15
• Сцена
• Свет
• Камера
• Рендер

16. 3D термины
16
• Точка
• Полигон
• Объект (меш)
• Геометрия
• Материал
• Текстура

17. Wireframe
17
vasilika.ru/wireframe

18. Wireframe
18

19. Blueprint
19

20. Blueprint
20

21. Ортографическая
камера
21
Перспективная камера

22. 22
Materials

23. 23
Materials

24. 24
Materials

25. 25
Environment Map
threejs/envmaps

26. 26
Environment Map

27. Slicing
27

28. Шейдера
28

29. Точка
29
vasilika.ru/point

30. Точка на WebGL
30

31. 31
Круглая точка

32. Круглая точка
WebGL
32

33. Viewcube
33

34. Viewcube
34

35. Viewcube
35

36. Аннотации
36

37. Raycasting
37
Связь между кликами мыши и
объектами на 3D сцене
Поиск по клику первого пересечения
с объектом на сцене

38. Raycasting
38

39. Замена 3D
в браузере
39

40. Режим
картинок
40

41. Размытие
текстуры
41

42. Анизотропная
фильтрация
42
Метод улучшения качества изображения текстур на поверхностях, сильно
наклонённых относительно камеры

43. Формат файла
43

44. Тени
44

45. Прозрачная
поверхность
45

46. WebGL 2.0
46

47. WebGL 2.0
Features
47
• Вычисление размера текстуры внутри шейдера
• Больше форматов текстур
• Дополнительные функции для матриц
• Сжатые текстуры стали кроссплатформенными
• И другие

48. Ссылки
48
• WebGL Fundamentals
• WebGL Academy
• Mozilla
• Three.js Books

49. Спасибо!
Likita
Vasilika.Klimova
Lik04ka