2020年03月25日 - WebVR・Three.js

部屋の3DCGをWebVRで表示

Blenderで制作した部屋の3DCGを、WebVRに対応させてOculus Questで見れるようにしました。

部屋の3DCGをWebVRで表示

● 部屋の3DCGをThree.jsで読み込み

「部屋の3DCGをThree.jsで読み込み」で、部屋の3DCGをThree.jsで読み込んで、Web上で綺麗に表示できるように調整しました。

パソコンやスマホでは問題なく動作したのですが、Oculus Questではうまく動作しなかったため、Oculus Questのスペックについて調べました。

● Oculus Questのスペック

Oculus Questは、クアルコムのSnapdragon 835 SoCを搭載しています。SoC（システムオンチップ）とはCPUやGPUなどの機能を一つのチップにまとめたもので、スマートフォンでよく使用されています。

VRは両目用の映像を描画する必要があるため、単純には比較できませんが、Snapdragon 835はiPhone 7よりも高性能で、Samsung Galaxy S8など2018年前半のハイエンドスマートフォン並みのスペックということです。

Oculus Questは、Oculus Goと比較するとCPUで1.25倍、GPUで1.3倍くらい高性能で、パソコンのGeforceと比較すると10分の1程度の性能です。Oculus QuestでWebVRをする場合は、2年前くらいのハイエンドスマートフォンでVRを動かすというイメージのようです。

● Oculusブラウザについて

WebVRコンテンツを見るためにはブラウザが必要です。Oculus Questには、Oculusブラウザーがプリインストールされています。OculusブラウザーにはChromiumのレンダリングエンジンが搭載されていて、WebVR、WebXR、およびWebGL向けに最適化されています。

Oculusブラウザーの概要

● 部屋の3DCGを修正してglTFに出力

「部屋の3DCGをThree.jsで読み込み」で制作したデータを、Oculus Questで見れるように修正して、glTFに出力します。

窓ガラスやレースのカーテンなど、透過させたマテリアルの描画は、Oculus Questには負荷がかかり過ぎるようなので、削除しました。
また、メッシュの数が多すぎるからなのか、観葉植物も描画がうまくいかなかったので削除しました。

Three.jsのライティングのシミュレーションはOculus Questに負荷をかけます。そこで、ライティングの設定をシンプルにするために、必要なオブジェクトをCyclesでシャドウをテクスチャにベイクして、glTFに出力しました。

Blender2.8でテクスチャをベイク

● WebVRに対応

WebVRに対応させる方法は、「Three.jsで360度パノラマコンテンツ制作」に書きましたが、WebVRコンテンツを制作するさい、開発用にPCやスマホで処理を分けたい時があります。WebXR Device APIに対応しているかどうか、「immersive-vr」のセッションをサポートしているかどうかで、処理を分けることができます。

※renderer.vr.enabledのvrはxrに変更されました。（2020年5月9日）

//WebXR Device APIに対応
if ('xr' in navigator) {
	navigator.xr.isSessionSupported('immersive-vr').then(function(supported){
		if(supported){
			//WebVRの時
			renderer.xr.enabled = true;
		}else{
			//WebVRではない時
		}
	});
} else {
	//WebXR Device APIに非対応
	_this.initControll();
}

「glTF2.0のマテリアルについて」でもやりましたが、Draco圧縮したglTFを読み込みます。映り込みを表現したいマテリアルに、環境マップを設定しました。

//キューブ環境マッピング
const ldrUrls = ['px.jpg','nx.jpg','py.jpg','ny.jpg','pz.jpg','nz.jpg'];
const ldrCubeMap = new THREE.CubeTextureLoader()
    .setPath('./img/room_env/')
    .load(ldrUrls, function() {
        ldrCubeMap.encoding = THREE.sRGBEncoding;
        renderTarget = pmremGenerator.fromCubemap(ldrCubeMap);
    });

//glTFの読み込み
const gltfLoader = new GLTFLoader();
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('./js/lib/three_jsm/draco/');
gltfLoader.setDRACOLoader(dracoLoader);

gltfLoader.load('./data/room.glb',

    function (gltf) {
        const obj = gltf.scene;
        obj.traverse(function (child) {
            if (child.isMesh) {
                const envArr = ['Coffecup','Cube.031_0','Cube.031_1','Frame','Frame001','Frame002','Handle_Front','TV_leg'];
                const envArr2 = ['Couch_reg','Desk_leg','Window'];

                for(let i=0; i<envArr.length; i++){
                    if(child.name==envArr[i]){
                        child.material.envMap = renderTarget.texture;
                        child.material.envMapIntensity = 0.5;
                    }
                }

                for(let j=0; j<envArr2.length; j++){
                    let pattern = envArr2[j];
                    let reg = new RegExp(pattern);
                    if(child.name.match(reg)){
                        child.material.envMap = renderTarget.texture;
                        child.material.envMapIntensity = 0.5;
                    }
                }

                if(child.name=='TV_display'){
                    child.material.envMap = renderTarget.texture;
                    child.material.envMapIntensity = 2;
                }
            }
        });

        scene.add(obj);
    });

glTFの容量が30MBありますが、完成したデモになります。WebVRに対応したのでOculus Questなどヘッドマウントディスプレイで見ることができます。また、パソコンとスマホでも確認できます。テクスチャをベイクすることで、動作を軽くしつつ質感を上げることができました。

部屋の3DCGをWebVRで表示