svader
v0.5.1
WebGLおよびWebGPUフラグメントシェーダーを使用して、GPUレンダリングされたSvelteコンポーネントを作成します。
Svelte 4とSvelte 5をサポートします。
要するに、フラグメントシェーダーは、画面上のピクセルの座標を取得し、このピクセルが必要とする色を返すプログラムとして書くことができます。このプログラムはGPUで実行され、大規模な並列性と速度を確保できます。
フラグメントシェーダーの書き方の詳細については、シェーダーの本をご覧ください。
以下は、すべてSvaderを使用して作成された例のコレクションです。これらすべてのライブバージョンは、svader.vercel.appでプレビューでき、ソースコードはsrc/routes/ディレクトリにあります。
# npm
npm i -D svader
# pnpm
pnpm i -D svader
# Bun
bun i -D svader
# Yarn
yarn add -D svaderフラグメントシェーダーコンポーネントを使用するには、まずWebGLまたはWebGPUを使用するかどうかを決定する必要があります。何を使用するかわからない場合は、WebGL対WebGPUセクションを参照してください。
以下は、WebGLフラグメントシェーダーコンポーネントの最小限の例です。
REPLの表示
< script >
import { WebGlShader } from " svader " ;
const shaderCode = ` #version 300 es
precision mediump float;
out vec4 fragColor;
uniform vec2 u_resolution;
uniform vec2 u_offset;
void main() {
vec2 pos = gl_FragCoord.xy + u_offset;
vec2 st = pos / u_resolution;
fragColor = vec4(st, 0.0, 1.0);
}
` ;
</ script >
< WebGlShader
width = " 500px "
height = " 500px "
code ={ shaderCode }
parameters ={[
{
name: " u_resolution " ,
value: " resolution " ,
},
{
name: " u_offset " ,
value: " offset " ,
},
]}
>
< div class = " fallback " >WebGL not supported in this environment.</ div >
</ WebGlShader >これにより、次の出力が生成されます。
ここでは、 shaderCode変数はGLESシェーダーコードを含む文字列です。簡単にするために、これは文字列として保存されますが、通常、別のmyShader.fragファイルに保存されます。ファイルからシェーダーをロードするとき、 codeプロパティがstringとPromise<string>両方を受け入れることを知ることは有用かもしれません。
このコードが行うことは次のとおりです。
gl_FragCoord.xyによって与えられたピクセルの2D座標に与えられたu_offsetユニフォームを追加します。u_resolution均一でエントリワイズに分割し、0〜1の間の座標を正規化します。x座標が赤いチャネルになり、 y座標がグリーンチャネルになります。青いチャネルは常に0に設定され、アルファ（不透明）チャネルは常に1（完全に不透明）に設定されます。 GLESでは、ユニフォームは関数への入力であり、画面上のすべてのピクセルで同じです。これらは、 <WebGlShader>コンポーネントのparametersプロパティを介して渡す必要があります。この場合、 u_resolutionとu_offset 2つのユニフォームを渡す必要があります。これらの特定のパラメーターは非常に一般的に使用されているため、各パラメーターのvalueプロパティをそれぞれ"resolution"と"offset"に設定できるように、Svaderで特別に実装されています。
最後に、 <WebGlShader>コンポーネントはフォールバックスロットを受け入れます。これは、ブラウザーがシェーダーをレンダリングできないときにレンダリングされます。
parametersプロパティは、次のプロパティを持つオブジェクトの配列です。
name ：均一なパラメーターの名前、例： "my_uniform" 。これは、シェーダーコードのパラメーターの名前と一致する必要があります。
type ：シェーダーコード"float"などのシェーダーコードで記述されている均一パラメーターのタイプ。 valueプロパティが"resolution"などの組み込み値である場合、 type自動的に決定され、設定されないでください。
value ：均一なパラメーターの値、または組み込みの値を指定する文字列。組み込みの値でない場合、このプロパティのタイプは、次のようなtypeプロパティに対応する必要があります。
float 、 int 、 uintはnumberです、vecN 、 ivecN 、 uvecN 、 N 、eg vec2 > [1.2, 3.4]の長さのnumber[]です。matN 、 N * Nの長さ、例えばmat2 > [1, 2, 3, 4]のnumber[]です。 いくつかのタイプのユニフォームは非常に頻繁に使用されます。これらはSvader自体に実装されており、組み込みの値と呼ばれます。これらを使用するには、パラメーターオブジェクトのvalueプロパティを、次のいずれかを一致させる文字列に設定する必要があります。
"resolution" ：物理デバイスピクセルのキャンバス幅と高さのvec2 。
"scale" ：CSSピクセルと物理デバイスピクセルの比率、つまりズームレベルのfloat 。たとえば、ブラウザが150％にズームされている場合、 scaleパラメーターは1.5になります。
"time" ：数秒で現在のfloat 。注：このパラメーターをシェーダーに渡すと、すべてのフレームを返信します。
"offset" ：フラグメントシェーダーのgl_FragCoord.xyに追加されるvec2 。キャンバスのサイズがハードウェアによって制限される場合があります。これを補うために、Svaderは、画面をカバーするために小さな切り抜きを変えた仮想キャンバスを作成します。 "resolution"パラメーターは、この仮想キャンバスのサイズと一致するように自動的に調整されますが、技術的な理由で、 gl_FragCoord.xyは外部から調整することはできません。したがって、これらの座標に手動で追加されるように"offset"パラメーターが提供されます。
以下は、WebGPUフラグメントシェーダーコンポーネントの最小限の例です。
REPLの表示
< script >
import { WebGpuShader } from " svader " ;
const shaderCode = `
@group(0) @binding(0) var<uniform> resolution: vec2f;
@group(0) @binding(1) var<uniform> offset: vec2f;
@fragment
fn main(@builtin(position) raw_pos: vec4f) -> @location(0) vec4f {
let pos = raw_pos.xy + offset;
let st = pos / resolution;
return vec4f(st, 0.0, 1.0);
}
` ;
</ script >
< WebGpuShader
width = " 500px "
height = " 500px "
code ={ shaderCode }
parameters ={[
{
label: " Resolution " ,
binding: 0 ,
value: " resolution " ,
},
{
label: " Offset " ,
binding: 1 ,
value: " offset " ,
},
]}
>
< div class = " fallback " >WebGPU not supported in this environment.</ div >
</ WebGpuShader >これにより、次の出力が生成されます。
ここでは、 shaderCode変数はWGSLシェーダーコードを含む文字列です。簡単にするために、これは文字列として保存されますが、通常、別のmyShader.wgslファイルに保存されます。ファイルからシェーダーをロードするとき、 codeプロパティがstringとPromise<string>両方を受け入れることを知ることは有用かもしれません。
このコードが行うことは次のとおりです。
raw_pos.xyによって与えられたピクセルの2D座標に与えられたoffset均一変数を追加します。resolution均一でエントリワイズに分割し、0〜1の間の座標を正規化します。x座標が赤いチャネルになり、 y座標がグリーンチャネルになります。青いチャネルは常に0に設定され、アルファ（不透明）チャネルは常に1（完全に不透明）に設定されます。 WGSLでは、これらのvar<uniform> >がシェーダーにパラメーターを渡す主要な方法です。これらは、 <WebGpuShader>コンポーネントのparametersプロパティを介して渡す必要があります。この場合、 resolutionとoffset 2つのユニフォームを渡す必要があります。これらの特定のパラメーターは非常に一般的に使用されているため、各パラメーターのvalueプロパティをそれぞれ"resolution"と"offset"に設定できるように、Svaderで特別に実装されています。
最後に、 <WebGpuShader>コンポーネントはフォールバックスロットを受け入れます。これは、ブラウザーがシェーダーをレンダリングできないときにレンダリングされます。
parametersプロパティは、次のプロパティを持つオブジェクトの配列です。
label ：デバッグに使用されるパラメーターの名前。これは、シェーダーコードのパラメーターの名前に対応する必要はありません。
binding ：パラメーターをシェーダーコードの変数に一致させるために使用される整数。これは、変数宣言の場合、シェーダーコードのパラメーターのbindingプロパティと一致する必要があります
@ group ( 0 ) @ binding ( 42 ) var < uniform > my_variable : f32 ; binding特性は42なければなりません。
value ：パラメーターの値、または内蔵値を指定する文字列。組み込みの値でない場合、このパラメーターはArrayBuffer / ArrayBufferViewでなければなりません。たとえば、 f32パラメーターに数値を渡すには、 new Float32Array([myNumberValue])のように構築できます。
storage ：[オプション - デフォルトはfalseになります]パラメーターが均一な変数ではなくストレージ変数であるかどうか。これは、変数宣言の場合、シェーダーコードの宣言と一致する必要があります
@ group ( 0 ) @ binding ( 0 ) var < uniform > my_variable : f32 ; storageプロパティはfalseであるか、省略する必要があります。
@ group ( 0 ) @ binding ( 0 ) var < storage , read > my_variable : f32 ;それはtrueであるべきです。 Svaderは現在var<storage, read> var<storage, read_write>のみをサポートしていることに注意してください。
いくつかのタイプの入力は非常に頻繁に使用されます。これらはSvader自体に実装されており、組み込みの値と呼ばれます。これらを使用するには、パラメーターオブジェクトのvalueプロパティを、次のいずれかを一致させる文字列に設定する必要があります。
"resolution" ：物理デバイスピクセルのキャンバス幅と高さのvec2f 。
"scale" ：CSSピクセルと物理デバイスピクセルの比率のf32 、つまりズームレベル。たとえば、ブラウザが150％にズームされている場合、 scaleパラメーターは1.5になります。
"time" ：現在の時間のf32 。注：このパラメーターをシェーダーに渡すと、すべてのフレームを返信します。
"offset" ：フラグメントシェーダーの@builtin(position)に追加されるvec2f 。キャンバスのサイズがハードウェアによって制限される場合があります。これを補うために、Svaderは、画面をカバーするために小さな切り抜きを変えた仮想キャンバスを作成します。 "resolution"パラメーターは、この仮想キャンバスのサイズに一致するように自動的に調整されますが、技術的な理由で、 @builtin(position)外部から調整することはできません。したがって、これらの座標に手動で追加されるように"offset"パラメーターが提供されます。
実際のアプリケーションの場合、WebGLの使用をデフォルトします。
WebGLとWebGPUはどちらも、WebアプリケーションがGPUアクセラレーションのグラフィックをレンダリングできるようにするAPIをレンダリングしています。
WebGLは2つの中で古いものであり、すべての最新のブラウザによってサポートされています。
WebGPUはまだ実験段階にあり、いくつかのブラウザでのみサポートされています。ただし、WebGLがそうでない特定の機能をサポートしています。たとえば、執筆時点では、Google ChromeのWebGLは、ドキュメントで一度にアクティブなキャンバスを持つことのみをサポートしていますが、WebGPUは実質的に無制限の数をサポートしています。
SvaderはMITライセンスに基づいてライセンスされています。
