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

44
3D плеер на WebGL Василика Климова Разработчик интерфейсов Artec Group @lik04ka MoscowJS 21

Upload: moscowjs

Post on 16-Jul-2015

662 views

Category:

Software


4 download

TRANSCRIPT

Page 1: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

3D плеер на WebGL

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

lik04kaMoscowJS 21

Содержание

2

Применение WebGL

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

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

Библиотека Threejs

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

bull HTML5 ltcanvasgt

bull OpenGL ES 20

bull GLSL ES

bull 2D3D

3

WebGL

4

caniusecomwebgl

IEWebGL

Игры

5

gooenginecompearl-shy‐boy

6

Навигация

7

bookcasechromeexperimentscom

Редакторы

8

3dtincom

9

Инфографика

globechromeexperimentscom

10

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

O3D

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

11

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

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

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

12

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

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

13

14

GLSL

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

bull Сцена

bull Свет

bull Камера

15

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

16

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

Сцена

Рендер

3D объект

17

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

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

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

bull Рендер

bull Шейдер

bull Анимация

18

Threejs

19

bull threeminjs 420 kb

bull OBJLoaderjs

bull TrackballControlsjs 14 kb

threejsorgmrdoob

8 kb

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

20

texturejpg objectobj

Алгоритм

21

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

Рендер canvas

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

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

Анимация

Сцена

22

Playercontainer = documentgetElementById(webgl-shy‐player)

Playersize = width PlayercontaineroffsetWidth height PlayercontaineroffsetHeight

Playerscene = new THREEScene()

Алгоритм

23

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

Рендер canvas

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

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

Анимация

Камера

24

Playercamerapositionz = 300 Playersceneadd(Playercamera)

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

25

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

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

Типы камер

Алгоритм

26

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

Рендер canvas

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

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

Анимация

Свет рендер canvas

27

Playerlight = new THREEAmbientLight() Playersceneadd(Playerlight)

canvas PlayercontainerappendChild(PlayerrendererdomElement)

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

28

Playersceneadd(Playerlight)

Playersceneadd(Playerlight)

Свет

29

THREEWebGLRenderer(alpha true)

THREEWebGLRenderer()

WebGLRenderer

Алгоритм

30

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

Рендер canvas

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

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

Анимация

Текстура

31

PlayertextureLoader = new THREETextureLoader()

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

Алгоритм

32

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

Рендер canvas

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

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

Анимация

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

33

loadModel function() objectLoader = new THREEOBJLoader()

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

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

34

loadModel function() objectLoader = new THREEOBJLoader()

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

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

35

loadModel function() objectLoader = new THREEOBJLoader()

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

Алгоритм

36

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

Рендер canvas

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

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

Анимация

Анимация

37

Playercontrols = new THREETrackballControls(Playercamera Playercontainer)

animate function() requestAnimationFrame(Playeranimate)

Playerrendererrender(Playerscene Playercamera)

Playeranimate()

Playercontrolsupdate()

Анимация

38

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

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

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

requestAnimationFrame

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

39

viewshapecom

WebGL библиотеки

bull Threejs

bull Babylonjs

bull Turbulenz

bull PhiloGL

40

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

davidscottlyonscomthreejs

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

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

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

41

Исходники

42githubcomLikita

43

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

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

vasilikaklimova

likita

lik04ka

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

Page 2: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

Содержание

2

Применение WebGL

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

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

Библиотека Threejs

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

bull HTML5 ltcanvasgt

bull OpenGL ES 20

bull GLSL ES

bull 2D3D

3

WebGL

4

caniusecomwebgl

IEWebGL

Игры

5

gooenginecompearl-shy‐boy

6

Навигация

7

bookcasechromeexperimentscom

Редакторы

8

3dtincom

9

Инфографика

globechromeexperimentscom

10

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

O3D

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

11

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

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

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

12

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

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

13

14

GLSL

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

bull Сцена

bull Свет

bull Камера

15

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

16

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

Сцена

Рендер

3D объект

17

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

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

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

bull Рендер

bull Шейдер

bull Анимация

18

Threejs

19

bull threeminjs 420 kb

bull OBJLoaderjs

bull TrackballControlsjs 14 kb

threejsorgmrdoob

8 kb

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

20

texturejpg objectobj

Алгоритм

21

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

Рендер canvas

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

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

Анимация

Сцена

22

Playercontainer = documentgetElementById(webgl-shy‐player)

Playersize = width PlayercontaineroffsetWidth height PlayercontaineroffsetHeight

Playerscene = new THREEScene()

Алгоритм

23

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

Рендер canvas

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

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

Анимация

Камера

24

Playercamerapositionz = 300 Playersceneadd(Playercamera)

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

25

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

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

Типы камер

Алгоритм

26

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

Рендер canvas

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

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

Анимация

Свет рендер canvas

27

Playerlight = new THREEAmbientLight() Playersceneadd(Playerlight)

canvas PlayercontainerappendChild(PlayerrendererdomElement)

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

28

Playersceneadd(Playerlight)

Playersceneadd(Playerlight)

Свет

29

THREEWebGLRenderer(alpha true)

THREEWebGLRenderer()

WebGLRenderer

Алгоритм

30

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

Рендер canvas

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

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

Анимация

Текстура

31

PlayertextureLoader = new THREETextureLoader()

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

Алгоритм

32

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

Рендер canvas

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

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

Анимация

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

33

loadModel function() objectLoader = new THREEOBJLoader()

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

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

34

loadModel function() objectLoader = new THREEOBJLoader()

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

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

35

loadModel function() objectLoader = new THREEOBJLoader()

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

Алгоритм

36

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

Рендер canvas

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

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

Анимация

Анимация

37

Playercontrols = new THREETrackballControls(Playercamera Playercontainer)

animate function() requestAnimationFrame(Playeranimate)

Playerrendererrender(Playerscene Playercamera)

Playeranimate()

Playercontrolsupdate()

Анимация

38

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

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

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

requestAnimationFrame

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

39

viewshapecom

WebGL библиотеки

bull Threejs

bull Babylonjs

bull Turbulenz

bull PhiloGL

40

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

davidscottlyonscomthreejs

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

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

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

41

Исходники

42githubcomLikita

43

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

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

vasilikaklimova

likita

lik04ka

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

Page 3: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

bull HTML5 ltcanvasgt

bull OpenGL ES 20

bull GLSL ES

bull 2D3D

3

WebGL

4

caniusecomwebgl

IEWebGL

Игры

5

gooenginecompearl-shy‐boy

6

Навигация

7

bookcasechromeexperimentscom

Редакторы

8

3dtincom

9

Инфографика

globechromeexperimentscom

10

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

O3D

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

11

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

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

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

12

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

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

13

14

GLSL

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

bull Сцена

bull Свет

bull Камера

15

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

16

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

Сцена

Рендер

3D объект

17

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

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

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

bull Рендер

bull Шейдер

bull Анимация

18

Threejs

19

bull threeminjs 420 kb

bull OBJLoaderjs

bull TrackballControlsjs 14 kb

threejsorgmrdoob

8 kb

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

20

texturejpg objectobj

Алгоритм

21

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

Рендер canvas

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

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

Анимация

Сцена

22

Playercontainer = documentgetElementById(webgl-shy‐player)

Playersize = width PlayercontaineroffsetWidth height PlayercontaineroffsetHeight

Playerscene = new THREEScene()

Алгоритм

23

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

Рендер canvas

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

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

Анимация

Камера

24

Playercamerapositionz = 300 Playersceneadd(Playercamera)

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

25

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

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

Типы камер

Алгоритм

26

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

Рендер canvas

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

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

Анимация

Свет рендер canvas

27

Playerlight = new THREEAmbientLight() Playersceneadd(Playerlight)

canvas PlayercontainerappendChild(PlayerrendererdomElement)

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

28

Playersceneadd(Playerlight)

Playersceneadd(Playerlight)

Свет

29

THREEWebGLRenderer(alpha true)

THREEWebGLRenderer()

WebGLRenderer

Алгоритм

30

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

Рендер canvas

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

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

Анимация

Текстура

31

PlayertextureLoader = new THREETextureLoader()

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

Алгоритм

32

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

Рендер canvas

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

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

Анимация

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

33

loadModel function() objectLoader = new THREEOBJLoader()

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

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

34

loadModel function() objectLoader = new THREEOBJLoader()

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

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

35

loadModel function() objectLoader = new THREEOBJLoader()

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

Алгоритм

36

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

Рендер canvas

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

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

Анимация

Анимация

37

Playercontrols = new THREETrackballControls(Playercamera Playercontainer)

animate function() requestAnimationFrame(Playeranimate)

Playerrendererrender(Playerscene Playercamera)

Playeranimate()

Playercontrolsupdate()

Анимация

38

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

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

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

requestAnimationFrame

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

39

viewshapecom

WebGL библиотеки

bull Threejs

bull Babylonjs

bull Turbulenz

bull PhiloGL

40

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

davidscottlyonscomthreejs

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

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

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

41

Исходники

42githubcomLikita

43

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

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

vasilikaklimova

likita

lik04ka

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

Page 4: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

4

caniusecomwebgl

IEWebGL

Игры

5

gooenginecompearl-shy‐boy

6

Навигация

7

bookcasechromeexperimentscom

Редакторы

8

3dtincom

9

Инфографика

globechromeexperimentscom

10

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

O3D

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

11

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

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

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

12

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

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

13

14

GLSL

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

bull Сцена

bull Свет

bull Камера

15

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

16

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

Сцена

Рендер

3D объект

17

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

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

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

bull Рендер

bull Шейдер

bull Анимация

18

Threejs

19

bull threeminjs 420 kb

bull OBJLoaderjs

bull TrackballControlsjs 14 kb

threejsorgmrdoob

8 kb

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

20

texturejpg objectobj

Алгоритм

21

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

Рендер canvas

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

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

Анимация

Сцена

22

Playercontainer = documentgetElementById(webgl-shy‐player)

Playersize = width PlayercontaineroffsetWidth height PlayercontaineroffsetHeight

Playerscene = new THREEScene()

Алгоритм

23

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

Рендер canvas

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

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

Анимация

Камера

24

Playercamerapositionz = 300 Playersceneadd(Playercamera)

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

25

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

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

Типы камер

Алгоритм

26

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

Рендер canvas

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

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

Анимация

Свет рендер canvas

27

Playerlight = new THREEAmbientLight() Playersceneadd(Playerlight)

canvas PlayercontainerappendChild(PlayerrendererdomElement)

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

28

Playersceneadd(Playerlight)

Playersceneadd(Playerlight)

