CodeIQ MAGAZINECodeIQ MAGAZINE

製品データの活用方法を考える!WebGLで3DCG描画する「きゃん家!」技術解説(3)#5jcup

2014.08.04 Category:技術コラム Tag: , , , , , ,

  • 4
  • このエントリーをはてなブックマークに追加

WebGLでモデル(きゃんち)とステージ(一般家屋)を3DCG描画する「きゃん家!」についての技術解説第二弾です。

今回は「きゃん家!」に使った花王製品データの活用法や、コレクション方法やについて、jThreeの松田さんに解説いただきました。
by 馬場美由紀 (CodeIQ中の人)

製品データの活用方法を考える

第1回第2回で紹介してきた通り、「きゃん家!」は「HTML5 Japan Cup(以下5jCup)」の花王賞を狙って開発したWebアプリです。賞のテーマである「花王製品カタログサイトを徹底的にリ・デザインしてください!」に沿って次世代型3DCGカタログを作り上げました。

今回花王賞に応募するチームは、花王製品カタログサイトのデータを自由に使わせていただくことができました。

しかし当然ながら製品の3Dモデルはなく、あるのはテキストと画像だけ。製品の3Dモデルを作る時間は到底ないので以下のアイディアで乗り切ることにしました。

  • 製品画像を平面のまま家中にちりばめる
  • 製品が常にカメラの方を向くようにして視認性を高める
  • マウスオーバーで製品名を読み上げて、クリックで花王さんのカタログサイトへのリンクがある製品画面を表示しつつ、説明文を読ませる
きゃん家!

次世代型3DCGカタログ「きゃん家!

花王製品を描画する

平面オブジェクトに画像を貼り付ける

カメラの方を向き続ける画像を表示するなら、スプライト(点オブジェクト)を使うと簡単です。ただし、スプライトは見た目に反して、高さと幅が0として扱われるので(点だから当然ですね)、クリックやマウスオーバーの判定が極端に難しくなります。

そこできゃん家!では正方形の平面オブジェクトに画像を貼り付けました。

製品画像が常にカメラの方を向くようにする

スプライトを使うと自動でカメラの方を向き続ける(点はどこから見ても同じように描画される)のですが、平面オブジェクトはカメラが動く度に向きを修正してあげる必要があります。

一見手間がかかりそうに思えますが、jThreeを使うと3行で処理できます。

jThree.update( function() {
    jThree( ".kaoObj" ).lookAt( jThree( "camera" ).position() );
} );

※このままだと常に計算し続けるので実際には、「カメラが動いている間だけ」上記の処理が行われるようにしています。もちろんオブジェクトは変数で管理してます。

クリックに対応させる

GOMLで生成した平面オブジェクトは、jQueryと同じ方法でクリックイベントを定義できます。

jThree( “.kaoObj” ).click( function() {
    //ここにクリック時の処理を書く
} );

マウスオーバーに対応させる

マウスオーバー(CSSでいうhoverですね)イベントはjThreeでサポートしていないので、きゃん家!のためだけにプラグインを0から作りました。

マウスオーバーしたときに、canvasタグのCSSを操作することでカーソルをポインターに切り替えています。

//kaoObjクラスを持つ3Dオブジェクトにマウスオーバーイベントを付加します
new Hover().add( ".kaoObj", function() {
    //マウスが乗ったときの処理
    $( "canvas" ).css( “cursor”, "pointer" );
}, function() {
    //マウスが外れた時の処理
    $( "canvas" ).css( “cursor”, "default" ); 
} );

このプラグインは応用が効かない仕様で、今のところ公開する予定はありません。興味がある方は8/31までにきゃん家!のソースコードからHover.jsをご参照ください。

花王製品をコレクションする

コレクション機能は後付けです。3Dきゃんちが製品を紹介してくれるだけではつまらないと思い、宝探しのようなゲーム要素を追加しました。しかし、「20個全部見つけるのは難しすぎる」という意見もありました。

製品リストはHTMLで構築しました。開閉時のスライドアニメーションには、CSS3のtransitionを使いました。20個集まったら製品紹介と同様の方法で、きゃんちさんの特別メッセージを音声で再生します。

コンテストの結果報告

花王賞だけでなく「優勝も!」という野望を抱きつつ、迎えた7/26の表彰式。きゃん家!の結果は、残念ながら無冠でした。花王のご担当者の方に感想や理由を聞いてみたところ、「ほかで賞を獲りそうだったから」といった優しい答えをいただきましたが(笑)。

花王賞を受賞したのは「KaoCam」という作品です。カメラ機能を駆使して花王製品をわかりやすく紹介しています。素晴らしいですね。(作品は非公開のようです)

  • 最優秀賞はじめ、各授賞作品はこちらで公開されています。

まとめ

全3回にわたって「きゃん家!」を解説してきました。厳しいスケジュールではありましたが、素晴らしいチームのおかげで無事作品として形にすることができました。

入賞できなかったのは残念ですが、上位4作のうち3作品がWebGLを駆使していたことは、時代の変化を象徴しているようです。

