Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

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

Plus De Contenu Connexe

Plus par MoscowJS

Livres associés

Gratuit avec un essai de 30 jours de Scribd

Tout voir

«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

×