2つのGLSLシェーダの間で共有機能のためのコードの重複を回避

Question

私のHTMLページ（pipad.org/tmp/fourier02.html）は、二つのシェーダ含まれています。私はoversimplifyingないよ願ってい

<script type="application/glsl" id="shaderA"> 
    uniform vec4 a; 
    vec4 f(vec4 x, vec4 y){ ... } // DUP 
    vec4 main(vec4 u, vec4 v) { return f(a,u); } 
</script> 

<script type="application/glsl" id="shaderB"> 
    uniform vec4 a; 
    vec4 f(vec4 x, vec4 y){ ... } // DUP 
    vec4 main(vec4 u) { return f(a,u); } // notice main's sig is different 
</script> 

を、私は持っていること私がいれば改訂する。これらのシェーダはさまざまな方法で使用されます（shaderBはRTTです）。

わかるように、fはどちらの場合も同じです。

2度書くことを避ける方法はありますか？私が見ることができる

唯一の方法は、構文は、もはや作品を強調していないし、あなたがしなければならないので厄介である、文字列としてシェーダを保っている。

: 
var 
f = 
    "vec4 f(vec4 x, vec4 y){\n" + 
    "...\n" + 
    "}\n", 

shaderA = f + 
    "uniform vec4 a;\n" + 
    "vec4 main(vec4 u, vec4 v) { return f(a,u); }\n", 

shaderB = f + 
    "uniform vec4 a;\n" + 
    "vec4 main(vec4 u) { return f(a,u); }\n" 
; 

など

であります...メー。オリジナルよりも明らかな利点はありません。私たちはちょうど嬉しさのために重複を交換しました。

良い方法がありますか？

Answer 1

で"#shaderA"を交換し、文字列操作シェーダを作る一般的な方法です。ほとんどすべての大型エンジンは、実行時にシェーダを構築するためにたくさんの文字列置換を使用します。 WaclawJasperはテンプレート文字列を指摘しました。これらはJavaScriptの新機能ですが、WebGLをサポートするほとんどすべてのブラウザが定期的な更新を受けるため、おそらくかなり安全に使用できますし、ポリフィルを使用することもできます。

例

var t = { 
 
    PI: '3.14159', 
 
    plusToPlusMinus: ` 
 
    float plusToPlusMinus(float v) { 
 
     return v * 2.0 - 1.0; 
 
    } 
 
    `, 
 
}; 
 

 
var shader = ` 
 
    ${t.plusToPlusMinus} 
 
    ... 
 
    void main() { 
 
    a = b * ${t.PI}; 
 
    } 
 
`; 
 

 
console.log(shader);

出力：

float plusToPlusMinus(float v) { 
    return v * 2.0 - 1.0; 
    } 

... 
void main() { 
a = b * 3.14159; 
} 

Answer 2

あなたが探しているもののようなものはtemplate stringsです。これはデフォルトで複数行の文字列をサポートします。

互換性が問題の場合、shader = ["blah", "blah"].join('\n');は文字列連結よりもIMOクリーナーです。

Answer 3

は最後に、私は別の<script type="application/glsl" id="common">タグに私の共通機能を移動しました：

<script> 
    : 
    function joinElements(A,B) { 
     return document.getElementById(A).innerHTML 
      + document.getElementById(B).innerHTML; 
    } 
    : 

...そしてあなたがすでに見つかってきたようにjoinElements("#common", "shaderA");