«3d-плеер на webgl», Василика Климова, moscowjs 21

3D плеер на WebGL

Василика Климова Разработчик интерфейсовArtec Group

lik04kaMoscowJS 21

Содержание

2

Применение WebGL

Преимущества

Основные понятия 3D графики

Библиотека Threejs

Плеер для просмотра 3D моделей

bull HTML5 ltcanvasgt

bull OpenGL ES 20

bull GLSL ES

bull 2D3D

3

WebGL

4

caniusecomwebgl

IEWebGL

Игры

5

gooenginecompearl-shy‐boy

6

Навигация

7

bookcasechromeexperimentscom

Редакторы

8

3dtincom

9

Инфографика

globechromeexperimentscom

10

Технологии 3D

O3D

Преимущества

11

Преимуществаbull Открытый стандарт

bull Кроссплатформенность

bull Высокая производительность

12

Преимуществаbull Автоматическое управление памятью

bull Отсутствие компиляции

13

14

GLSL

Основные понятия

bull Сцена

bull Свет

bull Камера

15

Взаимосвязь объектов

16

Камера 3D объектыСвет

Сцена

Рендер

3D объект

17

Полигональная сетка

Геометрия Материал Текстура

Визуализация

bull Рендер

bull Шейдер

bull Анимация

18

Threejs

19

bull threeminjs 420 kb

bull OBJLoaderjs

bull TrackballControlsjs 14 kb

threejsorgmrdoob

8 kb

Входные данные

20

texturejpg objectobj

Алгоритм

21

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Сцена

22

Playercontainer = documentgetElementById(webgl-shy‐player)

Playersize = width PlayercontaineroffsetWidth height PlayercontaineroffsetHeight

Playerscene = new THREEScene()

Алгоритм

23

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Камера

24

Playercamerapositionz = 300 Playersceneadd(Playercamera)

PerspectiveCamera( fov aspect near far ) aspect = Playersizewidth Playersizeheight Playercamera = new THREEPerspectiveCamera(450 aspect 2 8000)

25

Перспективная проекция PerspectiveCamera

Ортогональная проекция OrthographicCamera

Типы камер

Алгоритм

26

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Свет рендер canvas

27

Playerlight = new THREEAmbientLight() Playersceneadd(Playerlight)

canvas PlayercontainerappendChild(PlayerrendererdomElement)

Playerrenderer = new THREEWebGLRenderer(alpha true) PlayerrenderersetSize(Playersizewidth Playersizeheight)

28

Playersceneadd(Playerlight)

Playersceneadd(Playerlight)

Свет

29

THREEWebGLRenderer(alpha true)

THREEWebGLRenderer()

WebGLRenderer

Алгоритм

30

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Текстура

31

PlayertextureLoader = new THREETextureLoader()

PlayertextureLoaderload(texturejpg function(texture) Playertexture = texture PlayerloadModel() )

Алгоритм

32

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Загрузка 3D модели

33

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Загрузка 3D модели

34

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Загрузка 3D модели

35

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Алгоритм

36

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Анимация

37

Playercontrols = new THREETrackballControls(Playercamera Playercontainer)

animate function() requestAnimationFrame(Playeranimate)

Playerrendererrender(Playerscene Playercamera)

Playeranimate()

Playercontrolsupdate()

Анимация

38

Запросить браузер повторить animate()

Отрисовать модель

Обновить положение камеры

requestAnimationFrame

animate function() requestAnimationFrame(Playeranimate) Playercontrolsupdate() Playerrendererrender(Playerscene Playercamera)

39

viewshapecom

WebGL библиотеки

bull Threejs

bull Babylonjs

bull Turbulenz

bull PhiloGL

40

Полезные ссылки

davidscottlyonscomthreejs

Книга Learning Threejs The JavaScript 3D Library for WebGL

Книга WebGL Программирование трехмерной графики

Никита Северинов diductiorucourse2060

41

Исходники

42githubcomLikita

43

ГеймификацияИнтерактивность

Василика Климова

vasilikaklimova

likita

lik04ka

Спасибо за внимание44