Enviar pesquisa
Carregar
«3D-плеер на WebGL», Василика Климова, MoscowJS 21
•
1 gostou
•
1,913 visualizações
MoscowJS
Seguir
«3D-плеер на WebGL», Василика Климова, MoscowJS 21
Leia menos
Leia mais
Software
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 44
Baixar agora
Baixar para ler offline
Recomendados
Знакомство с Papervision3d
Знакомство с Papervision3d
Igor Ruzanov
Artec 3D web player
Artec 3D web player
Vasilika Klimova
Разработка игр с помощью Cocos2d
Разработка игр с помощью Cocos2d
Stanislav Krasnoyarov
Интерактивные 3D-карты своими руками / Александр Амосов (Avito)
Интерактивные 3D-карты своими руками / Александр Амосов (Avito)
Ontico
Введиние в разработку 3D игр для Nokia Asha телефонов
Введиние в разработку 3D игр для Nokia Asha телефонов
Microsoft Mobile Developer
Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18
Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18
OdessaFrontend
Как правильно делать анимацию и добиться 60fps на различных девайсах | Odessa...
Как правильно делать анимацию и добиться 60fps на различных девайсах | Odessa...
OdessaFrontend
Путь к WebGL через THREE.js | Odessa Frontend Meetup #12
Путь к WebGL через THREE.js | Odessa Frontend Meetup #12
OdessaFrontend
Recomendados
Знакомство с Papervision3d
Знакомство с Papervision3d
Igor Ruzanov
Artec 3D web player
Artec 3D web player
Vasilika Klimova
Разработка игр с помощью Cocos2d
Разработка игр с помощью Cocos2d
Stanislav Krasnoyarov
Интерактивные 3D-карты своими руками / Александр Амосов (Avito)
Интерактивные 3D-карты своими руками / Александр Амосов (Avito)
Ontico
Введиние в разработку 3D игр для Nokia Asha телефонов
Введиние в разработку 3D игр для Nokia Asha телефонов
Microsoft Mobile Developer
Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18
Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18
OdessaFrontend
Как правильно делать анимацию и добиться 60fps на различных девайсах | Odessa...
Как правильно делать анимацию и добиться 60fps на различных девайсах | Odessa...
OdessaFrontend
Путь к WebGL через THREE.js | Odessa Frontend Meetup #12
Путь к WebGL через THREE.js | Odessa Frontend Meetup #12
OdessaFrontend
Сергей Перескоков "JS API Яндекс.Карт 2.0: что нового и как это работает"
Сергей Перескоков "JS API Яндекс.Карт 2.0: что нового и как это работает"
Yandex
Иструментарий для быстрой разработки игр с 2 d физикой
Иструментарий для быстрой разработки игр с 2 d физикой
akimovpro
20111204 computer graphics_galinsky_lecture12_real_time
20111204 computer graphics_galinsky_lecture12_real_time
Computer Science Club
iOS-05_2-UIKit
iOS-05_2-UIKit
Noveo
2016-12-03 01 Вадим Литвинов. От 2D к 3D обзор методов реконструкции поверхно...
2016-12-03 01 Вадим Литвинов. От 2D к 3D обзор методов реконструкции поверхно...
Омские ИТ-субботники
Python + GPGPU
Python + GPGPU
PyNSK
Владимир Алаев, Сергей Белов "Новые возможности bem-tools для автоматической ...
Владимир Алаев, Сергей Белов "Новые возможности bem-tools для автоматической ...
Yandex
Promise me an Image... Антон Корзунов, Яндекс, MoscowJs 33
Promise me an Image... Антон Корзунов, Яндекс, MoscowJs 33
MoscowJS
Qualitative reconstruction of the camera and geometry of a scene, as a key to...
Qualitative reconstruction of the camera and geometry of a scene, as a key to...
Alexander Lavrov
проект Gpu digital lab швабе
проект Gpu digital lab швабе
oleg gubanov
"Погружение в Robolectric" Дмитрий Костырев (Avito)
"Погружение в Robolectric" Дмитрий Костырев (Avito)
AvitoTech
Олег Мохов "Драматическая история одной маленькой промостранички"
Олег Мохов "Драматическая история одной маленькой промостранички"
Yandex
Тестирование CSS-регрессий с Gemini — Сергей Татаринцев
Тестирование CSS-регрессий с Gemini — Сергей Татаринцев
Yandex
технология Imagine3 d 1 1
технология Imagine3 d 1 1
oleg gubanov
Lviv MDDay 2014. Олександр Зозуля “Google карти для android”
Lviv MDDay 2014. Олександр Зозуля “Google карти для android”
Lviv Startup Club
Пощупать 3д в браузере | Odessa Frontend Meetup #15
Пощупать 3д в браузере | Odessa Frontend Meetup #15
OdessaFrontend
DUMP-2013 Frontend - Возможности последних WEB-стандартов в API Яндекс.Карт -...
DUMP-2013 Frontend - Возможности последних WEB-стандартов в API Яндекс.Карт -...
it-people
Василика Климова
Василика Климова
CodeFest
Lime.JS
Lime.JS
Pavlo Iuriichuk
Обзор программных средств Майкрософт для графики и визуализации: коммерческой...
Обзор программных средств Майкрософт для графики и визуализации: коммерческой...
Dmitri Soshnikov
SECON'2014 - Сергей Шпадырев - Разработка 3D-игры на Flash: едем с костылями...
SECON'2014 - Сергей Шпадырев - Разработка 3D-игры на Flash: едем с костылями...
Конференция разработчиков программного обеспечения SECON'2014
Нейронные сети и Keras. Часть 2
Нейронные сети и Keras. Часть 2
PyNSK
Mais conteúdo relacionado
Mais procurados
Сергей Перескоков "JS API Яндекс.Карт 2.0: что нового и как это работает"
Сергей Перескоков "JS API Яндекс.Карт 2.0: что нового и как это работает"
Yandex
Иструментарий для быстрой разработки игр с 2 d физикой
Иструментарий для быстрой разработки игр с 2 d физикой
akimovpro
20111204 computer graphics_galinsky_lecture12_real_time
20111204 computer graphics_galinsky_lecture12_real_time
Computer Science Club
iOS-05_2-UIKit
iOS-05_2-UIKit
Noveo
2016-12-03 01 Вадим Литвинов. От 2D к 3D обзор методов реконструкции поверхно...
2016-12-03 01 Вадим Литвинов. От 2D к 3D обзор методов реконструкции поверхно...
Омские ИТ-субботники
Python + GPGPU
Python + GPGPU
PyNSK
Владимир Алаев, Сергей Белов "Новые возможности bem-tools для автоматической ...
Владимир Алаев, Сергей Белов "Новые возможности bem-tools для автоматической ...
Yandex
Mais procurados
(7)
Сергей Перескоков "JS API Яндекс.Карт 2.0: что нового и как это работает"
Сергей Перескоков "JS API Яндекс.Карт 2.0: что нового и как это работает"
Иструментарий для быстрой разработки игр с 2 d физикой
Иструментарий для быстрой разработки игр с 2 d физикой
20111204 computer graphics_galinsky_lecture12_real_time
20111204 computer graphics_galinsky_lecture12_real_time
iOS-05_2-UIKit
iOS-05_2-UIKit
2016-12-03 01 Вадим Литвинов. От 2D к 3D обзор методов реконструкции поверхно...
2016-12-03 01 Вадим Литвинов. От 2D к 3D обзор методов реконструкции поверхно...
Python + GPGPU
Python + GPGPU
Владимир Алаев, Сергей Белов "Новые возможности bem-tools для автоматической ...
Владимир Алаев, Сергей Белов "Новые возможности bem-tools для автоматической ...
Semelhante a «3D-плеер на WebGL», Василика Климова, MoscowJS 21
Promise me an Image... Антон Корзунов, Яндекс, MoscowJs 33
Promise me an Image... Антон Корзунов, Яндекс, MoscowJs 33
MoscowJS
Qualitative reconstruction of the camera and geometry of a scene, as a key to...
Qualitative reconstruction of the camera and geometry of a scene, as a key to...
Alexander Lavrov
проект Gpu digital lab швабе
проект Gpu digital lab швабе
oleg gubanov
"Погружение в Robolectric" Дмитрий Костырев (Avito)
"Погружение в Robolectric" Дмитрий Костырев (Avito)
AvitoTech
Олег Мохов "Драматическая история одной маленькой промостранички"
Олег Мохов "Драматическая история одной маленькой промостранички"
Yandex
Тестирование CSS-регрессий с Gemini — Сергей Татаринцев
Тестирование CSS-регрессий с Gemini — Сергей Татаринцев
Yandex
технология Imagine3 d 1 1
технология Imagine3 d 1 1
oleg gubanov
Lviv MDDay 2014. Олександр Зозуля “Google карти для android”
Lviv MDDay 2014. Олександр Зозуля “Google карти для android”
Lviv Startup Club
Пощупать 3д в браузере | Odessa Frontend Meetup #15
Пощупать 3д в браузере | Odessa Frontend Meetup #15
OdessaFrontend
DUMP-2013 Frontend - Возможности последних WEB-стандартов в API Яндекс.Карт -...
DUMP-2013 Frontend - Возможности последних WEB-стандартов в API Яндекс.Карт -...
it-people
Василика Климова
Василика Климова
CodeFest
Lime.JS
Lime.JS
Pavlo Iuriichuk
Обзор программных средств Майкрософт для графики и визуализации: коммерческой...
Обзор программных средств Майкрософт для графики и визуализации: коммерческой...
Dmitri Soshnikov
SECON'2014 - Сергей Шпадырев - Разработка 3D-игры на Flash: едем с костылями...
SECON'2014 - Сергей Шпадырев - Разработка 3D-игры на Flash: едем с костылями...
Конференция разработчиков программного обеспечения SECON'2014
Нейронные сети и Keras. Часть 2
Нейронные сети и Keras. Часть 2
PyNSK
Windows Phone 7 Game Development
Windows Phone 7 Game Development
Sergii Lutai
Архитектура современного 3 d движка: Разработка Xenus: Точка кипения
Архитектура современного 3 d движка: Разработка Xenus: Точка кипения
Roman_Lut
NettleBox - Products
NettleBox - Products
NettleTech
Куда катится этот веб?
Куда катится этот веб?
Mikhail Larchanka
Matchmoving Introduction
Matchmoving Introduction
Alexander Lavrov
Semelhante a «3D-плеер на WebGL», Василика Климова, MoscowJS 21
(20)
Promise me an Image... Антон Корзунов, Яндекс, MoscowJs 33
Promise me an Image... Антон Корзунов, Яндекс, MoscowJs 33
Qualitative reconstruction of the camera and geometry of a scene, as a key to...
Qualitative reconstruction of the camera and geometry of a scene, as a key to...
проект Gpu digital lab швабе
проект Gpu digital lab швабе
"Погружение в Robolectric" Дмитрий Костырев (Avito)
"Погружение в Robolectric" Дмитрий Костырев (Avito)
Олег Мохов "Драматическая история одной маленькой промостранички"
Олег Мохов "Драматическая история одной маленькой промостранички"
Тестирование CSS-регрессий с Gemini — Сергей Татаринцев
Тестирование CSS-регрессий с Gemini — Сергей Татаринцев
технология Imagine3 d 1 1
технология Imagine3 d 1 1
Lviv MDDay 2014. Олександр Зозуля “Google карти для android”
Lviv MDDay 2014. Олександр Зозуля “Google карти для android”
Пощупать 3д в браузере | Odessa Frontend Meetup #15
Пощупать 3д в браузере | Odessa Frontend Meetup #15
DUMP-2013 Frontend - Возможности последних WEB-стандартов в API Яндекс.Карт -...
DUMP-2013 Frontend - Возможности последних WEB-стандартов в API Яндекс.Карт -...
Василика Климова
Василика Климова
Lime.JS
Lime.JS
Обзор программных средств Майкрософт для графики и визуализации: коммерческой...
Обзор программных средств Майкрософт для графики и визуализации: коммерческой...
SECON'2014 - Сергей Шпадырев - Разработка 3D-игры на Flash: едем с костылями...
SECON'2014 - Сергей Шпадырев - Разработка 3D-игры на Flash: едем с костылями...
Нейронные сети и Keras. Часть 2
Нейронные сети и Keras. Часть 2
Windows Phone 7 Game Development
Windows Phone 7 Game Development
Архитектура современного 3 d движка: Разработка Xenus: Точка кипения
Архитектура современного 3 d движка: Разработка Xenus: Точка кипения
NettleBox - Products
NettleBox - Products
Куда катится этот веб?
Куда катится этот веб?
Matchmoving Introduction
Matchmoving Introduction
Mais de MoscowJS
Александр Русаков - TypeScript 2 in action
Александр Русаков - TypeScript 2 in action
MoscowJS
Виктор Розаев - Как не сломать обратную совместимость в Public API
Виктор Розаев - Как не сломать обратную совместимость в Public API
MoscowJS
Favicon на стероидах
Favicon на стероидах
MoscowJS
E2E-тестирование мобильных приложений
E2E-тестирование мобильных приложений
MoscowJS
Reliable DOM testing with browser-monkey
Reliable DOM testing with browser-monkey
MoscowJS
Basis.js - Production Ready SPA Framework
Basis.js - Production Ready SPA Framework
MoscowJS
Контекст в React, Николай Надоричев, MoscowJS 31
Контекст в React, Николай Надоричев, MoscowJS 31
MoscowJS
Верстка Canvas, Алексей Охрименко, MoscowJS 31
Верстка Canvas, Алексей Охрименко, MoscowJS 31
MoscowJS
Веб без интернет соединения, Михаил Дунаев, MoscowJS 31
Веб без интернет соединения, Михаил Дунаев, MoscowJS 31
MoscowJS
Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
MoscowJS
Создание WYSIWIG-редакторов для веба, Егор Яковишен, Setka, MoscowJs 33
Создание WYSIWIG-редакторов для веба, Егор Яковишен, Setka, MoscowJs 33
MoscowJS
Предсказуемый Viewport, Вопиловский Константин, KamaGames Studio, MoscowJs 33
Предсказуемый Viewport, Вопиловский Константин, KamaGames Studio, MoscowJs 33
MoscowJS
Регрессионное тестирование на lenta.ru, Кондратенко Павел, Rambler&Co, Moscow...
Регрессионное тестирование на lenta.ru, Кондратенко Павел, Rambler&Co, Moscow...
MoscowJS
"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter...
"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter...
MoscowJS
"Во все тяжкие с responsive images", Павел Померанцев, MoscowJS 29
"Во все тяжкие с responsive images", Павел Померанцев, MoscowJS 29
MoscowJS
"AMP - технология на три буквы", Макс Фролов, MoscowJS 29
"AMP - технология на три буквы", Макс Фролов, MoscowJS 29
MoscowJS
"Observable и Computed на пример KnockoutJS", Ольга Кобец, MoscowJS 29
"Observable и Computed на пример KnockoutJS", Ольга Кобец, MoscowJS 29
MoscowJS
«Пиринговый веб на JavaScript», Денис Глазков, MoscowJS 28
«Пиринговый веб на JavaScript», Денис Глазков, MoscowJS 28
MoscowJS
"Доклад не про React", Антон Виноградов, MoscowJS 27
"Доклад не про React", Антон Виноградов, MoscowJS 27
MoscowJS
"Web Audio Api", Анатолий Найда, MoscowJS 27
"Web Audio Api", Анатолий Найда, MoscowJS 27
MoscowJS
Mais de MoscowJS
(20)
Александр Русаков - TypeScript 2 in action
Александр Русаков - TypeScript 2 in action
Виктор Розаев - Как не сломать обратную совместимость в Public API
Виктор Розаев - Как не сломать обратную совместимость в Public API
Favicon на стероидах
Favicon на стероидах
E2E-тестирование мобильных приложений
E2E-тестирование мобильных приложений
Reliable DOM testing with browser-monkey
Reliable DOM testing with browser-monkey
Basis.js - Production Ready SPA Framework
Basis.js - Production Ready SPA Framework
Контекст в React, Николай Надоричев, MoscowJS 31
Контекст в React, Николай Надоричев, MoscowJS 31
Верстка Canvas, Алексей Охрименко, MoscowJS 31
Верстка Canvas, Алексей Охрименко, MoscowJS 31
Веб без интернет соединения, Михаил Дунаев, MoscowJS 31
Веб без интернет соединения, Михаил Дунаев, MoscowJS 31
Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
Angular2 Change Detection, Тимофей Яценко, MoscowJS 31
Создание WYSIWIG-редакторов для веба, Егор Яковишен, Setka, MoscowJs 33
Создание WYSIWIG-редакторов для веба, Егор Яковишен, Setka, MoscowJs 33
Предсказуемый Viewport, Вопиловский Константин, KamaGames Studio, MoscowJs 33
Предсказуемый Viewport, Вопиловский Константин, KamaGames Studio, MoscowJs 33
Регрессионное тестирование на lenta.ru, Кондратенко Павел, Rambler&Co, Moscow...
Регрессионное тестирование на lenta.ru, Кондратенко Павел, Rambler&Co, Moscow...
"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter...
"Опыт разработки универсальной библиотеки визуальных компонентов в HeadHunter...
"Во все тяжкие с responsive images", Павел Померанцев, MoscowJS 29
"Во все тяжкие с responsive images", Павел Померанцев, MoscowJS 29
"AMP - технология на три буквы", Макс Фролов, MoscowJS 29
"AMP - технология на три буквы", Макс Фролов, MoscowJS 29
"Observable и Computed на пример KnockoutJS", Ольга Кобец, MoscowJS 29
"Observable и Computed на пример KnockoutJS", Ольга Кобец, MoscowJS 29
«Пиринговый веб на JavaScript», Денис Глазков, MoscowJS 28
«Пиринговый веб на JavaScript», Денис Глазков, MoscowJS 28
"Доклад не про React", Антон Виноградов, MoscowJS 27
"Доклад не про React", Антон Виноградов, MoscowJS 27
"Web Audio Api", Анатолий Найда, MoscowJS 27
"Web Audio Api", Анатолий Найда, MoscowJS 27
«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
4.
4 caniuse.com/webgl IEWebGL
5.
Игры 5 gooengine.com/pearl-‐boy
6.
6
7.
Навигация 7 bookcase.chromeexperiments.com
8.
Редакторы 8 3dtin.com
9.
9 Инфографика globe.chromeexperiments.com
10.
10 Технологии 3D O3D
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
20.
Входные данные 20 texture.jpg object.obj
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);
28.
28 // Player.scene.add(Player.light) Player.scene.add(Player.light) Свет
29.
29 THREE.WebGLRenderer({alpha: true}) THREE.WebGLRenderer() WebGLRenderer
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
42.
Исходники 42 github.com/Likita
43.
43 Геймификация Интерактивность
44.
Василика Климова vasilika.klimova likita lik04ka Спасибо за
внимание! 44
Baixar agora