홈페이지>프로그래밍 관련>AI 소스 코드
다운로드

3가지 플랫폼화

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-온라인 3D CAD 디자인 소프트웨어
AR/VR 분야의 선구자 Auburn Future

적응 상황

위챗 타오바오 바이트
미니 프로그램 실제 기계 ✔️ ✔️ ✔️
미니 프로그램 시뮬레이터 ✔️ ✔️
미니 게임 실제 기계 ✔️
미니 게임 시뮬레이터 ✔️

Auburn에서는 향후 프런트엔드, WebGL 및 그래픽 알고리즘을 모집하고 있습니다. 이력서를 제출해 주시기 바랍니다.

데모

참고: DEMO를 실행할 때 디버깅 모드를 켜고, 도메인 이름 확인을 취소하고, 최신 버전의 WeChat 개발 도구를 사용하여 열어야 합니다.

특정 로더 사용법에 대한 데모는 이 저장소의 three-platformize-demo에 있습니다.

위챗 미니 프로그램 데모
WeChat 미니 프로그램 기본 버전 DEMO
위챗 미니게임 데모		 타오바오 미니 프로그램 데모 바이트 애플릿 데모

테스트된 모듈

특징

  1. VSMShadow(r131 및 이전 버전은 괜찮습니다. 루프 인덱스를 상수가 아닌 표현식과 비교할 수 없음 참조)

짐을 싣는 사람

  1. 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이 추가되었습니다. 사용법 참조)
  2. 텍스처로더
  3. RGBELoader 및 PMREMGenerator(미니 프로그램의 일부 모델은 때때로 envMap 오류를 생성할 수 있으며 이는 HDRPrefilter로 방지할 수 있음)
  4. SVG로더
  5. OBJ로더
  6. EXRLoader(OES_texture_float_linear 확장을 지원해야 하며 일부 모바일 GPU는 이를 지원하지 않음)
  7. MTLLoader(애플릿은 JPG 텍스처를 사용할 수 있음)
  8. DDSLoader(WEBGL_compressed_texture_s3tc 확장을 지원해야 하며 모바일 GPU에서는 지원되지 않음)
  9. LWOLoader(EXT_blend_minmax 확장을 지원해야 하며 미니 프로그램 효과의 절반이 잘못 그려짐)
  10. FBX로더
  11. BVH로더
  12. ColladaLoader(DOMParser querySelector가 적용되지 않음)
  13. TTF로더
  14. STL로더
  15. PDB로더
  16. TGALoader(PR 병합 대신 DataTextureLoader 사용, r127 사용 가능)
  17. VTKLoader

통제 수단

  1. OrbitControl 및 MapControl
  2. DeviceOrientationControls (WeChat 및 Taobao 미니 프로그램의 onDeviceMotionChange, Android에서 반환되는 데이터 품질이 매우 낮고 기본적으로 사용할 수 없습니다. 커뮤니티 버그 피드백이 3년 이상 지속되었으며 공식에서는 수정할 의사가 없습니다.)

지원되지 않는 모듈

  1. ImageBitmapLoader(WeChat 애플릿은 ImageBitmap을 열지 않음)

도구

  1. dispose-3(노드 삭제
  2. 플립(스크린샷에는 FlipY가 필요합니다.
  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. RGB 형식 텍스처(JPG)를 표시하는 Taobao 애플릿에 문제가 있습니다. TextureLoader를 통해 텍스처를 로드한 후 Texture.format을 RGBAFromat(Taobao 버전 9.20.0)로 설정하세요. 그 이유는 서버가 큰 이미지를 최적화하고 압축하기 때문일 수 있습니다. 이미지 형식이 RGB에서 RGBA로 변경됩니다.
  3. r126은 전체 pixelRatio를 설정할 수 없으며 3이 아닌 절반 또는 2로 설정할 수 있습니다.
  4. GLB 로딩을 지원하지만 js 버전의 ArrayBuffer를 사용하여 이미지를 base64로 변환하는데, 이는 시간이 많이 걸리고 메모리를 차지하지만 wasm의 인코더(https://github.com/marcosc90/encoding-)로 완화할 수 있습니다. wasm), wasm은 문자열을 처리하지 않습니다. 성능은 js만큼 좋지 않습니다. AssemblyScript로 컴파일된 wasm으로 테스트했습니다.
  5. 페이지 진입 및 퇴장 전후 IOS 충돌로 인해 pixelRatio가 줄어들어 완화될 수 있음
  6. IOS WeChat readPixels는 앤티앨리어싱을 지원하지 않습니다. 직접 캔버스의 버퍼가 앤티앨리어싱을 꺼야 하는 경우(antialias: false), 또 다른 방법인 WebglRenderTarget도 설정할 수 있지만 텍스처 크기는 제한됩니다. (샤오미 8의 텍스처 너비/높이는 4096을 초과할 수 없습니다. 먼저 setSize에 주의한 다음 setPixelRatio에 주의해야 합니다.) (스크린샷 데모는 WeChat 애플릿 데모 참조)
  7. Taobao 미니 프로그램은 도메인 이름 확인이 엄격하며 클라우드 저장소를 사용하여 모델을 저장할 수 있습니다. 단, 모델과 텍스처가 분리된 경우 GLB를 수동으로 연결하는 것이 좋습니다.
  8. URL 폴리필은 arraybuffer를 base64로 변환하는 것을 방지하기 위해 fileSystemManager를 사용하여 임시 파일을 얻을 수 있지만 임시 파일을 수동으로 관리해야 합니다.
  9. QQ 그룹의 일부 학생들은 iOS Taobao 애플릿의 모델 파일 경로가 중국어를 지원하지 않는다고 보고했습니다.

성취하다

빌드 시 플랫폼별 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에 여전히 메모리 문제가 있으며, 여러 번 전환해도 페이지가 계속 충돌하고, 3MB 모델 iPhone7이 30번 열립니다.
  2. Toutiao 애플릿에 적응 완료
  3. WeChat 플러그인을 생성하고 three-platformize-plugin-wechat 수행된 플러그인을 통해 미니 프로그램 및 교차 미니 프로그램 플러그인 전반에 걸쳐 3개의 코드 재사용을 실현합니다.
  4. WeChat 미니게임에 적응하기 완료
  5. ReactNative에 적응

논의하다

DeepKolos 그룹을 통해 저에게 연락하실 수 있습니다

변경 로그

스폰서

프로젝트가 귀하에게 도움이 되거나 적응이 필요한 경우, 언제든지 팁을 주시기 바랍니다.

지원해주셔서 감사합니다~~

시간 사장
2021/11/10 신 신
2021/09/27 아부
2021/08/10 어번 퓨처
2021/07/28 없음1ng
2021/07/09 익명의
2021/07/07 클라우드 CAD-Liu Xin
2021/06/23 퐁
2021/06/23 류쯔치
2021/06/23 존슨
2021/06/03 바이오닉 볼테르
2021/04/28 없음1ng
확장하다
추가 정보
관련 애플리케이션
추천
관련 정보 전체