絵画作品を印象的に見せるための WebGL 表現がおもしろい Giannantonio De Maldè さんのポートフォリオ
絵画作品のための 3D 表現
今回ご紹介するのは、Giannantonio De Maldè さんというアーティストの方のポートフォリオサイトです。
おそらく絵画を専門とされているアーティストの方なのかなと思うのですが、今回のサイト上ではそれらの絵画作品が WebGL によって印象的に演出されています。
あまり派手な感じでもなく、落ち着いているところがまたいいですね。
リンク：
イージングも含めて質感
今回のサイトの WebGL 実装は、派手という感じこそありませんが技工としてはなかなか凝った作りです。
まずサイトがロードされてイントロ演出が始まる段階では、いくつかの絵画作品がくるくると回りながら、まるでプロペラや扇風機の羽のように動きます。
そしてその回転から今度はシームレスに繋がるように、スッと動いて画面の構成要素として平面的にページに配置されます。
言葉で書くとなんだか変な感じですが、立体的な状態から平面的な状態へと、スムーズに変化していくような動きがあります。
この上のスクリーンショットを見ても、まるで普通に画像が配置されているだけのようにも見えますよね。
ただ実際には、平面の画像に見える部分も WebGL で描画されています。
Bio と書かれたリンクをクリックした際など、ページ遷移を伴う場面ではそのことがよりわかりやすくなりますね。ノイズを使ったトランジションエフェクトが発生するためです。
その他、下層ページや Bio のページ（About ページ）でも WebGL は使われていて、見た目のシンプルさとは裏腹にかなり凝った WebGL 実装だと思います。
画像をあえて WebGL で描画しているのは、立体的に見せたい箇所があるからということももちろんあるんでしょうけれども、エフェクトや変形といった演出的な要因も多分にあったのだと思います。
個別の作品をじっくり観察できるようなセクションもあり、本当に隅々まで丁寧に作り込まれています。
ド派手なシェーダによるエフェクトなどがあるわけでもなく、複雑な影が落ちるようなシェーディングがなされているわけでもなく、ただテクスチャをポリゴンに貼り付けただけのメッシュでいろいろな見せ方がなされており、そういう意味でもおもしろい事例だと思います。
サイト全体のイージングの味付けや色彩としてのトーンなど、根底にしっかりとした意思というか意図みたいなものがあるような感じがして、WebGL 実装がそれを邪魔することなく下支えしている感じがすごいなと個人的には感じました。
ぜひチェックしてみてください。
