«3d-плеер на webgl», Василика Климова, moscowjs 21
TRANSCRIPT
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
Содержание
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
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
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
Игры
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
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
Навигация
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
Редакторы
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
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
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
Преимущества
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
Преимущества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
Преимущества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
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
Основные понятия
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
Взаимосвязь объектов
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
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
Визуализация
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
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
Входные данные
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
Алгоритм
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
Сцена
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
Алгоритм
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
Камера
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
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
Алгоритм
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
Свет рендер 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
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
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
Алгоритм
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
Текстура
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
Алгоритм
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
Загрузка 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
Загрузка 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
Загрузка 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
Алгоритм
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
Анимация
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
Анимация
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
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
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
Полезные ссылки
davidscottlyonscomthreejs
Книга Learning Threejs The JavaScript 3D Library for WebGL
Книга WebGL Программирование трехмерной графики
Никита Северинов diductiorucourse2060
41
Исходники
42githubcomLikita
43
ГеймификацияИнтерактивность
Василика Климова
vasilikaklimova
likita
lik04ka
Спасибо за внимание44
Исходники
42githubcomLikita
43
ГеймификацияИнтерактивность
Василика Климова
vasilikaklimova
likita
lik04ka
Спасибо за внимание44
43
ГеймификацияИнтерактивность
Василика Климова
vasilikaklimova
likita
lik04ka
Спасибо за внимание44
Василика Климова
vasilikaklimova
likita
lik04ka
Спасибо за внимание44