シェーダーを使用してWebデザインでリアルな特殊効果を作成する

公開: 2020-03-11

WebGLは、Web上で可能なことの限界を実験およびテストする対象になっています。ほぼ毎日、私たちはそれを利用した壮大なソリューションに出くわします。その証拠として、私たちはすでに多くの実際のプロジェクトを調査しました。

今日は、シェーダーを使用する利点を示すいくつかの概念について説明します。 GLSLに焦点を当てます。

GLSLは、Graphics Library ShaderLanguageの略です。これはWebGLの不可欠な部分であり、私たちが実際に目にする驚異的なソリューションの大部分を担っています。その名に恥じないように、グラフィックを直感的に操作するためのツールを開発者に提供します。右手では、ほとんどすべてのアイデアを実現することができます。

Codepenは、シェーダーの助けを借りて作成された魅力的なプロジェクトですでに溢れています。ただし、現実的な効果を示すものが最も印象的で刺激的です。そして、これを今日のコレクションで証明します。飛び込みましょう。

StefanWeckによるWaterdropletWebGLシェーダー

Stefan Werkは、彼の傑作でラウンドアップを開始し、ハイエンドテクノロジーが真の魔法であることをすべての人に証明します。彼はなんとか窓（または私たちの場合はスクリーン）に降り注ぐ雨を再現することができました。雨滴の振る舞いと実現は、あなたがそれらに触れたいと思うほどリアルです。ここでは、JavaScriptが雨のシミュレーションの背後にありますが、WebGLシェーダーがねばねばした効果と屈折を担当します。

JonathanBlairによる3つのjsウォーターシェーダー/ DavidHartleyによるShaderToyコンパイル

おそらく、次の2つのプロジェクトは、コレクションでシェーダーを使用する最も印象的な例の1つです。それぞれが、舞台裏で起こっているすべてに対処するためにコンピュータを全能力で動作させるように強制しますが、それでも、それは価値があります。それぞれのコンセプトは、それらすべての波紋、小さな波と大きな波、そして色の変化とともに、信じられないほどリアルで非常に刺激的なものに見えます。

ジョナサンブレアは水面だけを再現しましたが、デビッドハートリーは後者に球形を与えることで物事を少し面白くし、それによって地球を巧みに模倣しました。どちらのプロジェクトも驚異的です。

OmarShehataによるPixijs.v3シェーダーの例

Pixi.jsを搭載した、Omar Shehataによるこの魅力的なコンセプトは、ヘイズ効果の非常に詳細なシミュレーションであなたを驚かせるでしょう。美しい紫がかった色と暗い背景でスパイスを効かせたこれらの煙の雲は、信じられないほど本物に見えます。振る舞いはよく考えられています。コンセプトはただ魅惑的です。

BorisŠehovacによるSnowfallWebGLシェーダー

このコンセプトはその名に恥じないものです。非常にリアルです。 Boris Sehovacは、さまざまなサイズの雪片、さまざまなレベルのぼやけ、さまざまな速度を使用して、奥行きを再現しています。さらに、彼はまた、コンポジションを左から右に、またはその逆に方向を変えるように強制することによって、風をシミュレートしようとしました。その結果、ある種の小さな吹雪を目撃することができます。ネイティブのWebGLシェーダーがこの美しさの背後にあります。

AnandDavaasurenによるコンセプト

前の例があなたに良い印象を残したなら、AnandDavaasurenのコンセプトは間違いなくあなたの目を喜ばせるでしょう。解決策は同じ考えに基づいています。降雪効果はその中心にありますが、1つの例外があります。この例では、雪片の代わりにハートを使用しています。その結果、コンセプトは抵抗しがたい素敵な雰囲気を持っています。残酷に現実的ではないかもしれませんが、それでも、落下効果と心臓の振る舞いは信じられないほど洗練されています。

DavidHartleyによるCloudsShader

これは、DavidHartleyによって作成されたもう1つの傑作です。今回は、アーティストが雲とその浮遊行動についての彼の見解を示します。繰り返しになりますが、Pixi.jsはこの壮大なプロジェクトの背後にあります。ここでは、カメラが雲の切れ間を通り抜け、アイデアの全体的な美しさを感じさせます。しかし、それはデビッドにとって十分ではありませんでした。彼はまた、カーソルを動かしてシーンを探索する機会を私たちに提供してくれました。ただ信じられない。

14islandsによるファイヤーシェーダー

凍えるような吹雪や冷たいふわふわの雲から熱いものまで、ここでは火をシミュレートする試みが成功しています。 14islandsの背後にあるチームは、このアイデアを実現するために、多数のパーティクルとカスタムシェーダーを使用しています。その結果、あらゆる面で暖かさを醸し出す煙のある小さな焚き火を目撃することができます。

GLSL：LiamEganによるChrome

Liam EganのChromeは、高密度の液体を特徴としています。プロジェクトは、邪悪なT-1000が彼の液体金属組成を示したときの壮大なターミネーター2のシーンをわずかに思い出させます。コンセプトは間違いなく人工的な感じがします。それでも、動作と光沢のある表面は信じられないほどリアルに見えます。さらに、マウスを上下に動かしてスムージングパラメータを変更することで、いろいろと試してみることができます。

マーティン・ラクセネアによる波及効果

Martin Laxenaireによるこのプロジェクトは、実際に使用されているシェーダーの完璧な例です。ここで、作者は、マウスをホバーすると画像がカーテンのように動く実際の波及効果をなんとかやってのけました。 Curtains.jsはこの概念を強化します。唯一の欠点は、ローエンドのコンピューターが画像を「消化」するにはまだ重すぎるため、Webサイト上のすべての画像にこの効果を提供するには時期尚早である可能性があることです。

FabienMotteによるグリッチホタル

Fabien Motteのプロジェクトには、実用的なソリューションも含まれています。ただし、垂直軸を中心に無秩序に移動するこれらの明るいホタルを意味するものではありません。時々画面にぶつかるグリッチ効果について話しています。それはただ信じられないほどです。そして、最近人気があるので、この概念はあなたの実験のための完璧な基盤として役立つことができます。

いくつかの陰を投げる

シェーダーは強力なツールです。この記事では現実的な解決策に焦点を当ててきましたが、より人工的に見える他の驚くべき概念がたくさんあります。まったく異なるシーンや構成を作成できます。ここで、想像力を駆使できます。

しかし、大きな力には大きな責任が伴います。このシェーダー全体に飛び込む前に、考慮しなければならない問題がいくつかあります。

まず、ブラウザの互換性に問題があります。誰もがその美しさを楽しむことができるわけではありません。そして第二に、すべてのコンピューターが問題なくそれを処理できるわけではありません。これは、シェーダーが普遍的なツールではないことを意味します–少なくともまだです。