ちなみにjThreeを使った別の作品で優秀賞をいただきました。

これまで一部のプログラマーしか扱えなかったWebGLが、jThreeの登場でデザイナーや素人でも、思い通りのコンテンツを作れるようになりつつあります。これは今まで「技術力勝負」だった3DCGが「アイディア勝負」の世界になったことを意味しています。

軽量なデータでも、ユーザーを楽しませられるユニークなコンテンツがあふれる未来に期待しながら、これからもjThreeの開発を続けていきます。

寄稿者プロフィール jThree合同会社 松田 光秀氏
松田 光秀氏jQueryの記法で操作できるWebGLライブラリ「jThree」の開発者でjThree合同会社の代表。JavaScriptのスキルのみで平成26年2月に1人で起業する。平成元年生まれの24歳で現役高校生(平成26年5月時点)。

Twitter: 松田光秀

<<関連レポート>>

松田光秀さんからJavaScript問題が出題中!

今回記事を書いてくれたjThreeの松田光秀さんから、JavaScript問題を出題していただきました。
ぜひチャレンジしてくださいね!

受付締切:2014年8月18日 AM10:00まで
挑戦はこちらから

自分の書いたコードを誰かに評価されたいエンジニアは、けっこう多い?

ITエンジニアのための実務スキル評価サービス『CodeIQ』で出題されている「コード銀行」問題に挑戦すると、あなたのコードが評価されます。

評価(1)出題者からの評価  ⇒評価フィードバック例を見る

  • 企業ではたらくという観点からあなたのコードをチェックします
  • フィードバックされた観点をふまえてコードを書くと世の中の企業にとって「いいコード」が書けるようになります

評価(2)企業からの評価  ⇒評価フィードバック例を見る

  • 「あなたと一緒にはたらきたい」という企業からスカウトが届きます
  • あなたのコードが社会でどこまで通用するか、リアルな評価が得られます

興味を持った方はこちらからチャレンジを!

  • 4
  • このエントリーをはてなブックマークに追加

■関連記事

ブラウザ戦争、HTML5の標準化、ブラウザの未来──歴史を語り尽くすWebブラウザ談義【後編】... 「ブラウザ戦争」とは何だったのか Webブラウザの歴史を辿ると、歴代のブラウザが、技術的にもビジネス的にも激しい覇権競争を繰り広げたことが、結果としてWebの普及を促したことがわかる。 94年12月にリリースされた Netscape Navigatorは順調にバージョンを重ねるが、これに対抗して...
インターネットとWebの誕生が、いつか知ってる?──歴史を語り尽くすWebブラウザ談義【前編】... 今あらためてWebブラウザの歴史を辿る意味 Webブラウザはたかだか四半世紀の歴史とはいえ、世界を変えたこの25年はあまりにも劇的で、細かい歴史は忘れられていることも多い。 しかし、Webブラウザの歴史をたどることで、インターネット技術がどのように発展してきたのか、そしてこれからはどのようにそれ...
Azureで仮想マシンを作り、リモートデスクトップ接続で『Visual Studio』を使ってみよう... AzureならインストールすることなくVisual Studioが使える!? 現在、CodeIQで展開されているキャンペーン問題、日本マイクロソフト・エバンジェリストである物江修さんが出題する「HTML5+JSで落ちものゲームを作ってみよう」と、同じくエバンジェリストの高橋忍さんが出題する「きゃん...
HTML5、C#を使ったスマートフォン・タブレット向けアプリ開発を基礎から学ぼう!... 中学1年生になったシュン君とゲームアプリ問題に挑戦! タブレットやスマートフォンのエンタープライズ環境への導入が増えているとはいえ、そのような端末向けのアプリケーション開発に携わっているITエンジニアはまだまだ少ない。 今回のキャンペーン問題は、「HTML5/JavaScript」と「XAML/...
【アニメ用語続出】喜屋武ちあき、マイクロソフトでエバンジェリストと「Visual Studio」を学... エバンジェリストって何? きゃんち:お二人ともエバンジェリストという肩書きとなっていますが、これはどういうお仕事をする人ですか? 砂金:エバンジェリストという職種を説明する前に、まずは自己紹介から。勝手な思い込みなんだけど、僕はシャアの前世だと思っているんです。 ▲日本マイクロソフト株式会社 ...
「Webこそがゲーム・プラットフォームである」──Mozilla開発者が語るWebブラウザ戦略 vo... Webこそがプラットフォームである──Mozillaが描くゲーム流通戦略 ──WebGLを活用して、Mozillaのゲーム・プラットフォームチームは、どのようなビジネスを展開しようとしているのでしょうか? Martin Best氏(以下、Best):前回も指摘したように、Webはゲーム開発の重要...

今週のPickUPレポート

新着記事

週間ランキング

CodeIQとは

CodeIQ(コードアイキュー)とは、自分の実力を知りたいITエンジニア向けの、実務スキル評価サービスです。

CodeIQご利用にあたって
関連サイト
codeiq

リクルートグループサイトへ