Zenn
🕒

DRACO圧縮を行なった3Dサイトの実装方法

2022/04/13に公開
WebGL
Three.js
glTF
#
dracoloader
#
gltfloader
tech

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();
        });
    }

この他にライトやカメラ等の設定を行えば表示ができます。

作成したデモサイト

3D Balls
Git

3D Dracoloader
Git

Discussion