今ではほとんどのwebブラウザが、3Dグラフィックス表示するための標準仕様であるWebGLをサポートし、誰でもwebブラウザ上で3Dコンテンツが楽しめるようになりました。さらにWebGLをベースに3Dコンテンツを作るためのthree.jsや、VRコンテンツを作るためのA-Frameが登場したことで、webブラウザ向けの3Dコンテンツが身近なものになりつつあります。
ハッピーテックラボでは、3Dゲーム制作のノウハウを生かし、WebGL、three.js、A-Frameを使った、3D Webコンテンツの制作を行っています。
3Dコンテンツ・サンプル1
渋谷のスクランブル交差点を走り回る犬に骨をぶつけてやっつける、シンプルなシューティングゲーム仕立ての単眼VRコンテンツです。商品プロモーション用のキャンペーンサイトをイメージして、高得点を取るとクーポン券をもらえるようにしています。クーポン券を一度だけしか使えないようにする「もぎり」機能も入れています。
より手軽に3Dコンテンツを作る方法として、3Dモデルではなく2Dのスプライト(画像)を3次元空間に配置する方法を採用し、単眼のVRとして360度見渡すことができます。
※iOS12.2以降のSafariでご利用になる場合は、このページの最後に記載した設定を行ってください。
3Dコンテンツ・サンプル2
サンプル1を見たお客様から、ゾンビのようなちょっと気持ち悪いコンテンツにしたいというリクエストに応えて試作した、ミドリムシをひたすら破壊するシューティングゲームです。
サンプル1は、単純に画像の色を表示していますが、こちらのサンプルはライティングやシェーダーを調整して怪しい空間の雰囲気を出し、パーティクルの表現によってミドリムシが破壊するときの飛沫が飛び散る演出も加えています。
iOS12.2以降のSafariでご利用になる場合
iOS12.2以降のSafariでご利用になる場合は「設定」→「Safari」→「モーションと画面の向きのアクセス」をONにしてください。(デフォルトではOFFになっています)この設定を行わないと端末の動きに連動した画面の更新が行われません。