«3D-плеер на WebGL», Василика Климова, MoscowJS 21
Transcript of «3D-плеер на WebGL», Василика Климова, MoscowJS 21
![Page 1: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/1.jpg)
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
![Page 2: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/2.jpg)
Содержание
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
![Page 3: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/3.jpg)
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
![Page 4: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/4.jpg)
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
![Page 5: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/5.jpg)
Игры
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
![Page 6: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/6.jpg)
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
![Page 7: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/7.jpg)
Навигация
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
![Page 8: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/8.jpg)
Редакторы
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
![Page 9: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/9.jpg)
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
![Page 10: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/10.jpg)
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
![Page 11: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/11.jpg)
Преимущества
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
![Page 12: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/12.jpg)
Преимущества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
![Page 13: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/13.jpg)
Преимущества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
![Page 14: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/14.jpg)
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
![Page 15: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/15.jpg)
Основные понятия
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
![Page 16: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/16.jpg)
Взаимосвязь объектов
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
![Page 17: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/17.jpg)
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
![Page 18: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/18.jpg)
Визуализация
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
![Page 19: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/19.jpg)
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
![Page 20: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/20.jpg)
Входные данные
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
![Page 21: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/21.jpg)
Алгоритм
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
![Page 22: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/22.jpg)
Сцена
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
![Page 23: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/23.jpg)
Алгоритм
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
![Page 24: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/24.jpg)
Камера
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
![Page 25: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/25.jpg)
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
![Page 26: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/26.jpg)
Алгоритм
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
![Page 27: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/27.jpg)
Свет рендер 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
![Page 28: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/28.jpg)
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
![Page 29: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/29.jpg)
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
![Page 30: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/30.jpg)
Алгоритм
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
![Page 31: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/31.jpg)
Текстура
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
![Page 32: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/32.jpg)
Алгоритм
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
![Page 33: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/33.jpg)
Загрузка 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
![Page 34: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/34.jpg)
Загрузка 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
![Page 35: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/35.jpg)
Загрузка 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
![Page 36: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/36.jpg)
Алгоритм
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
![Page 37: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/37.jpg)
Анимация
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
![Page 38: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/38.jpg)
Анимация
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
![Page 39: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/39.jpg)
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
![Page 40: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/40.jpg)
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
![Page 41: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/41.jpg)
Полезные ссылки
davidscottlyonscomthreejs
Книга Learning Threejs The JavaScript 3D Library for WebGL
Книга WebGL Программирование трехмерной графики
Никита Северинов diductiorucourse2060
41
Исходники
42githubcomLikita
43
ГеймификацияИнтерактивность
Василика Климова
vasilikaklimova
likita
lik04ka
Спасибо за внимание44
![Page 42: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/42.jpg)
Исходники
42githubcomLikita
43
ГеймификацияИнтерактивность
Василика Климова
vasilikaklimova
likita
lik04ka
Спасибо за внимание44
![Page 43: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/43.jpg)
43
ГеймификацияИнтерактивность
Василика Климова
vasilikaklimova
likita
lik04ka
Спасибо за внимание44
![Page 44: «3D-плеер на WebGL», Василика Климова, MoscowJS 21](https://reader031.fdocument.pub/reader031/viewer/2022020116/55a77b1e1a28ab5f4e8b46e5/html5/thumbnails/44.jpg)
Василика Климова
vasilikaklimova
likita
lik04ka
Спасибо за внимание44