web-dev-qa-db-ja.com

WebGL / GLSL-ShaderToyはどのように機能しますか?

私はShadertoyをあちこち探していました- https://www.shadertoy.com/ -最近、特にOpenGLとGLSLについてもっと学ぶために努力しています。

私がこれまでに理解していることから、OpenGLユーザーはまず、使用するすべてのジオメトリを準備し、OpenGLサーバーを構成する必要があります(許可されるライトの数、テクスチャストレージなど)。それが完了したら、ユーザーはOpenGLプログラムがコンパイルされる前に、少なくとも1つの頂点シェーダープログラムと1つのフラグメントシェーダープログラムを提供する必要があります。

ただし、Shadertoyのコードサンプルを見ると、1つのシェーダープログラムしか表示されず、使用されるジオメトリのほとんどがGLSLコードに直接書き込まれているように見えます。

それはどのように機能しますか?

私の推測では、頂点シェーダーはすでに事前に準備されており、編集可能/サンプルシェーダーはフラグメントシェーダーにすぎません。しかし、それでは、より複雑な例のいくつかでジオメトリを説明しません...

Shadertoyの仕組みを説明できる人はいますか?

46
Charlie

ShaderToyは、すべての照明、ジオメトリなどを処理するようにプログラムされたシンプルなGLSLを表示します。頂点ジオメトリではなく、ほとんどのレイキャスティング、3Dのもの、または2Dシェーダなどを実行できます。

色と空間の数学は、GLSL言語でプログラムできます。高度なアルゴリズムの組み合わせにより、等値面、形状、およびテクスチャを等値面に投影し、レイキャスティング、視聴者からの距離に架空の線を送信、あらゆる方法でインターセプトします。3Dには多くのレイキャスティング手法があります。

www.iquilezles.org にアクセスして、shadertoy/glslグラフィックスで使用されるさまざまなツールのアイデアを確認してください。

7
com.prehensible

基本的には、GLSLピクセルシェーダーのソースコードをグラフィックカードに直接プッシュするだけで、レイマーチング、レイキャスティング、レイトレーシングなどの驚くべき効果を生み出すために人々が使用する非常に巧妙なアルゴリズムで真の魔法が起こります。 http://glsl.heroku.com/ および http://webglplayground.net/ のような他のライブGLSLサンドボックスをご覧になることをお勧めします。基本的には、画面を表す2つの三角形のウィンドウを作成し、シェーダーはレイトレーサーのように各ピクセルで機能します。
私はこれらをしばらく見てきましたが、人々が使用するアルゴリズムは気が遠くなります。真剣に計算して、「デモコーディング」ソースコードを調べて頭を包む必要があります。それら。シェーダーグッズの多くは、ただ心を吹き飛ばします!要約すると、GLSLシェーダーのコーディングとアルゴリズムを習得するだけで済みます。簡単な解決策はありません。

6
panpsychist

従来のコンピューターグラフィックスでは、ジオメトリは頂点を使用して作成され、何らかの形式のマテリアル(たとえば、照明付きのテクスチャ)を使用してレンダリングされます。 GLSLでは、頂点シェーダーが頂点を処理し、フラグメント(ピクセル)シェーダーがマテリアルを処理します。

しかし、形状を定義する唯一の方法ではありません。テクスチャを(テクセルを検索する代わりに)プロシージャルに定義できるように、形状を(ジオメトリを検索する代わりに)プロシージャルに定義できます。

そのため、レイトレーシングと同様に、これらのフラグメントシェーダーは、頂点でジオメトリを定義せずにシェイプを作成できます。

形状を定義する方法はまだあります。例えば。ボリュームデータ(ボクセル)、サーフェスカーブなど。コンピューターグラフィックスのテキストでそれらの一部をカバーする必要があります。

2
mlepage