«3D-плеер на WebGL», Василика Климова, MoscowJS 21
1 like1,914 views
Документ описывает создание 3D плеера на основе WebGL с использованием библиотеки three.js, включая основные принципы работы, преимущества и применение технологии. В нем рассматриваются такие аспекты, как камера, свет, обработка текстур и анимация объектов. Также представлены алгоритмы загрузки 3D-объектов и текстур, а также управление интерaktivным элементом управления.
«3D-плеер на WebGL», Василика Климова, MoscowJS 21
- 1. 3D плеер на WebGL Василика Климова Разработчик интерфейсов Artec Group @lik04ka MoscowJS 21
- 2. Содержание 2 Применение WebGL Преимущества Основные понятия 3D графики Библиотека Three.js Плеер для просмотра 3D моделей
- 3. • HTML5 <canvas> • OpenGL ES 2.0 • GLSL ES • 2D/3D 3 WebGL
- 6. 6
- 11. Преимущества 11
- 12. Преимущества • Открытый стандарт • Кроссплатформенность • Высокая производительность 12
- 13. Преимущества • Автоматическое управление памятью • Отсутствие компиляции 13
- 14. 14 GLSL
- 15. Основные понятия • Сцена • Свет • Камера 15
- 16. Взаимосвязь объектов 16 Камера 3D объектыСвет Сцена Рендер
- 17. 3D объект 17 Полигональная сетка Геометрия Материал Текстура
- 18. Визуализация • Рендер • Шейдер • Анимация 18
- 19. Three.js 19 • three.min.js 420 kb • OBJLoader.js • TrackballControls.js 14 kb threejs.org @mrdoob 8 kb
- 21. Алгоритм 21 Загрузка текстуры Рендер, canvas Загрузка 3D объекта Сцена, Камера, Свет Анимация
- 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 Загрузка текстуры Рендер, canvas Загрузка 3D объекта Сцена, Камера, Свет Анимация
- 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 Перспективная проекция PerspectiveCamera Ортогональная проекция OrthographicCamera Типы камер
- 26. Алгоритм 26 Загрузка текстуры Рендер, canvas Загрузка 3D объекта Сцена, Камера, Свет Анимация
- 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);
- 30. Алгоритм 30 Загрузка текстуры Рендер, canvas Загрузка 3D объекта Сцена, Камера, Свет Анимация
- 31. Текстура 31 Player.textureLoader = new THREE.TextureLoader(); Player.textureLoader.load("texture.jpg", function(texture) { Player.texture = texture; Player.loadModel(); });
- 32. Алгоритм 32 Загрузка текстуры Рендер, canvas Загрузка 3D объекта Сцена, Камера, Свет Анимация
- 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. Загрузка 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. Загрузка 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 Загрузка текстуры Рендер, canvas Загрузка 3D объекта Сцена, Камера, Свет Анимация
- 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 Запросить браузер повторить animate() Отрисовать модель Обновить положение камеры requestAnimationFrame animate: function() { requestAnimationFrame(Player.animate); Player.controls.update(); Player.renderer.render(Player.scene, Player.camera); }
- 39. 39 viewshape.com
- 40. WebGL библиотеки • Three.js • Babylon.js • Turbulenz • PhiloGL 40
- 41. Полезные ссылки davidscottlyons.com/threejs Книга Learning Three.js: The JavaScript 3D Library for WebGL Книга WebGL. Программирование трехмерной графики Никита Северинов diductio.ru/course/2060/ 41
- 44. Василика Климова vasilika.klimova likita lik04ka Спасибо за внимание! 44