ペーパークラフトのような世界観を 3D で表現したウェブサイト！ チュートリアル動画やソースコードも公開中
最近こういうの多い気がする
今回ご紹介するのは、Aimee Wei's Papercraft World という WebGL の 3D 作品です。
クレジットを見ると、そこには GitHub のリンクと YouTube チュートリアルのリンクがあり、どうやらこれはチュートリアル用に作られたコンテンツが公開されている形みたいです。
最近こういうの増えたなと感じるのですが、日本人でも同様の活動をされている方とかいらっしゃるんですかね…… ちょっと気になります。
リンク：
春夏秋冬を表現
今回のサイトは、最終的な出力が WebGL を用いたウェブコンテンツとなっていますが、制作は Blender などのツールを駆使して行われています。
また GitHub の Readme を見るとたくさんのリンクがあり、今回のサイトを制作するための関連情報は広く公開されている形になっています。
ここでは実際に公開されているウェブコンテンツとしての面にフォーカスして紹介します。
3D シーンは円柱形のステージを内側から見ているような感じ、といったらいいでしょうか。
シーン内は直角に区切られた４つのエリアからなり、それぞれが春夏秋冬の各季節に割り当てられているような状態です。
基本的に閲覧者ができることはスクロール操作や、カーソルを動かすことによる視点移動、また画面の下に配置されているスライダーを操作することによるズーム操作など、ある程度限られたインターフェースのみが提供されています。
クリッカブルな要素は、わたしが見た限りでは実装されていなさそうでした。
こういうチュートリアル系のコンテンツでは、ペーパークラフト風なコンテンツが採用されていることが多いように感じるのですが、それはやっぱりフォトリアルな質感を表現しやすいからなんでしょうか。
CG 的な用語になっちゃいますが、今回の例のようにあらかじめ陰影をベイクできることが前提であれば、すごくフォトリアルな質感って再現しやすいんですよね。
そういう意味で、ペーパークラフト風っていうのはこういった取り組みと相性がいいのかもしれません。
完全に想像ですが、もととなる 3D シーンのモデルデータがあれば、誰でも比較的簡単にこういった WebGL コンテンツを作ることは可能だと思います。
なのである意味では 3D モデルのデータを用意する部分、こそが一番労力を伴う場面なのかもしれませんね。
ペーパークラフトの素材というか、その造形というのでしょうか、見た目がすごく可愛らしくてそのあたりも個人のセンスや技量が問われる部分なのかもしれません。
ぜひチェックしてみてください。
