tiga platformisasi
Sebuah proyek untuk menjadikan TIGA platform
Maintenance selanjutnya akan dilanjutkan pada platformize
- Saat ini disesuaikan dengan program mini WeChat, Taobao, dan Byte
- Mendukung pengocokan pohon (memerlukan webpack, rollup, dan alat build lainnya)
- Tipe VSCode normal dan definisi setiap kelas dapat diakses secara normal.
- Beradaptasi dengan contoh/jsm/**/*.js, tipenya normal
- Bisa upgrade, downgrade versi atau pakai custom TIGA
- Program mini WeChat Optimasi memori IOS, lebih sedikit kerusakan yang disebabkan oleh peralihan halaman
- Mendukung adaptasi platform baru yang disesuaikan, cukup merujuk ke WechatPlatform untuk menulis adaptor
- three-platformize-plugin-wechat mendukung penggunaan kembali plug-in WeChat secara lintas plugin
Sponsor Khusus
Perangkat lunak desain CAD 3D Yuntu 3D-Online |
Auburn Future-pelopor di bidang AR/VR |
|
Situasi adaptasi
| Wechat wechat | Taobao | byte |
|---|
| Program mini mesin nyata | ✔️ | ✔️ | ✔️ |
| Simulator program mini | ✔️ | ✔️ | |
| Mesin nyata permainan mini | ✔️ | | |
| Simulator permainan mini | ✔️ | | |
Auburn merekrut algoritma front-end, WebGL, dan grafik di masa depan. Anda dipersilakan untuk mengirimkan resume Anda.
DEMO
Catatan: Saat menjalankan DEMO, ingatlah untuk mengaktifkan mode debugging, membatalkan verifikasi nama domain, dan menggunakan alat pengembangan WeChat versi terbaru untuk membukanya.
Demo penggunaan Loader tertentu ada di repositori ini di bawah demo tiga platform
DEMO Program Mini WeChat
Program mini WeChat versi dasar DEMO
DEMO permainan mini WeChat | DEMO Program Mini Taobao | DEMO applet byte |
|---|
| | |
Modul yang diuji
Fitur
- VSMShadow (r131 dan versi sebelumnya OK, lihat Indeks loop tidak dapat dibandingkan dengan ekspresi non-konstan)
Pemuat
- GLTFLoader (mendukung GLB bertekstur) && (EXT_meshopt_compression, WASM tersedia untuk Android, versi ASM tersedia untuk ios, lihat alat) && (KHR_mesh_quantization, tersedia untuk program kecil) [Evaluasi Kompresi Mesh] MeshQuan, MeshOpt, Draco (API WebAssembly tidak ada lagi tersedia setelah WeChat 8.0 Penggunaan memerlukan WXWebAssembly, dan hanya mendukung wasm dalam paket. Meshopt_decoder.wasm.module telah ditambahkan, lihat penggunaan)
- Pemuat Tekstur
- RGBELoader & PMREMGenerator (beberapa model program mini terkadang menghasilkan kesalahan envMap, yang dapat dihindari dengan HDRPrefilter)
- SVGLloader
- OBJLoader
- EXRLoader (perlu mendukung ekstensi OES_texture_float_linear, beberapa GPU seluler tidak mendukungnya)
- MTLLoader (applet dapat menggunakan tekstur JPG)
- DDSLoader (perlu mendukung ekstensi WEBGL_compressed_texture_s3tc, tidak didukung oleh GPU seluler)
- LWOLoader (perlu mendukung ekstensi EXT_blend_minmax, setengah dari efek program mini digambar dengan tidak benar)
- FBXLoader
- BVHLoader
- ColladaLoader (DoMParser querySelector tidak diadaptasi)
- Pemuat TTF
- Pemuat STLL
- PDBLoader
- TGALoader (gunakan DataTextureLoader sebagai pengganti PR yang digabungkan, tersedia r127)
- Pemuat VTKL
Kontrol
- Kontrol Orbit & Kontrol Peta
- DeviceOrientationControls (onDeviceMotionChange di bawah program mini WeChat dan Taobao, kualitas data yang dikembalikan di Android sangat rendah dan pada dasarnya tidak dapat digunakan. Umpan balik bug komunitas telah ada selama lebih dari 3 tahun, dan pejabat tersebut tidak memiliki niat untuk memperbaikinya)
Modul tidak didukung
- ImageBitmapLoader (aplet WeChat tidak membuka ImageBitmap)
Peralatan
- buang-tiga (hancurkan node
- flip (tangkapan layar memerlukan flipY
- tangkapan layar
- worker-pool.module (belum disesuaikan dengan applet WeChat
- zstddec.worker.module (belum disesuaikan dengan applet WeChat
- zstddec.module (belum disesuaikan dengan applet WeChat
- toEnvMap (untuk prefilter hdr
- meshopt_decoder.asm.module (tersedia di applet WeChat
- meshopt_decoder.wasm.module (tersedia di applet WeChat
Ekstensi
- GLTFGPUCompressedTexture (alternatif untuk BasisTextureLoader) Alat pembangkitan diperoleh melalui gltf-gpu-compressed-texture (belum disesuaikan dengan applet WeChat
menggunakan
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 } }) pengalaman
- Applet WeChat tidak mendukung gambar tekstur di atas 2048
- Ada masalah dengan applet Taobao yang menampilkan tekstur format RGB (JPG). Setelah memuat tekstur melalui TextureLoader, atur texture.format ke RGBAFromat (Taobao versi 9.20.0). gambar. Menyebabkan format berubah dari RGB ke RGBA
- r126 tidak dapat menyetel pixelRatio penuh, dapat disetel ke setengah, atau 2, bukan 3
- Meskipun mendukung pemuatan GLB, gambar dikonversi ke base64 menggunakan ArrayBuffer versi js, yang memakan waktu dan memakan memori. Meskipun dapat diatasi dengan encoder wasm (https://github.com/marcosc90/encoding- wasm), wasm tidak memproses string. Performanya tidak sebaik js, diuji dengan wasm yang dikompilasi dengan AssemblyScript
- Crash IOS sebelum dan sesudah masuk dan keluar halaman dapat mengurangi pixelRatio dan meringankannya
- IOS WeChat readPixels tidak mendukung anti-aliasing. Jika buffer kanvas langsung perlu mematikan anti-aliasing (antialias: false), metode lain adalah WebglRenderTarget juga dapat diaktifkan, tetapi ukuran teksturnya terbatas (lebar/tinggi tekstur di bawah Xiaomi 8 Tidak boleh melebihi 4096, Anda perlu memperhatikan setSize terlebih dahulu, lalu setPixelRatio) (untuk Demo tangkapan layar, lihat applet WeChat DEMO)
- Program mini Taobao memiliki verifikasi nama domain yang ketat dan dapat menggunakan penyimpanan cloud untuk menyimpan model. Namun, jika model dan tekstur dipisahkan, disarankan untuk mengasosiasikan GLB secara manual.
- Polyfill URL dapat menggunakan fileSystemManager untuk mendapatkan file sementara guna menghindari konversi arraybuffer ke base64, tetapi memerlukan pengelolaan file sementara secara manual.
- Beberapa siswa di grup QQ melaporkan bahwa jalur file model pada applet iOS Taobao tidak mendukung bahasa Mandarin.
menyelesaikan
Ganti panggilan api khusus platform pada waktu pembuatan, teruskan referensi ke PLATFORM, dan perbarui melalui PLATFORM.set
menjaga
Bagaimana cara memperbarui/menurunkan versi Tiga?
# 拉取源码
> 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包
Bagaimana platform Tiga yang disesuaikan?
# 把自定义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
Bagaimana cara menulis platform khusus?
Silakan merujuk ke src/WechatPlatform atau 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
- Buang lebih teliti, kurangi kebocoran memori, Kasus pengujian web telah ditambahkan, applet WeChat telah ditambahkan, IOS masih memiliki masalah memori, halaman akan tetap macet setelah berpindah berkali-kali, model 3MB iPhone7 dibuka 30 kali
- Beradaptasi dengan applet Toutiao selesai
- Hasilkan plug-in WeChat, dan wujudkan penggunaan kembali kode tiga di seluruh program mini dan plug-in lintas program mini melalui plug-in yang dilakukan three-platformize-plugin-wechat
- Beradaptasi dengan mini-game WeChat selesai
- Beradaptasi dengan ReactNative
membahas
Anda dapat menghubungi saya melalui grup DeepKolos
PERUBAHANLOG
sponsor
Jika proyek ini bermanfaat bagi Anda atau memiliki kebutuhan adaptasi, silakan memberi tip.
Terima kasih atas dukungan Anda~~
| waktu | Bos |
|---|
| 2021/11/10 | tuhan tuhan |
| 2021/09/27 | Abu |
| 2021/08/10 | Masa Depan Auburn |
| 28/07/2021 | Tidak ada apa-apa |
| 2021/07/09 | anonim |
| 2021/07/07 | Cloud CAD-Liu Xin |
| 23/06/2021 | Fong |
| 23/06/2021 | Liu Ziqi |
| 23/06/2021 | Joson |
| 2021/06/03 | Voltaire Bionik |
| 28/04/2021 | Tidak ada apa-apa |