Свет

29

THREEWebGLRenderer(alpha true)

THREEWebGLRenderer()

WebGLRenderer

Алгоритм

30

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

Рендер canvas

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

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

Анимация

Текстура

31

PlayertextureLoader = new THREETextureLoader()

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

Алгоритм

32

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

Рендер canvas

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

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

Анимация

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

33

loadModel function() objectLoader = new THREEOBJLoader()

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

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

34

loadModel function() objectLoader = new THREEOBJLoader()

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

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

35

loadModel function() objectLoader = new THREEOBJLoader()

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

Алгоритм

36

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

Рендер canvas

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

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

Анимация

Анимация

37

Playercontrols = new THREETrackballControls(Playercamera Playercontainer)

animate function() requestAnimationFrame(Playeranimate)

Playerrendererrender(Playerscene Playercamera)

Playeranimate()

Playercontrolsupdate()

Анимация

38

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

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

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

requestAnimationFrame

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

39

viewshapecom

WebGL библиотеки

bull Threejs

bull Babylonjs

bull Turbulenz

bull PhiloGL

40

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

davidscottlyonscomthreejs

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

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

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

41

Исходники

42githubcomLikita

43

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

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

vasilikaklimova

likita

lik04ka

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

Page 5: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

Игры

5

gooenginecompearl-shy‐boy

6

Навигация

7

bookcasechromeexperimentscom

Редакторы

8

3dtincom

9

Инфографика

globechromeexperimentscom

10

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

O3D

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

11

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

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

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

12

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

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

13

14

GLSL

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

bull Сцена

bull Свет

bull Камера

15

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

16

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

Сцена

Рендер

3D объект

17

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

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

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

bull Рендер

bull Шейдер

bull Анимация

18

Threejs

19

bull threeminjs 420 kb

bull OBJLoaderjs

bull TrackballControlsjs 14 kb

threejsorgmrdoob

8 kb

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

20

texturejpg objectobj

Алгоритм

21

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

Рендер canvas

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

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

Анимация

Сцена

22

Playercontainer = documentgetElementById(webgl-shy‐player)

Playersize = width PlayercontaineroffsetWidth height PlayercontaineroffsetHeight

Playerscene = new THREEScene()

Алгоритм

23

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

Рендер canvas

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

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

Анимация

Камера

24

Playercamerapositionz = 300 Playersceneadd(Playercamera)

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

25

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

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

Типы камер

Алгоритм

26

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

Рендер canvas

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

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

Анимация

Свет рендер canvas

27

Playerlight = new THREEAmbientLight() Playersceneadd(Playerlight)

canvas PlayercontainerappendChild(PlayerrendererdomElement)

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

28

Playersceneadd(Playerlight)

Playersceneadd(Playerlight)

Свет

29

THREEWebGLRenderer(alpha true)

THREEWebGLRenderer()

WebGLRenderer

Алгоритм

30

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

Рендер canvas

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

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

Анимация

Текстура

31

PlayertextureLoader = new THREETextureLoader()

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

Алгоритм

32

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

Рендер canvas

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

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

Анимация

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

33

loadModel function() objectLoader = new THREEOBJLoader()

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

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

34

loadModel function() objectLoader = new THREEOBJLoader()

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

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

35

loadModel function() objectLoader = new THREEOBJLoader()

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

Алгоритм

36

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

Рендер canvas

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

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

Анимация

Анимация

37

Playercontrols = new THREETrackballControls(Playercamera Playercontainer)

animate function() requestAnimationFrame(Playeranimate)

Playerrendererrender(Playerscene Playercamera)

Playeranimate()

Playercontrolsupdate()

Анимация

38

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

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

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

requestAnimationFrame

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

39

viewshapecom

WebGL библиотеки

bull Threejs

bull Babylonjs

bull Turbulenz

bull PhiloGL

40

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

davidscottlyonscomthreejs

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

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

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

41

Исходники

42githubcomLikita

43

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

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

vasilikaklimova

likita

lik04ka

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

Page 6: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

6

Навигация

7

bookcasechromeexperimentscom

Редакторы

8

3dtincom

9

Инфографика

globechromeexperimentscom

10

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

O3D

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

11

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

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

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

12

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

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

13

14

GLSL

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

bull Сцена

bull Свет

bull Камера

15

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

16

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

Сцена

Рендер

3D объект

17

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

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

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

bull Рендер

bull Шейдер

bull Анимация

18

Threejs

19

bull threeminjs 420 kb

bull OBJLoaderjs

bull TrackballControlsjs 14 kb

threejsorgmrdoob

8 kb

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

20

texturejpg objectobj

Алгоритм

21

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

Рендер canvas

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

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

Анимация

Сцена

22

Playercontainer = documentgetElementById(webgl-shy‐player)

Playersize = width PlayercontaineroffsetWidth height PlayercontaineroffsetHeight

Playerscene = new THREEScene()

Алгоритм

23

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

Рендер canvas

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

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

Анимация

Камера

24

Playercamerapositionz = 300 Playersceneadd(Playercamera)

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

25

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

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

Типы камер

Алгоритм

26

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

Рендер canvas

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

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

Анимация

Свет рендер canvas

27

Playerlight = new THREEAmbientLight() Playersceneadd(Playerlight)

canvas PlayercontainerappendChild(PlayerrendererdomElement)

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

28

Playersceneadd(Playerlight)

Playersceneadd(Playerlight)

Свет

29

THREEWebGLRenderer(alpha true)

THREEWebGLRenderer()

WebGLRenderer

Алгоритм

30

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

Рендер canvas

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

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

Анимация

Текстура

31

PlayertextureLoader = new THREETextureLoader()

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

Алгоритм

32

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

Рендер canvas

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

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

Анимация

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

33

loadModel function() objectLoader = new THREEOBJLoader()

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

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

34

loadModel function() objectLoader = new THREEOBJLoader()

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

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

35

loadModel function() objectLoader = new THREEOBJLoader()

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

Алгоритм

36

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

Рендер canvas

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

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

Анимация

Анимация

37

Playercontrols = new THREETrackballControls(Playercamera Playercontainer)

animate function() requestAnimationFrame(Playeranimate)

Playerrendererrender(Playerscene Playercamera)

Playeranimate()

Playercontrolsupdate()

Анимация

38

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

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

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

requestAnimationFrame

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

39

viewshapecom

WebGL библиотеки

bull Threejs

bull Babylonjs

bull Turbulenz

bull PhiloGL

40

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

davidscottlyonscomthreejs

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

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

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

41

Исходники

42githubcomLikita

43

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

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

vasilikaklimova

likita

lik04ka

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

Page 7: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

Навигация

7

bookcasechromeexperimentscom

Редакторы

8

3dtincom

9

Инфографика

globechromeexperimentscom

10

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

O3D

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

11

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

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

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

12

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

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

13

14

GLSL

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

bull Сцена

bull Свет

bull Камера

15

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

16

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

Сцена

Рендер

3D объект

17

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

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

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

bull Рендер

bull Шейдер

bull Анимация

18

Threejs

19

bull threeminjs 420 kb

bull OBJLoaderjs

bull TrackballControlsjs 14 kb

threejsorgmrdoob

8 kb

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

20

texturejpg objectobj

Алгоритм

21

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

Рендер canvas

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

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

Анимация

Сцена

22

Playercontainer = documentgetElementById(webgl-shy‐player)

Playersize = width PlayercontaineroffsetWidth height PlayercontaineroffsetHeight

Playerscene = new THREEScene()

Алгоритм

23

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

Рендер canvas

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

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

Анимация

Камера

24

Playercamerapositionz = 300 Playersceneadd(Playercamera)

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

25

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

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

Типы камер

Алгоритм

26

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

Рендер canvas

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

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

Анимация

Свет рендер canvas

27

Playerlight = new THREEAmbientLight() Playersceneadd(Playerlight)

canvas PlayercontainerappendChild(PlayerrendererdomElement)

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

28

Playersceneadd(Playerlight)

Playersceneadd(Playerlight)

Свет

29

THREEWebGLRenderer(alpha true)

THREEWebGLRenderer()

WebGLRenderer

Алгоритм

30

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

Рендер canvas

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

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

Анимация

Текстура

31

PlayertextureLoader = new THREETextureLoader()

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

Алгоритм

32

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

Рендер canvas

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

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

Анимация

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

33

loadModel function() objectLoader = new THREEOBJLoader()

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

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

34

loadModel function() objectLoader = new THREEOBJLoader()

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

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

35

loadModel function() objectLoader = new THREEOBJLoader()

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

Алгоритм

36

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

Рендер canvas

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

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

Анимация

Анимация

37

Playercontrols = new THREETrackballControls(Playercamera Playercontainer)

animate function() requestAnimationFrame(Playeranimate)

Playerrendererrender(Playerscene Playercamera)

Playeranimate()

Playercontrolsupdate()

Анимация

38

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

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

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

requestAnimationFrame

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

39

viewshapecom

WebGL библиотеки

bull Threejs

bull Babylonjs

bull Turbulenz

bull PhiloGL

40

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

davidscottlyonscomthreejs

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

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

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

41

Исходники

42githubcomLikita

43

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

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

vasilikaklimova

likita

lik04ka

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

Page 8: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

Редакторы

8

3dtincom

9

Инфографика

globechromeexperimentscom

10

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

O3D

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

11

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

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

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

12

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

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

13

14

GLSL

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

bull Сцена

bull Свет

bull Камера

15

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

16

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

Сцена

Рендер

3D объект

17

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

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

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

bull Рендер

bull Шейдер

bull Анимация

18

Threejs

19

bull threeminjs 420 kb

bull OBJLoaderjs

bull TrackballControlsjs 14 kb

threejsorgmrdoob

8 kb

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

20

texturejpg objectobj

Алгоритм

21

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

Рендер canvas

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

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

Анимация

Сцена

22

Playercontainer = documentgetElementById(webgl-shy‐player)

Playersize = width PlayercontaineroffsetWidth height PlayercontaineroffsetHeight

Playerscene = new THREEScene()

Алгоритм

23

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

Рендер canvas

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

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

Анимация

Камера

24

Playercamerapositionz = 300 Playersceneadd(Playercamera)

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

25

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

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

Типы камер

Алгоритм

26

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

Рендер canvas

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

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

Анимация

Свет рендер canvas

27

Playerlight = new THREEAmbientLight() Playersceneadd(Playerlight)

canvas PlayercontainerappendChild(PlayerrendererdomElement)

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

28

Playersceneadd(Playerlight)

Playersceneadd(Playerlight)

Свет

29

