もうすぐTouchDesignerを始めて１年くらい経つので、
何かシェア出来ないかなと思い、Qiitaを始めてみました。
今回はFacebookのTouchDesigner Help Groupに投稿されていた表題の方法を試してみました。
僕自身TouchDesignerを始めるまでプログラミング言語はほとんど書いた事がなく、
TouchDesigner Study WeekendというWSのGLSLの回で初めてGLSLを書きました。
GLSL自体全然まだ勉強中で、
TouchDesignerが面白くなってきた理由の一つがGLSLを知った事だったので、
自分みたいなプログラミング初心者の方にも、簡単にGLSLをTouchDesigner上で触れられるよう、記事を書いてみました。
必要なもの
1.Synthclipse
http://synthclipse.sourceforge.net/
-Downloadページ
https://sourceforge.net/projects/synthclipse/files/synthclipse-2.2.2/
※mac/windows/linux版があります。
2.OpenGL3.3以上がサポートされているグラボと最新のドライバ
3.Java 8
以上が準備出来ればすぐ出来ます。
■Synthclipseを立ち上げます。
■SynthclipseのSynthclipseタブ→Import→Shadertoy creationを選択
※もしSynthclipseのタブが出て来ない場合、Window→Perspective→Open PerspectiveからSynthclipseを選択する。最初から無い場合、再インストールした方がいいかと。
■Shadertoyで好きな作品のURLを図の箇所にコピペし、downloadをクリック。
その後の画面で適当なフォルダを選択。
■コードが出力されるのでコピーする。
■TouchDesignerを開き、オペレーターウィンドウより、glsl1 TOPを選択。
■glsl1_pixel DATをアクティブにし、Synthclipseから出力されたコードをコピぺする。
■glsl1_info DATを見るとエラーが出ているので、
エラーが出ている行のgl_FragColorをfragColorに置き換える。その後、out vec4 fragColorを追加する。
※図はout vec4 fragColorの場所。頭の方です。
■そのままだと絵が出ないので、glsl1 TOPのVector1タブに、
エラーの内容のiResolution（Valueに1280 720と入力)とiTime（absTime.secondsと入力）などを追加してあげると大体絵が出てくるかと思います。
追記:glsl1 TOPのcommonタブの解像度も1280 720に変更する。
簡単に出力出来ない作品も多々ありますので、
それはDerivativeの公式など見て解決してみてください。
また、初めてこのような技術的な記事を書くので、
何かご指摘などありましたら是非お伝えください。
Sho