いきいきと動く様子はまさに生きた絵本！ WebGL を利用したオンライン絵本 Oggy! がおもしろい
すごくシンプルで簡潔
今回ご紹介するのは、ウェブ上で見ることができるオンライン絵本、Oggy! です。
こちらの作品、そんなにボリュームが多いわけでもなく、すごくシンプルでさっと閲覧できる内容なのですが、だからといって手を抜いているとか簡素であるとか、そういう悪い意味での感覚は一切湧いてきません。
とても丁寧に作り込まれた、温かく優しい世界観を堪能してください。
リンク：
Oggy! - Illustrated and animated story for Mahé
ところどころに WebGL ならではの表現がある
今回のサイトは先にも書いたようにそこまで凝った作りではありません。
言ってしまえば、そんなに複雑なビジュアルをバキバキの CG として描画しているタイプではないので、たぶん、WebGL がなくても似たものを作るのは難しくないかもしれません。
それでも、やっぱり WebGL だからこそのヌルヌル感が随所に感じられ、すごく生き生きとした雰囲気が表現されています。
たとえば序盤に登場する食事のシーン。
ここでは、いたずら好きの子供が食べ物を部屋中にばら撒いてしまうような場面があります。
飛び散った食べ物がスプライトとして表現されていて、すごく躍動感のある雰囲気を演出しています。
イラストの味付けが優しいというのもあるのでしょうが、アニメーションも機敏すぎないポップな味付けになっていて、とっても優しい世界観です。
その他、これはスクリーンショットを撮るのが難しかったのでキャプチャしていないですが、シーン遷移のアニメーションもすごく凝っていますね。
こういう優しくも柔らかいトランジションエフェクトがあるからこそ、サイトの雰囲気がより一層質感高く見えるのだと思います。
語られる内容はいわゆる児童書というか、子供向けの絵本という感じではあるのですが、大人が見ていてもすごく楽しい気持ちになれるコンテンツだと思います。
WebGL を使えば、クールでバキバキのサイバーパンクな世界を描くことも、まるで本物のようなリアルな流体を表現することも、簡単かどうかは別として実現できてしまいます。
一方で、今回のサイトのようなコンテンツであっても、WebGL 特有の滑らかな描画処理がユーザーの体験に与えてくれる恩恵はやっぱりけして小さくないんだなということが、すごく如実に感じられるウェブサイトだと思いました。
超絶技巧の CG とはまた違った良さを感じることができます。
ぜひチェックしてみてください。