THREEWebGLRenderer(alpha true)

THREEWebGLRenderer()

WebGLRenderer

Алгоритм

30

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

Рендер canvas

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

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

Анимация

Текстура

31

PlayertextureLoader = new THREETextureLoader()

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

Алгоритм

32

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

Рендер canvas

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

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

Анимация

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

33

loadModel function() objectLoader = new THREEOBJLoader()

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

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

34

loadModel function() objectLoader = new THREEOBJLoader()

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

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

35

loadModel function() objectLoader = new THREEOBJLoader()

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

Алгоритм

36

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

Рендер canvas

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

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

Анимация

Анимация

37

Playercontrols = new THREETrackballControls(Playercamera Playercontainer)

animate function() requestAnimationFrame(Playeranimate)

Playerrendererrender(Playerscene Playercamera)

Playeranimate()

Playercontrolsupdate()

Анимация

38

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

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

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

requestAnimationFrame

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

39

viewshapecom

WebGL библиотеки

bull Threejs

bull Babylonjs

bull Turbulenz

bull PhiloGL

40

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

davidscottlyonscomthreejs

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

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

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

41

Исходники

42githubcomLikita

43

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

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

vasilikaklimova

likita

lik04ka

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

Page 9: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

9

Инфографика

globechromeexperimentscom

10

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

O3D

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

11

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

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

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

12

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

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

13

14

GLSL

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

bull Сцена

bull Свет

bull Камера

15

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

16

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

Сцена

Рендер

3D объект

17

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

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

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

bull Рендер

bull Шейдер

bull Анимация

18

Threejs

19

bull threeminjs 420 kb

bull OBJLoaderjs

bull TrackballControlsjs 14 kb

threejsorgmrdoob

8 kb

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

20

texturejpg objectobj

Алгоритм

21

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

Рендер canvas

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

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

Анимация

Сцена

22

Playercontainer = documentgetElementById(webgl-shy‐player)

Playersize = width PlayercontaineroffsetWidth height PlayercontaineroffsetHeight

Playerscene = new THREEScene()

Алгоритм

23

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

Рендер canvas

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

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

Анимация

Камера

24

Playercamerapositionz = 300 Playersceneadd(Playercamera)

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

25

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

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

Типы камер

Алгоритм

26

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

Рендер canvas

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

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

Анимация

Свет рендер canvas

27

Playerlight = new THREEAmbientLight() Playersceneadd(Playerlight)

canvas PlayercontainerappendChild(PlayerrendererdomElement)

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

28

Playersceneadd(Playerlight)

Playersceneadd(Playerlight)

Свет

29

THREEWebGLRenderer(alpha true)

THREEWebGLRenderer()

WebGLRenderer

Алгоритм

30

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

Рендер canvas

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

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

Анимация

Текстура

31

PlayertextureLoader = new THREETextureLoader()

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

Алгоритм

32

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

Рендер canvas

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

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

Анимация

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

33

loadModel function() objectLoader = new THREEOBJLoader()

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

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

34

loadModel function() objectLoader = new THREEOBJLoader()

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

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

35

loadModel function() objectLoader = new THREEOBJLoader()

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

Алгоритм

36

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

Рендер canvas

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

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

Анимация

Анимация

37

Playercontrols = new THREETrackballControls(Playercamera Playercontainer)

animate function() requestAnimationFrame(Playeranimate)

Playerrendererrender(Playerscene Playercamera)

Playeranimate()

Playercontrolsupdate()

Анимация

38

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

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

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

requestAnimationFrame

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

39

viewshapecom

WebGL библиотеки

bull Threejs

bull Babylonjs

bull Turbulenz

bull PhiloGL

40

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

davidscottlyonscomthreejs

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

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

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

41

Исходники

42githubcomLikita

43

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

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

vasilikaklimova

likita

lik04ka

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

Page 10: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

10

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

O3D

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

11

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

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

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

12

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

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

13

14

GLSL

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

bull Сцена

bull Свет

bull Камера

15

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

16

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

Сцена

Рендер

3D объект

17

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

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

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

bull Рендер

bull Шейдер

bull Анимация

18

Threejs

19

bull threeminjs 420 kb

bull OBJLoaderjs

bull TrackballControlsjs 14 kb

threejsorgmrdoob

8 kb

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

20

texturejpg objectobj

Алгоритм

21

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

Рендер canvas

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

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

Анимация

Сцена

22

Playercontainer = documentgetElementById(webgl-shy‐player)

Playersize = width PlayercontaineroffsetWidth height PlayercontaineroffsetHeight

Playerscene = new THREEScene()

Алгоритм

23

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

Рендер canvas

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

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

Анимация

Камера

24

Playercamerapositionz = 300 Playersceneadd(Playercamera)

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

25

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

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

Типы камер

Алгоритм

26

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

Рендер canvas

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

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

Анимация

Свет рендер canvas

27

Playerlight = new THREEAmbientLight() Playersceneadd(Playerlight)

canvas PlayercontainerappendChild(PlayerrendererdomElement)

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

28

Playersceneadd(Playerlight)

Playersceneadd(Playerlight)

Свет

29

THREEWebGLRenderer(alpha true)

THREEWebGLRenderer()

WebGLRenderer

Алгоритм

30

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

Рендер canvas

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

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

Анимация

Текстура

31

PlayertextureLoader = new THREETextureLoader()

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

Алгоритм

32

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

Рендер canvas

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

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

Анимация

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

33

loadModel function() objectLoader = new THREEOBJLoader()

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

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

34

loadModel function() objectLoader = new THREEOBJLoader()

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

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

35

loadModel function() objectLoader = new THREEOBJLoader()

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

Алгоритм

36

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

Рендер canvas

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

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

Анимация

Анимация

37

Playercontrols = new THREETrackballControls(Playercamera Playercontainer)

animate function() requestAnimationFrame(Playeranimate)

Playerrendererrender(Playerscene Playercamera)

Playeranimate()

Playercontrolsupdate()

Анимация

38

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

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

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

requestAnimationFrame

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

39

viewshapecom

WebGL библиотеки

bull Threejs

bull Babylonjs

bull Turbulenz

bull PhiloGL

40

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

davidscottlyonscomthreejs

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

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

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

41

Исходники

42githubcomLikita

43

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

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

vasilikaklimova

likita

lik04ka

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

Page 11: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

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

11

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

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

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

12

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

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

13

14

GLSL

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

bull Сцена

bull Свет

bull Камера

15

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

16

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

Сцена

Рендер

3D объект

17

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

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

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

bull Рендер

bull Шейдер

bull Анимация

18

Threejs

19

bull threeminjs 420 kb

bull OBJLoaderjs

bull TrackballControlsjs 14 kb

threejsorgmrdoob

8 kb

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

20

texturejpg objectobj

Алгоритм

21

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

Рендер canvas

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

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

Анимация

Сцена

22

Playercontainer = documentgetElementById(webgl-shy‐player)

Playersize = width PlayercontaineroffsetWidth height PlayercontaineroffsetHeight

Playerscene = new THREEScene()

Алгоритм

23

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

Рендер canvas

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

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

Анимация

Камера

24

Playercamerapositionz = 300 Playersceneadd(Playercamera)

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

25

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

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

Типы камер

Алгоритм

26

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

Рендер canvas

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

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

Анимация

Свет рендер canvas

27

Playerlight = new THREEAmbientLight() Playersceneadd(Playerlight)

canvas PlayercontainerappendChild(PlayerrendererdomElement)

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

28

Playersceneadd(Playerlight)

Playersceneadd(Playerlight)

Свет

29

THREEWebGLRenderer(alpha true)

THREEWebGLRenderer()

WebGLRenderer

Алгоритм

30

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

Рендер canvas

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

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

Анимация

Текстура

31

PlayertextureLoader = new THREETextureLoader()

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

Алгоритм

32

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

Рендер canvas

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

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

Анимация

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

33

loadModel function() objectLoader = new THREEOBJLoader()

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

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

34

loadModel function() objectLoader = new THREEOBJLoader()

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

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

35

loadModel function() objectLoader = new THREEOBJLoader()

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

Алгоритм

36

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

Рендер canvas

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

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

Анимация

Анимация

37

Playercontrols = new THREETrackballControls(Playercamera Playercontainer)

animate function() requestAnimationFrame(Playeranimate)

Playerrendererrender(Playerscene Playercamera)

Playeranimate()

Playercontrolsupdate()

Анимация

38

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

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

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

requestAnimationFrame

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

39

viewshapecom

WebGL библиотеки

bull Threejs

bull Babylonjs

bull Turbulenz

bull PhiloGL

40

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

davidscottlyonscomthreejs

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

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

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

41

Исходники

42githubcomLikita

43

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

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

vasilikaklimova

likita

lik04ka

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

Page 12: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

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

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

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

12

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

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

13

14

GLSL

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

bull Сцена

bull Свет

bull Камера

15

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

16

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

Сцена

Рендер

3D объект

17

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

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

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

bull Рендер

bull Шейдер

bull Анимация

18

Threejs

19

bull threeminjs 420 kb

bull OBJLoaderjs

bull TrackballControlsjs 14 kb

threejsorgmrdoob

8 kb

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

20

texturejpg objectobj

Алгоритм

21

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

Рендер canvas

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

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

Анимация

Сцена

22

Playercontainer = documentgetElementById(webgl-shy‐player)

Playersize = width PlayercontaineroffsetWidth height PlayercontaineroffsetHeight

Playerscene = new THREEScene()

Алгоритм

23

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

Рендер canvas

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

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

Анимация

Камера

24

Playercamerapositionz = 300 Playersceneadd(Playercamera)

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

25

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

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

Типы камер

Алгоритм

26

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

Рендер canvas

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

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

Анимация

Свет рендер canvas

27

Playerlight = new THREEAmbientLight() Playersceneadd(Playerlight)

canvas PlayercontainerappendChild(PlayerrendererdomElement)

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

28

Playersceneadd(Playerlight)

Playersceneadd(Playerlight)

Свет

29

THREEWebGLRenderer(alpha true)

THREEWebGLRenderer()

WebGLRenderer

Алгоритм

30

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

Рендер canvas

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

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

Анимация

Текстура

31

PlayertextureLoader = new THREETextureLoader()

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

Алгоритм

32

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

Рендер canvas

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

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

Анимация

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

33

loadModel function() objectLoader = new THREEOBJLoader()

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

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

34

loadModel function() objectLoader = new THREEOBJLoader()

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

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

35

loadModel function() objectLoader = new THREEOBJLoader()

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

Алгоритм

36

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

Рендер canvas

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

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

Анимация

