いま,見ておきたいウェブサイト

第104回 POP-UP! TYO | UT 2013,Chrome World Wide Maze,Flat Surface Shader

この記事を読むのに必要な時間:およそ 2 分

ウェブサイトは迷路になる

Chrome World Wide Maze

PCと同期接続したモバイル端末を使い,ウェブサイトを立体迷路にして遊ぶゲーム,⁠Chrome World Wide Maze』です。

図4 ウェブサイトを立体迷路にして楽しめる『Chrome World Wide Maze』

図4 ウェブサイトを立体迷路にして楽しめる『Chrome World Wide Maze』

credits:PARTYAID-DCC Inc.Futurek inc.

ユーザーは,まずGoogle Chromeのタブ同期機能を利用して,PCとスマートフォンを同期させます。その後,キーワードを検索して任意のウェブサイトへとアクセスすると,ウェブサイトが3Dの立体的な迷路へと再構築されていきます。

図5 ウェブサイトが分解されながら,立体的な迷路へと変化する

図5 ウェブサイトが分解されながら,立体的な迷路へと変化する

PCと同期したモバイル端末でボールを操作しながら,ユーザーは時間内にゴールすることを目指します(キーボードを使い,PCのみでプレイすることも可能⁠⁠。ゲームは立体的なステージで行われ,コースのショートカットも可能なジャンプや,ゴールタイムと獲得アイテムの数に応じて獲得できるポイントによるランキングシステムも用意されています。

図6 立体的な迷路でボールを操作して,ゴールを目指す

図6 立体的な迷路でボールを操作して,ゴールを目指す

「PCとモバイル端末の同期」は,トレンドとなるか

『Chrome World Wide Maze』のPCをメイン画面とし,モバイル端末をコントローラーとして利用するという仕組みは,前回紹介したSuper Sync Sportsと同様の技術が使われています。

ただし,ゲーム数が3つだけだった『Super Sync Sports』とは異なり,⁠Chrome World Wide Maze』では,ウェブサイトから迷路を自動的に生成することで,ほぼ無限のコースをプレイヤーが楽しめることや,スタートからゴールまでが必ず用意された立体的なコースが生成されるという点など,ゲームの内容はかなりレベルアップしたものとなっています。

『Chrome World Wide Maze』を紹介した動画

Googleは今年に入り,"PCとモバイル端末の同期を活用したコンテンツ"を積極的に公開しています。こうしたモバイル端末を活用したコンテンツがGoogle以外からどの程度登場するのか,また今年のトレンドとなるような広がりを見せるのかを,今後も興味を持って注視したいと思います。

3Dよりも素晴らしいもの

Flat Surface Shader

JavaScriptで書かれた,軽量のシェーダ技術(光源計算と陰影処理などを実行して,色などを次々に変化させるための技術)をフィーチャーしたウェブサイト,⁠Flat Surface Shader』です。

図7 JavaScriptで書かれた『Flat Surface Shader』

図7 JavaScriptで書かれた『Flat Surface Shader』

credits:Matthew WagerfieldTobias van Schneider

"Admit it, 3D is cool. But, you know what's cooler? 2D.(3Dは素晴らしい。だが,もっと素晴らしいものを知ってるかい。 そう,2Dだ。)"というメッセージが印象的なウェブサイトでは,光源によって照らされた三角形をレンダリングする「Flat Surface Shader」のデモが体験できます。

図8 右上のパネルにあるパラメータを変更することで,さまざまな変化を見せる

図8 右上のパネルにあるパラメータを変更することで,さまざまな変化を見せる

現在「WebGL」⁠Canvas 2D」⁠SVG」をサポートしており,画面右上のパネルにある,色や動きに関連した各種パラメータを変更することで,さまざまな表情のグラフィックが表現できるようになっています。

感性を刺激する"デモ"

技術をわかりやすく解説するのは難しいことです。難しい用語や数式が並べば,それだけで理解することを諦める人も少なくないでしょう。そのため,技術を説明するデモを制作するなら,⁠誰もが理解できるよう,わかりやすく伝える」ことを念頭に置き,単純な例を用意しようとするのが一般的です。さらに複数の例や導入が可能なサンプルも用意すれば,より幅広いユーザーに技術の詳細や利用法を伝えられると考えるでしょう。

この『Flat Surface Shader』ではシェーダ技術を紹介していますが,上記のような考えとは異なるコンセプトで,デモが制作されています。細かい機能の説明・解説は用意されていませんし(github上には詳細な導入方法が記載されている⁠⁠,ウェブサイトには,ただメッセージと各種パラメーターが変更できるパネルが表示されているだけです。

こうした表現から受け取れるメッセージは,⁠Flat Surface Shader』「デモ」ではなく,技術を通して,ユーザーを刺激する「作品」であるということではないでしょうか。見て楽しむだけではなく,パラメータを操作して制作したイメージが書き出せ,ユーザーが何かを生み出せるようになっている点も,それを証明しているでしょう。

一見,単なる美しいデモと思わせながら,実際に動かすことでユーザーの感性を刺激し,新たな創造性を生み出しているこのウェブサイト。今後も,新しい技術が登場してくるたびに登場するデモの考え方を,改めて考えさせてくれる良い事例となりそうです。

というわけで,今回も最後まで読んでいただき,ありがとうございました。それでは次回をおたのしみに。

著者プロフィール

Lançamento(ランサメント)

国内外のウェブサイトを日々紹介する Blog『Lançamento』を運営する,自称“フリーランスという名の無職”。目指すは“エクスペリエンスデザイナー”(O'REILLY『Web情報アーキテクチャ』11ページ参照)。2008年の“ジェフの奇跡的な残留”を目の前で見たサッカー好き。