1. 概要
3D グラフィックは、ゲーム、デザイン、データ可視化など、多くのアプリケーションの基本的な部分です。グラフィック プロセッサと作成ツールが進化し続けるにつれて、より大規模で複雑な 3D モデルが一般的になり、没入型仮想現実（VR）や拡張現実（AR）の新しいアプリケーションを促進するでしょう。モデルの複雑さが増したため、ストレージと帯域幅の要件は 3D データの爆発的な増加に対応せざるを得なくなっています。
Draco を使用すると、3D グラフィックを使用するアプリケーションのサイズを大幅に縮小できます。視覚的な忠実性を損なうことはありません。ユーザーにとっては、アプリのダウンロードが高速化され、ブラウザの 3D グラフィックの読み込みが高速化され、VR シーンや AR シーンの送信に必要な帯域幅が大幅に削減され、高速にレンダリングされて見栄えが向上することを意味します。
「ドラコ」とは
Draco は、3D ジオメトリのメッシュとポイント クラウドを圧縮および解凍するためのライブラリです。3D グラフィックの保存と送信を改善することを目的としています。
Draco は、圧縮効率と速度を重視して設計、構築されています。このコードは、ポイント、接続情報、テクスチャ座標、色情報、法線、ジオメトリに関連付けられたその他の汎用属性の圧縮をサポートしています。Draco は、3D グラフィックの圧縮に使用できる C++ ソースコードと、エンコードされたデータの C++ および Javascript デコーダとしてリリースされています。
学習内容
- Draco を使用して 3D モデルを圧縮する方法
- さまざまな圧縮モデルの使用方法と、モデルの品質とサイズへの影響
- ウェブで 3D モデルを表示する方法
必要なもの
2. 設定方法
次のコマンドラインを使用して、Github リポジトリのクローンを作成します。
git clone https://github.com/google/draco
Draco のルート ディレクトリに移動します。
cd draco
3. エンコーダをビルドする
Draco のエンコードとデコードを始めるには、まずアプリをビルドします。
エンコーダをビルドする
- ビルドファイルを生成するディレクトリから cmake を実行し、Draco リポジトリのパスを渡します。
mkdir build
cd build
cmake ../
make
4. 最初の 3D アセットをエンコードする
draco_encoder は OBJ ファイルまたは PLY ファイルを入力として読み込み、Draco エンコード ファイルを出力します。テスト用にスタンフォード大学のバニー メッシュを含めました。基本的なコマンドラインは次のようになります。
./draco_encoder -i ../testdata/bun_zipper.ply -o bunny.drc
出力ファイルのサイズを確認し、元の .ply ファイルと比較します。圧縮ファイルは元のファイルサイズよりもはるかに小さくなります。
注: 圧縮後のサイズは、圧縮オプションによって異なる場合があります。
5. ブラウザで Draco ファイルをデコードする
この時点で、Draco ファイルをデコードするための基本的なウェブページから始めます。まず、次のコード セクションをコピーしてテキスト エディタに貼り付けます。
- 基本的な HTML ファイルから始めます。
<!DOCTYPE html>
<html>
<head>
<title>Codelab - Draco Decoder</title>
- 次のコード スニペットは、Draco WASM デコーダを読み込みます。
<script src="https://www.gstatic.com/draco/versioned/decoders/1.4.1/draco_wasm_wrapper.js">
// It is recommended to always pull your Draco JavaScript and WASM decoders
// from the above URL. Users will benefit from having the Draco decoder in
// cache as more sites start using the static URL.
</script>
- 次に、Draco デコーダ モジュールを作成する関数を追加します。デコーダ モジュールの作成は非同期であるため、モジュールを使用する前にコールバックが呼び出されるまで待つ必要があります。
<script>
'use strict';
// The global Draco decoder module.
let decoderModule = null;
// Creates the Draco decoder module.
function createDracoDecoderModule() {
let dracoDecoderType = {};
// Callback when the Draco decoder module is fully instantiated. The
// module parameter is the created Draco decoder module.
dracoDecoderType['onModuleLoaded'] = function(module) {
decoderModule = module;
// Download the Draco encoded file and decode.
downloadEncodedMesh('bunny.drc');
};
DracoDecoderModule(dracoDecoderType);
}
- Draco エンコード メッシュをデコードする関数を追加します。
// Decode an encoded Draco mesh. byteArray is the encoded mesh as
// an Uint8Array.
function decodeMesh(byteArray) {
// Create the Draco decoder.
const decoder = new decoderModule.Decoder();
// Create a buffer to hold the encoded data.
const buffer = new decoderModule.DecoderBuffer();
buffer.Init(byteArray, byteArray.length);
// Decode the encoded geometry.
let outputGeometry = new decoderModule.Mesh();
let decodingStatus = decoder.DecodeBufferToMesh(buffer, outputGeometry);
alert('Num points = ' + outputGeometry.num_points());
// You must explicitly delete objects created from the DracoModule
// or Decoder.
decoderModule.destroy(outputGeometry);
decoderModule.destroy(decoder);
decoderModule.destroy(buffer);
}
- Draco デコード関数が用意できたので、Draco エンコード メッシュをダウンロードする関数を追加します。関数 ‘downloadEncodedMesh' は、読み込む Draco ファイルのパラメータを受け取ります。この場合、前のステージの「bunny.drc」になります。
// Download and decode the Draco encoded geometry.
function downloadEncodedMesh(filename) {
// Download the encoded file.
const xhr = new XMLHttpRequest();
xhr.open("GET", filename, true);
xhr.responseType = "arraybuffer";
xhr.onload = function(event) {
const arrayBuffer = xhr.response;
if (arrayBuffer) {
const byteArray = new Uint8Array(arrayBuffer);
decodeMesh(byteArray);
}
};
xhr.send(null);
}
- ‘createDracoDecoderModule’ 関数を呼び出して Draco デコーダ モジュールを作成します。このモジュールは ‘downloadEncodedMesh’ 関数を呼び出してエンコードされた Draco ファイルをダウンロードし、‘decodeMesh’ 関数を呼び出してエンコードされた Draco メッシュをデコードします。
// Create the Draco decoder module.
createDracoDecoderModule();
</script>
</head>
<body>
</body>
</html>
- このファイルを「DracoDecode.html」として保存します。
- Python ウェブサーバーを起動します。ターミナルで次のように入力します。
python -m SimpleHTTPServer
- Chrome で localhost:8000/DracoDecode.html を開きます。モデルからデコードされたポイント数（Num points = 34834）を示す警告メッセージ ボックスが表示されます。
6. three.js で Draco ファイルをレンダリングする
WASM を使用して Draco ファイルをデコードする方法を理解したので、一般的なウェブ 3D ビューアである three.js を使用します。前の例と同様に、まず次のコード セクションをコピーしてテキスト エディタに貼り付けます。
- 基本的な HTML ファイルから始める
<!DOCTYPE html>
<html>
<head>
<title>Codelab - Draco three.js Render</title>
- three.js と Draco three.js ローダーを読み込むコードを追加します。
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@v0.162.0/build/three.module.js",
"three/addons/": "https://unpkg.com/three@v0.162.0/examples/jsm/"
}
}
</script>
- Draco デコーダのパスを設定します。
<script type="module">
// import three.js and DRACOLoader.
import * as THREE from 'three';
import {DRACOLoader} from 'three/addons/loaders/DRACOLoader.js'
// three.js globals.
var camera, scene, renderer;
// Create the Draco loader.
var dracoLoader = new DRACOLoader();
// Specify path to a folder containing WASM/JS decoding libraries.
// It is recommended to always pull your Draco JavaScript and WASM decoders
// from the below URL. Users will benefit from having the Draco decoder in
// cache as more sites start using the static URL.
dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.4.1/');
- three.js レンダリング コードを追加します。
function initThreejs() {
camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 0.1, 15 );
camera.position.set( 3, 0.25, 3 );
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x443333 );
scene.fog = new THREE.Fog( 0x443333, 1, 4 );
// Ground
var plane = new THREE.Mesh(
new THREE.PlaneGeometry( 8, 8 ),
new THREE.MeshPhongMaterial( { color: 0x999999, specular: 0x101010 } )
);
plane.rotation.x = - Math.PI / 2;
plane.position.y = 0.03;
plane.receiveShadow = true;
scene.add(plane);
// Lights
var light = new THREE.HemisphereLight( 0x443333, 0x111122 );
scene.add( light );
var light = new THREE.SpotLight();
light.angle = Math.PI / 16;
light.penumbra = 0.5;
light.castShadow = true;
light.position.set( - 1, 1, 1 );
scene.add( light );
// renderer
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
const container = document.getElementById('container');
container.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
render();
requestAnimationFrame( animate );
}
function render() {
var timer = Date.now() * 0.0003;
camera.position.x = Math.sin( timer ) * 0.5;
camera.position.z = Math.cos( timer ) * 0.5;
camera.lookAt( new THREE.Vector3( 0, 0.1, 0 ) );
renderer.render( scene, camera );
}
- Draco の読み込みとデコードのコードを追加。
function loadDracoMesh(dracoFile) {
dracoLoader.load(dracoFile, function ( geometry ) {
geometry.computeVertexNormals();
var material = new THREE.MeshStandardMaterial( { vertexColors: THREE.VertexColors } );
var mesh = new THREE.Mesh( geometry, material );
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add( mesh );
} );
}
- ファイルを読み込むコードを追加します。
window.onload = function() {
initThreejs();
animate();
loadDracoMesh('bunny.drc');
}
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
- このファイルを「DracoRender.html」として保存します。
- 必要に応じて、ウェブサーバーを再起動します。
python -m SimpleHTTPServer
- Chrome で localhost:8000/DracoRender.html を開きます。ブラウザに Draco ファイルが表示されます。
7. 別のエンコード パラメータを試す
Draco エンコーダでは、圧縮ファイルのサイズとコードの視覚的な品質に影響するさまざまなパラメータを使用できます。コマンドラインで次のコマンドを実行して、結果を確認してみましょう。
- 次のコマンドは、12 ビット（デフォルトは 11 ビット）を使用してモデルの位置を量子化します。
./draco_encoder -i ../testdata/bun_zipper.ply -o out12.drc -qp 12
- 前のセクションの bunny.drc ファイルと比較して、out12.drc のサイズを確認します。量子化ビット数を増やすと、圧縮ファイルのサイズが大きくなることがあります。
3. 次のコマンドは、6 ビットを使用してモデルの位置を量子化します。
./draco_encoder -i ../testdata/bun_zipper.ply -o out6.drc -qp 6
- 前のセクションの bunny.drc ファイルと比較して、out6.drc のサイズを確認します。量子化ビット数を減らすと、圧縮ファイルのサイズを小さくできます。
- 次のパラメータは、モデルの圧縮レベルに影響します。cl フラグを使用すると、圧縮率を 1（最小）から 10（最大）まで調整できます。
./draco_encoder -i ../testdata/bun_zipper.ply -o outLow.drc -cl 1
./draco_encoder -i ../testdata/bun_zipper.ply -o outHigh.drc -cl 10
Draco エンコーダの出力をメモします。最高の圧縮レベルで圧縮するのに必要な時間とビット数の節約の間にはトレードオフがあることがわかります。アプリケーションに適したパラメータは、エンコード時のタイミングとサイズ要件によって異なります。
8. 完了
Draco メッシュ圧縮の Codelab を完了し、Draco の多くの重要な機能について確認しました。
Draco を使用して 3D アセットを縮小し、ウェブ経由でより効率的に送信する方法について、ご理解いただけたでしょうか。Draco の詳細と最新のライブラリについては、GitHub をご覧ください。