Анимация

37

Playercontrols = new THREETrackballControls(Playercamera Playercontainer)

animate function() requestAnimationFrame(Playeranimate)

Playerrendererrender(Playerscene Playercamera)

Playeranimate()

Playercontrolsupdate()

Анимация

38

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

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

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

requestAnimationFrame

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

39

viewshapecom

WebGL библиотеки

bull Threejs

bull Babylonjs

bull Turbulenz

bull PhiloGL

40

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

davidscottlyonscomthreejs

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

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

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

41

Исходники

42githubcomLikita

43

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

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

vasilikaklimova

likita

lik04ka

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

Page 13: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

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

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

13

14

GLSL

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

bull Сцена

bull Свет

bull Камера

15

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

16

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

Сцена

Рендер

3D объект

17

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

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

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

bull Рендер

bull Шейдер

bull Анимация

18

Threejs

19

bull threeminjs 420 kb

bull OBJLoaderjs

bull TrackballControlsjs 14 kb

threejsorgmrdoob

8 kb

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

20

texturejpg objectobj

Алгоритм

21

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

Рендер canvas

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

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

Анимация

Сцена

22

Playercontainer = documentgetElementById(webgl-shy‐player)

Playersize = width PlayercontaineroffsetWidth height PlayercontaineroffsetHeight

Playerscene = new THREEScene()

Алгоритм

23

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

Рендер canvas

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

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

Анимация

Камера

24

Playercamerapositionz = 300 Playersceneadd(Playercamera)

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

25

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

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

Типы камер

Алгоритм

26

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

Рендер canvas

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

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

Анимация

Свет рендер canvas

27

Playerlight = new THREEAmbientLight() Playersceneadd(Playerlight)

canvas PlayercontainerappendChild(PlayerrendererdomElement)

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

28

Playersceneadd(Playerlight)

Playersceneadd(Playerlight)

Свет

29

THREEWebGLRenderer(alpha true)

THREEWebGLRenderer()

WebGLRenderer

Алгоритм

30

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

Рендер canvas

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

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

Анимация

Текстура

31

PlayertextureLoader = new THREETextureLoader()

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

Алгоритм

32

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

Рендер canvas

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

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

Анимация

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

33

loadModel function() objectLoader = new THREEOBJLoader()

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

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

34

loadModel function() objectLoader = new THREEOBJLoader()

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

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

35

loadModel function() objectLoader = new THREEOBJLoader()

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

Алгоритм

36

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

Рендер canvas

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

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

Анимация

Анимация

37

Playercontrols = new THREETrackballControls(Playercamera Playercontainer)

animate function() requestAnimationFrame(Playeranimate)

Playerrendererrender(Playerscene Playercamera)

Playeranimate()

Playercontrolsupdate()

Анимация

38

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

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

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

requestAnimationFrame

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

39

viewshapecom

WebGL библиотеки

bull Threejs

bull Babylonjs

bull Turbulenz

bull PhiloGL

40

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

davidscottlyonscomthreejs

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

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

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

41

Исходники

42githubcomLikita

43

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

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

vasilikaklimova

likita

lik04ka

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

Page 14: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

14

GLSL

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

bull Сцена

bull Свет

bull Камера

15

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

16

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

Сцена

Рендер

3D объект

17

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

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

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

bull Рендер

bull Шейдер

bull Анимация

18

Threejs

19

bull threeminjs 420 kb

bull OBJLoaderjs

bull TrackballControlsjs 14 kb

threejsorgmrdoob

8 kb

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

20

texturejpg objectobj

Алгоритм

21

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

Рендер canvas

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

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

Анимация

Сцена

22

Playercontainer = documentgetElementById(webgl-shy‐player)

Playersize = width PlayercontaineroffsetWidth height PlayercontaineroffsetHeight

Playerscene = new THREEScene()

Алгоритм

23

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

Рендер canvas

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

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

Анимация

Камера

24

Playercamerapositionz = 300 Playersceneadd(Playercamera)

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

25

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

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

Типы камер

Алгоритм

26

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

Рендер canvas

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

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

Анимация

Свет рендер canvas

27

Playerlight = new THREEAmbientLight() Playersceneadd(Playerlight)

canvas PlayercontainerappendChild(PlayerrendererdomElement)

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

28

Playersceneadd(Playerlight)

Playersceneadd(Playerlight)

Свет

29

THREEWebGLRenderer(alpha true)

THREEWebGLRenderer()

WebGLRenderer

Алгоритм

30

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

Рендер canvas

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

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

Анимация

Текстура

31

PlayertextureLoader = new THREETextureLoader()

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

Алгоритм

32

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

Рендер canvas

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

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

Анимация

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

33

loadModel function() objectLoader = new THREEOBJLoader()

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

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

34

loadModel function() objectLoader = new THREEOBJLoader()

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

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

35

loadModel function() objectLoader = new THREEOBJLoader()

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

Алгоритм

36

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

Рендер canvas

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

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

Анимация

Анимация

37

Playercontrols = new THREETrackballControls(Playercamera Playercontainer)

animate function() requestAnimationFrame(Playeranimate)

Playerrendererrender(Playerscene Playercamera)

Playeranimate()

Playercontrolsupdate()

Анимация

38

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

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

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

requestAnimationFrame

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

39

viewshapecom

WebGL библиотеки

bull Threejs

bull Babylonjs

bull Turbulenz

bull PhiloGL

40

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

davidscottlyonscomthreejs

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

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

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

41

Исходники

42githubcomLikita

43

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

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

vasilikaklimova

likita

lik04ka

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

Page 15: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

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

bull Сцена

bull Свет

bull Камера

15

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

16

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

Сцена

Рендер

3D объект

17

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

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

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

bull Рендер

bull Шейдер

bull Анимация

18

Threejs

19

bull threeminjs 420 kb

bull OBJLoaderjs

bull TrackballControlsjs 14 kb

threejsorgmrdoob

8 kb

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

20

texturejpg objectobj

Алгоритм

21

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

Рендер canvas

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

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

Анимация

Сцена

22

Playercontainer = documentgetElementById(webgl-shy‐player)

Playersize = width PlayercontaineroffsetWidth height PlayercontaineroffsetHeight

Playerscene = new THREEScene()

Алгоритм

23

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

Рендер canvas

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

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

Анимация

Камера

24

Playercamerapositionz = 300 Playersceneadd(Playercamera)

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

25

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

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

Типы камер

Алгоритм

26

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

Рендер canvas

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

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

Анимация

Свет рендер canvas

27

Playerlight = new THREEAmbientLight() Playersceneadd(Playerlight)

canvas PlayercontainerappendChild(PlayerrendererdomElement)

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

28

Playersceneadd(Playerlight)

Playersceneadd(Playerlight)

Свет

29

THREEWebGLRenderer(alpha true)

THREEWebGLRenderer()

WebGLRenderer

Алгоритм

30

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

Рендер canvas

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

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

Анимация

Текстура

31

PlayertextureLoader = new THREETextureLoader()

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

Алгоритм

32

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

Рендер canvas

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

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

Анимация

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

33

loadModel function() objectLoader = new THREEOBJLoader()

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

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

34

loadModel function() objectLoader = new THREEOBJLoader()

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

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

35

loadModel function() objectLoader = new THREEOBJLoader()

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

Алгоритм

36

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

Рендер canvas

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

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

Анимация

Анимация

37

Playercontrols = new THREETrackballControls(Playercamera Playercontainer)

animate function() requestAnimationFrame(Playeranimate)

Playerrendererrender(Playerscene Playercamera)

Playeranimate()

Playercontrolsupdate()

Анимация

38

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

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

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

requestAnimationFrame

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

39

viewshapecom

WebGL библиотеки

bull Threejs

bull Babylonjs

bull Turbulenz

bull PhiloGL

40

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

davidscottlyonscomthreejs

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

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

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

41

Исходники

42githubcomLikita

43

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

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

vasilikaklimova

likita

lik04ka

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

Page 16: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

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

16

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

Сцена

Рендер

3D объект

17

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

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

Визуализация

bull Рендер

bull Шейдер

bull Анимация

18

Threejs

19

bull threeminjs 420 kb

bull OBJLoaderjs

bull TrackballControlsjs 14 kb

threejsorgmrdoob

8 kb

Входные данные

20

texturejpg objectobj

Алгоритм

21

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Сцена

22

Playercontainer = documentgetElementById(webgl-shy‐player)

Playersize = width PlayercontaineroffsetWidth height PlayercontaineroffsetHeight

Playerscene = new THREEScene()

Алгоритм

23

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Камера

24

Playercamerapositionz = 300 Playersceneadd(Playercamera)

PerspectiveCamera( fov aspect near far ) aspect = Playersizewidth Playersizeheight Playercamera = new THREEPerspectiveCamera(450 aspect 2 8000)

25

Перспективная проекция PerspectiveCamera

Ортогональная проекция OrthographicCamera

Типы камер

Алгоритм

26

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Свет рендер canvas

27

Playerlight = new THREEAmbientLight() Playersceneadd(Playerlight)

canvas PlayercontainerappendChild(PlayerrendererdomElement)

Playerrenderer = new THREEWebGLRenderer(alpha true) PlayerrenderersetSize(Playersizewidth Playersizeheight)

28

Playersceneadd(Playerlight)

Playersceneadd(Playerlight)

Свет

29

THREEWebGLRenderer(alpha true)

THREEWebGLRenderer()

WebGLRenderer

Алгоритм

30

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Текстура

31

PlayertextureLoader = new THREETextureLoader()

PlayertextureLoaderload(texturejpg function(texture) Playertexture = texture PlayerloadModel() )

Алгоритм

32

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Загрузка 3D модели

33

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Загрузка 3D модели

34

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Загрузка 3D модели

35

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Алгоритм

36

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Анимация

37

Playercontrols = new THREETrackballControls(Playercamera Playercontainer)

animate function() requestAnimationFrame(Playeranimate)

Playerrendererrender(Playerscene Playercamera)

Playeranimate()

Playercontrolsupdate()

Анимация

38

Запросить браузер повторить animate()

Отрисовать модель

Обновить положение камеры

requestAnimationFrame

animate function() requestAnimationFrame(Playeranimate) Playercontrolsupdate() Playerrendererrender(Playerscene Playercamera)

39

viewshapecom

WebGL библиотеки

bull Threejs

bull Babylonjs

bull Turbulenz

bull PhiloGL

40

Полезные ссылки

davidscottlyonscomthreejs

Книга Learning Threejs The JavaScript 3D Library for WebGL

Книга WebGL Программирование трехмерной графики

