ひと言にWebアニメーションと言っても、それを実現するための技術は千差万別です。そこで、現場で使われるWebアニメーション技術の特徴と実装方法を、ざっと紹介していきたいと思います。

GLSLって何?

WebGLって聞いたことありますか?
WebGL(WebGraphicsLibrary)は、ブラウザで3Dグラフィックスや2Dグラフィックスをレンダリングするための技術です。GLSL(OpenGLShadingLanguage)は、そのWebGLにも採用されている、グラフィック描画に特化したプログラミング言語になります。GLSLはGPUによって解釈されるので、JavaScriptだけでは難しい高負荷な計算処理も、難なくこなす事が出来ます。

実際にどういうものか見てみましょう。
こちらのサイトでは、プログラマーによる多くのGLSLのコードと、その結果を見ることができます。

GLSL Sandbox

サムネイルをクリックするとコードが表示されるかと思います。このコードはGLSLのフラグメントシェーダーというもので、ざっくり概略だけ説明すると、1つのドットに対して実行されるコードで、この計算式に自身の位置と、時間軸やマウス座標等を与える事で、そのドットが何色を表示するかという計算式になります。これがGLSLです。

JavaScriptや他のプログラミング言語とは、まったく違う考え方を持っているので、敷居が高い印象を持たれがちな言語ではあります。 少なくてもWebエンジニア界隈では、まだ、使いこなすエンジニアも少数かと思います。
その分、目立てると思いませんか?

Webサイトでの使われ方

難しい事はさておき、GLSLが実際のWebサイトでどのように使われているかを紹介します。

KAZ ARAHAMA

フォトグラファーKAZ ARAHAMA氏のポートフォリオサイト。three.jsライブラリのゴッドレイ効果(光が雲の間から差し込む様な表現)を使って、印象付けしています。

Converse “Diamonds”

CONVERSEの特設サイト。ムービーにGLSLの水滴や雫などのエフェクトをかけることで、ムービーの世界観をWebサイトに持ってくることに成功しています。

CRIMINAL - Official Movie Site -

映画CRIMINALのオフィシャルサイト。ローディング後のトランジションや、マウスの位置に応じてムービーにエフェクトをかけたり、ロゴにマウスを当てることで発生するエフェクトなど、細かいところまでよく作りこまれた演出となっています。

HP - Sound in Color

HPのパソコンSpectre x360の特設サイト。マイク入力からの音声をリアルタイムにGLSLを使ってWebページに反映させていくコンテンツ。マウスや音声に応じて、インタラクティブに絵の具が流れる様子は、必見です。

WE3

多くの受賞歴があるカナダ トロントの制作会社Jam3のインターン募集サイト。流体エフェクトで、Webサイトが水面に映っているような表現となっています。マウスに反応して水面が揺れます。GLSLとしてはそれだけなのですが、ずっと触っていたくなる感じです。

adidas Climazone

adidasの商品、クライマチルのサイト。過酷な環境下でも快適なスポーツウェアというコンセプトをもとに、砂漠の大気がゆらめいている風なエフェクトが印象的です。マウスオーバーしたところから、じんわり色が変わる演出も、CSSではできません。

Anagram.paris

フランスのクリエイティブエージェンシーのサイト。どこにGLSL使っているかというと、コンテンツ全部がWebGLで作られています。サイトをドラッグしてみるとわかると思います。こんな使い方もあるんですね。しかもレスポンシブです。

DESCENTE 2017 SPRING & SUMMER COLLECTION HIGHLIGHT ITEMS

DESCENTEの2017年春夏コレクションのサイトです。商品は3Dというわけではないのですが、うまいこと歪んだエフェクトがかかることによって、今にも360度回ってしまいそうな存在感を出しています。切り変わりのエフェクトもかっこいいですね。

日々これらの様なGLSLを使ったハイクオリティーなサイトが現れています。なんだこれは!?と思ったら、GLSLが使われている可能性があります。

GLSLの利用環境

最後にGLSLが利用出来る環境について説明します。

GLSLはWebGLが使えるブラウザなら、利用することができます。

Can I use... Support tables for HTML5, CSS3, etc

IEなら11以降が必要ですが、Edge、Chrome、FireFoxなどのモダンブラウザなら問題なく利用することができます。もちろんスマートフォンでも利用することができます。ただしGLSLはGPUによって解釈されるので、そもそもGPUが利用できる状態である必要があります。

まとめ

いかがでしたでしょうか?
GLSLをWebサイトに使ってみたくなりましたでしょうか?

WebGLというと3Dグラフィックというイメージが強いかもしれませんが、GLSLを使う事で2Dグラフィックにおいても高度なグラフィック表現を再現する事が出来ます。
少し敷居は高いですが、フロントエンジニアなら、やってみる価値はあると思います。