Successfully reported this slideshow.

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

0

Share

Upcoming SlideShare
Presentation Diplom
Presentation Diplom
Loading in …3
×
1 of 50
1 of 50

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

0

Share

Download to read offline

Description

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

Transcript

  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

Description

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

Transcript

  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

More Related Content

More from OdessaFrontend

Related Books

Free with a 30 day trial from Scribd

See all

×