Никита Северинов diductiorucourse2060

41

Исходники

42githubcomLikita

43

ГеймификацияИнтерактивность

Василика Климова

vasilikaklimova

likita

lik04ka

Спасибо за внимание44

Page 17: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

3D объект

17

Полигональная сетка

Геометрия Материал Текстура

Визуализация

bull Рендер

bull Шейдер

bull Анимация

18

Threejs

19

bull threeminjs 420 kb

bull OBJLoaderjs

bull TrackballControlsjs 14 kb

threejsorgmrdoob

8 kb

Входные данные

20

texturejpg objectobj

Алгоритм

21

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Сцена

22

Playercontainer = documentgetElementById(webgl-shy‐player)

Playersize = width PlayercontaineroffsetWidth height PlayercontaineroffsetHeight

Playerscene = new THREEScene()

Алгоритм

23

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Камера

24

Playercamerapositionz = 300 Playersceneadd(Playercamera)

PerspectiveCamera( fov aspect near far ) aspect = Playersizewidth Playersizeheight Playercamera = new THREEPerspectiveCamera(450 aspect 2 8000)

25

Перспективная проекция PerspectiveCamera

Ортогональная проекция OrthographicCamera

Типы камер

Алгоритм

26

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Свет рендер canvas

27

Playerlight = new THREEAmbientLight() Playersceneadd(Playerlight)

canvas PlayercontainerappendChild(PlayerrendererdomElement)

Playerrenderer = new THREEWebGLRenderer(alpha true) PlayerrenderersetSize(Playersizewidth Playersizeheight)

28

Playersceneadd(Playerlight)

Playersceneadd(Playerlight)

Свет

29

THREEWebGLRenderer(alpha true)

THREEWebGLRenderer()

WebGLRenderer

Алгоритм

30

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Текстура

31

PlayertextureLoader = new THREETextureLoader()

PlayertextureLoaderload(texturejpg function(texture) Playertexture = texture PlayerloadModel() )

Алгоритм

32

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Загрузка 3D модели

33

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Загрузка 3D модели

34

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Загрузка 3D модели

35

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Алгоритм

36

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Анимация

37

Playercontrols = new THREETrackballControls(Playercamera Playercontainer)

animate function() requestAnimationFrame(Playeranimate)

Playerrendererrender(Playerscene Playercamera)

Playeranimate()

Playercontrolsupdate()

Анимация

38

Запросить браузер повторить animate()

Отрисовать модель

Обновить положение камеры

requestAnimationFrame

animate function() requestAnimationFrame(Playeranimate) Playercontrolsupdate() Playerrendererrender(Playerscene Playercamera)

39

viewshapecom

WebGL библиотеки

bull Threejs

bull Babylonjs

bull Turbulenz

bull PhiloGL

40

Полезные ссылки

davidscottlyonscomthreejs

Книга Learning Threejs The JavaScript 3D Library for WebGL

Книга WebGL Программирование трехмерной графики

Никита Северинов diductiorucourse2060

41

Исходники

42githubcomLikita

43

ГеймификацияИнтерактивность

Василика Климова

vasilikaklimova

likita

lik04ka

Спасибо за внимание44

Page 18: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

Визуализация

bull Рендер

bull Шейдер

bull Анимация

18

Threejs

19

bull threeminjs 420 kb

bull OBJLoaderjs

bull TrackballControlsjs 14 kb

threejsorgmrdoob

8 kb

Входные данные

20

texturejpg objectobj

Алгоритм

21

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Сцена

22

Playercontainer = documentgetElementById(webgl-shy‐player)

Playersize = width PlayercontaineroffsetWidth height PlayercontaineroffsetHeight

Playerscene = new THREEScene()

Алгоритм

23

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Камера

24

Playercamerapositionz = 300 Playersceneadd(Playercamera)

PerspectiveCamera( fov aspect near far ) aspect = Playersizewidth Playersizeheight Playercamera = new THREEPerspectiveCamera(450 aspect 2 8000)

25

Перспективная проекция PerspectiveCamera

Ортогональная проекция OrthographicCamera

Типы камер

Алгоритм

26

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Свет рендер canvas

27

Playerlight = new THREEAmbientLight() Playersceneadd(Playerlight)

canvas PlayercontainerappendChild(PlayerrendererdomElement)

Playerrenderer = new THREEWebGLRenderer(alpha true) PlayerrenderersetSize(Playersizewidth Playersizeheight)

28

Playersceneadd(Playerlight)

Playersceneadd(Playerlight)

Свет

29

THREEWebGLRenderer(alpha true)

THREEWebGLRenderer()

WebGLRenderer

Алгоритм

30

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Текстура

31

PlayertextureLoader = new THREETextureLoader()

PlayertextureLoaderload(texturejpg function(texture) Playertexture = texture PlayerloadModel() )

Алгоритм

32

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Загрузка 3D модели

33

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Загрузка 3D модели

34

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Загрузка 3D модели

35

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Алгоритм

36

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Анимация

37

Playercontrols = new THREETrackballControls(Playercamera Playercontainer)

animate function() requestAnimationFrame(Playeranimate)

Playerrendererrender(Playerscene Playercamera)

Playeranimate()

Playercontrolsupdate()

Анимация

38

Запросить браузер повторить animate()

Отрисовать модель

Обновить положение камеры

requestAnimationFrame

animate function() requestAnimationFrame(Playeranimate) Playercontrolsupdate() Playerrendererrender(Playerscene Playercamera)

39

viewshapecom

WebGL библиотеки

bull Threejs

bull Babylonjs

bull Turbulenz

bull PhiloGL

40

Полезные ссылки

davidscottlyonscomthreejs

Книга Learning Threejs The JavaScript 3D Library for WebGL

Книга WebGL Программирование трехмерной графики

Никита Северинов diductiorucourse2060

41

Исходники

42githubcomLikita

43

ГеймификацияИнтерактивность

Василика Климова

vasilikaklimova

likita

lik04ka

Спасибо за внимание44

Page 19: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

Threejs

19

bull threeminjs 420 kb

bull OBJLoaderjs

bull TrackballControlsjs 14 kb

threejsorgmrdoob

8 kb

Входные данные

20

texturejpg objectobj

Алгоритм

21

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Сцена

22

Playercontainer = documentgetElementById(webgl-shy‐player)

Playersize = width PlayercontaineroffsetWidth height PlayercontaineroffsetHeight

Playerscene = new THREEScene()

Алгоритм

23

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Камера

24

Playercamerapositionz = 300 Playersceneadd(Playercamera)

PerspectiveCamera( fov aspect near far ) aspect = Playersizewidth Playersizeheight Playercamera = new THREEPerspectiveCamera(450 aspect 2 8000)

25

Перспективная проекция PerspectiveCamera

Ортогональная проекция OrthographicCamera

Типы камер

Алгоритм

26

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Свет рендер canvas

27

Playerlight = new THREEAmbientLight() Playersceneadd(Playerlight)

canvas PlayercontainerappendChild(PlayerrendererdomElement)

Playerrenderer = new THREEWebGLRenderer(alpha true) PlayerrenderersetSize(Playersizewidth Playersizeheight)

28

Playersceneadd(Playerlight)

Playersceneadd(Playerlight)

Свет

29

THREEWebGLRenderer(alpha true)

THREEWebGLRenderer()

WebGLRenderer

Алгоритм

30

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Текстура

31

PlayertextureLoader = new THREETextureLoader()

PlayertextureLoaderload(texturejpg function(texture) Playertexture = texture PlayerloadModel() )

Алгоритм

32

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Загрузка 3D модели

33

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Загрузка 3D модели

34

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Загрузка 3D модели

35

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Алгоритм

36

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Анимация

37

Playercontrols = new THREETrackballControls(Playercamera Playercontainer)

animate function() requestAnimationFrame(Playeranimate)

Playerrendererrender(Playerscene Playercamera)

Playeranimate()

Playercontrolsupdate()

Анимация

38

Запросить браузер повторить animate()

Отрисовать модель

Обновить положение камеры

requestAnimationFrame

animate function() requestAnimationFrame(Playeranimate) Playercontrolsupdate() Playerrendererrender(Playerscene Playercamera)

39

viewshapecom

WebGL библиотеки

bull Threejs

bull Babylonjs

bull Turbulenz

bull PhiloGL

40

Полезные ссылки

davidscottlyonscomthreejs

Книга Learning Threejs The JavaScript 3D Library for WebGL

Книга WebGL Программирование трехмерной графики

Никита Северинов diductiorucourse2060

41

Исходники

42githubcomLikita

43

ГеймификацияИнтерактивность

Василика Климова

vasilikaklimova

likita

lik04ka

Спасибо за внимание44

Page 20: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

Входные данные

20

texturejpg objectobj

Алгоритм

21

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Сцена

22

Playercontainer = documentgetElementById(webgl-shy‐player)

Playersize = width PlayercontaineroffsetWidth height PlayercontaineroffsetHeight

Playerscene = new THREEScene()

Алгоритм

23

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Камера

24

Playercamerapositionz = 300 Playersceneadd(Playercamera)

PerspectiveCamera( fov aspect near far ) aspect = Playersizewidth Playersizeheight Playercamera = new THREEPerspectiveCamera(450 aspect 2 8000)

25

Перспективная проекция PerspectiveCamera

Ортогональная проекция OrthographicCamera

Типы камер

Алгоритм

26

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Свет рендер canvas

27

Playerlight = new THREEAmbientLight() Playersceneadd(Playerlight)

canvas PlayercontainerappendChild(PlayerrendererdomElement)

Playerrenderer = new THREEWebGLRenderer(alpha true) PlayerrenderersetSize(Playersizewidth Playersizeheight)

28

Playersceneadd(Playerlight)

Playersceneadd(Playerlight)

Свет

29

THREEWebGLRenderer(alpha true)

THREEWebGLRenderer()

WebGLRenderer

Алгоритм

30

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Текстура

31

PlayertextureLoader = new THREETextureLoader()

PlayertextureLoaderload(texturejpg function(texture) Playertexture = texture PlayerloadModel() )

Алгоритм

32

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Загрузка 3D модели

33

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Загрузка 3D модели

34

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Загрузка 3D модели

35

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Алгоритм

36

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Анимация

37

Playercontrols = new THREETrackballControls(Playercamera Playercontainer)

animate function() requestAnimationFrame(Playeranimate)

Playerrendererrender(Playerscene Playercamera)

Playeranimate()

Playercontrolsupdate()

Анимация

38

Запросить браузер повторить animate()

Отрисовать модель

Обновить положение камеры

requestAnimationFrame

