Оригинальная статья Tencent DeepOcean:сделать pro.IO/Web-3 - совсем ох...
Благодаря взрывному набору конфигураций производителей мобильных телефонов и наступлению эры мобильного Интернета эффекты HTML на мобильных телефонах становятся все более и более распространенными, и веб-разработчики больше не удовлетворяются реализацией 2D-эффектов., и поставить цель на более крутой 3D эффект.
В сегодняшнем расцвете Web3D давайте кратко обсудим текущие основные 3D-библиотеки.
0x1 Общая 3D-библиотека
01｜цапля
Официально Egret позиционируется как полный набор «игровых решений» для разработки игр, включая фреймворки для разработки игр, средства разработки и относительно полную экологическую среду. Разработанный на основе TypeScript, он поддерживает эффективную конвертацию из Flash в Egret, кроссплатформенную поддержку и может быть упакован как HTML5, а также как нативные приложения для платформ iOS и Android.
02｜Three.js
Three.js позиционируется как 3D-библиотека на основе JavaScript, но она, несомненно, очень мощная и легкая. От создания простой 3D-анимации до создания интерактивных 3D-игр — он сводит к минимуму сложность разработки 3D-контента, предоставляя простые API.
03｜Pixi.js
Pixi, как и Three.js, определяется как «средство визуализации 2D WebGL с резервным копированием холста». Это просто облегченная библиотека 2D Webgl, но она также может разрабатывать игры на основе своего API, сводя к минимуму сложность разработки 2D WebGL.
04｜Лайябокс
Как и Egret, Layabox также является зрелым «игровым решением» для разработки игр. Он поддерживает движки 2D, 3D и VR H5. Он предназначен для высокопроизводительных игр и поддерживает языки программирования ActionScript 3.0, TypeScript и JavaScript. Разработайте один раз, опубликуйте flash, HTML5, мобильные устройства.
05｜Хило
Hilo — это кросс-терминальное игровое решение HTML5, разработанное Alibaba Group, которое может помочь разработчикам быстро создавать игры HTML5 с несколькими методами рендеринга, предоставляя DOM, Canvas, Flash, WebGL и другие решения для рендеринга.
06｜Cocos2d
Cocos2d — это старомодный игровой движок, использующий собственный язык JavaScript и может быть опубликован на платформах, включая веб-платформы, iOS, Android, Windows Phone8, Mac, Windows и т. д.
07｜Сантиметр Шоу Двигатель
Движок cmshow — это блоки движка, используемые легкими играми QQ. Это игровой движок, разработанный Tencent. Слой сценария использует JavaScript. Движок кирпичей поддерживает родной, WebGL, Canvas и другие методы рендеринга и разработки. Разработчики могут напрямую вызывать движок кирпичей или использовать сторонний пакет игрового движка для разработки.
0x2 Базовое сравнение
Мы сравниваем вышеуказанные фреймворки и движки с точки зрения 2D Canvas, 2D WebGL, 3D WebGL, производительности 2D, производительности 3D и т. д. Примерные данные приведены на рисунке:
Можно обнаружить, что Egret, Three.js, Pixi.js, Layabox и Centimeter показывают лучшую производительность, но в этой статье в основном обсуждается разработка, связанная с 3D, поэтому мы выбираем Three.js и Layabox — две высокопроизводительные библиотеки/движки для сравнение (двигатель Egret слишком тяжелый и пока не рассматривается). Итак, следующее основное обсуждениеСравнение всех аспектов Three.js и Layabox.
0x3 Three.js Vs Layabox
01｜Объем библиотеки
Во-первых, мыСравните этоОбъем двух библиотек, мы обнаружили, что Three.js намного превосходит Layabox по объему, но Layabox составляет всего 300 КБ после экстремального сокращения Gzip, который также относительно легкий. Three.js получает один балл за объем ресурсов JS.
02｜Громкость модели
Мы подготовили две модели, одна — относительно простой волк, а другая — дракон с большим количеством лиц. Как показано ниже:
Мы экспортируем их в виде файлов, подходящих для Three.js и Layabox соответственно.Модель Three.js использует файл json, а Layabox — это собственный двоичный файл. Сравним объем экспортируемых файлов модели, можно обнаружить, что Layabox имеет преимущество перед Three.js перед Gzip, но после включения Gzip Three.js намного меньше по объему модели, чем Layxbox, иЭкспортировано LayxboxбинарныйМодельНедостатком является то, что файл нельзя сжать.Three.js получает еще один балл.
но вЭкспорт Three.js в формат JSON Этот шаг в этом шаге бесчисленен. Это может быть конструктор, что это так:
И вы экспортируете эту модель в Blender следующим образом:
Зачем? ? Это не научно!
Поскольку экспортная модель Three.js зависит от Blender, модель необходимо сначала импортировать в Blender.Этот шаг очень зависит от того, как дизайнер строит модель.После крещения кровью и слезами можно резюмировать следующие пункты. , Минное поле:
-
Контролируйте количество граней модели
-
Отключить сторонние плагины
-
Необходимо предоставить UV-карту
Конечно, эти три пункта лишь немного на минном поле, и еще больше требуется, чтобы фронтенд-разработчики и дизайнеры вместе обкатывали модель, потому что на 1000 дизайнеров приходится 1000 методов моделирования, так что все равно нужно продолжать на практике Обкатка и наступление на яму могут наконец экспортировать идеальную модель.
А Layaxbox легко экспортирует модель с помощью Untiy, поэтому Layabox получает 1 балл за экспорт модели.
03｜Сложность реализации
Этот шаг заключается в отображении 3D-модели на веб-странице, Three.js и Layabox предоставляют соответствующие интерфейсы и методы, которые позволяют нам быстро отображать экспортированные данные на странице.
ThreeJS предоставляет множество видов загрузчиков, соответствующих различным потребностям использования. Например, JSONLoader предназначен для моделей в формате .json, OBJLoader — для моделей в формате .obj и т. д. При просмотре онлайн-материалов вы также можете увидеть трассировку SceneLoader, которая представляет собой файл формата .json, используемый для загрузки всей сцены. Но в новой версии ThreeJS от SceneLoader отказались, заменив его более интеллектуальным ObjectLoader. ObjectLoader может определить тип экспортируемых моделей, чтобы преобразовать их в соответствующие объекты в ThreeJS для использования разработчиками.
Конечно, формат Json, несомненно, является самым легким и кратким форматом экспорта и может очень хорошо поддерживать скелетную анимацию.На следующем рисунке показан код js Three.js, который мы написали для модели волка:
Layzbox намного проще.Согласно официальному API, нужно напрямую передать соответствующий файл ls для загрузки ранее экспортированной сцены. Файл ls содержит всю 3D-сцену: модель, материал, текстуру, анимацию, карту освещения и т. д. Можно понять, что это то же самое, что и Json, экспортируемый вышеуказанным файлом Three.js, но структура файла другая. .
Объединив эти два фрагмента кода, видно, что Three.js нужно вручную создавать источники света, сцены, камеры и т. д. в 3D-сцене, но модель, экспортируемая через Layxbox через Unity, может создавать источники света, сцены и камеры только через экспортированный конфигурационный файл.Но если вы хотите больше настроить 3D-сцену и улучшить управляемость сценой, в Layabox также необходимо вручную добавлять сцены и источники света, но в отличие от Three.js, Layabox предоставляет полный китайский справочник по API и справочник по экземплярам, в то время как последний API Three.js на английском языке, и отдельные документы API могут быть неприменимы (поскольку Three.js обновляется слишком быстро, некоторые корректировки вызывают изменения API без обновления документов API), поэтому простоВ плане простоты использования у Layabox есть еще один момент, и он будет более дружелюбен к новичкам в быстрой разработке.
04｜Сравнение производительности
Производительность, вероятно, является наиболее важным моментом для разработчиков.Благодаря приведенному выше простому сравнению мы можем узнать, что оценки Three.js и Layabox в 3D WebGL выходят за пределы 10 баллов, поэтому, если они оба составляют 10 баллов, они также имеют тонкие различия разница? Теперь давайте внимательно сравним производительность двух фреймворков/движков в Интернете.
1. Частота кадров
Во-первых, сравните их частоту кадров в Интернете: Three.js использует stats.js для определения частоты кадров, а Layabox поставляется с инструментом мониторинга частоты кадров.
Поскольку это тест производительности, мы протестировали модель дракона с самой сложной моделью.С помощью инструмента мы видим, что их частота кадров может быть стабилизирована на уровне 60 кадров в секунду, а 60 кадров в секунду, несомненно, является очень хорошей частотой кадров.
2.использование памяти
Занятость памяти также является очень важным показателем, поскольку мобильные телефоны не более ограничены, чем ПК, а ресурсы памяти относительно ограничены.Если занятость памяти меньше, это означает, что она может плавно отображаться на большем количестве мобильных телефонов.Мы используем инструменты Chrome и эмулятор Android Studio для определения использования памяти страницы.
Первый - это диспетчер задач Chrome (метод открытия: вкладка в правом верхнем углу браузера → Дополнительные инструменты → Диспетчер задач). С помощью этого инструмента мы можем наблюдать за памятью, занимаемой двумя страницами. Из рисунка мы можем найти что Three.js Использование памяти с Layabox составляет около 84 МБ, и на этот разрыв можно не обращать внимания.
Затем мы входим в студию Android, чтобы открыть новый эмулятор Android, используем собственное веб-представление, чтобы открыть две вышеуказанные страницы, данные следующие, мы можем обнаружить, что их память составляет всего 3 МБ.зазор.
Объединив два приведенных выше теста, мы можем обнаружить, что частота кадров и использование памяти для Three.js и Layabox не сильно отличаются в Интернете, а производительность достаточно хороша для выполнения ежедневной облегченной 3D-разработки. Таким образом, Three.js и Layabox получают по 1 баллу.
0x4 Сводка
После вышеуказанной серии анализовThree.js и LayaboxОкончательный счет был равным 3:3, у каждого были свои преимущества и недостатки.Для облегченной 3D-разработки их пороги разработки невысоки.Общий объем ресурсов Three.js меньше, чем у Layabox, а Layabox лучше, чем Three.js на стороне экспорта модели. Все дороги ведут в Рим, вы можете выбрать в соответствии с вашими потребностями.