🕒
DRACO圧縮を行なった3Dサイトの実装方法
glTF形式とglb形式の3DモデルはDRACO圧縮を行うのと行わないのではファイルサイズに非常に大きな差がでてきます。
DRACO圧縮を行うとThree.jsとGLTFLoaderに加えてDRACOLoaderも必要になり、コーディングに少しだけ影響します。
この記事ではDRACO圧縮をできるようにローカル環境の設定とサイトに表示する際に必要なDRACOLoaderのコードを説明します。
最後にデモサイトとGitを載せているので、そちらも合わせてご確認いただければと思います。
使用しているプラグインなど
・webpack
・Typescript
・three.js
・GLTFLoader
・DRACOLoader
構成
├── src
│ └── img
│ │ └── .gitkeep
│ │
│ └── obj
│ │ └── .gitkeep
│ │
│ └── scripts
│ │ └── components
│ │ │
│ │ └── modules
│ │ │ └── webgl.ts
│ │ └── app.ts
│ │
│ └── static
│ │ └── draco
│ │ └── draco_decoder.js
│ │ └── draco_decoder.wasm
│ │ └── draco_encoder.js
│ │ └── draco_wasm_wrapper.js
│ │
│ └── styles
│ │ └── base
│ │ │ └── base.scss
│ │ │ └── reset.scss
│ │ └── global
│ │ │ └── functions
│ │ │ │ └── functions.scss
│ │ │ │ └── mixins.scss
│ │ │ │ └── mq.scss
│ │ │ └── setting
│ │ │ └── color.scss
│ │ │ └── font.scss
│ │ │ └── size.scss
│ │ └── project
│ │ └── style.scss
│ │
│ └── index.html
│
├── .eslintignore
├── .eslintrc.js
├── .nvmrc
├── .prettierrc.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── tsconfig.json
└── webpack.config.js
Node.jsのインストール
こちらからNode.jsをインストールします。
インストール完了後、コマンドプロンプトで
node -v
と入力してバージョンが表示されれば無事にインストールができています。
gltf-pipelineのインストール
gltf-pipelineはglTF形式・glb形式のファイルをDRACO圧縮するために使用するツールです。
Node.jsでダウンロードします。
npm install -g gltf-pipeline
DRACO圧縮を行う
glTF形式・glb形式のファイルがあるディレクトリで下記コマンドを実行することで圧縮されたファイルを生成できます。
ファイル名は適宜変更してください。
gltf-pipeline -i [圧縮前のファイル名].gltf -o [圧縮後のファイル名].gltf -d
Three.jsでサイトに表示する
必要なものは
・Three.js
・GLTFLoader
・DRACOLoader の3つです。
まずは上記の3つを読み込みます。
webgl.ts
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
次にgltf(glb)ファイルを読み込みます。
webgl.ts
setModels() {
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('/draco/');
const loader = new GLTFLoader();
loader.setDRACOLoader(dracoLoader);
loader.load('./obj/[表示する3Dモデル].gltf', (obj) => {
const children = [...obj.scene.children];
for (const child of children) {
// 3Dのサイズ設定
child.scale.set(1, 1, 1);
// シーンに3Dモデルを追加
this.three.scene.add(child);
}
// レンダリングを開始する
this.rendering();
});
}
この他にライトやカメラ等の設定を行えば表示ができます。
Discussion