
質感高く表現された透明感と不思議な透過エフェクトがおもしろい La Revoltosa のウェブサイト
すごく凝っていてすごい(語彙力)
今回ご紹介するのは、たぶんスペインの製品だと思うのですが La Revoltosa という炭酸飲料のウェブサイトです。
これもたぶんなのですが、お酒に関連する製品…… なのでしょうか。もしかしたらお酒を割るための炭酸、みたいなかんじなのかもしれません。
とにかく炭酸のバブルを想起させる演出がやや過剰なくらいに取り入れられていて、きっとそれが製品の売りというか代名詞みたいなかんじなのでしょうね。
リンク:
La Revoltosa | La burbuja Ibérica
透過の表現がおもしろい
今回のサイトでは、時には瓶詰め、時にはペットボトルの、飲料の 3D モデルがたくさん登場します。
それらに加えて、泡が絶えずサイト上では登場しており、下から上にバブルが昇っていく様子が演出されています。
サイト内で透明な瓶が文字の上に重なるような瞬間が何度かあるのですが、このときの透過処理が非常におもしろいですね。

いわゆるガウシアンフィルタのようなボカしとは違って、VSM シャドウっぽい、と言ったらいいんですかね……
何度か透明度を上げたシルエットを重ねて描画したような、独特な質感をしています。
こういう表現はあまり見たことがなく、手法として非常におもしろいなと感じました。スクリーンショットではちょっとわかりにくいと思うので、ぜひ実物を見てみてほしいところです。

また、透明な瓶の後ろに文字が見えるシーンだけでなく、たくさん登場する 3D モデルとその透明な質感が非常によいです。
WebGL の事例にはこういった瓶やペットボトルの製品を表現したものはこれまでに多くありましたが、なかなかレベルが高いほうに分類される事例だと個人的には感じます。
特に瓶の場合、その表面の微妙な凹凸などもしっかり表現されていて見事だなと思いました。

WebGL を使っていない場面でも、写真の背景部分にだけホバーエフェクトが掛かる(?)という不思議な表現があったりして、本当にいろんな意味で見どころが多いウェブサイトとなっています。
透明な質感って、現実世界では当たり前のように起こりますが CG で再現しようとすると難しいものの代表格だと思います。
今回のケースではいろんなテクニックを駆使して製品の特徴を上手に表現しており、手が込んでいます。
ぜひチェックしてみてください。