Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
3D  плеер  на  WebGL
Василика  Климова  
Разработчик  интерфейсов
Artec  Group
@lik04ka
MoscowJS  21
Содержание
2
        Применение  WebGL
        Преимущества
        Основные  понятия  3D  графики
        Библиотека  Thr...
• HTML5  <canvas>  
• OpenGL  ES  2.0  
• GLSL  ES  
• 2D/3D
3
WebGL
4
caniuse.com/webgl
IEWebGL
Игры
5
gooengine.com/pearl-­‐boy
6
Навигация
7
bookcase.chromeexperiments.com
Редакторы
8
3dtin.com
9
Инфографика
globe.chromeexperiments.com
10
Технологии  3D
O3D
Преимущества
11
Преимущества
• Открытый  стандарт  
• Кроссплатформенность  
• Высокая  производительность
12
Преимущества
• Автоматическое  управление  памятью  
• Отсутствие  компиляции
13
14
GLSL
Основные  понятия
• Сцена  
• Свет  
• Камера
15
Взаимосвязь  объектов
16
Камера 3D  объектыСвет
Сцена
Рендер
3D  объект
17
Полигональная  сетка
Геометрия Материал Текстура
Визуализация
• Рендер  
• Шейдер  
• Анимация
18
Three.js
19
• three.min.js                                                            420  kb  
• OBJLoader.js            ...
Входные  данные
20
texture.jpg object.obj
Алгоритм
21
Загрузка  текстуры
Рендер,  canvas
Загрузка  3D  объекта
Сцена,  Камера,  Свет
Анимация
Сцена
22
Player.container  =  document.getElementById("webgl-­‐player");  
Player.size  =  {  
            width:  Player....
Алгоритм
23
Загрузка  текстуры
Рендер,  canvas
Загрузка  3D  объекта
Сцена,  Камера,  Свет
Анимация
Камера
24
Player.camera.position.z  =  300;  
Player.scene.add(Player.camera);
//  PerspectiveCamera(  fov,    aspect,    ...
25
Перспективная  проекция  
PerspectiveCamera
Ортогональная  проекция  
OrthographicCamera
Типы  камер
Алгоритм
26
Загрузка  текстуры
Рендер,  canvas
Загрузка  3D  объекта
Сцена,  Камера,  Свет  
Анимация
Свет,  рендер,  canvas  
27
Player.light  =  new  THREE.AmbientLight();  
Player.scene.add(Player.light);
//  canvas  
Pla...
28
//  Player.scene.add(Player.light)
Player.scene.add(Player.light)
Свет
29
THREE.WebGLRenderer({alpha:  true})
THREE.WebGLRenderer()
WebGLRenderer
Алгоритм
30
Загрузка  текстуры
Рендер,  canvas
Загрузка  3D  объекта
Сцена,  Камера,  Свет
Анимация
Текстура
31
Player.textureLoader  =  new  THREE.TextureLoader();  
Player.textureLoader.load("texture.jpg",  function(text...
Алгоритм
32
Загрузка  текстуры
Рендер,  canvas
Загрузка  3D  объекта
Сцена,  Камера,  Свет
Анимация
Загрузка  3D  модели
33
loadModel:  function()  {  
        objectLoader  =  new  THREE.OBJLoader();    
                
...
Загрузка  3D  модели
34
loadModel:  function()  {  
        objectLoader  =  new  THREE.OBJLoader();    
                
...
Загрузка  3D  модели
35
loadModel:  function()  {  
        objectLoader  =  new  THREE.OBJLoader();    
                
...
Алгоритм
36
Загрузка  текстуры
Рендер,  canvas
Загрузка  3D  объекта
Сцена,  Камера,  Свет
Анимация
Анимация
37
Player.controls  =  new  THREE.TrackballControls(Player.camera,    
                      Player.container);  ...
Анимация
38
Запросить  браузер  повторить  
animate()
Отрисовать  модель
Обновить  положение  камеры
requestAnimationFrame...
39
viewshape.com
WebGL  библиотеки
•   Three.js  
•   Babylon.js  
•   Turbulenz  
•   PhiloGL
40
Полезные  ссылки
davidscottlyons.com/threejs  
Книга  Learning  Three.js:  The  JavaScript  3D  Library  for  WebGL  
Книг...
Исходники
42
github.com/Likita
43
Геймификация
Интерактивность
Василика  Климова
vasilika.klimova

likita
lik04ka
Спасибо  за  внимание!
44
Prochain SlideShare
Chargement dans…5
×

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

1 664 vues

Publié le

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

Publié dans : Logiciels
  • Soyez le premier à commenter

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

  1. 1. 3D  плеер  на  WebGL Василика  Климова   Разработчик  интерфейсов Artec  Group @lik04ka MoscowJS  21
  2. 2. Содержание 2        Применение  WebGL        Преимущества        Основные  понятия  3D  графики        Библиотека  Three.js        Плеер  для  просмотра  3D  моделей
  3. 3. • HTML5  <canvas>   • OpenGL  ES  2.0   • GLSL  ES   • 2D/3D 3 WebGL
  4. 4. 4 caniuse.com/webgl IEWebGL
  5. 5. Игры 5 gooengine.com/pearl-­‐boy
  6. 6. 6
  7. 7. Навигация 7 bookcase.chromeexperiments.com
  8. 8. Редакторы 8 3dtin.com
  9. 9. 9 Инфографика globe.chromeexperiments.com
  10. 10. 10 Технологии  3D O3D
  11. 11. Преимущества 11
  12. 12. Преимущества • Открытый  стандарт   • Кроссплатформенность   • Высокая  производительность 12
  13. 13. Преимущества • Автоматическое  управление  памятью   • Отсутствие  компиляции 13
  14. 14. 14 GLSL
  15. 15. Основные  понятия • Сцена   • Свет   • Камера 15
  16. 16. Взаимосвязь  объектов 16 Камера 3D  объектыСвет Сцена Рендер
  17. 17. 3D  объект 17 Полигональная  сетка Геометрия Материал Текстура
  18. 18. Визуализация • Рендер   • Шейдер   • Анимация 18
  19. 19. Three.js 19 • three.min.js                                                            420  kb   • OBJLoader.js                                                                   • TrackballControls.js                                      14  kb threejs.org @mrdoob 8  kb
  20. 20. Входные  данные 20 texture.jpg object.obj
  21. 21. Алгоритм 21 Загрузка  текстуры Рендер,  canvas Загрузка  3D  объекта Сцена,  Камера,  Свет Анимация
  22. 22. Сцена 22 Player.container  =  document.getElementById("webgl-­‐player");   Player.size  =  {              width:  Player.container.offsetWidth,              height:  Player.container.offsetHeight   }; Player.scene  =  new  THREE.Scene();
  23. 23. Алгоритм 23 Загрузка  текстуры Рендер,  canvas Загрузка  3D  объекта Сцена,  Камера,  Свет Анимация
  24. 24. Камера 24 Player.camera.position.z  =  300;   Player.scene.add(Player.camera); //  PerspectiveCamera(  fov,    aspect,    near,    far  )   aspect  =  Player.size.width  /  Player.size.height;   Player.camera  =  new  THREE.PerspectiveCamera(45.0,  aspect,  2,  8000);
  25. 25. 25 Перспективная  проекция   PerspectiveCamera Ортогональная  проекция   OrthographicCamera Типы  камер
  26. 26. Алгоритм 26 Загрузка  текстуры Рендер,  canvas Загрузка  3D  объекта Сцена,  Камера,  Свет   Анимация
  27. 27. Свет,  рендер,  canvas   27 Player.light  =  new  THREE.AmbientLight();   Player.scene.add(Player.light); //  canvas   Player.container.appendChild(Player.renderer.domElement); Player.renderer  =  new  THREE.WebGLRenderer({alpha:  true});   Player.renderer.setSize(Player.size.width,  Player.size.height);
  28. 28. 28 //  Player.scene.add(Player.light) Player.scene.add(Player.light) Свет
  29. 29. 29 THREE.WebGLRenderer({alpha:  true}) THREE.WebGLRenderer() WebGLRenderer
  30. 30. Алгоритм 30 Загрузка  текстуры Рендер,  canvas Загрузка  3D  объекта Сцена,  Камера,  Свет Анимация
  31. 31. Текстура 31 Player.textureLoader  =  new  THREE.TextureLoader();   Player.textureLoader.load("texture.jpg",  function(texture)  {              Player.texture  =  texture;              Player.loadModel();   });
  32. 32. Алгоритм 32 Загрузка  текстуры Рендер,  canvas Загрузка  3D  объекта Сцена,  Камера,  Свет Анимация
  33. 33. Загрузка  3D  модели 33 loadModel:  function()  {          objectLoader  =  new  THREE.OBJLoader();                                              objectLoader.load("object.obj",  function(object)  {                  object.traverse(function(child)  {                          if  (child  instanceof  THREE.Mesh)  {                      child.material.map  =  Player.texture;                          }                  });                  Player.scene.add(object);          });   }
  34. 34. Загрузка  3D  модели 34 loadModel:  function()  {          objectLoader  =  new  THREE.OBJLoader();                                          objectLoader.load("object.obj",  function(object)  {                  object.traverse(function(child)  {                          if  (child  instanceof  THREE.Mesh)  {                      child.material.map  =  Player.texture;                          }                  });                  Player.scene.add(object);          });   }
  35. 35. Загрузка  3D  модели 35 loadModel:  function()  {          objectLoader  =  new  THREE.OBJLoader();                                              objectLoader.load("object.obj",  function(object)  {                  object.traverse(function(child)  {                          if  (child  instanceof  THREE.Mesh)  {                      child.material.map  =  Player.texture;                          }                  });                  Player.scene.add(object);          });   }
  36. 36. Алгоритм 36 Загрузка  текстуры Рендер,  canvas Загрузка  3D  объекта Сцена,  Камера,  Свет Анимация
  37. 37. Анимация 37 Player.controls  =  new  THREE.TrackballControls(Player.camera,                    Player.container);               animate:  function()  {          requestAnimationFrame(Player.animate);          Player.renderer.render(Player.scene,  Player.camera);   } Player.animate(); Player.controls.update();
  38. 38. Анимация 38 Запросить  браузер  повторить   animate() Отрисовать  модель Обновить  положение  камеры requestAnimationFrame animate:  function()  {          requestAnimationFrame(Player.animate);          Player.controls.update();          Player.renderer.render(Player.scene,  Player.camera);   }
  39. 39. 39 viewshape.com
  40. 40. WebGL  библиотеки •  Three.js   •  Babylon.js   •  Turbulenz   •  PhiloGL 40
  41. 41. Полезные  ссылки davidscottlyons.com/threejs   Книга  Learning  Three.js:  The  JavaScript  3D  Library  for  WebGL   Книга  WebGL.  Программирование  трехмерной  графики   Никита  Северинов  diductio.ru/course/2060/ 41
  42. 42. Исходники 42 github.com/Likita
  43. 43. 43 Геймификация Интерактивность
  44. 44. Василика  Климова vasilika.klimova
 likita lik04ka Спасибо  за  внимание! 44

×