animate function() requestAnimationFrame(Playeranimate) Playercontrolsupdate() Playerrendererrender(Playerscene Playercamera)

39

viewshapecom

WebGL библиотеки

bull Threejs

bull Babylonjs

bull Turbulenz

bull PhiloGL

40

Полезные ссылки

davidscottlyonscomthreejs

Книга Learning Threejs The JavaScript 3D Library for WebGL

Книга WebGL Программирование трехмерной графики

Никита Северинов diductiorucourse2060

41

Исходники

42githubcomLikita

43

ГеймификацияИнтерактивность

Василика Климова

vasilikaklimova

likita

lik04ka

Спасибо за внимание44

Page 21: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

Алгоритм

21

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Сцена

22

Playercontainer = documentgetElementById(webgl-shy‐player)

Playersize = width PlayercontaineroffsetWidth height PlayercontaineroffsetHeight

Playerscene = new THREEScene()

Алгоритм

23

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Камера

24

Playercamerapositionz = 300 Playersceneadd(Playercamera)

PerspectiveCamera( fov aspect near far ) aspect = Playersizewidth Playersizeheight Playercamera = new THREEPerspectiveCamera(450 aspect 2 8000)

25

Перспективная проекция PerspectiveCamera

Ортогональная проекция OrthographicCamera

Типы камер

Алгоритм

26

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Свет рендер canvas

27

Playerlight = new THREEAmbientLight() Playersceneadd(Playerlight)

canvas PlayercontainerappendChild(PlayerrendererdomElement)

Playerrenderer = new THREEWebGLRenderer(alpha true) PlayerrenderersetSize(Playersizewidth Playersizeheight)

28

Playersceneadd(Playerlight)

Playersceneadd(Playerlight)

Свет

29

THREEWebGLRenderer(alpha true)

THREEWebGLRenderer()

WebGLRenderer

Алгоритм

30

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Текстура

31

PlayertextureLoader = new THREETextureLoader()

PlayertextureLoaderload(texturejpg function(texture) Playertexture = texture PlayerloadModel() )

Алгоритм

32

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Загрузка 3D модели

33

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Загрузка 3D модели

34

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Загрузка 3D модели

35

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Алгоритм

36

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Анимация

37

Playercontrols = new THREETrackballControls(Playercamera Playercontainer)

animate function() requestAnimationFrame(Playeranimate)

Playerrendererrender(Playerscene Playercamera)

Playeranimate()

Playercontrolsupdate()

Анимация

38

Запросить браузер повторить animate()

Отрисовать модель

Обновить положение камеры

requestAnimationFrame

animate function() requestAnimationFrame(Playeranimate) Playercontrolsupdate() Playerrendererrender(Playerscene Playercamera)

39

viewshapecom

WebGL библиотеки

bull Threejs

bull Babylonjs

bull Turbulenz

bull PhiloGL

40

Полезные ссылки

davidscottlyonscomthreejs

Книга Learning Threejs The JavaScript 3D Library for WebGL

Книга WebGL Программирование трехмерной графики

Никита Северинов diductiorucourse2060

41

Исходники

42githubcomLikita

43

ГеймификацияИнтерактивность

Василика Климова

vasilikaklimova

likita

lik04ka

Спасибо за внимание44

Page 22: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

Сцена

22

Playercontainer = documentgetElementById(webgl-shy‐player)

Playersize = width PlayercontaineroffsetWidth height PlayercontaineroffsetHeight

Playerscene = new THREEScene()

Алгоритм

23

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Камера

24

Playercamerapositionz = 300 Playersceneadd(Playercamera)

PerspectiveCamera( fov aspect near far ) aspect = Playersizewidth Playersizeheight Playercamera = new THREEPerspectiveCamera(450 aspect 2 8000)

25

Перспективная проекция PerspectiveCamera

Ортогональная проекция OrthographicCamera

Типы камер

Алгоритм

26

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Свет рендер canvas

27

Playerlight = new THREEAmbientLight() Playersceneadd(Playerlight)

canvas PlayercontainerappendChild(PlayerrendererdomElement)

Playerrenderer = new THREEWebGLRenderer(alpha true) PlayerrenderersetSize(Playersizewidth Playersizeheight)

28

Playersceneadd(Playerlight)

Playersceneadd(Playerlight)

Свет

29

THREEWebGLRenderer(alpha true)

THREEWebGLRenderer()

WebGLRenderer

Алгоритм

30

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Текстура

31

PlayertextureLoader = new THREETextureLoader()

PlayertextureLoaderload(texturejpg function(texture) Playertexture = texture PlayerloadModel() )

Алгоритм

32

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Загрузка 3D модели

33

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Загрузка 3D модели

34

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Загрузка 3D модели

35

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Алгоритм

36

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Анимация

37

Playercontrols = new THREETrackballControls(Playercamera Playercontainer)

animate function() requestAnimationFrame(Playeranimate)

Playerrendererrender(Playerscene Playercamera)

Playeranimate()

Playercontrolsupdate()

Анимация

38

Запросить браузер повторить animate()

Отрисовать модель

Обновить положение камеры

requestAnimationFrame

animate function() requestAnimationFrame(Playeranimate) Playercontrolsupdate() Playerrendererrender(Playerscene Playercamera)

39

viewshapecom

WebGL библиотеки

bull Threejs

bull Babylonjs

bull Turbulenz

bull PhiloGL

40

Полезные ссылки

davidscottlyonscomthreejs

Книга Learning Threejs The JavaScript 3D Library for WebGL

Книга WebGL Программирование трехмерной графики

Никита Северинов diductiorucourse2060

41

Исходники

42githubcomLikita

43

ГеймификацияИнтерактивность

Василика Климова

vasilikaklimova

likita

lik04ka

Спасибо за внимание44

Page 23: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

Алгоритм

23

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Камера

24

Playercamerapositionz = 300 Playersceneadd(Playercamera)

PerspectiveCamera( fov aspect near far ) aspect = Playersizewidth Playersizeheight Playercamera = new THREEPerspectiveCamera(450 aspect 2 8000)

25

Перспективная проекция PerspectiveCamera

Ортогональная проекция OrthographicCamera

Типы камер

Алгоритм

26

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Свет рендер canvas

27

Playerlight = new THREEAmbientLight() Playersceneadd(Playerlight)

canvas PlayercontainerappendChild(PlayerrendererdomElement)

Playerrenderer = new THREEWebGLRenderer(alpha true) PlayerrenderersetSize(Playersizewidth Playersizeheight)

28

Playersceneadd(Playerlight)

Playersceneadd(Playerlight)

Свет

29

THREEWebGLRenderer(alpha true)

THREEWebGLRenderer()

WebGLRenderer

Алгоритм

30

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Текстура

31

PlayertextureLoader = new THREETextureLoader()

PlayertextureLoaderload(texturejpg function(texture) Playertexture = texture PlayerloadModel() )

Алгоритм

32

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Загрузка 3D модели

33

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Загрузка 3D модели

34

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Загрузка 3D модели

35

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Алгоритм

36

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Анимация

37

Playercontrols = new THREETrackballControls(Playercamera Playercontainer)

animate function() requestAnimationFrame(Playeranimate)

Playerrendererrender(Playerscene Playercamera)

Playeranimate()

Playercontrolsupdate()

Анимация

38

Запросить браузер повторить animate()

Отрисовать модель

Обновить положение камеры

requestAnimationFrame

animate function() requestAnimationFrame(Playeranimate) Playercontrolsupdate() Playerrendererrender(Playerscene Playercamera)

39

viewshapecom

WebGL библиотеки

bull Threejs

bull Babylonjs

bull Turbulenz

bull PhiloGL

40

Полезные ссылки

davidscottlyonscomthreejs

Книга Learning Threejs The JavaScript 3D Library for WebGL

Книга WebGL Программирование трехмерной графики

Никита Северинов diductiorucourse2060

41

Исходники

42githubcomLikita

43

ГеймификацияИнтерактивность

Василика Климова

vasilikaklimova

likita

lik04ka

Спасибо за внимание44

Page 24: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

Камера

24

Playercamerapositionz = 300 Playersceneadd(Playercamera)

PerspectiveCamera( fov aspect near far ) aspect = Playersizewidth Playersizeheight Playercamera = new THREEPerspectiveCamera(450 aspect 2 8000)

25

Перспективная проекция PerspectiveCamera

Ортогональная проекция OrthographicCamera

Типы камер

Алгоритм

26

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Свет рендер canvas

27

Playerlight = new THREEAmbientLight() Playersceneadd(Playerlight)

canvas PlayercontainerappendChild(PlayerrendererdomElement)

Playerrenderer = new THREEWebGLRenderer(alpha true) PlayerrenderersetSize(Playersizewidth Playersizeheight)

28

Playersceneadd(Playerlight)

Playersceneadd(Playerlight)

Свет

29

THREEWebGLRenderer(alpha true)

THREEWebGLRenderer()

WebGLRenderer

Алгоритм

30

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Текстура

31

PlayertextureLoader = new THREETextureLoader()

PlayertextureLoaderload(texturejpg function(texture) Playertexture = texture PlayerloadModel() )

Алгоритм

32

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Загрузка 3D модели

33

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Загрузка 3D модели

34

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Загрузка 3D модели

35

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Алгоритм

36

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Анимация

37

Playercontrols = new THREETrackballControls(Playercamera Playercontainer)

animate function() requestAnimationFrame(Playeranimate)

Playerrendererrender(Playerscene Playercamera)

Playeranimate()

Playercontrolsupdate()

Анимация

38

Запросить браузер повторить animate()

Отрисовать модель

Обновить положение камеры

requestAnimationFrame

animate function() requestAnimationFrame(Playeranimate) Playercontrolsupdate() Playerrendererrender(Playerscene Playercamera)

39

viewshapecom

WebGL библиотеки

bull Threejs

bull Babylonjs

bull Turbulenz

bull PhiloGL

40

Полезные ссылки

davidscottlyonscomthreejs

Книга Learning Threejs The JavaScript 3D Library for WebGL

Книга WebGL Программирование трехмерной графики

Никита Северинов diductiorucourse2060

41

Исходники

42githubcomLikita

43

ГеймификацияИнтерактивность

Василика Климова

vasilikaklimova

likita

lik04ka

Спасибо за внимание44

Page 25: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

25

Перспективная проекция PerspectiveCamera

Ортогональная проекция OrthographicCamera

Типы камер

Алгоритм

26

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Свет рендер canvas

27

Playerlight = new THREEAmbientLight() Playersceneadd(Playerlight)

