枠線を描画することでポップでかわいらしいトゥーンレンダリングを行った Planetoño がおもしろい
破綻のない 3D 表現
今回ご紹介するのは Planetoño というウェブサイトです。
こちらのサイト、たぶん何か特定の製品やサービスの販促というものではなく、Tubik Studio というクリエイティブスタジオが公開しているデモサイトなのかなと思います。
いわゆるトゥーンレンダリングで 3D シーンが描画されるのですが、破綻無く描かれるしっかりとした 3DCG ですごくおもしろいです。
リンク：
いわゆる裏返し黒塗りエッジではなさそう
古典的な CG でトゥーンレンダリング的なことをやる場合、大きく２つ、実装しなければならない部分があると思います。
１つは、ライティングの結果生じる明暗をグラデーションさせるのではなく、アニメの塗りのようにしっかり塗り分けされるようにすること。
そしてもう１つが、エッジの描画です。
エッジとは、枠線と言い換えてもいいかもしれません。
スクリーンショットではちょっとわかりにくいかもしれませんが、3D シーンにまるでペンでなぞったような枠線がしっかりと描かれています。
エッジを描画する方法にはいろいろな手法があるのですが、古典的なやり方では「オブジェクトを裏返して黒塗りにする」というやり方があります。ほんの少しオブジェクトを拡張して広げてやり、裏返して黒く塗ることでわずかにはみ出してきた部分がエッジのように見えるというやり方ですね。
しかし今回のサイトでは、この裏返し黒塗りのやり方では描画できない線がしっかりと描かれていて、すごく質感のいいトゥーンレンダリングを実現しています。
まるで、本当にコミックスのひとコマを抜き出したような見事なエッジラインの描画になっており、すごく自然です。サイト全体のスタイリングのトーンにもマッチしていて違和感がありません。
CG に詳しくないひとにはなにがすごいのか全然伝わらないかもしれませんね……
もし WebGL の知識や経験がある実装者さん・開発者さんなら、どうやってこれと同じことを実現するか考えてみるのも楽しいかもしれません。
スクロールに連動したアニメーションも、シンプルながらポップな雰囲気でとても楽しいです。
いわゆるトゥーンレンダリングって、ある程度手法が確立していますし実は結構古典的な枯れた技術です。とは言えやっぱりそこには品質の高低みたいなものはあって、今回の例はすごく完成度が高いように感じます。
もちろん、最新鋭のゲーム作品などに見られるようなクオリティと肩を並べるとまではいいませんけれども、すごく質感がよくて見ていて楽しいウェブサイトだと思います。
ぜひチェックしてみてください。
