🎡shaderfrog シェーダーエディターコードを書かずにシェーダーを設計できる three.jsのためにエクスポート

2021年9月5日 08:24

Shader Frogは、コードを書かずにシェーダーを設計できるWebGLシェーダーエディタです。

Shader Frogでは、2つ以上のシェーダーを合成し、それらのパラメータを調整することで視覚効果を作り出すことができます。シンプルなコンポーネントから複雑な効果を構築することができます。作成したシェーダーをエクスポートして、THREE.jsのゲームやアプリケーションで使用することができます。

WebGLの3Dシーンで目にするすべてのオブジェクトは、シェーダーと呼ばれるコンピュータプログラムで描かれています。シェーダーは基本的に、3Dオブジェクトのシェーディング方法をコンピュータに指示します。シェーダーは、テクスチャ、アニメーション、反射、プロシージャルノイズなど、さまざまな効果を生み出すことができます。
Shader Frogは、ユーザーが生成したシェーダーコンテンツのレポジトリを提供しますので、様々なエフェクトを選択することができます。Shader Frogでは、気に入った別のシェーダーが見つかるまで検索するだけです。それを選択すると、2つのシェーダーが合成されます。入力されたシェーダーのパラメータを調整することで、思い通りの効果を生み出すことができます。そして、この新しいシェーダーを3Dゲームやアプリケーションにエクスポートすることができます。

Shadertoyとの違い Shadertoyはレイマーチングを主眼にしたサービス　ShaderFrogは３D専用

Shadertoy.comでは、ShaderFrogと同じように3Dオブジェクトに適用できない多くのシェーダーを紹介しています。Shadertoyのシェーダは、ShaderFrogのシェーダを平面に配置して、平面をフルスクリーンにするのと同じです。Shadertoyシェーダは「レイマーチング」と呼ばれる技術を使用しており、シェーダは平面上に3Dシーン全体を描く方法を知っています。これは、映画のプロジェクタが2Dのキャンバスに3Dシーンを表示するようなものです。
ShaderFrogシェーダーは、フルスクリーンの平面だけでなく、複数のオブジェクトを持つ3Dシーンで再利用可能なエフェクトを作成するために、3Dオブジェクトにマッピングされるように設計されています。Shadertoyのシェーダーは、絵画に例えられます。美しく、複雑ですが、必ずしも実用的ではありません。ShaderFrogのシェーダーは、再利用可能でコンポーネント化されたビルディングブロックのようなものです。