それはまるで質量を持った幻のよう……魅惑的な美しさに満ちた写真家・渡邉肇さんのウェブサイト

doxas : 2017-11-24 14:08:23

思わず見とれる美しさ

今回ご紹介するのは国内の事例です。

以前にも、非常に美しい WebGL 事例をいくつも発表している株式会社バケモノさんが制作したウェブサイトで、写真家である渡邉肇さんのサイトです。

実装を担当したのは @takaaki_sugar さん。以前にも、素晴らしい WebGL 事例で驚かされたことがあるのですが、今回も非常に素晴らしい出来栄えになっています。写真家さんのサイトだけに、ビジュアルに対する並々ならぬこだわりの感じられるサイトになっていますね。

今回はなんと、実装を担当した @takaaki_sugar さんから今回のサイトを実装する上で気をつけたことや工夫したこと、盛り込んだこだわりなどについて ものすごく熱い詳細 をうかがうことができましたので、それらも併せてご紹介しようと思います。

まるで写真展を訪れているかのような気持ちになれる

今回のサイトは、写真家さんのサイトということで、細かな実績の部分については静止画で表示されるようになっています。実際にご覧になってみていただければすぐにわかることではあるのですが、その写真のクオリティや掲載されている件数がものすごいです。

WebGL を使った演出は、あくまでもそれらの作品を「より美しく際立たせる」ためのものであるように私には思えました。

ここでは当サイトの性質上、WebGL の実装部分にフォーカスして紹介しますが、ぜひサイト内に掲載されている写真についても、実際にサイトに行ってご覧いただけたらなと思います。

たぶん、街中とか、あるいは雑誌などで、一度や二度は絶対に目にしている写真があると思います。

さて、トップページ部分からいきなり美しいビジュアルが目に飛び込んでくるのですが、まるで水面がゆっくりと揺れ動くような、シェーダによる揺らぎ表現が非常に美しいです。

この記事のタイトルに「まるで質量を持った幻のよう」と付けたのですが、個人的には本当にそのまま言葉通りの印象を受けました。

サラサラと流れる水というよりは、なんというかリキッドっぽい感じの、ゆったりとした揺らぎがなんとも心地よいです。

写真が切り替わるときだけ、波紋が広がるように大きく揺れる様子も見ていて面白いですね。

そして、それぞれのカテゴリごとに分けられたコンテンツ部分では、背景と同じテーマの別の画像を、ラベルのように浮かせたインターフェースが用意されています。

「Beauty」などのそれぞれのカテゴリをクリックなどで選択してやると、それらの詳細ページに移動し、そこでは写真家・渡邉肇さんのこれまで手掛けてきた多くの事例を見ることができます。

作品が表示される詳細ページに移動する際には、ラベルのように宙に浮かんでいたオブジェクトが、波紋模様のような感じに変形するエフェクトが用いられていて、ひとつひとつの動きに手が込んでいます。

写真作品が掲載されているページでは、あえてだと思いますが WebGL の特殊なエフェクトが前面に出てくる感じではなくなります。

写真家の作品に閲覧者の気持ちをしっかりと向けさせる、そんな構成になっていることが感じられました。

さて、ここからは実装者の @takaaki_sugar さんからいただいた、今回のサイトに込めた様々な思いをご紹介していきます。

ちょっと長いのですが、細かく見ていくと「プロとしての異常なまでの作り込み」を感じられると思います。

ビジュアルだけでなくクライアントの使い勝手にも考慮

ポートフォリオサイトですので、クライアントが更新したいときに更新ができないと意味がありません。そこで今回は、バックエンド側にも独自の CMS を組み込んであります。

また、クライアントは写真家さんということでしたので、テクスチャのトリミングも CMS 上で GUI で対応できるようになっています。

この話を聞いたときはちょっと耳を疑ったのですが、今回のサイトはバックエンドまで全部自前で作ったみたいですね……しかも CMS を今回のサイトのためだけの専用のものとして実装して一式納品するとか、にわかには信じがたい話です。

写真家さんのサイトということを踏まえてトリミング機能などの GUI を用意した独自 CMS を用いており、前述の「ラベルのような 3D オブジェクト」が、クライアント自身が CMS 上で操作を行うだけで、ノンコーディングで自由に増やせるようになってるのだそうです。

半端じゃねえなｗ

モバイル端末も考慮した実装の工夫

なるべく多くの人が閲覧できるようにパフォーマンス面は工夫している箇所が多いです。シェーダー側では事前計算できる部分はあらかじめしておいて、PCとスマホでは若干値を変えて負荷軽減を目指しています。

また、カテゴリのサムネイルスライダーは、マウスを画面の中央に近づけるとエフェクトが徐々に消えて画像をはっきり見せるようにしています、逆に中央から遠ざけるとエフェクトが徐々にかかっていきます。スマホでは画面の傾きがそのパラメータにアサインされるようになっており、ジャイロセンサーの値に応じてビューに変化が出るようになっています。

そしてテクスチャに利用する画像に関しては、サブカテゴリに進んだ際にテクスチャのリストを全て動的に差し替えるような処理を用いており、複数のテクスチャリストで描画できるようになっています。初回で使うテクスチャを全て読んでしまうと重たくなってしまいますので、必要なときに読み込むように実装しました。

実は今回のこの実装の裏話、文章でリストをいただく前に口頭でも少し話を聞いていたのですが、そのなかに「PC の場合は……」とか「スマートフォンの場合だと……」みたいな言葉が頻繁に出てきていました。

ウェブサイトの制作は、今では複数のデバイスで正しく表示できることがもはや当たり前の世界かなとは思いますが、今回の実装ではそれをさらに一歩踏み込んで「その環境ならばこその演出方法や最適化」がなされているのだなと感じられます。

もうこういうところは、実装者の自己満足だと言われればそれまでなのかもしれないですけれども、ぜひ見習いたいところです。

WebGL 描画やパフォーマンスへのこだわり

トップページは初期ロードに関してはランダムに、そして以降は一定時間でテクスチャが変化するようにしています。中ページに進む際には、決まったスクロール位置に定形で開始位置を設定するのではなく、前述のトップページに「その瞬間に表示されていたテクスチャ」と同じ場所から、しっかりとリンクした状態で中ページが同期して表示されるようにしています。

このようなページ移動の際にはテクスチャの UV 座標を操作して視差の演出を施すなど、動きにもこだわって実装しました。

また、全体的なパフォーマンスの向上にも気を配り、たとえば画像の一覧を表示させるページ部分では、あるアルゴリズムに則ってレイアウトを自動で行っているのですが、この処理が非常に重たいため、普通に処理を走らせてしまうと描画を中断してレイアウトの計算をしてしまってカクついてしまっていました。

そこで requestIdleCallback という API を用いて他の js 処理の隙間時間でレイアウト関連処理を行うようにし、パフォーマンスを改善しました。

今回のサイトはまず見た目の印象がすごくいいので、当然負荷も高いものになっているのではと想像できます。

しかし実際にサイトを見てみると、その外見ほどの負荷を感じる部分は意外にも少ないのですよね。そのあたりは、こういった見えない部分のたゆまぬ努力によって実現されているのでしょうね。

テクスチャの読み込みを必要なタイミングで行うようにする、という話題が先ほど出ていましたが、今回は足回りに使っている three.js に関しても、必要な部分だけをモジュール単位で個別にインポートしているそうで、本当に細かい部分までしっかりと考えて作られているようです。