GLSLで超リアルなエフェクトを実装してみよう！実例10選

Web上で3DCGを表示できるWebGL。そのWebGLの豊かな三次元表現を可能にしているのがGLSL（Graphics Library Shader Language）です。

今回はこのGLSLに焦点を当て、リアルな表現が特徴の作品を10選ご紹介します。

1. 窓に滴る水滴

Stefan Werkは、GLSLを活用して窓に滴る雨を再現しました。このエフェクトにはJavaScriptも使われていますが、GLSLも質感や光の屈折の表現に一役買っています。

See the Pen
Waterdroplet WebGL Shader by Stefan Weck (@stefanweck)
on CodePen.

Waterdroplet WebGL Shader

2. 穏やかな海面

今回ご紹介する作品のうちでも、とくに印象的なのがこのJonathan BlairとDavid Hartleyによる作品でしょう。GLSLの豊かな可能性を示唆してくれます。

Jonathan Blairが表現した、さまざまな大きさの波や波紋、なめらかに変化する色調はまるで本物の海のよう。さらにDavid Hartleyは作品に角度をつけることにより、臨場感あふれる表現を可能にしています。

See the Pen
Three js water shader by Jonathan Blair (@knoland)
on CodePen.

Three js water shader

See the Pen
PIXI v4 ShaderToy Compilation by David Hartley (@davidhartley)
on CodePen.

ShaderToy Compilation

3. ピンク色の煙

Omar Shehetaは、2Dに特化したライブラリであるPixi.jsを使って繊細なピンク色の煙を作りました。暗い画面に立ちのぼる煙は驚くほどリアルで、コンセプト自体も魅力的です。

See the Pen
Pixijs.v3 Shader Example by Omar Shehata (@omarshe7ta)
on CodePen.

Pixijs.v3 Shader Example

4. 風に舞う雪

Boris Sehovacは、ランダムなサイズの雪にぼかし効果を加え、さまざまな速度で落下させることにより奥行きを表現しました。さらに風を一方方向からだけでなく、さまざまな方向から吹くようにシミュレートする工夫にも注目です。GLSLを活用したちょっとした工夫で、作品がぐっとリアルになります。

See the Pen
Snowfall WebGL Shader by Boris Šehovac (@bsehovac)
on CodePen.

Snowfall WebGL Shader

5. 散る桜の花びら

雪に続いて、こちらは桜の花びらが散る作品です。他の作品に比べるとあまりリアルではありませんが、幻想的で洗練された魅力があります。こうしたモチーフは入門者にもおすすめです。

See the Pen
tqdmv by Anand Davaasuren (@at80)
on CodePen.

Untitled

6. インタラクティブな雲

こちらの雲も、海を再現したDavid Hartleyの作品です。ピンク色の煙と同じくPixi.jsで作られています。ぜひカーソルで動かしてみてください。

See the Pen
Pixi.js Clouds Shader by David Hartley (@davidhartley)
on CodePen.

Pixl.js Clouds Shader

7. ゆらめく炎

冷たい雪からふわふわの雲まで、GLSLを使えばさまざまな質感が再現できます。こちらは14islandによる、ゆらめく炎を再現した作品。たくさんのパーティクルとカスタムシェーダが使われています。

See the Pen
Fire shader by 14islands (@14islands)
on CodePen.

Fire shader

8. 回転する液体金属

Liam Eganによるこの作品は、ターミネーター2の登場人物であるT-1000のような液体金属を再現したもの。直接触れる機会があるようなモチーフではありませんが、とても再現度が高いように感じられます。マウスを動かして、表面の質感を変化させてみましょう。

See the Pen
GLSL: Chrome by Liam Egan (@shubniggurath)
on CodePen.

GLSL: Chrome

9. オンマウスで波打つ画像

Martin Laxenaireが制作した波打つ画像は、入門者にお手本にしてほしい作品です。Chrtains.jsを活用して、風に揺られるカーテンのような動きを再現しています。ローエンドのコンピュータにはすこし荷が重いところが、唯一の欠点といえるでしょう。

See the Pen
curtains.js ripple effect example by Martin Laxenaire (@martinlaxenaire)
on CodePen.

Ripple effect

10. 光の群れ＆ノイズ

このFabien Motteの作品は、ユニークで実用的です。ランダムに動くホタルのような光よりも、稲妻のようなノイズがこの作品の魅力でしょう。こうしたノイズのエフェクトは最近人気が高まっており、入門者の実験の題材としてもおすすめです。

See the Pen
Glitched Fireflies by Fabien Motte (@FabienMotte)
on CodePen.

Glitched Fireflies

おわりに

環境によってブラウザの互換性や処理速度などの問題はあるものの、シェーダは豊かな表現を可能にしてくれるとても強力なツールです。

今回はさまざまなGLSL作品をご紹介しましたが、これ以外にもあっと驚くような作品はたくさんあります。今回ご紹介した作品をベースに、想像力を働かせて、独創的な作品を作ってみてください。

（原文：Nataly Birch 翻訳：Asuka Nakajima）

こちらもおすすめ！▼