Главная страница>Связанные с программированием>AI Исходный код
Скачать

триплатформировать

Проект по превращению THREE в платформу

Последующее техническое обслуживание продолжится на платформе.

  1. В настоящее время адаптирован к мини-программам WeChat, Taobao и Byte.
  2. Поддержка встряхивания дерева (требуется веб-пакет, накопительный пакет и другие инструменты сборки)
  3. Типы VSCode являются обычными, и к определениям каждого класса можно получить обычный доступ.
  4. Адаптируйтесь к example/jsm/**/*.js, тип нормальный
  5. Можно обновить, понизить версию или использовать пользовательскую THREE
  6. Мини-программа WeChat Оптимизация памяти IOS, меньше сбоев, вызванных переключением страниц
  7. Поддерживает индивидуальную адаптацию новой платформы, просто обратитесь к WechatPlatform, чтобы написать адаптер.
  8. Three-platformize-plugin-wechat поддерживает повторное использование плагинов WeChat в разных плагинах.

Специальные спонсоры


Yuntu 3D-Online 3D CAD-программное обеспечение для проектирования
Auburn Future — пионер в области AR/VR

Адаптационная ситуация

Вичат Таобао байт
Мини-программа настоящая машина ✔️ ✔️ ✔️
Мини-программный симулятор ✔️ ✔️
Мини-игра настоящая машина ✔️
Мини-игровой симулятор ✔️

Оберн в будущем набирает специалистов по интерфейсу, WebGL и графическим алгоритмам. Вы можете отправить свое резюме.

ДЕМО

Примечание. При запуске DEMO не забудьте включить режим отладки, отменить проверку доменного имени и использовать последнюю версию инструментов разработки WeChat, чтобы открыть его.

Демо конкретного использования загрузчика находится в этом репозитории в разделе Three-platformize-demo.

ДЕМО Мини-программы WeChat
Базовая версия мини-программы WeChat ДЕМО
ДЕМО мини-игры WeChat		 Мини-программа Taobao ДЕМО Байтовый апплет DEMO

Протестированный модуль

Функции

  1. VSMShadow (r131 и предыдущие версии в порядке, см. Индекс цикла нельзя сравнивать с непостоянным выражением)

Погрузчик

  1. GLTLoader (поддерживает текстурированный GLB) && (EXT_meshopt_compression, WASM доступен для Android, версия ASM доступна для ios, см. инструменты) && (KHR_mesh_quantization, доступна для небольших программ) [Оценка сжатия сетки] MeshQuan, MeshOpt, Draco (API WebAssembly отсутствует) больше не доступен после WeChat 8.0. Для использования требуется WXWebAssembly, и он поддерживает только Wasm в пакете. Добавлен Meshopt_decoder.wasm.module, см. использование)
  2. Загрузчик текстур
  3. RGBELoader и PMREMGenerator (некоторые модели мини-программы могут иногда генерировать ошибки envMap, которых можно избежать с помощью HDRPrefilter)
  4. SVGLoader
  5. OBJLoader
  6. EXRLoader (должен поддерживать расширение OES_texture_float_linear, некоторые мобильные графические процессоры его не поддерживают)
  7. MTLLoader (апплет может использовать текстуру JPG)
  8. DDSLoader (необходима поддержка расширения WEBGL_compressed_texture_s3tc, не поддерживается мобильным графическим процессором)
  9. LWOLoader (необходима поддержка расширения EXT_blend_minmax, половина эффектов мини программы прорисовывается некорректно)
  10. FBXLoader
  11. BVHLoader
  12. ColladaLoader (DOMParser querySelector не адаптирован)
  13. ТТФлоадер
  14. STLLoader
  15. ПДБлоадер
  16. TGALoader (используйте DataTextureLoader вместо объединенного PR, доступен r127)
  17. ВТКЗагрузчик

Элементы управления

  1. Элементы управления OrbitControl и MapControls
  2. DeviceOrientationControls (onDeviceMotionChange под мини-программами WeChat и Taobao, качество возвращаемых данных под Android крайне низкое и практически непригодное для использования. Отзыв сообщества об ошибках ведется уже более 3 лет, и чиновник не собирается это исправлять)

Модули не поддерживаются

  1. ImageBitmapLoader (апплет WeChat не открывает ImageBitmap)

