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.

Пощупать 3д в браузере | OdessaFrontend Meetup #15

41 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Пощупать 3д в браузере | OdessaFrontend Meetup #15

  1. 1. Как пощупать 3Д в браузере И что для этого необходимо UNILIMES 1
  2. 2. Константин Плаксивый веб разработчик компании UNILIMES расскажет о ключевых объектах 3д графики и о их взаимодействии, в контексте библиотеки THREE.JS 2
  3. 3. Ключевые объекты для работы с 3D графикой Vector3 ( Vector2 ) Geometry Face Material Texture 1. 2. 3. 4. 5. 3
  4. 4. На базе взаимодействия предыдущих объектов мы рассмотрим более масштабные, такие как: Scene Object3D (Group) Mesh 1. 2. 3. 4
  5. 5. И в заключении рассмотрим взаимодействие с ними с помощью Camera Raycaster 1. 2. 5
  6. 6. Vector3 Vector3, а иначе вектор, вертекс, вершина. Этот объект является ключевым для работы с 3д пространством и используется в таких формах как позиция или направление. Комплексное число или просто контейнер для координат ( X, Y, Z )*. 6
  7. 7. Geometry Геометрия. Конструкция несущая структуру любого 3д объекта в 3д пространстве. Строится в первую очередь из вершин. 7
  8. 8. Геометрия может состоять из одних вершин и тогда её чаще всего используют как поинт-клауд. Облако точек. В таком формате она часто поступает с некоторых 3д сканеров. 8
  9. 9. Но чаще геометрия используется в совокупнсти вершин и фейсов. Те и другие находятся в геометрии в массиве и в дальнейшем используются как основные данные для построения геометрии. 9
  10. 10. Face Но где же поверхность? Технически фейс это объект, несущий информацию о том, в каком порядке нужно объединить три вершины геометрии в поверхность для дальнейшей отрисовки. 10
  11. 11. Фейс хранит в себе данные о индексах трех вершин геометрии, в которой находится. В случае с THREE.js они обозначены в фейсах как вершина A, B и C. 11
  12. 12. Geometry—Face and Vertex Когда у геометрии есть и вершины и фейсы, она может предстать в более объемном виде. На изображении мы видим 8 вершин по которым строится куб, а так же 12 фейсов, составленных по этим вершинам. 12
  13. 13. Material Материал. В 3д для отображения объекта не достаточно одной геометрии. Нам так же потребуется материал, несущий в себе информацию о внешних характеристиках объекта. 13
  14. 14. В библиотеке three.js используется большое количество материалов. Для примера следующие по мере их усложнения. MeshNormalMaterial MeshBasicMaterial MeshStandardMaterial и другие... 1. 2. 3. 4. 14
  15. 15. Texture но что если мы захотим обернуть наш объект в какую-то картинку?. Для этого нам понадобится текстура. Текстура это особый объект в котором файл картинки преобразуется в буфер, который в дальнейшем попадает в программу для видеокарты на ряду с геометрией и материалом. 15
  16. 16. Texture Текстура является самостоятельным объектом, но в большинстве случаев используется в качестве ресурса для "карт" материала. 16
  17. 17. Среди часто используемых карт материала можно перечислить следующие. map - просто текстура normalMap — карта рельефности (иллюзия так как не влияет на реальную геометрию) aoMap (ambient occlusion map) — карта освещения. envMap — карта окружения. и другие... 1. 2. 3. 4. 5. 17
  18. 18. Material + Texture + Face Но теперь вопрос, как текстура и материал взаимодействуют с геометрией?. Для этого используются данные хранящиеся в фейсе. Это информация о UV-развертке фейса. Она определяет, какую часть текстуры надо отрисовать на конкретном фейсе. 18
  19. 19. 19
  20. 20. Scene,Object3D Mesh Мы познакомились с ключевыми деталями из которых состоит 3д пространство и переходим к более масштабным объектам, которые позволяют объединять эти детали в полноценные сцены. Все эти объекты обладают необходимым набором свойств для создания древообразной иерархии. И в вершине этой иерархии находится сцена. Это Scene, Object3D и Mesh. 20
  21. 21. Scene Внешняя оболочка нашего пространства и по совместительству тот объект, который будет основным ресурсом для отрисовки 3д пространства. Содержит в себе все объекты с которыми мы будем работать. Сцен может быть много, но чаще всего работа ведется с одной. 21
  22. 22. Object3D Контейнер не обладающий геометрией и материалом, но позволяющий хранить внутри другие Object3D | Scene | Mesh объекты, а так же несущий информацию о матрице преобразования. Для простоты понимания мы будем говорить о позиции, повороте и скейле. Помимо прочего, этот объект является прототипом для большинства других объектов three.js, включая Mesh и Scene. В частности, тех объектов, у которых предполагается позиция, поворот и скейл. 22
  23. 23. Object3D Из основных особенностей этого объекта, хочется выделить его пространственные характеристики. Объект3Д является контейнером, и обладая своей матрицей преобразования, способен содержать внутри наследников, которые в свою очередь будут воспринимать пространство этого контейнера как абсолютное относительно родителя. 23
  24. 24. Object3D Это выражается в том, что к примеру, если мы заскейлим, сожмем внешний контейнер — на параметры скейла внутренних контейнеров это не повлияет и технически, внутри объектам будет вполне просторно. Перемещаться от х1 к х10 они будут в локальной системе координат. Это же касается поворота и позиции. Хотя при отрисовке такой конструкции, мы всё же будем видеть объекты преобразованными, а значит сжатыми, повернутыми и заскейленными относительно своего родительского контейнера. 24
  25. 25. Mesh То самое к чему мы так долго шли. Один из самых выразительных элементов всего этого процесса. 25
  26. 26. Наблюдая ранее примеры с материалами и геометрией мы уже видели этот куб. Однако без Мэша в three.js мы не смогли бы создать его. Так как Mesh это носитель геометрии и материала. Именно в нем, то и другое, объединяется и находит друг друга. 26
  27. 27. Хочется отметить, что при создании Mesh-а нам необходимо передать в него два аргумента, коими является геометрия и материал. 27
  28. 28. Так как мэш унаследован от Object3D. То у него проявляются все пространственные характеристики самого Object3D. Он может быть полноценной ступенькой иерархии, а так же обладает своей собственной матрицей преобразования, так же влияющей на все вложенные в него объекты. 28
  29. 29. Raycaster and Camera И вот мы подбираемся к завершающему этапу. Камера и Рейкастер. Эти объекты нужны нам для взаимодействия со сценой и для её "прощупывания". 29
  30. 30. Camera Камера объект библиотеки three.js, так же как и Mesh образованый от Object3D и обладающий своей матрицей преобразования, но ко всему содержащий несколько дополнительных матриц. Например матрицу проекции. 30
  31. 31. Помимо позиции, камера содержит информацию о проекции, соотношении сторон, угле обзора, параметрах видимости такие как near | far, которые определяют в дальнейшем какие объекты или их части будут видны и на каком удалении от камеры. 31
  32. 32. Среди доступных для использования камер хочется выделить две основные, Это: PerspectiveCamera OrthographicCamera 1. 2. 32
  33. 33. PerspectiveCamera Перспективная камера является камерой предоставляющей параметры проекции в перспективе. Позволяющие отобразить то, что видит камера с перспективой. Красным на окружности выделена область, которая не попадает в проекцию камеры. 33
  34. 34. картинка из википедии 34
  35. 35. OrthographicCamera Ортографическая камера отличается от перспективной, отсутствием угла обзора. Она смотрит в пространство через проекцию определяемую исключительно параметрами ширины и высоты самой проекции. Что в результате дает ортоганальный снимок. 35
  36. 36. картинка из википедии 36
  37. 37. Raycaster Рейкастер. Математический аппарат, инструмент позволяющий "сканировать" необходимую область пространства Object3D и лежащую на пути луча. Ориентированный на поиск геометрии. 37
  38. 38. Raycaster Рейкастер обладает рядом возможностей, своим принципом и требует некоторую настройку для работы. Мы практически подобрались к прощупыванию 3д пространства, и именно рейкастер нам предоставит эту возможность. 38
  39. 39. Raycaster Для начала рейкастер требуется установить в нужную позицию и указать направление. Для этого в three.js используется несколько методов. первый raycaster.setFromCamera( mouse, camera ); 39
  40. 40. Raycaster аргумент mouse это координата события, к примеру клика по ДомЭлементу. Но в своем изначальном виде данные события нам не подойдут. Raycaster принимает их в ином формате, чем просто x,y позиция курсора в момент клика. 40
  41. 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. 42. Raycaster так клик курсора в центре экрана даст после преобразования значение mouse = { x: 0, y: 0 }. В последствии эти данные будут использованы для определения точки в направлении которой должно быть произведено искажение луча рейкастера опираясь на данные проекции камеры. 42
  43. 43. Raycaster аргумент camera принимает на вход объект камеры, при этом подходит как PerspectiveCamera так и OrthographicCamera. 43
  44. 44. Raycaster После настройки рейкастера, мы можем перейти к его использованию. Для этого нам необходимо воспользоваться следующим методом. .intersectObjects( [ array of Object3D | Mesh ] ); вызов этого метода с передачей в него массива объектов, которые мы хотим "отрейкастить" приведет в движение довольно сложный механизм. 44
  45. 45. Щупаем Так как мы ознакомились со всеми вводными можно перейти к завершающему этапу прощупывания. Обратим внимание на этот слайд. 45
  46. 46. 46
  47. 47. спасибо чуваку создавшему этот замечательный движок для презентаций https://github.com/shower/shower 47
  48. 48. спасибо [ Odessa FRONTEND community ] за повод для создания доклада и за возможность его докласть 48
  49. 49. спасибо,что были с нами UNILIMES 49
  50. 50. bounceit 50

×