Чтобы отпраздновать запуск Windows 8.1 и Internet Explorer 11 , мы решили создать новую демонстрационную сцену для Babylon.js .
Эта демонстрация была призвана продемонстрировать всю мощь WebGL в современных браузерах, таких как Internet Explorer 11 . Я попросил одного из моих друзей ( Ромуальда Руйера ) разрешить нам использовать 3D-сцену, которую он создал с помощью 3dsMax:
Как вы можете видеть здесь, сцена действительно красивая. Задача состояла в том, чтобы включить его в режиме реального времени под WebGL .
Немного статистики
Сама сцена представляет собой большую группу из более чем 900 000 активных вершин (зеркало, используемое для воды, почти умножает объем вершин на 2). Он использует более 28 различных шейдеров и весит 70 МБ .
Чтобы оценить производительность сцены, мы провели два теста: один на моем персональном ПК (толстый и мощный ПК с процессором Intel Core-I7 с Nvidia GeForce 680) и один на моем ноутбуке (Lenovo X1 Carbon с процессором Intel Core). -I7 и встроенная видеокарта Intel (HD4000).
Мы проводим два теста каждый раз. Один на основной вращающейся камере и один на менее широкой камере (камера Walk). Вращающаяся камера имеет такую точку зрения:
Эта камера требует огромной мощности, потому что каждый объект виден!
Другая камера немного менее сложна для рендеринга:
Результаты этих тестов следующие:
Как видите, даже в оборудовании среднего класса (моем ноутбуке) мощь WebGL позволяет нам передавать 30 кадров в секунду в Internet Explorer 11 .
Под капотом
Чтобы отобразить такую сцену, нам нужно было добавить новые функции в Babylon.js.
Прежде всего, это первый случай, когда мы можем динамически менять камеры с помощью этого нового интерфейса:
Затем, чтобы добавить больше жизни на сцену, мы добавили поддержку анимированных камер. Например, камера с именем CAM_ROT вращается вокруг всей сцены.
Таким же образом, если вы переключитесь на камеру CAM_TRAIN или камеру CAM_TRAIIN_AVANT, мы также обнаружим новую функцию: камеры могут быть связаны с сеткой. Это позволяет соединить камеру (как ребенка) с объектом (например, поездом прямо здесь):
Что касается необработанных исполнений, чтобы упростить рендеринг, мы потратили много времени на создание кешей практически для всех функций WebGL . Эти кэши позволяют нам удалять избыточные изменения состояний, которые действительно дороги для конечного автомата WebGL .
Используя панель разработчика F12 в Internet Explorer 11 , мы смогли оптимизировать движок, чтобы код Javascript не был узким местом. Встроенный профилировщик (см. Ниже) говорит нам, что почти все время потрачено ВНУТРИ кода графической карты:
Функции drawElements — это функция WebGL, используемая для визуализации треугольников. На предыдущем скриншоте мы видим, что Babylon.js (начиная со второй строки) не является проблемой.
Не стесняйтесь использовать комментарии, чтобы поделиться результатами, которых вы достигли на своем компьютере (не забудьте указать, какую версию вы используете для ОС, браузера и аппаратного обеспечения). Мы хотим услышать о вашем собственном опыте!
Идти дальше
Вы хотите сделать то же самое и раскрыть всю мощь WebGL ? Вот несколько интересных ссылок:
- Modern.IE
- Понимание событий DeviceOrientation путем создания небольшой 3D-игры с babylon.js
- Создание 3D-диаграммы для вашего приложения Windows 8.1 с помощью babylon.js
- Babylon.js: создание убедительного мира для вашей игры с помощью пользовательских шейдеров, карт высот и скайбоксов
- Представляем Babylon.js
- Репозиторий Github: https://github.com/BabylonJS/Babylon.js
- Онлайн-учебники: https://github.com/BabylonJS/Babylon.js/wiki/Tutorials
Первоначально опубликовано: http://blogs.msdn.com/b/eternalcoding/archive/2013/10/28/babylon-js-the-train-demo.aspx . Перепечатано здесь с разрешения автора.