Веб технологии давно позволяют прикоснуться ко всем 3 измерениям в браузере используя WebGL, и для этого достаточно понять самые простые принципы трехмерной графики. Что такое геометрия и материал. Как WebGL взаимодействует с ДОМэлементами и его событиями. Простыми словами про это подробно рассказывает веб-слесарь Константин Плаксивый.

1. Как пощупать 3Д в браузере
И что для этого необходимо
UNILIMES
1

2. Константин Плаксивый
веб разработчик компании UNILIMES
расскажет о ключевых объектах 3д графики и о их взаимодействии,
в контексте библиотеки THREE.JS
2

3. Ключевые объекты для работы с 3D
графикой
Vector3 ( Vector2 )
Geometry
Face
Material
Texture
1.
2.
3.
4.
5.
3

4. На базе взаимодействия предыдущих объектов мы рассмотрим более
масштабные, такие как:
Scene
Object3D (Group)
Mesh
1.
2.
3.
4

5. И в заключении рассмотрим взаимодействие с ними с помощью
Camera
Raycaster
1.
2.
5

6. Vector3
Vector3, а иначе вектор, вертекс,
вершина. Этот объект является
ключевым для работы с 3д
пространством и используется в таких
формах как позиция или направление.
Комплексное число или просто
контейнер для координат ( X, Y, Z )*.
6

7. Geometry
Геометрия. Конструкция несущая структуру
любого 3д объекта в 3д пространстве.
Строится в первую очередь из вершин.
7

8. Геометрия может состоять из одних вершин
и тогда её чаще всего используют как
поинт-клауд. Облако точек. В таком
формате она часто поступает с некоторых
3д сканеров.
8

9. Но чаще геометрия используется в
совокупнсти вершин и фейсов. Те и другие
находятся в геометрии в массиве и в
дальнейшем используются как основные
данные для построения геометрии.
9

10. Face
Но где же поверхность?
Технически фейс это объект, несущий
информацию о том, в каком порядке
нужно объединить три вершины
геометрии в поверхность для
дальнейшей отрисовки.
10

11. Фейс хранит в себе данные о индексах
трех вершин геометрии, в которой
находится. В случае с THREE.js они
обозначены в фейсах как вершина A, B
и C.
11

12. Geometry—Face and Vertex
Когда у геометрии есть и вершины и
фейсы, она может предстать в более
объемном виде. На изображении мы
видим 8 вершин по которым строится куб,
а так же 12 фейсов, составленных по этим
вершинам.
12

13. Material
Материал. В 3д для отображения объекта не
достаточно одной геометрии. Нам так же
потребуется материал, несущий в себе
информацию о внешних характеристиках
объекта.
13

14. В библиотеке three.js используется большое
количество материалов. Для примера
следующие по мере их усложнения.
MeshNormalMaterial
MeshBasicMaterial
MeshStandardMaterial
и другие...
1.
2.
3.
4.
14

15. Texture
но что если мы захотим обернуть наш объект в
какую-то картинку?.
Для этого нам понадобится текстура. Текстура это
особый объект в котором файл картинки
преобразуется в буфер, который в дальнейшем
попадает в программу для видеокарты на ряду с
геометрией и материалом.
15

16. Texture
Текстура является самостоятельным объектом, но в
большинстве случаев используется в качестве
ресурса для "карт" материала.
16

17. Среди часто используемых карт материала можно перечислить
следующие.
map - просто текстура
normalMap — карта рельефности (иллюзия так как не влияет на реальную
геометрию)
aoMap (ambient occlusion map) — карта освещения.
envMap — карта окружения.
и другие...
1.
2.
3.
4.
5.
17

18. Material + Texture + Face
Но теперь вопрос, как текстура и материал взаимодействуют с
геометрией?.
Для этого используются данные хранящиеся в фейсе. Это информация о
UV-развертке фейса. Она определяет, какую часть текстуры надо
отрисовать на конкретном фейсе.
18

19. 19

20. Scene,Object3D Mesh
Мы познакомились с ключевыми деталями из которых состоит 3д
пространство и переходим к более масштабным объектам, которые
позволяют объединять эти детали в полноценные сцены. Все эти объекты
обладают необходимым набором свойств для создания древообразной
иерархии. И в вершине этой иерархии находится сцена.
Это Scene, Object3D и Mesh.
20

21. Scene
Внешняя оболочка нашего пространства и по совместительству тот объект,
который будет основным ресурсом для отрисовки 3д пространства.
Содержит в себе все объекты с которыми мы будем работать.
Сцен может быть много, но чаще всего работа ведется с одной.
21

22. Object3D
Контейнер не обладающий геометрией и материалом, но позволяющий
хранить внутри другие Object3D | Scene | Mesh объекты, а так же несущий
информацию о матрице преобразования. Для простоты понимания мы
будем говорить о позиции, повороте и скейле.
Помимо прочего, этот объект является прототипом для большинства других
объектов three.js, включая Mesh и Scene. В частности, тех объектов, у
которых предполагается позиция, поворот и скейл.
22

23. Object3D
Из основных особенностей этого объекта, хочется выделить его
пространственные характеристики. Объект3Д является контейнером, и
обладая своей матрицей преобразования, способен содержать внутри
наследников, которые в свою очередь будут воспринимать пространство
этого контейнера как абсолютное относительно родителя.
23

