Я считаю, что все уже испытали деятельность Alipay Wufu в этом году.Будь то домашняя страница Wufu в этом году или игра Nian Beast, она управляется движком Ant Interactive Graphics Engine (кодовое название: Oasis Engine).
Oasis Engine — это движок интерактивной веб-3D-графики Ant Group, который также является предпочтительным движком веб-3D для направления интерактивных технологий в экономике Али.Официально с открытым исходным кодом. Заинтересованные студенты могут подписаться на наше сообщество Github:GitHub.com/oasis-engin…И присоединяйтесь к группе обмена разработчиками DingTalk:31360432.
Независимо от того, находитесь ли вы в направлении рендеринга, направлении ТА, направлении IDE или в более подразделенной области, если у вас те же идеалы и цели, что и у нас, вы можете отправить свое резюме наchenmo.gl@antgroup.com
В этой статье будут представлены некоторые обзоры Oasis Engine, а также прошлые, настоящие и будущие перспективы Oasis Engine. Я надеюсь, что благодаря этой статье вы сможете получить предварительное представление об Oasis Engine.
Введение двигателя
Oasis Engine — это веб-платформа для взаимодействия/творчества, ориентированная прежде всего на мобильные устройства. Используйте компонентную системную архитектуру, стремитесь к простоте использования и небольшому весу. Oasis Engine в основном состоит из трех частей: Oasis Runtime, Oasis Editor и Oasis Store. Далее мы представим вам движок с точки зрения обзора, внедрения функций, стабильности и производительности.
Обзор
Oasis Engine принимаетКомпонентная системная архитектура, Oasis Engine не только должен иметь возможности 3D-рендеринга, но также должен включать множество функций из различных областей, таких как 2D, 3D, пользовательский интерфейс, аудио, физика, VR/AR, логическая запись и т. д. Эти функции просто что нужно разработчикам. В то же время разработчики обычно надеются, что структуру движка удастся сохранить четкой, а функции можно будет гибко комбинировать.
Кроме того, развитие бизнеса обычно также надеется на выполнение функции осаждения, на самом деле они относятся к категории простоты использования. При таком компромиссе между функциональной сложностью и простотой использования мы выбрали компонентную архитектуру системы. В архитектуре компонентной системы все является компонентом, и любую функцию можно подключать и отключать в виде компонента для гибкого комбинирования. В то же время сценарий также является особым компонентом, и разработчики могут естественным образом вкладывать бизнес-функции в повторное использование компонента.
Двигатель Oasis используетсистема сценариевНапишите логику. Мы предоставляем множество обратных вызовов жизненного цикла скрипта, и разработчикам нужно только перегрузить необходимые функции обратного вызова.
С точки зрения простоты использования и удобочитаемости сценарии имеют очевидные преимущества перед написанием логики через события. Особенно в архитектуре компонентной системы скриптовая система является более естественным способом. В том числе, когда мы занимаемся архитектурой движка, мы никогда не думаем, что какая-то архитектура абсолютно правильная или неправильная, и речь идет скорее о компромиссах и подходящих обсуждениях. В то же время мы также внесли множество оптимизаций в систему сценариев, например, предоставили декоратор клонов. Разработчики могут выбирать разные декораторы клонов, чтобы установить режим клонирования в соответствии с фактической ситуацией свойства, что легче использовать, чем вручную писать функции клонирования.
Язык разработки движка Oasis использует TypeScript — строго типизированный надмножество JavaScript, который имеет большие преимущества перед слабо типизированным JavaScript. Особенно для больших и сложных проектов TypeScript значительно повысил эффективность исследований и разработок. Я считаю, что многие фронтенд-разработчики испытали это в последние годы. Мы также рекомендуем разработчикам использовать TypeScript для написания логических скриптов.
Движок Oasis следует принципам строгости, простоты и легкости использования при проектировании API, Звучит очень обобщенно, но за этим скрывается множество деталей дизайна. С точки зрения соматосенсорики освежающий, естественный, простой в использовании дизайн API, который соответствует интуиции разработчика, является хорошим дизайном. Мы также используем множество современных синтаксических функций в дизайне API, таких как перегрузка функций, декораторы, async/await, дженерики и т. д. Эти синтаксисы очень важны для дизайна API и напрямую улучшат опыт пользователя в исследованиях и разработках.
Функции
TransformЭто часто используемая функция движка. Будь то рендеринг или физика, Transform описывает координаты и другую связанную информацию. Так что отличный Transform должен быть не только мощным, но и иметь хорошую оптимизацию производительности.
Одной из наиболее примечательных особенностей Transfrom является то, что родительское преобразование повлияет на дочернее преобразование.Например, мы можем думать, что изменение локальной позиции родительского узла вызовет изменение мировой позиции самого себя и дочернего узла. Однако реальная ситуация может быть намного сложнее, чем это: если локальное вращение родительского узла изменено, он не только вызовет изменение мирового вращения себя и своих дочерних узлов, но также вызовет изменение мировой позиции самого себя и дочерние узлы. Также аналогичный эффект имеет изменение локального масштабирования. Мы сделали много атомарных грязных меток внутри Transform.Основной принцип в том, что мы не получаем свойства и не вычисляем их.Если мы получим свойства, будем судить, пересчитывать ли их по грязным меткам.
Движки, разработанные на основе WebGL, обычно сталкиваются с проблемой отсутствия деструктора в JS. Объект видеопамяти движка не находится в рамках хостинга JS, и если он не будет обработан, это вызовет утечку видеопамяти. Поэтому движок Oasis предоставляет функцию ручного освобождения ресурсов, которая может напрямую вызывать функцию уничтожения объекта для освобождения видеопамяти. Но на самом деле проблема сложнее: при проектировании модели для разработчиков мы не знаем эталонного отношения этой модели к ресурсам. Например, объекты ссылаются на материалы, а материалы ссылаются на текстуры, и эталонные отношения между ними сложны. Во-первых, нам сложно найти эти ресурсы, во-вторых, трудно сделать так, чтобы на них не ссылались другие модели и чтобы они не уничтожались безопасно.
система ресурсовЭто основная возможность движка, включая такие обязанности, как загрузка ресурсов и управление ими. API загрузки системы ресурсов движка Oasis очень прост и удобен в использовании и поддерживает универсальное и асинхронное программирование. Мы сделали счетчики ссылок на ресурсы. Разработчики должны заботиться только об уничтожении узлов сущностей. Движок будет автоматически вести счетчик ссылок и вызыватьresourceManager.gc()Когда , все активы с нулевым счетчиком ссылок будут автоматически уничтожены, таким образом, будет найден баланс между функциональностью и простотой использования.
Система затенения/материаловЭто сердце рендеринга движка, и его качество в определенной степени определяет здоровое развитие движка. Пользовательские шейдеры движка Oasis очень просты, что позволяет разработчикам сосредоточиться на самой логике шейдера. Настройка данных шейдера также очень проста, просто вызовите
shaderDataСоответствующий интерфейс в . Студенты с соответствующим опытом разработки могут также знать функцию макроса шейдера, которая также очень проста в Oasis, просто вызовитеenableMacroинтерфейс. Ссылка внутренне обрабатывает связанную компиляцию подшейдера автоматически.
В дополнение к простоте, вся система затенения Oasis также очень мощная.Oasis также является дружественным к графическому процессору движком, который может не только задавать данные затенения через материалы, но также задавать данные затенения через такие объекты, как сцены, средства визуализации, камеры и т. д. и т.п. Кроме того, такие модули, как расчет скиннинга, расчет траектории частиц и затенение материала, также могут быть помещены в графический процессор для выполнения очень естественным образом, что позволяет полностью использовать параллельные вычислительные мощности графического процессора.
Помимо пользовательских шейдеров, движок Oasis обеспечивает гибкую и мощнуюСистема BufferGeometry, разработчики могут использовать эту систему для настройки данных геометрии. Система BufferGeometry поддерживает чередующиеся буферы вершин, независимые буферы вершин, буферы экземпляров и индексные буферы.Студенты, занимавшиеся разработкой низкоуровневой графики, могут быть хорошо знакомы с этими функциями. Система BufferGeometry от Oasis содержит почти все возможности обработки геометрических данных, связанные с графическим процессором. Движок должен включать в себя простые в использовании функции, и здорово быть гибким и мощным одновременно.
Давайте поговорим о том, что умеет BufferGeometry, ведь продвинутые разработчики могут использовать его для доступа к любой пользовательской частице, трейлингу и другим функциям. Например, компонент Mars и компонент Spine связаны с помощью системы BufferGeometry. Mars — это также высокопроизводительная программа для анимации и спецэффектов от Ant Group.Все должны знать Spine, очень популярную программу для 2D-анимации.
Стабильность и производительность
Стабильность и производительность очень важны для движка, мы приложили много усилий для стабильности и производительности, и процент сбоев на платформенных проектах с 100-миллионным трафиком составляет менее 0,3/10 000:
- Что касается тестирования, мы добавляем соответствующие отдельные тестовые случаи при написании каждой функции, а также развертываем автоматические тесты CI на github.
- Что касается оптимизации производительности, мы также приложили много усилий, таких как оптимизация на основе компонентов, оптимизация преобразования, оптимизация загрузки видеопамяти, оптимизация математической библиотеки и многое другое.
- Что касается оптимизации памяти, мы предоставляем функцию сжатия текстур графического процессора, которая может уменьшить память текстур примерно на 80%, а также предоставляем хороший механизм управления сборкой ресурсов. При проектировании каждой системы мы всесторонне учитываем баланс между производительностью и памятью и не будем слепо использовать «пространство в обмен на время».
Давайте поговорим о нашем текущем состоянии производительности.Основываясь на тестовых примерах производительности на рисунке выше, мы также сравнили производительность с известными зарубежными движками Web3D.При том же масштабе тестирования и среде производительность Oasis примерно в 2 раза выше, чем у известные зарубежные движки Web3D. Хотя это дело не очень всеобъемлющее, это, по крайней мере, комплексное выполнение определенных функций.
Суммировать
Наконец, мы подводим итоги знакомства с движком: движок Oasis использует архитектуру компонентной системы, для написания логики используется система сценариев, а исходный код движка написан с использованием TypeScript. С точки зрения функций, мы представили несколько основных систем движка, а именно систему преобразования, систему ресурсов, систему материалов/затенения и систему BufferGeometry.Я считаю, что в будущем у вас будет возможность представить вам больше функций.С точки зрения стабильности и производительность, Стабильность финансового уровня и ведущая производительность.
Прошлое и настоящее
Далее мы представим прошлую и настоящую жизнь двигателя Oasis.Применяя «Трилогию времен» Ван Сяобо, мы разделим развитие двигателя Oasis на три этапа: век черного железа, век бронзы и век серебра.
Эпоха Черного Железа
Первый этап «Эпоха Черного Железа(2016-2018).В 2016 году мобильный бизнес Alibaba и Ant переживал бум, но графические технологии для интерактивных нужд были еще относительно отсталыми.В качестве примера возьмем движок Web 3D, давно он не для Мобильный движок Three.js, рожденный с самого начала. С точки зрения стандартов активов,glTF 2.0Он еще не родился.Древний формат obj+mtl еще не поддерживает возможности продвинутых материалов типа PBR.Хотя конструктор fbx легко экспортируется,из-за большого размера и нестабильности загрузчика Three.js , многие проекты импортируются в арт-ассеты. Прервано на этапе движка.В конце 2016 года появился первый герой в истории графического движка ant,Король Фу(Старший эксперт по графическим технологиям Ant, три основных процесса Xianjian, разработчик ядра R3) написал первую строку кода графического движка Ant, этот проект получил название R3 (что означает Render for 3D). R3 создан для интерактивного бизнеса муравьиного мобильного терминала.Он принимает передовую архитектуру игрового движка системы компонентов в отрасли.Чтобы свести к минимуму объем времени выполнения, используется популярная модель разработки с несколькими пакетами и одним хранилищем монорепозитория. Чтобы упростить решение проблемы редактирования сцен, R3 также определяет набор собственных рабочих процессов разработки, используя ведущий в отрасли редактор Unity в качестве редактора сцен и экспортируя файлы glTF через собственный подключаемый модуль Unity для загрузки во время выполнения. и разбор на сцены.
В эпоху черного железа осталось несколько классических произведений, и сегодня, когда вы открываете панель «Игры» в Ant Manor, вы все еще можете увидеть эти игры в стиле низкого плойгона. «Звездная планета» была первой интерактивной игрой, использующей движок R3, и в то время даже была разработана версия AR, которая была более новаторской.
Бронзовый век
Второй этап «Бронзовый век(2018-2020).Графический движок Ant был передан от отдела технологий опыта команде RichLab с более богатыми бизнес-сценариями, и обновлен с R3 до Oasis.Новая команда начала переосмысливать значение графического движка для Ant Interactive бизнес и интерфейсные инженеры.В контексте мобильных платежей и финансовой оцифровки начало появляться большое количество богатых интерактивных сценариев для мобильного бизнеса, и требования к стабильности очень строгие.Для того, чтобы решать бизнес-требования быстрее и лучше , мы начали охватывать экологию фронтенда с одной стороны:
- Рефакторинг движка с помощью Typescript, чтобы сделать код движка более надежным, и разработчики могут получить лучший опыт подсказок кода;
- Интеграция в среду разработки интерфейса ant, чтобы движок мог естественным образом работать в таких средах, как React, и иметь возможность депонировать активы;
- Сотрудничал со студентами клиента и контейнером апплета, чтобы адаптировать апплет Alipay, чтобы движок мог работать в большем количестве сред.
С другой стороны, мы сосредоточены на повышении эффективности исследований и разработок в области 3D. С помощью самостоятельно разработанного облачного редактора сцен Oasis Editor мы реализовали основные возможности, такие как управление активами, редактор сцен и написание сценариев. В то же время нас также беспокоит связь между восходящим и нисходящим потоками рабочего процесса, например, импорт художественных активов.Мы рекомендуем использовать файлы fbx в качестве входных данных, а затем обрабатывать их в файлы, подходящие для загрузки во время выполнения через облачный сервис. возможности преобразования и сжатия активов; еще один пример: мы предоставляем возможность экспортировать различные продукты, такие как React/Rax/апплеты и т. д., для реализации одной разработки и нескольких развертываний.
серебряный век
Третья эпоха — это «серебряный век»(2020-?). Появляется второй герой в истории графического движка ant,пыльДобавление мифа о Прометее привело к возрождению движка Oasis. После четырех итераций в течение восьми месяцев функциональность, производительность и удобство использования движка претерпели качественные изменения:
- С точки зрения функций, основные системные возможности движка, такие как система сущностей/компонентов, система сценариев, система ресурсов, система материалов/шейдеров, достигли передового уровня в отрасли;
- С точки зрения простоты использования, основная система движка была переработана и переосмыслена, детали API полностью отказались от предыдущей модели передачи параметров для компонентов, использующих объекты, и управляются атрибутами set/get, в полной мере используя характеристики языка Typescript, позволяющие разработчикам в полной мере насладиться освежающим ощущением «угадывания API»;
- С точки зрения производительности, всесторонняя производительность движка была увеличена в четыре раза по сравнению с бронзовым веком.Одна производительность системы BufferGeometry и системы материалов/шейдеров достигла более чем в десять раз по сравнению с предыдущей версией, значительно опережая известных зарубежных движков Web 3D.
В дополнение к постоянному совершенствованию технологий, команда Oasis также придает большое значение реализации бизнеса.Мы обслуживали проекты многих бизнес-подразделений Alibaba и Ant Group и завоевали хорошую репутацию среди различных деловых сторон.У нас есть так же проверил движок в различных клиентах на совместимость и стабильность.
перспективы на будущее
Серебряный век также является эпохой открытого исходного кода.На самом деле, итерация R&D движка Oasis вошла во внутренний открытый исходный код еще в бронзовом веке и итеративно проходит через вехи и функции управления проблемами в соответствии с рабочей моделью с открытым исходным кодом. Хотя движок уже может удовлетворить потребности бизнеса с точки зрения основных функций, в будущем мы надеемся вывести движок на более крупную сцену и еще больше расширить возможности движка за счет открытого исходного кода. Например, с точки зрения физического движка, мы сейчас интегрируем его в движок через WebAssembly. Что касается целостности движка, то сначала мы дополним возможности 2D-графики, при этом позволив движку отображать больше типов спрайтов, необходимых для взаимодействия, таких как Spine и Lottie; дальнейшая цель — добиться кроссплатформенности движка , хотя в настоящее время поддерживаются только WebGL 1.0 и 2.0, но вы можете увидеть API движка, напримерWebCanvasЭто уже дизайн интерфейса кроссплатформенного движка, в будущем доступ к новым интерфейсам графических языков, таким как Metal/Vulkan/WebGPU, будет реализован в соответствии с потребностями и приоритетами.Откровенно говоря, Oasis все еще находится в стадии разработки, а open source сегодня — это лишь новая отправная точка для Oasis, и впереди еще долгий путь. Я надеюсь, что движок Oasis сможет по-своему внести свой вклад в отечественный бизнес 3D-движков, и я также надеюсь, что команда Oasis не сможет забыть первоначальное намерение.Мы будем использовать 3D-взаимодействие и выражение, чтобы сделать мир лучше и реализовать оазис в наших сердцах.
Связанные цитаты
официальный сайт оазис:oasis-engine.github.io
Сообщество Oasis Github:GitHub.com/oasis-engin…
Группа обмена разработчиками DingTalk:31360432
Независимо от того, находитесь ли вы в направлении рендеринга, направлении ТА, направлении IDE или в более подразделенной области, если у вас те же идеалы и цели, что и у нас, вы можете отправить свое резюме наchenmo.gl@antgroup.com