canvas PlayercontainerappendChild(PlayerrendererdomElement)

Playerrenderer = new THREEWebGLRenderer(alpha true) PlayerrenderersetSize(Playersizewidth Playersizeheight)

28

Playersceneadd(Playerlight)

Playersceneadd(Playerlight)

Свет

29

THREEWebGLRenderer(alpha true)

THREEWebGLRenderer()

WebGLRenderer

Алгоритм

30

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Текстура

31

PlayertextureLoader = new THREETextureLoader()

PlayertextureLoaderload(texturejpg function(texture) Playertexture = texture PlayerloadModel() )

Алгоритм

32

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Загрузка 3D модели

33

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Загрузка 3D модели

34

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Загрузка 3D модели

35

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Алгоритм

36

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Анимация

37

Playercontrols = new THREETrackballControls(Playercamera Playercontainer)

animate function() requestAnimationFrame(Playeranimate)

Playerrendererrender(Playerscene Playercamera)

Playeranimate()

Playercontrolsupdate()

Анимация

38

Запросить браузер повторить animate()

Отрисовать модель

Обновить положение камеры

requestAnimationFrame

animate function() requestAnimationFrame(Playeranimate) Playercontrolsupdate() Playerrendererrender(Playerscene Playercamera)

39

viewshapecom

WebGL библиотеки

bull Threejs

bull Babylonjs

bull Turbulenz

bull PhiloGL

40

Полезные ссылки

davidscottlyonscomthreejs

Книга Learning Threejs The JavaScript 3D Library for WebGL

Книга WebGL Программирование трехмерной графики

Никита Северинов diductiorucourse2060

41

Исходники

42githubcomLikita

43

ГеймификацияИнтерактивность

Василика Климова

vasilikaklimova

likita

lik04ka

Спасибо за внимание44

Page 26: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

Алгоритм

26

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Свет рендер canvas

27

Playerlight = new THREEAmbientLight() Playersceneadd(Playerlight)

canvas PlayercontainerappendChild(PlayerrendererdomElement)

Playerrenderer = new THREEWebGLRenderer(alpha true) PlayerrenderersetSize(Playersizewidth Playersizeheight)

28

Playersceneadd(Playerlight)

Playersceneadd(Playerlight)

Свет

29

THREEWebGLRenderer(alpha true)

THREEWebGLRenderer()

WebGLRenderer

Алгоритм

30

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Текстура

31

PlayertextureLoader = new THREETextureLoader()

PlayertextureLoaderload(texturejpg function(texture) Playertexture = texture PlayerloadModel() )

Алгоритм

32

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Загрузка 3D модели

33

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Загрузка 3D модели

34

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Загрузка 3D модели

35

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Алгоритм

36

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Анимация

37

Playercontrols = new THREETrackballControls(Playercamera Playercontainer)

animate function() requestAnimationFrame(Playeranimate)

Playerrendererrender(Playerscene Playercamera)

Playeranimate()

Playercontrolsupdate()

Анимация

38

Запросить браузер повторить animate()

Отрисовать модель

Обновить положение камеры

requestAnimationFrame

animate function() requestAnimationFrame(Playeranimate) Playercontrolsupdate() Playerrendererrender(Playerscene Playercamera)

39

viewshapecom

WebGL библиотеки

bull Threejs

bull Babylonjs

bull Turbulenz

bull PhiloGL

40

Полезные ссылки

davidscottlyonscomthreejs

Книга Learning Threejs The JavaScript 3D Library for WebGL

Книга WebGL Программирование трехмерной графики

Никита Северинов diductiorucourse2060

41

Исходники

42githubcomLikita

43

ГеймификацияИнтерактивность

Василика Климова

vasilikaklimova

likita

lik04ka

Спасибо за внимание44

Page 27: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

Свет рендер canvas

27

Playerlight = new THREEAmbientLight() Playersceneadd(Playerlight)

canvas PlayercontainerappendChild(PlayerrendererdomElement)

Playerrenderer = new THREEWebGLRenderer(alpha true) PlayerrenderersetSize(Playersizewidth Playersizeheight)

28

Playersceneadd(Playerlight)

Playersceneadd(Playerlight)

Свет

29

THREEWebGLRenderer(alpha true)

THREEWebGLRenderer()

WebGLRenderer

Алгоритм

30

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Текстура

31

PlayertextureLoader = new THREETextureLoader()

PlayertextureLoaderload(texturejpg function(texture) Playertexture = texture PlayerloadModel() )

Алгоритм

32

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Загрузка 3D модели

33

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Загрузка 3D модели

34

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Загрузка 3D модели

35

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Алгоритм

36

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Анимация

37

Playercontrols = new THREETrackballControls(Playercamera Playercontainer)

animate function() requestAnimationFrame(Playeranimate)

Playerrendererrender(Playerscene Playercamera)

Playeranimate()

Playercontrolsupdate()

Анимация

38

Запросить браузер повторить animate()

Отрисовать модель

Обновить положение камеры

requestAnimationFrame

animate function() requestAnimationFrame(Playeranimate) Playercontrolsupdate() Playerrendererrender(Playerscene Playercamera)

39

viewshapecom

WebGL библиотеки

bull Threejs

bull Babylonjs

bull Turbulenz

bull PhiloGL

40

Полезные ссылки

davidscottlyonscomthreejs

Книга Learning Threejs The JavaScript 3D Library for WebGL

Книга WebGL Программирование трехмерной графики

Никита Северинов diductiorucourse2060

41

Исходники

42githubcomLikita

43

ГеймификацияИнтерактивность

Василика Климова

vasilikaklimova

likita

lik04ka

Спасибо за внимание44

Page 28: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

28

Playersceneadd(Playerlight)

Playersceneadd(Playerlight)

Свет

29

THREEWebGLRenderer(alpha true)

THREEWebGLRenderer()

WebGLRenderer

Алгоритм

30

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Текстура

31

PlayertextureLoader = new THREETextureLoader()

PlayertextureLoaderload(texturejpg function(texture) Playertexture = texture PlayerloadModel() )

Алгоритм

32

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Загрузка 3D модели

33

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Загрузка 3D модели

34

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Загрузка 3D модели

35

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Алгоритм

36

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Анимация

37

Playercontrols = new THREETrackballControls(Playercamera Playercontainer)

animate function() requestAnimationFrame(Playeranimate)

Playerrendererrender(Playerscene Playercamera)

Playeranimate()

Playercontrolsupdate()

Анимация

38

Запросить браузер повторить animate()

Отрисовать модель

Обновить положение камеры

requestAnimationFrame

animate function() requestAnimationFrame(Playeranimate) Playercontrolsupdate() Playerrendererrender(Playerscene Playercamera)

39

viewshapecom

WebGL библиотеки

bull Threejs

bull Babylonjs

bull Turbulenz

bull PhiloGL

40

Полезные ссылки

davidscottlyonscomthreejs

Книга Learning Threejs The JavaScript 3D Library for WebGL

Книга WebGL Программирование трехмерной графики

Никита Северинов diductiorucourse2060

41

Исходники

42githubcomLikita

43

ГеймификацияИнтерактивность

Василика Климова

vasilikaklimova

likita

lik04ka

Спасибо за внимание44

Page 29: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

29

THREEWebGLRenderer(alpha true)

THREEWebGLRenderer()

WebGLRenderer

Алгоритм

30

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Текстура

31

PlayertextureLoader = new THREETextureLoader()

PlayertextureLoaderload(texturejpg function(texture) Playertexture = texture PlayerloadModel() )

Алгоритм

32

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Загрузка 3D модели

33

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Загрузка 3D модели

34

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Загрузка 3D модели

35

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Алгоритм

36

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Анимация

37

Playercontrols = new THREETrackballControls(Playercamera Playercontainer)

animate function() requestAnimationFrame(Playeranimate)

Playerrendererrender(Playerscene Playercamera)

Playeranimate()

Playercontrolsupdate()

Анимация

38

Запросить браузер повторить animate()

Отрисовать модель

Обновить положение камеры

requestAnimationFrame

animate function() requestAnimationFrame(Playeranimate) Playercontrolsupdate() Playerrendererrender(Playerscene Playercamera)

39

viewshapecom

WebGL библиотеки

bull Threejs

bull Babylonjs

bull Turbulenz

bull PhiloGL

40

Полезные ссылки

davidscottlyonscomthreejs

Книга Learning Threejs The JavaScript 3D Library for WebGL

Книга WebGL Программирование трехмерной графики

Никита Северинов diductiorucourse2060

41

Исходники

42githubcomLikita

43

ГеймификацияИнтерактивность

Василика Климова

vasilikaklimova

likita

lik04ka

Спасибо за внимание44

Page 30: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

Алгоритм

30

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Текстура

31

PlayertextureLoader = new THREETextureLoader()

PlayertextureLoaderload(texturejpg function(texture) Playertexture = texture PlayerloadModel() )

Алгоритм

32

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Загрузка 3D модели

33

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Загрузка 3D модели

34

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Загрузка 3D модели

35

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Алгоритм

36

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Анимация

37

Playercontrols = new THREETrackballControls(Playercamera Playercontainer)

animate function() requestAnimationFrame(Playeranimate)

Playerrendererrender(Playerscene Playercamera)

Playeranimate()

Playercontrolsupdate()

Анимация

38

Запросить браузер повторить animate()

Отрисовать модель

Обновить положение камеры

requestAnimationFrame

animate function() requestAnimationFrame(Playeranimate) Playercontrolsupdate() Playerrendererrender(Playerscene Playercamera)

39

viewshapecom

WebGL библиотеки

bull Threejs

bull Babylonjs

bull Turbulenz

bull PhiloGL

40

Полезные ссылки

davidscottlyonscomthreejs

Книга Learning Threejs The JavaScript 3D Library for WebGL

Книга WebGL Программирование трехмерной графики

Никита Северинов diductiorucourse2060

41

Исходники

42githubcomLikita

43

ГеймификацияИнтерактивность

Василика Климова

vasilikaklimova

likita

lik04ka

Спасибо за внимание44

Page 31: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

Текстура

31

PlayertextureLoader = new THREETextureLoader()

PlayertextureLoaderload(texturejpg function(texture) Playertexture = texture PlayerloadModel() )

Алгоритм

32

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Загрузка 3D модели

33

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Загрузка 3D модели

34

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Загрузка 3D модели

35

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Алгоритм

36

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Анимация

37

Playercontrols = new THREETrackballControls(Playercamera Playercontainer)

animate function() requestAnimationFrame(Playeranimate)

Playerrendererrender(Playerscene Playercamera)

Playeranimate()

