Василика Климова (Artec3D), Artec 3D web player, CodeFest 2017

https://2017.codefest.ru/lecture/1215

Веб технологии развиваются, и Artec 3D веб плеер не стоит на месте. Компания Artec3D создает лучшие ручные 3D сканеры, для работы с сырыми данными сканера мы используем наше десктопное приложение Artec Studio. Но если необходимо просто посмотреть готовый результат и поделиться моделью с кем-то, то мы используем Artec 3D веб плеер.

Сейчас мы работаем над новыми фичами для браузерного 3D плеера. О них и поговорим. А также, я поделюсь как мы используем возможности Three.js библиотеки. Что показываем пользователям старых браузеров. Продемонстрирую и расскажу как сделать свою карту для окружающей среды. Как избавиться от размытия текстуры при вращении или отдалении камеры. Погрузимся в терминологию трёхмерного мира и обсудим последнюю версию WebGL 2.0.

Transcript

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