オリジナルデザインのドクロが作れる!? ハロウィーンに合わせて公開されたおもしろ WebGL ツール!
ハロウィーンの時期過ぎちゃったけど……
今回ご紹介するのは、ハロウィーンの時期に公開された面白いツールで、オリジナルの頭蓋骨をデザインできるというもの。
ハロウィーンの季節に紹介しようと思っていてすっかり忘れていました(笑)
WebGL の実装としては動作も軽快で、細かいところまでかなり作りこまれています。これは一朝一夕で作れるデモではないですね。かなりスキルのある方が作っているのだということが、コンテンツを見ているとわかります。
非常に完成度が高いので、ちょっと時期は過ぎてしまいましたがご紹介しようと思います。
ツールの制御インタフェースが見事
今回のサイトは、画面の中央にデフォルメされた可愛らしい雰囲気の頭蓋骨ドクロが置かれており、これに自由にシールを貼るような感じで加工を行うことができるようになっています。
便宜上、ここではシールという言い方をしていますが(なんかもっと適切な言い方がありそうな気がする)結構いろんな種類があり、またそれを貼り付けるためのインターフェースが非常に良く出来ていて、見れば見るほど感心させられます。
表面的には、まず第一にサイト全体の、そのデザインの可愛らしさが目を引きます。ロード中の画面も非常に楽しげな雰囲気が伝わってきますね。
ロードが完了すると自動的にドクロの加工画面にへと移行します。
ここではマウスでのドラッグ操作やクリック操作、ホイール操作などでドクロへの加工作業を行っていきます。
ドラッグ操作では、ドクロモデルを回転させることができます。また、ホイール操作ではズームイン・ズームアウトが可能です。このあたりは非常に直感的ですね。クリックする操作は、シールをドクロへ貼り付ける作業に使います。
画面の中央、ちょうどドクロの額あたりにあるのが、ドクロに貼り付けることができるシールです。
このシールのデザインは非常に多くて、画面の下の方に並んでいる Art と書かれたボタンからも一覧表示から洗濯することが可能です。
自分の好みに合ったデザインのものを探してシールを選んだら、ちょうどシールの上のあたりにカーソルを持っていってクリック操作すると、ドクロに貼り付けられます。
実際には、一枚のシールが貼りつくというより、投影に近い感じですかね。
ドクロそのものを色変更することもできます。
シール操作用のインターフェースを活用すれば、シールの傾き方を変化させたり、あるいはその大きさを変化させたりすることが可能です。
また、シールのそばにあるボタンを押すなどして設定を変えれば、ドクロのちょうど中心部分を線対称として、左右に鏡に映したようにシールを貼り付けることもできます。
リーフのマークを使ったのになんかキモい感じになってしまったの図。
デザインの可愛らしさとは裏腹に、その操作の軽快さやシール貼り付けのインターフェースの完成度の高さ、さらにはテクスチャを投影して貼り付けるという変則的なグラフィックス処理など、かなりハイレベルなデモだと言えるのではないでしょうか。
しかしどうしてハロウィーンの時期にちゃんと紹介しなかったのか……悔やまれます……
とても素晴らしいサイトなので、ぜひみなさんもご覧になってみてください。