Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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
Nächste SlideShare
Wird geladen in …5
×

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

1.715 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

«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

×