3つのプラットフォーム化
THREEをプラットフォーム化するプロジェクト
その後のメンテナンスはプラットフォーム化を継続します
- 現在、WeChat、Taobao、Byte ミニ プログラムに適応しています
- ツリーシェイクのサポート (Webpack、Rollup、その他のビルドツールが必要)
- VSCode の型は正常であり、各クラスの定義には正常にアクセスできます。
- Examples/jsm/**/*.js に適応し、型は通常です
- バージョンのアップグレード、ダウングレード、またはカスタム THREE の使用が可能
- WeChat ミニ プログラム IOS メモリの最適化、ページ切り替えによるクラッシュの減少
- カスタマイズされた新しいプラットフォームの適応をサポートします。WechatPlatform を参照してアダプターを作成するだけです
- three-platformize-plugin-wechat は、WeChat プラグインのクロスプラグイン再利用をサポートします
スペシャルスポンサー
Yuntu 3D-Online 3D CAD 設計ソフトウェア |
Auburn Future - AR/VR 分野のパイオニア |
|
適応状況
| 微信 | タオバオ | バイト |
|---|
| ミニプログラム実機 | ✔️ | ✔️ | ✔️ |
| ミニプログラムシミュレータ | ✔️ | ✔️ | |
| ミニゲーム実機 | ✔️ | | |
| ミニゲームシミュレーター | ✔️ | | |
Auburn では、今後フロントエンド、WebGL、グラフィック アルゴリズムを募集しています。履歴書を提出してください。
デモ
注: デモを実行するときは、必ずデバッグ モードをオンにし、ドメイン名の検証をキャンセルし、最新バージョンのWeChat 開発ツールを使用してデモを開きます。
特定のローダーの使用法のデモは、このリポジトリのthree-platformize-demoの下にあります。
WeChat ミニ プログラムのデモ
WeChat ミニプログラム 基本版 DEMO
WeChat ミニゲームのデモ | 淘宝ミニプログラムのデモ | バイトアプレットのデモ |
|---|
| | |
テスト済みモジュール
特徴
- VSMShadow (r131 および以前のバージョンは OK、「ループ インデックスは非定数式と比較できない」を参照)
ローダ
- GLTFLoader (テクスチャ付き GLB をサポート) && (EXT_meshopt_compression、WASM は Android で利用可能、ASM バージョンは iOS で利用可能、ツールを参照) && (KHR_mesh_quantization、小規模プログラムで利用可能) [メッシュ圧縮評価] MeshQuan、MeshOpt、Draco (WebAssembly API はありません) WeChat 8.0 以降は利用できなくなりました。これを使用するには、WXWebAssembly を使用する必要があり、パッケージでは wasm のみをサポートします。 Meshopt_decoder.wasm.module が追加されました。使用方法を参照してください)
- テクスチャローダー
- RGBELoader および PMREMGenerator (ミニ プログラムの一部のモデルでは、envMap エラーが発生する場合がありますが、これは HDRPrefilter で回避できます)
- SVGローダー
- OBJローダー
- EXRLoader (OES_texture_float_linear 拡張機能をサポートする必要があります。一部のモバイル GPU はそれをサポートしていません)
- MTLLoader (アプレットは JPG テクスチャを使用できます)
- DDSLoader (WEBGL_compressed_texture_s3tc 拡張機能をサポートする必要があります。モバイル GPU ではサポートされていません)
- LWOLoader (EXT_blend_minmax 拡張機能をサポートする必要があります。ミニ プログラムの効果の半分が正しく描画されません)
- FBXローダー
- BVHローダー
- ColladaLoader (DOMParser querySelector は適応されていません)
- TTFローダー
- STLローダー
- PDBローダー
- TGALoader (PR マージの代わりに DataTextureLoader を使用、r127 が利用可能)
- VTKローダー
コントロール
- OrbitControls と MapControls
- DeviceOrientationControls (WeChat および Taobao ミニ プログラムでの onDeviceMotionChange、Android で返されるデータの品質は非常に低く、基本的に使用できません。コミュニティのバグ フィードバックは 3 年以上前からあり、公式はそれを修正するつもりはありません)
サポートされていないモジュール
- ImageBitmapLoader (WeChat アプレットは ImageBitmap を開きません)
ツール
- destroy-3 (ノードを破棄します)
- フリップ（スクリーンショットにはflipYが必要です）
- スクリーンショット
- worker-pool.module (まだ WeChat アプレットに適合していません)
- zstddec.worker.module (まだ WeChat アプレットに適合していません)
- zstddec.module (まだ WeChat アプレットに適合していません)
- toEnvMap (HDR プレフィルター用)
- meshopt_decoder.asm.module (WeChat アプレットで利用可能)
- meshopt_decoder.wasm.module (WeChat アプレットで利用可能)
拡張機能
- 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 } })経験
- WeChat アプレットは 2048 を超えるテクスチャ画像をサポートしていません
- RGB 形式のテクスチャ (JPG) を表示する淘宝網アプレットに問題があります。TextureLoader を通じてテクスチャをロードした後、texture.format を RGBAFromat に設定します (淘宝網バージョン 9.20.0)。その理由は、サーバーが大きな画像を最適化し、画像を圧縮するためである可能性があります。画像の形式を RGB から RGBA に変更します。
- r126 は、pixelRatio をフルに設定できません。3 ではなく半分、または 2 に設定できます。
- GLB のロードをサポートしていますが、イメージは ArrayBuffer の js バージョンを使用して Base64 に変換されます。これには時間がかかり、メモリを消費しますが、wasm のエンコーダー (https://github.com/marcosc90/encoding-) で軽減できます。 wasm)、wasm は文字列を処理しません。AssemblyScript でコンパイルされた wasm でテストした場合、パフォーマンスは js ほど良くありません。
- ページに出入りする前後の IOS のクラッシュにより、pixelRatio が減少し、それが軽減される可能性があります。
- IOS WeChat readPixels はアンチエイリアスをサポートしていません。ダイレクト キャンバスのバッファーでアンチエイリアスをオフにする必要がある場合 (antialias: false)、別の方法として WebglRenderTarget をオンにすることもできますが、テクスチャ サイズは制限されています。 (Xiaomi 8 ではテクスチャの幅/高さは 4096 を超えることはできません。最初に setSize、次に setPixelRatio に注意する必要があります) (スクリーンショットのデモについては、WeChat アプレットのデモを参照してください)
- Taobao ミニ プログラムは厳密なドメイン名検証を備えており、モデルを保存するためにクラウド ストレージを使用できます。ただし、モデルとテクスチャが分離されている場合は、手動での関連付けが必要です。
- URL ポリフィルは、fileSystemManager を使用して一時ファイルを取得し、arraybuffer の Base64 への変換を回避できますが、一時ファイルを手動で管理する必要があります。
- QQ グループの一部の学生は、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
- より徹底的に破棄し、メモリ リークを削減、Web テスト ケースが追加、WeChat アプレットが追加、IOS にはまだメモリの問題がある、何度切り替えてもページは依然としてクラッシュする、3MB モデルの iPhone7 は 30 回開かれる
- Toutiao アプレットへの適応が完了しました
- WeChat プラグインを生成し、three-platformize-plugin-wechat を実行したプラグインを通じて、ミニ プログラム間およびミニ プログラム間プラグイン間での Three のコードの再利用を実現します。
- WeChat ミニゲームへの適応が完了しました
- ReactNative への適応
話し合う
DeepKolosグループを通じて私に連絡できます
変更履歴
スポンサー
プロジェクトが役に立った場合、または適応が必要な場合は、お気軽にチップをお願いします。
ご支援ありがとうございます~~
| 時間 | ボス |
|---|
| 2021/11/10 | 神神 |
| 2021/09/27 | アブ |
| 2021/08/10 | オーバーン・フューチャー |
| 2021/07/28 | 何もない |
| 2021/07/09 | 匿名 |
| 2021/07/07 | クラウドCAD-Liu Xin |
| 2021/06/23 | フォン |
| 2021/06/23 | 劉子奇 |
| 2021/06/23 | ジョソン |
| 2021/06/03 | バイオニック・ヴォルテール |
| 2021/04/28 | 何もない |