Инструменты

  1. распорядиться-три (уничтожить узел
  2. перевернуть (для скриншота требуется перевернуть Y
  3. скриншот
  4. worker-pool.module (пока не адаптирован к апплету WeChat)
  5. zstddec.worker.module (пока не адаптирован к апплету WeChat)
  6. zstddec.module (пока не адаптирован к апплету WeChat)
  7. toEnvMap (для префильтра hdr
  8. meshopt_decoder.asm.module (доступен в апплете WeChat)
  9. meshopt_decoder.wasm.module (доступен в апплете WeChat)

Расширения

  1. GLTFGPUCompressedTexture (альтернатива BasisTextureLoader). Инструмент генерации получается через gltf-gpu-compressed-texture (пока не адаптированный к апплету WeChat).

использовать 

 import * as THREE from 'three-platformize' ;
import WechatPlatform from 'three-platformize/src/WechatPlatform' ;

const platform = new WechatPlatform ( canvas ) ; // webgl canvas

platform . enableDeviceOrientation ( 'game' ) ; // 开启DeviceOrientation
THREE . PLATFORM . set ( platform ) ;

// 使用完毕后释放资源
THREE . PLATFORM . dispose ( ) ;

// 正常使用three即可
// DEMO 代码示例见 https://github.com/deepkolos/three-platformize-demo
// 基础的使用DEMO见 https://github.com/deepkolos/three-platformize-demo-wechat-simple
// 生产环境时rollup.config.js里请开启teser压缩, 即plugins末尾增加 terser({ output: { comments: false } })

опыт

  1. Апплет WeChat не поддерживает изображения текстур выше 2048.
  2. Возникла проблема с апплетом Taobao, отображающим текстуры в формате RGB (JPG). После загрузки текстуры через TextureLoader установите для параметра text.format значение RGBAFromat (версия Taobao 9.20.0). Причина может заключаться в том, что сервер оптимизирует большие изображения и сжимает их. Изображения Меняет формат с RGB на RGBA.
  3. r126 не может установить полное соотношение пикселей, его можно установить на половину или 2, а не 3.
  4. Хотя он поддерживает загрузку GLB, изображение преобразуется в base64 с использованием js-версии ArrayBuffer, что отнимает много времени и памяти. Хотя это можно облегчить с помощью кодировщика Wasm (https://github.com/marcosc90/encoding-). Wasm), Wasm не обрабатывает строки. Производительность не такая хорошая, как у js, протестировано с помощью Wasm, скомпилированного с помощью AssemblyScript.
  5. Сбой IOS до и после входа и выхода из страницы может уменьшить PixelRatio и облегчить его
  6. IOS WeChat readPixels не поддерживает сглаживание. Если буферу прямого холста необходимо отключить сглаживание (antialias: false), можно также включить другой метод — WebglRenderTarget, но размер текстуры ограничен. (ширина/высота текстуры под Xiaomi 8. Она не может превышать 4096, сначала нужно обратить внимание на setSize, затем на setPixelRatio) (демо-скриншот см. в ДЕМО-апплете WeChat)
  7. Мини-программа Taobao имеет строгую проверку доменного имени и может использовать облачное хранилище для хранения моделей. Однако, если модель и текстура разделены, рекомендуется связать GLB.
  8. Полифил URL-адреса может использовать fileSystemManager для получения временных файлов, чтобы избежать преобразования arraybuffer в base64, но для этого требуется ручное управление временными файлами.
  9. Некоторые студенты из группы QQ сообщили, что путь к файлу модели в апплете Taobao для iOS не поддерживает китайский язык.

выполнить

Заменяйте вызовы API, специфичные для платформы, во время сборки, пересылайте ссылки на PLATFORM и обновляйте через PLATFORM.set.

поддерживать

Как обновить/понизить версию Three? 

 # 拉取源码
> git clone https://github.com/deepkolos/three-platformize

# 安装依赖
> npm i

# 更新到最新的three版本
> npm i -S three@latest
# 或者指定three版本
> npm i -S [email protected]
# 需要把目标three的构建`utils/build/rollup.config.js`同步到本项目的构建`config/rollup.config.three-origin.js`

# 建立软链接
> npm run link

# 构建
> npm run build

# 使用
> npm link

# 到使用的项目目录，并链接
> cd your-project
> npm link three-platformize

# 或者自行发NPM包

Как настроить платформу Three? 

 # 把自定义Three link 到./three
> npx symlink-dir yourthree ./three

# 不使用软链接直接复制或者git submodule也可以
> cp yourthree ./three

# 复制对应版本three构建配置替换到rollup.config.three-origin.js
> cp yourthree/utils/build/rollup.config.js ./config/rollup.config.three-origin.js

# 构建
> npm run build

Как написать собственную платформу?

Пожалуйста, обратитесь к src/WechatPlatform или src/TaobaoPlatform 

 class CustomPlatform {
  getGlobals ( ) {
    // 自定义的polyfill
    return {
      atob ,
      Blob ,
      window ,
      document ,
      XMLHttpRequest ,
      OffscreenCanvas ,
      HTMLCanvasElement ,
      createImageBitmap ,
    } ;
  }

  setWebGLExtensions ( ) {
    return {
      // 可覆盖gl返回值，比如淘宝小程序IOS返回值不为null，但是扩展不可用的bug
      EXT_blend_minmax : null ,
    } ;
  }

  dispose ( ) {
    // 释放资源
  }
}

TODO

  1. Удалить более тщательно, уменьшить утечки памяти, добавлены веб-тестовые примеры, добавлен апплет WeChat, в IOS по-прежнему возникают проблемы с памятью, страница по-прежнему вылетает после многократного переключения, модель iPhone7 объемом 3 МБ открывается 30 раз
  2. Адаптация к апплету Toutiao завершена
  3. Создавайте плагины WeChat и реализуйте повторное использование кода в мини-программах, а также перекрестные плагины мини-программ с помощью плагинов, выполненных с использованием трех платформ-плагинов-wechat.
  4. Мини-игра «Адаптация к WeChat» завершена.
  5. Адаптироваться к ReactNative

обсуждать

Вы можете связаться со мной через группу DeepKolos

ИЗМЕНЕНИЯ

спонсор

Если проект полезен для вас или нуждается в адаптации, оставьте чаевые.

Спасибо за вашу поддержку~~

время Босс
10.11.2021 бог бог
27.09.2021 Абу
10.08.2021 Обернское будущее
28.07.2021 Ничего
09.07.2021 анонимный
07.07.2021 Облачный CAD-Лю Синь
2021/06/23 Фонг
2021/06/23 Лю Цзыци
2021/06/23 Джосон
03.06.2021 Бионический Вольтер
28.04.2021 Ничего
Расширять
Дополнительная информация
Связанные приложения
Рекомендуем вам
Связанные новости Все