部屋の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向けに最適化されています。
● 部屋の3DCGを修正してglTFに出力
「部屋の3DCGをThree.jsで読み込み」で制作したデータを、Oculus Questで見れるように修正して、glTFに出力します。
窓ガラスやレースのカーテンなど、透過させたマテリアルの描画は、Oculus Questには負荷がかかり過ぎるようなので、削除しました。
また、メッシュの数が多すぎるからなのか、観葉植物も描画がうまくいかなかったので削除しました。
Three.jsのライティングのシミュレーションはOculus Questに負荷をかけます。そこで、ライティングの設定をシンプルにするために、必要なオブジェクトをCyclesでテクスチャにベイクして、glTFに出力しました。
● 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などヘッドマウントディスプレイで見ることができます。また、パソコンとスマホでも確認できます。テクスチャをベイクすることで、動作を軽くしつつ質感を上げることができました。