世界最大規模のロードレース、ツール・ド・フランスの栄光の黄色いジャージをテーマにしたウェブサイト

doxas : 2018-08-08 13:58:03

著名な有力選手をポリゴンで表現

今回ご紹介するのは、自転車のロードレースとしては世界最大規模を誇る、ツール・ド・フランスに関連したサイトです。

私はあまり自転車のロードレースについてはよく知らないのですが、ツール・ド・フランスでは、チャンピオンカラーとして栄光の黄色いジャージというものが用意されていて、ステージ内での総合トップの選手のみがそれに袖を通すことを許されるのだそうです。

それを着ることができた、というだけでも大変な栄誉なのだそうですが、今回のサイトではそんなイエロージャージを身に着けた経験のある有力選手たちを見ることができます。

パーティクルのように分解されるジオメトリ

今回のサイトは背景はもとより、登場するジャージ型の 3D モデルまで、黄色をテーマにした明るい印象の色合いが特徴です。

黄色はツール・ド・フランスを象徴する色ということもあり、もしも自転車レースに興味のある方であれば、なにを今さらと思うような話なのかもしれません。

そんな黄色いジャージが今回のサイトではたびたび登場するのですが、シーンによっては、そのジャージモデルにカーソルを合わせると、ポリゴンが分割されて崩れるような演出を見ることができます。

そして、このポリゴンが分割されて崩れたような演出は、そのままパーティクルによるダイナミックな変形演出へと繋がります。

マウスカーソルをホバーさせているだけだと、ふわっとモデル全体のシルエットが崩れるような感じなのですが、これをクリックするとまるで爆発したかのようにポリゴンたちが飛び散ります。

そのまま、今度は逆に収束してくるような動きになるのですが、ここで別のモデル(選手の顔のモデル)に変更するようになっていまて、かなり迫力のあるモデルチェンジが行われます。

カーソルを合わせたときにポリゴンが分離してしまうような演出は、選手の顔のモデルの場合でも同様に行われるようになっていて、カーソルの動きに連動したインタラクティブな演出としてサイト内で上手に利用されています。

ちょっとだけ技術的な話をすると、今回のサイトに見られるようなポリゴンの分割される演出を行うためには、それぞれのポリゴンが独立した頂点を持っている必要があります。

一般的な 3D モデルであれば、頂点を共有して複数のポリゴンを定義できるほうが(要は頂点の数が少ないほうが)いい場合が多いと思いますが、今回のサイトに見られるような、ポリゴンひとつひとつを個別に制御するような処理を行う場合はモデルデータの準備にも一工夫必要になると思います。

そのあたりも考えると、用意されている 3D モデルの種類が多く、またどれもリアルな人物の表情を感じさせるような仕上がりになっており、とても見事だなと思いました。

ツール・ド・フランスというキーワードは聞いたことがあっても、自転車のロードレースそのものについて詳しい人でないと、栄光の黄色いユニフォームの話は意外と知らないのではないかなと思います。

私自身も今回のサイトについて調べていてはじめて知ったのですが、こうして大会を象徴するようなカラーがあり、それをうまく活用したサイトづくりがされているというのは、なんとも興味深いです。

比較的シンプルな演出が中心ですが、とても見事な 3D モデルと、それらのトランジション演出が面白いサイトとなっています。

ぜひチェックしてみてください。

リンク:

Toujours Jaune!

share

follow us in feedly

search

search

sponsor

social