24. Object3D
Это выражается в том, что к примеру, если мы заскейлим, сожмем внешний
контейнер — на параметры скейла внутренних контейнеров это не
повлияет и технически, внутри объектам будет вполне просторно.
Перемещаться от х1 к х10 они будут в локальной системе координат. Это
же касается поворота и позиции. Хотя при отрисовке такой конструкции,
мы всё же будем видеть объекты преобразованными, а значит сжатыми,
повернутыми и заскейленными относительно своего родительского
контейнера.
24

25. Mesh
То самое к чему мы так долго шли. Один из
самых выразительных элементов всего этого
процесса.
25

26. Наблюдая ранее примеры с материалами и
геометрией мы уже видели этот куб. Однако
без Мэша в three.js мы не смогли бы создать
его. Так как Mesh это носитель геометрии и
материала. Именно в нем, то и другое,
объединяется и находит друг друга.
26

27. Хочется отметить, что при создании Mesh-а
нам необходимо передать в него два
аргумента, коими является геометрия и
материал.
27

28. Так как мэш унаследован от Object3D. То у
него проявляются все пространственные
характеристики самого Object3D. Он может
быть полноценной ступенькой иерархии, а
так же обладает своей собственной
матрицей преобразования, так же влияющей
на все вложенные в него объекты.
28

29. Raycaster and Camera
И вот мы подбираемся к завершающему этапу. Камера и Рейкастер. Эти
объекты нужны нам для взаимодействия со сценой и для её
"прощупывания".
29

30. Camera
Камера объект библиотеки three.js, так же как
и Mesh образованый от Object3D и
обладающий своей матрицей
преобразования, но ко всему содержащий
несколько дополнительных матриц. Например
матрицу проекции.
30

31. Помимо позиции, камера содержит
информацию о проекции, соотношении
сторон, угле обзора, параметрах видимости
такие как near | far, которые определяют в
дальнейшем какие объекты или их части
будут видны и на каком удалении от камеры.
31

32. Среди доступных для использования камер
хочется выделить две основные, Это:
PerspectiveCamera
OrthographicCamera
1.
2.
32

33. PerspectiveCamera
Перспективная камера является камерой
предоставляющей параметры проекции в
перспективе. Позволяющие отобразить то, что видит
камера с перспективой.
Красным на окружности выделена область, которая
не попадает в проекцию камеры.
33

34. картинка из википедии
34

35. OrthographicCamera
Ортографическая камера отличается от
перспективной, отсутствием угла обзора. Она смотрит
в пространство через проекцию определяемую
исключительно параметрами ширины и высоты самой
проекции. Что в результате дает ортоганальный
снимок.
35

36. картинка из википедии
36

37. Raycaster
Рейкастер. Математический аппарат,
инструмент позволяющий "сканировать"
необходимую область пространства Object3D
и лежащую на пути луча. Ориентированный на
поиск геометрии.
37

38. Raycaster
Рейкастер обладает рядом возможностей, своим принципом и требует
некоторую настройку для работы.
Мы практически подобрались к прощупыванию 3д пространства, и именно
рейкастер нам предоставит эту возможность.
38

39. Raycaster
Для начала рейкастер требуется установить в нужную позицию и указать
направление. Для этого в three.js используется несколько методов.
первый raycaster.setFromCamera( mouse, camera );
39

40. Raycaster
аргумент mouse это координата события, к примеру клика по
ДомЭлементу. Но в своем изначальном виде данные события нам не
подойдут. Raycaster принимает их в ином формате, чем просто x,y позиция
курсора в момент клика.
40

41. Raycaster
m.x = (event.clientX/window.innerWidth) * 2 - 1;
m.y = - (event.clientY/window.innerHeight) * 2 + 1;
Основная цель предыдущей операции — преобразовать значения x,y
позиции курсора из пространства ширини и высоты экрана, в
пространство альфа-значений, где левый и нижний край экрана имеют
значение -1, а правый и верхний +1. Именно в такой форме Raycaster
принимает данные для дальнейшей настройки.
41

42. Raycaster
так клик курсора в центре экрана даст после преобразования значение
mouse = { x: 0, y: 0 }. В последствии эти данные будут использованы для
определения точки в направлении которой должно быть произведено
искажение луча рейкастера опираясь на данные проекции камеры.
42

43. Raycaster
аргумент camera принимает на вход объект камеры, при этом подходит
как PerspectiveCamera так и OrthographicCamera.
43

44. Raycaster
После настройки рейкастера, мы можем перейти к его использованию. Для
этого нам необходимо воспользоваться следующим методом.
.intersectObjects( [ array of Object3D | Mesh ] );
вызов этого метода с передачей в него массива объектов, которые мы
хотим "отрейкастить" приведет в движение довольно сложный механизм.
44

45. Щупаем
Так как мы ознакомились со всеми вводными можно перейти к
завершающему этапу прощупывания.
Обратим внимание на этот слайд.
45

46. 46

47. спасибо чуваку создавшему этот
замечательный движок для презентаций
https://github.com/shower/shower
47

48. спасибо [ Odessa FRONTEND community ] за
повод для создания доклада и за
возможность его докласть
48

49. спасибо,что были с нами
UNILIMES
49

50. bounceit
50