trois plates-formes
Un projet pour faire de THREE une plateforme
La maintenance ultérieure se poursuivra sur platformize
- Actuellement adapté aux mini-programmes WeChat, Taobao et Byte
- Prise en charge du tremblement d'arborescence (nécessite un webpack, un rollup et d'autres outils de construction)
- Les types VSCode sont normaux et les définitions de chaque classe sont accessibles normalement.
- Adaptez-vous à examples/jsm/**/*.js, le type est normal
- Peut mettre à niveau, rétrograder la version ou utiliser TROIS personnalisés
- Mini programme WeChat Optimisation de la mémoire IOS, moins de plantages causés par le changement de page
- Prend en charge l'adaptation personnalisée d'une nouvelle plate-forme, il suffit de se référer à WechatPlatform pour écrire l'adaptateur
- three-platformize-plugin-wechat prend en charge la réutilisation croisée des plug-ins WeChat
Commanditaires spéciaux
Logiciel de conception CAO 3D Yuntu 3D-Online |
Auburn Future-un pionnier dans le domaine de l'AR/VR |
|
Situation d'adaptation
| WeChat | Taobao | octet |
|---|
| Mini programme machine réelle | ✔️ | ✔️ | ✔️ |
| Simulateur de mini programme | ✔️ | ✔️ | |
| Mini-jeu vraie machine | ✔️ | | |
| Simulateur de mini-jeu | ✔️ | | |
Auburn recrute à l'avenir des algorithmes front-end, WebGL et graphiques. Vous êtes invités à soumettre votre CV.
DÉMO
Remarque : lors de l'exécution de la DÉMO, n'oubliez pas d'activer le mode débogage, d'annuler la vérification du nom de domaine et d'utiliser la dernière version des outils de développement WeChat pour l'ouvrir.
Une démonstration de l'utilisation spécifique de Loader se trouve dans ce référentiel sous three-platformize-demo
DÉMO du mini programme WeChat
Version de base du mini programme WeChat DÉMO
DÉMO du mini-jeu WeChat | DÉMO du mini programme Taobao | Démo de l'applet d'octets |
|---|
| | |
Module testé
Caractéristiques
- VSMShadow (r131 et les versions précédentes sont OK, voir L'index de boucle ne peut pas être comparé à une expression non constante)
Chargeur
- GLTFLoader (prend en charge le GLB texturé) && (EXT_meshopt_compression, WASM est disponible pour Android, la version ASM est disponible pour iOS, voir outils) && (KHR_mesh_quantization, disponible pour les petits programmes) [Mesh Compression Evaluation] MeshQuan, MeshOpt, Draco (l'API WebAssembly n'est pas plus disponible après WeChat 8.0 Pour l'utiliser, vous devez utiliser WXWebAssembly et ne prend en charge que wasm dans le package. Meshopt_decoder.wasm.module a été ajouté, voir utilisation)
- Chargeur de texture
- RGBELoader & PMREMGenerator (certains modèles du mini programme peuvent occasionnellement générer des erreurs envMap, qui peuvent être évitées avec HDRPrefilter)
- Chargeur SVG
- OBJLoader
- EXRLoader (doit prendre en charge l'extension OES_texture_float_linear, certains GPU mobiles ne la prennent pas en charge)
- MTLLoader (l'applet peut utiliser la texture JPG)
- DDSLoader (doit prendre en charge l'extension WEBGL_compressed_texture_s3tc, non prise en charge par le GPU mobile)
- LWOLoader (doit prendre en charge l'extension EXT_blend_minmax, la moitié des effets du mini programme sont mal dessinés)
- FBXLoader
- BVHLoader
- ColladaLoader (DOMParser querySelector non adapté)
- Chargeur TTF
- Chargeur STL
- Chargeur PDB
- TGALoader (utilisez DataTextureLoader à la place de PR fusionné, r127 disponible)
- Chargeur VTK
Contrôles
- Contrôles Orbite et Contrôles Map
- DeviceOrientationControls (onDeviceMotionChange sous les mini-programmes WeChat et Taobao, la qualité des données renvoyées sous Android est extrêmement faible et fondamentalement inutilisable. Les commentaires sur les bogues de la communauté durent depuis plus de 3 ans et le responsable n'a pas l'intention de le corriger)
Modules non pris en charge
- ImageBitmapLoader (l'applet WeChat n'ouvre pas ImageBitmap)
Outils
- disposer-trois (détruire le nœud
- flip (la capture d'écran nécessite flipY
- capture d'écran
- worker-pool.module (pas encore adapté à l'applet WeChat
- zstddec.worker.module (pas encore adapté à l'applet WeChat
- zstddec.module (pas encore adapté à l'applet WeChat
- toEnvMap (pour le préfiltre hdr
- meshopt_decoder.asm.module (disponible dans l'applet WeChat
- meshopt_decoder.wasm.module (disponible dans l'applet WeChat
Rallonges
- GLTFGPUCompressedTexture (une alternative à BasisTextureLoader) L'outil de génération est obtenu via gltf-gpu-compressed-texture (pas encore adapté à l'applet WeChat
utiliser
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 } }) expérience
- L'applet WeChat ne prend pas en charge les images de texture supérieures à 2048
- Il y a un problème avec l'applet Taobao affichant les textures au format RVB (JPG). Après avoir chargé la texture via TextureLoader, définissez texture.format sur RGBAFromat (Taobao version 9.20.0). La raison peut être que le serveur optimise les grandes images et compresse les images. images Fait passer le format de RVB à RVBA.
- r126 ne peut pas définir le pixelRatio complet, il peut être réglé sur la moitié, ou 2, pas 3
- Bien qu'elle prenne en charge le chargement de GLB, l'image est convertie en base64 à l'aide de la version js d'ArrayBuffer, ce qui prend du temps et occupe de la mémoire, bien que cela puisse être allégé par l'encodeur wasm (https://github.com/marcosc90/encoding-). wasm), wasm ne traite pas les chaînes. Les performances ne sont pas aussi bonnes que js, testées avec wasm compilé avec AssemblyScript.
- Le crash d'IOS avant et après l'entrée et la sortie de la page peut réduire le pixelRatio et l'atténuer
- IOS WeChat readPixels ne prend pas en charge l'anti-aliasing. Si le tampon du canevas direct doit désactiver l'antialias (antialias : false), une autre méthode est WebglRenderTarget. L'anti-aliasing peut également être activé, mais la taille de la texture est limitée. (largeur/hauteur de la texture sous Xiaomi 8. Elle ne peut pas dépasser 4096, vous devez d'abord faire attention à setSize, puis à setPixelRatio) (pour une démonstration de capture d'écran, voir la DEMO de l'applet WeChat)
- Le mini-programme Taobao dispose d'une vérification stricte du nom de domaine et peut utiliser le stockage cloud pour stocker les modèles. Cependant, si le modèle et la texture sont séparés, une association manuelle est recommandée.
- URL polyfill peut utiliser fileSystemManager pour obtenir des fichiers temporaires afin d'éviter de convertir arraybuffer en base64, mais cela nécessite une gestion manuelle des fichiers temporaires.
- Certains étudiants du groupe QQ ont signalé que le chemin du fichier modèle sur l'applet iOS Taobao ne prend pas en charge le chinois.
accomplir
Remplacez les appels API spécifiques à la plate-forme au moment de la construction, transférez les références à PLATFORM et mettez à jour via PLATFORM.set
maintenir
Comment mettre à jour/rétrograder la version de 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包
Comment personnaliser la plateforme 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
Comment écrire une plateforme personnalisée ?
Veuillez vous référer à src/WechatPlatform ou 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 ( ) {
// 释放资源
}
} FAIRE
- Éliminez de manière plus approfondie, réduisez les fuites de mémoire, des cas de test Web ont été ajoutés, l'applet WeChat a été ajoutée, IOS a toujours des problèmes de mémoire, la page plantera toujours après plusieurs commutations, le modèle iPhone7 de 3 Mo est ouvert 30 fois
- Adaptation à l'applet Toutiao terminée
- Générez des plug-ins WeChat et réalisez la réutilisation du code de trois dans des mini-programmes et des plug-ins de mini-programmes croisés via des plug-ins réalisés à trois plates-formes-plugin-wechat
- Adaptation au mini-jeu WeChat terminé
- S'adapter à ReactNative
discuter
Vous pouvez me contacter via le groupe DeepKolos
JOURNAL DES CHANGEMENTS
parrainer
Si le projet vous est utile ou nécessite une adaptation, n'hésitez pas à laisser un pourboire.
Merci pour votre soutien ~~
| temps | Chef |
|---|
| 2021/11/10 | Dieu Dieu |
| 2021/09/27 | Abou |
| 2021/08/10 | Avenir d'Auburn |
| 2021/07/28 | Rien |
| 2021/07/09 | anonyme |
| 2021/07/07 | Cloud CAD-Liu Xin |
| 2021/06/23 | Fong |
| 2021/06/23 | Liu Ziqi |
| 2021/06/23 | Joson |
| 2021/06/03 | Voltaire bionique |
| 2021/04/28 | Rien |