Playercontrolsupdate()

Анимация

38

Запросить браузер повторить animate()

Отрисовать модель

Обновить положение камеры

requestAnimationFrame

animate function() requestAnimationFrame(Playeranimate) Playercontrolsupdate() Playerrendererrender(Playerscene Playercamera)

39

viewshapecom

WebGL библиотеки

bull Threejs

bull Babylonjs

bull Turbulenz

bull PhiloGL

40

Полезные ссылки

davidscottlyonscomthreejs

Книга Learning Threejs The JavaScript 3D Library for WebGL

Книга WebGL Программирование трехмерной графики

Никита Северинов diductiorucourse2060

41

Исходники

42githubcomLikita

43

ГеймификацияИнтерактивность

Василика Климова

vasilikaklimova

likita

lik04ka

Спасибо за внимание44

Page 32: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

Алгоритм

32

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Загрузка 3D модели

33

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Загрузка 3D модели

34

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Загрузка 3D модели

35

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Алгоритм

36

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Анимация

37

Playercontrols = new THREETrackballControls(Playercamera Playercontainer)

animate function() requestAnimationFrame(Playeranimate)

Playerrendererrender(Playerscene Playercamera)

Playeranimate()

Playercontrolsupdate()

Анимация

38

Запросить браузер повторить animate()

Отрисовать модель

Обновить положение камеры

requestAnimationFrame

animate function() requestAnimationFrame(Playeranimate) Playercontrolsupdate() Playerrendererrender(Playerscene Playercamera)

39

viewshapecom

WebGL библиотеки

bull Threejs

bull Babylonjs

bull Turbulenz

bull PhiloGL

40

Полезные ссылки

davidscottlyonscomthreejs

Книга Learning Threejs The JavaScript 3D Library for WebGL

Книга WebGL Программирование трехмерной графики

Никита Северинов diductiorucourse2060

41

Исходники

42githubcomLikita

43

ГеймификацияИнтерактивность

Василика Климова

vasilikaklimova

likita

lik04ka

Спасибо за внимание44

Page 33: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

Загрузка 3D модели

33

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Загрузка 3D модели

34

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Загрузка 3D модели

35

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Алгоритм

36

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Анимация

37

Playercontrols = new THREETrackballControls(Playercamera Playercontainer)

animate function() requestAnimationFrame(Playeranimate)

Playerrendererrender(Playerscene Playercamera)

Playeranimate()

Playercontrolsupdate()

Анимация

38

Запросить браузер повторить animate()

Отрисовать модель

Обновить положение камеры

requestAnimationFrame

animate function() requestAnimationFrame(Playeranimate) Playercontrolsupdate() Playerrendererrender(Playerscene Playercamera)

39

viewshapecom

WebGL библиотеки

bull Threejs

bull Babylonjs

bull Turbulenz

bull PhiloGL

40

Полезные ссылки

davidscottlyonscomthreejs

Книга Learning Threejs The JavaScript 3D Library for WebGL

Книга WebGL Программирование трехмерной графики

Никита Северинов diductiorucourse2060

41

Исходники

42githubcomLikita

43

ГеймификацияИнтерактивность

Василика Климова

vasilikaklimova

likita

lik04ka

Спасибо за внимание44

Page 34: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

Загрузка 3D модели

34

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Загрузка 3D модели

35

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Алгоритм

36

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Анимация

37

Playercontrols = new THREETrackballControls(Playercamera Playercontainer)

animate function() requestAnimationFrame(Playeranimate)

Playerrendererrender(Playerscene Playercamera)

Playeranimate()

Playercontrolsupdate()

Анимация

38

Запросить браузер повторить animate()

Отрисовать модель

Обновить положение камеры

requestAnimationFrame

animate function() requestAnimationFrame(Playeranimate) Playercontrolsupdate() Playerrendererrender(Playerscene Playercamera)

39

viewshapecom

WebGL библиотеки

bull Threejs

bull Babylonjs

bull Turbulenz

bull PhiloGL

40

Полезные ссылки

davidscottlyonscomthreejs

Книга Learning Threejs The JavaScript 3D Library for WebGL

Книга WebGL Программирование трехмерной графики

Никита Северинов diductiorucourse2060

41

Исходники

42githubcomLikita

43

ГеймификацияИнтерактивность

Василика Климова

vasilikaklimova

likita

lik04ka

Спасибо за внимание44

Page 35: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

Загрузка 3D модели

35

loadModel function() objectLoader = new THREEOBJLoader()

objectLoaderload(objectobj function(object) objecttraverse(function(child) if (child instanceof THREEMesh) childmaterialmap = Playertexture ) Playersceneadd(object) )

Алгоритм

36

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Анимация

37

Playercontrols = new THREETrackballControls(Playercamera Playercontainer)

animate function() requestAnimationFrame(Playeranimate)

Playerrendererrender(Playerscene Playercamera)

Playeranimate()

Playercontrolsupdate()

Анимация

38

Запросить браузер повторить animate()

Отрисовать модель

Обновить положение камеры

requestAnimationFrame

animate function() requestAnimationFrame(Playeranimate) Playercontrolsupdate() Playerrendererrender(Playerscene Playercamera)

39

viewshapecom

WebGL библиотеки

bull Threejs

bull Babylonjs

bull Turbulenz

bull PhiloGL

40

Полезные ссылки

davidscottlyonscomthreejs

Книга Learning Threejs The JavaScript 3D Library for WebGL

Книга WebGL Программирование трехмерной графики

Никита Северинов diductiorucourse2060

41

Исходники

42githubcomLikita

43

ГеймификацияИнтерактивность

Василика Климова

vasilikaklimova

likita

lik04ka

Спасибо за внимание44

Page 36: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

Алгоритм

36

Загрузка текстуры

Рендер canvas

Загрузка 3D объекта

Сцена Камера Свет

Анимация

Анимация

37

Playercontrols = new THREETrackballControls(Playercamera Playercontainer)

animate function() requestAnimationFrame(Playeranimate)

Playerrendererrender(Playerscene Playercamera)

Playeranimate()

Playercontrolsupdate()

Анимация

38

Запросить браузер повторить animate()

Отрисовать модель

Обновить положение камеры

requestAnimationFrame

animate function() requestAnimationFrame(Playeranimate) Playercontrolsupdate() Playerrendererrender(Playerscene Playercamera)

39

viewshapecom

WebGL библиотеки

bull Threejs

bull Babylonjs

bull Turbulenz

bull PhiloGL

40

Полезные ссылки

davidscottlyonscomthreejs

Книга Learning Threejs The JavaScript 3D Library for WebGL

Книга WebGL Программирование трехмерной графики

Никита Северинов diductiorucourse2060

41

Исходники

42githubcomLikita

43

ГеймификацияИнтерактивность

Василика Климова

vasilikaklimova

likita

lik04ka

Спасибо за внимание44

Page 37: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

Анимация

37

Playercontrols = new THREETrackballControls(Playercamera Playercontainer)

animate function() requestAnimationFrame(Playeranimate)

Playerrendererrender(Playerscene Playercamera)

Playeranimate()

Playercontrolsupdate()

Анимация

38

Запросить браузер повторить animate()

Отрисовать модель

Обновить положение камеры

requestAnimationFrame

animate function() requestAnimationFrame(Playeranimate) Playercontrolsupdate() Playerrendererrender(Playerscene Playercamera)

39

viewshapecom

WebGL библиотеки

bull Threejs

bull Babylonjs

bull Turbulenz

bull PhiloGL

40

Полезные ссылки

davidscottlyonscomthreejs

Книга Learning Threejs The JavaScript 3D Library for WebGL

Книга WebGL Программирование трехмерной графики

Никита Северинов diductiorucourse2060

41

Исходники

42githubcomLikita

43

ГеймификацияИнтерактивность

Василика Климова

vasilikaklimova

likita

lik04ka

Спасибо за внимание44

Page 38: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

Анимация

38

Запросить браузер повторить animate()

Отрисовать модель

Обновить положение камеры

requestAnimationFrame

animate function() requestAnimationFrame(Playeranimate) Playercontrolsupdate() Playerrendererrender(Playerscene Playercamera)

39

viewshapecom

WebGL библиотеки

bull Threejs

bull Babylonjs

bull Turbulenz

bull PhiloGL

40

Полезные ссылки

davidscottlyonscomthreejs

Книга Learning Threejs The JavaScript 3D Library for WebGL

Книга WebGL Программирование трехмерной графики

Никита Северинов diductiorucourse2060

41

Исходники

42githubcomLikita

43

ГеймификацияИнтерактивность

Василика Климова

vasilikaklimova

likita

lik04ka

Спасибо за внимание44

Page 39: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

39

viewshapecom

WebGL библиотеки

bull Threejs

bull Babylonjs

bull Turbulenz

bull PhiloGL

40

Полезные ссылки

davidscottlyonscomthreejs

Книга Learning Threejs The JavaScript 3D Library for WebGL

Книга WebGL Программирование трехмерной графики

Никита Северинов diductiorucourse2060

41

Исходники

42githubcomLikita

43

ГеймификацияИнтерактивность

Василика Климова

vasilikaklimova

likita

lik04ka

Спасибо за внимание44

Page 40: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

WebGL библиотеки

bull Threejs

bull Babylonjs

bull Turbulenz

bull PhiloGL

40

Полезные ссылки

davidscottlyonscomthreejs

Книга Learning Threejs The JavaScript 3D Library for WebGL

Книга WebGL Программирование трехмерной графики

Никита Северинов diductiorucourse2060

41

Исходники

42githubcomLikita

43

ГеймификацияИнтерактивность

Василика Климова

vasilikaklimova

likita

lik04ka

Спасибо за внимание44

Page 41: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

Полезные ссылки

davidscottlyonscomthreejs

Книга Learning Threejs The JavaScript 3D Library for WebGL

Книга WebGL Программирование трехмерной графики

Никита Северинов diductiorucourse2060

41

Исходники

42githubcomLikita

43

ГеймификацияИнтерактивность

Василика Климова

vasilikaklimova

likita

lik04ka

Спасибо за внимание44

Page 42: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

Исходники

42githubcomLikita

43

ГеймификацияИнтерактивность

Василика Климова

vasilikaklimova

likita

lik04ka

Спасибо за внимание44

Page 43: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

43

ГеймификацияИнтерактивность

Василика Климова

vasilikaklimova

likita

lik04ka

Спасибо за внимание44

Page 44: «3D-плеер на WebGL», Василика Климова, MoscowJS 21

Василика Климова

vasilikaklimova

likita

lik04ka

Спасибо за внимание44