1. 3D в браузере
Битва за реалистичность
Иван Дембицкий

2. • Задача
• Выбор технологии

3. Почему Flash?
• Распространенность плагина
• Главная игровая консоль интернета
• Большая база готовых решений
• Поддержка GPU выпущенных c 2005 года

4. Почему Flash?
• Windows, Mac, Linux, iOS, Android,
Blackberry, Windows Phone
• DirectX 11
• Многопоточность
• Портирование С++ кода с помощью
официального компилятора FlasCC

5. Почему Flash?
• 9 из 10 топ игр Facebook на Flash
• Интеграция с другими платформами
– JavaScript & HTML5
– .NET C#, F# …
– C++

6. Почему Flash?
• Поддержка игровых устройств, Kinect, Leap
Motion…
• iAds, AdMob, Game Center, NFC на
мобильных платформах
• Возможность писать свои native extensions

7. Будущие Flash
• Каждые две недели стабильный релиз
• Новый компилятор ASC 2.0
• Extended Profile для Stage3D(MRT, NPT
текстуры, меньше ограничений)

8. Визуализация сцены
• Моделирование
• Тестурирование
• Освещение
• Рендеринг

9. Объекты сцены
• Геометрия
• Материалы
• Источники света
• Камеры
• Эффекты

10. Процедурная геометрия

11. Апроксимация формы

12. Порядок отрисовки трегольников
1,2,4,2,3,4 1,2,3,4,5,6

13. Рассчет данных вершин
• Позиции в трёхмерном пространстве
• UV-координаты (координаты на текстуре)
• Нормали и тангенты для расчёта освещения

14. Сглаживание нормалей вершин

15. Источники освещения
• Направленный – Directional Light
• Точечный – Omni/Point Light
• Конусный – Spot Light

16. Материалы

17. Текстуры

18. Diffuse Texture

19. Diffuse Texture

20. Diffuse Texture

21. Материалы
• Стандартный
• Металл
• Стекло
• Абажур

25. Planar Reflections

26. Тени
• Shadow Map
• Shadow Map + PCF
• Shadow Map + PCF + текстура поворота 16x16
• Variance Shadow Maps

27. Отрисовка Shadow Map
для направленного источника света
1. Ставим ортогональную камеру в позицию источника
2. Кодируем глубину сцены с помощью шейдера
3. Рисуем в текстуру
4. При дальнейшей отрисовке объектов, определяем
наличие тени в пикселе

33. Пост-эффекты
• SSAO
• Depth of Field
• Bloom

38. Для вычисления SSAO требуется
• Текстура глубины каждого пикселя
• Текстура позиций каждого пикселя
• Текстура нормалей каждого пикселя

41. Техники DOF
• Использование накапливающего буфера
• Использование слоёв
• Размывание пикселей в соответствии с
данными Z-буфера

43. Куда пойти учиться?
• Группа в Facebook “Stage3D”