あまり見かけない画角の変化を利用した演出がおもしろい Progressors のウェブサイト

doxas : 2024-12-18 12:30:04

どういうサービスなのかいまいちわからない……

今回ご紹介するのは Progressors というサービスのウェブサイトです。

この Progressors というサービス、ウェブサイトを見た感じは Android アプリが存在するような感じで書かれているのですが、実際なにをどうしてくれるアプリなのかイマイチわかりません。

日本ではサービスを展開していないようですが、アプリ自体は実在するようで、どうやら支払いを一箇所に統合して管理できるとか、そういう系統っぽいですね。

WebGL 実装としてはちょっとおもしろい表現があったので、ご紹介します。

今回のサイトは、サイトの冒頭で 3D シーンが出てきてそれがなかなか個性的な雰囲気を持っています。

サイバーパンクな世界観を想起させるきらびやかな街の様子はなかなか美しく、その周辺に浮遊しているオブジェクトも個性的なデザインをしています。

一見すると各オブジェクトはスプライトっぽい感じもするのですが、どうやら立体的な構造を持ったオブジェクトみたいです。

浮遊している各種オブジェクトにはそれぞれに個別に光源が用意されているみたいで、背後に見える街の姿に溶け込んでしまわないように、あえて光を当てて浮かび上がって見えるようにしているのかもしれません。

スクロールしていくとオブジェクトの位置やカメラの位置が動いていくのですが、徐々に街の景観がカメラに近い位置へと移動してきます。

さらにスクロールを続けていくと、今度は街の真上から見下ろすような視点になるのですが、ここからがちょっとおもしろい演出になっています。

これ静止画で見てもぜんぜん伝わらないと思うのですが、まるで街全体がグッと伸びてくるような感じに見える、おもしろい視覚表現になっています。

実際にビルの高さとかが変わっている部分もあるのかな～とは思いますが、もしかしたらカメラの画角を変えたりして上手に演出しているか、それらを組み合わせて演出しているのかもしれません。

映像表現という意味ではかなり古典的な手法に似たようなやり方があると思うのですが、WebGL でこういう表現を見かけることはあまりないので、すごく興味深い事例だなと思いました。

このサービスはロシア語圏で使われるアプリみたいで、日本からアクセスしようとしてもロシア語のサイトへとリダイレクトされてしまい、最初はなにか悪意あるサイトなのかなとも疑いましたが…… どうやら普通に実在するアプリの公式サイトみたいです。

WebGL の実装としては結構凝っているところがあり、冒頭のシーンで浮かんでいるオブジェクトたちの質感などもなかなか見事です。

ビルが伸びていくような演出は、実際にビルが伸びているような気がしますが画角を変化させることでも似たような演出ができるので、WebGL の実装例の１つとして参考にできそうな気がします。