ZgeViz用エフェクト開発の手引き/Shadertoy の変更点

追加された行はこの色です。
削除された行はこの色です。
ZgeViz用エフェクト開発の手引き/Shadertoy は削除されています。
「Image-Line Forum > IndexPlugin & Preset > ForumsZGameEditor Visualizer forum」の「[[Shadertoy uniform variable equivlents>http://forum.image-line.com/viewtopic.php?f=1700&t=138754#p995915]]」の翻訳。

訳者コメント：
ShaderToyはWebGL向けのFragmentShaderを、Webページ上で「記述」、「デバッグ」、「シェア」できるWebサイトで、その道（？）では有名どころのひとつです。
「WebGL向けのFragmentShader」というのは「GLSL」という言語で書かれるんですが、ZGameEditorでも使われている言語なので、ShaderToyで書かれたShaderを「ZGameEditorに持ってきて使う」ことは「それほどむずかしくはない」ようになっています(「Shaderがそもそも何か」が「わかれば」たぶんむずかしくないと思うんですが、「そこ」が一番むずかしいかも知れません)。
実際のところFL Studio付属のシェーダの中には「ShaderToyで開発、シェアされていたものをImage-Lineの中の人がシェーダを書いた個々人と交渉して許諾を得て使っている」ものが結構な数あります(参考：「ZGameEditorビジュアライザのエフェクト」ページにある程度まとまっています)。
この資料は「持ってきて使う」ための「ヒント」となるものです。中には「持ってきたけど動かない」とか「動かすのがすごく大変」とか「動いたけど重すぎるとか死ぬ」とかいったものもあるかと思います。
ShaderToyは開発環境としても優秀と思うので、「ShaderToyで自分で書いたシェーダを持ってくる」というのもありだと思います。ほかの人が書いたものを使う場合は許諾を得た方が良いような気がしていますが、ShaderToyのサイトのポリシーとかに関わる話で、まだ調べてないのでよくわかりません。

**Shadertoy向けに書かれたFragment Shaderのuniform変数に対応する、ZGameEditorの変数について

以下は、「ShaderToy向けに書かれたシェーダーで使われている変数にZGameEditorの変数を当てはめるパターン」の例です。

|ShaderToyの変数|意味|対応付けられるZGameEditorの変数と、割り当て手順の例|h
|BGCOLOR(#c99):|||c
|>|>|BGCOLOR(#fcc):訳注：どんなシェーダでも大体必須|
|vec3 iResolution|viewportの解像度(pixel)|ZgameEditorの「App.ViewportWidth, App.ViewportHeight」の各変数を、「Shader variableコンポーネント」の「ValuePropRef」プロパティに設定するとよいでしょう。Shader内では「uniform float」として記述してiResolutionをリプレースするなどすればよいでしょう。&br;&br;訳注：&br;「Shaderコンポーネント」内にiResX, iRexYとかいったの「Shader variableコンポーネント」を作って、それぞれの「ValuePropRefプロパティ」にApp.ViewportWidth, App.ViewportHeightを設定、Shader側は&br;uniform float iResX;&br;uniform float iResY;&br;した上で&br;vec3 iResolution=vec3(iResX, iResY, 0.0);&br;……みたいなことをすればいいような気がします(確認してません。なぜz軸？)。&br;''iResolution以外の変数を利用する場合も(逐一書いてませんが)だいたい同じ操作を伴うはずです''。|
|float iGlobalTime|shader起動からの時間(秒)|ZGameEditorの「App.Time」を「Shader variableコンポーネント」の「ValuePropRef」に設定すればよいでしょう。&br;&br;Shader側では、「uniform float」型で受け取って「iGlobalTime」変数を置き換えるなりするとよいでしょう。&br;''注意''：ShaderToyの「iGlobalTime」は速度が固定ですが、ZGameEditorでは速度が一定しません。アニメーションで使った場合、ジャンプ(フレーム落ち)のような形で問題となる可能性があります。必要に応じて&br;someVar+=App.deltaTime*speed; //とか重み付けして、ソース中のiGlobalTimeをsomeVarで置き換える&br;等といったコードで対応するとよいでしょう。|
|vec4 iMouse|マウスカーソル位置(pixe coord)&br;xy: MLB down時の値&br;zw: クリック|マウスカーソル位置を拾う変数です。当然ですが、レンダリング時やレンダリング後にはマウスカーソルを拾うことはできません。iMouse変数は実質上そのままでは使えないので、必要に応じて適宜スライダー等「時間変化させることができるもの」に置き換えるとよいでしょう。|
|>|>|BGCOLOR(#333):|
|>|>|BGCOLOR(#fcc):訳注：以下はちょっと高度|
|float iChannelTime[4]|各チャンネルの起動からの経過時間(秒)|非サポート？私が移植を行ったエフェクトでは、App.Time(上記のiGlobalTime)を使っています。FL Studioの 「SongPositionInBeats」変数を使うのがいいかも知れません。|
|>|>|BGCOLOR(#333):|
|>|>|BGCOLOR(#f99):sampler2D or samplerCube iChannel{i}|
|textures|入力チャンネル：画像|これに相当するデータは、ZGameEditorでは、Shaderコード中でで"uniform sampler2D tex1;"として利用できます。「Shader variableコンポーネント」を定義する必要もありません。他のチャンネル(ZGameEditorで定義されているMaterial texture)についても「tex1,tex2,tex3...」として利用できます。|
|video|入力チャンネル：ビデオ|ZGameEditorで「VideoTextureBitmap」という名前の「Bitmapコンポーネント」を定義し、「Materialコンポーネント」内で利用する形にします。FL12付属の「VideoWall」エフェクトは参考になるでしょう。あとはtextureと同じように扱えます。|
|audio|入力チャンネル：音声|FL Studioの「AudioArray」、または「SpecBandArray」変数がsampler2D型の「shader variableコンポーネント」として利用できます。ちょっとしたトリックで実装されているので、必要があればフォーラムで質問してください。音声データは、y==0として「float型の一次元配列」として扱われます。vec2 someVar.xy=floatValue;といった形で、vec2型でステレオデータを取得するのも可能です。（訳注：とか訳してみたものの、あんまり意味がわかっていません）|
|>|>|BGCOLOR(#333):|
|iSampleRate||ZGameEditorの「Shader variableコンポーネント」で「AudioArray.SizeDim1」を取得して、Shaderコード中の「iSampleRate」を置き換えます。|
**GLSLについて諸注意
[[GPU compatibility Checklist>https://forum.image-line.com/viewtopic.php?f=1700&t=138754#p1227423]]の訳。

GLSLの記述の際に陥り勝ちな問題について：

その１）GLSLは文法上、「''暗黙的キャスト(型変換)''」をしてくれない状況が多い。
 float a=5;    // 整数型定数を浮動小数点数変数に代入できないのでエラー。
 float a=5.0;  // GLSLではこれが正解。

 float a=5.0;
 vec2 b=a;              // GLSLのvec2型にこういう文法はない。エラー。
 vec2 b=vec2(a);        // こう書けばよい。
 vec2 b=vec2(a, a);     // この方が明示的でわかりやすいかも知れない。

 // こういう関数を定義したとして、
 float add(float a, float b){
   return a+b;
 }
 // 関数呼び出しの際、
 float a=add(1, 2);      // GLSLでは、こう書くと引数の型が違うのでエラー。
 float a=add(1.0, 2.0);  // こう書かなくてはいけない。

その２）GLSLでの配列宣言の文法。
 float[8] p;  // こういう書き方はない。
 float p[8];  // これが正解。

その３）GLSLのversionは"120"に限定しておかないとMacで利用できない。


その４）texture()は未定義。
 texture();    // GLSL120の範囲ではtexture()関数は定義されていない。エラー。
 texture2D();  // GLSL120を使う限りこう書く必要がある。

**関連項目
【ZgeViz用エフェクト開発の手引き】