ISFで遊ぼう！

1. ISFで遊ぼう！  OFJP #studygroup meetup 2015 Fall 2015 Dec. 13th 原田康

2. OFJP #studygroup meetup 2015 Fall こんにちは • バスキュール所属 • 最近のお仕事では WebGL, Android アプリなど • oF 歴1年半 • Shader を書くのが好き • メインの活動はトイレのサインを集めること  https://www.facebook.com/groups/washroom.of.the.day/  https://www.instagram.com/washroomoftheday/ 2

3. OFJP #studygroup meetup 2015 Fall ISF Interactive Shader Format の略。GLSL をベースにした VDMX などで使えるエフェクトやジェネレーター。Web でも公開されている。 3

4. OFJP #studygroup meetup 2015 Fall VDMX MacOS 用 VJ アプリケーション。 4 デモ版ダウンロード  http://vidvox.net/download/vdmx_demo  保存ができないこと以外は機能制限無し。ライセンス購入  https://vidvox.net/buy  • 1ライセンス $349 • グループライセンス $314.1 / person • 時々セールをしている。Black Friday, Cyber Monday, etc.  $249で購入

5. OFJP #studygroup meetup 2015 Fall ISFの楽しいところ • パラメーターを弄れて遊べる • デバッグがしやすい • VDMX のエフェクトやジェネレータは ISF で書かれているものも多いので実装を学べる • GLSL Sandbox や Shadertoy のコードをインポートして遊べる • 作った ISF を VDMX に入れて VJ 素材として遊べる • ギャラリーサイト（http://www.interactiveshaderformat.com/）で公開できる 5

6. OFJP #studygroup meetup 2015 Fall ISFツールとサンプル素材ダウンロード 6 ISF 専用エディターとサンプルファイル。 • ISF Editor v2.3  http://vidvox.net/rays_oddsnends/ISF_Editor_2.3.zip • ISF Test/Tutorial Filters  http://vidvox.net/rays_oddsnends/ISF%20tests+tutorials.zip • Sample ISF image ﬁlters  http://vidvox.net/rays_oddsnends/ISF%20ﬁles.zip • Movecraft » The Book of Shaders ‒ ISF/VDMX translation  http://www.movecraft.com/the-book-of-shaders-ifsvdmx- translation/

7. OFJP #studygroup meetup 2015 Fall ISFの中身はこんな感じ 7 /*{ "DESCRIPTION": "TEST", "CREDIT": "chimanaco", "CATEGORIES": [ "GRAPHIC" ], "INPUTS": [ { "NAME": "RedInput", "TYPE": "ﬂoat", "DEFAULT": 0.5, "MIN": 0.0, "MAX": 1.0 } ] }*/ void main() { vec4 inputPixelColor = vec4(RedInput, 1.0, 1.0, 1.0); gl_FragColor = inputPixelColor; } 2つのパーツに分かれていて、上は INPUTS などの情報が入った json、下は Fragment Shader になっている。ファイル名は ○○.fs にする。

8. OFJP #studygroup meetup 2015 Fall ISFの中身はこんな感じ2 8 ISF Editor に表示されるのは Fragment Shader だけだが、Vertex Shader を使っているものもある。後者がない場合は、デフォルトの Vertex Shader が自動的に設定される。 void main() { // make sure to call this from your ISF based vertex shader vv_vertShaderInit(); }

9. OFJP #studygroup meetup 2015 Fall ISF独自のタグ 9 • PERSISTENT_BUFFERS, PASSES … マルチレンダーパス用 • IMPORTED … 画像読み込み用。画像は同一階層に配置すること。 "IMPORTED" : [ { "NAME" : "img", "PATH" : "tex.png" } ]

10. OFJP #studygroup meetup 2015 Fall ISF自動で宣言される変数 10 • json で定義した INPUTS • PASSINDEX … 読み込むレンダーパスのインデックス • RENDERSIZE … 解像度（レンダーパスで指定されているサイズ） • vv_FragNormCoord …左下を[0.0, 0.0],右上を[1.0,1.0]と正規化 • TIME … 読み込まれてからの時間 vec4 pixelColor = IMG_PIXEL(image imageName, vec2 pixelCoord); vec4 pixelColor = IMG_NORM_PIXEL(image imageName, vec2 normalizedPixelCoord); ISF独自のFunction • IMG_PIXEL, IMG_NORM_PIXEL など

11. OFJP #studygroup meetup 2015 Fall ISF Editorを動かしてみる 11 • VDMX がインストールされている場合は、Load System ISFs ボタンで VDMX 用のファイルが読み込まれる。  これらのファイルは「/Library/Graphics/ISF」にある。 • サンプルの ISF ファイルをドラッグ&ドロップ。 • サンプルの ISF ファイル群を格納したフォルダをドラッグ&ドロップ。   ⇐ドラッグ&ドロップ先

12. OFJP #studygroup meetup 2015 Fall ISFファイルを作ってみる 12 • File -> new ISF File • よさげなやつをコピーして改良。

13. OFJP #studygroup meetup 2015 Fall 素敵なShaderをパクるインポートする 13 • GLSL Sandbox  File -> Import from GLSL Sandbox  参考：http://glslsandbox.com/e#26309.4  • ShaderToy  File -> Import from Shadertoy  参考：https://www.shadertoy.com/view/ldfGWn  動画、音、インプットはうまくいかないっぽい？自分で作ったりインポートしたファイルは「/Users/****/Library/ Graphics/ISF」に入る。

14. OFJP #studygroup meetup 2015 Fall インポート時に自動で変換されるもの 14 GLSL Sandbox Shadertoy ISF resolution iResolution RENDERSIZE time iGlobalTime TIME mouse iMouse point2Dとして変換 texture2D() texture2D() IMG_NORM_PIXEL() 画像やテクスチャはこんな感じで変換される。 // ShaderToy texture2D( iChannel0, (ﬂoor(uv)+0.5)/256.0, -100.0 )  // ISF IMG_NORM_PIXEL(iChannel0,mod((ﬂoor(uv)+0.5)/256.0,1.0),-100.0)

15. OFJP #studygroup meetup 2015 Fall 作ったISFをVDMXで使う 15 • エフェクトの場合  Layer FX -> Load Asset • 単体ジェネレータの場合  Media Bin へ画像持ってこれないっぽい？ Load Asset Media Bin

16. OFJP #studygroup meetup 2015 Fall openFrameworksでISFを使う 16 satoruhiga/ofxISF https://github.com/satoruhiga/ofxISF oF 0.9.0 でサンプルがビルドできなかったので何とか動かしたい。 #hell_yeah_crash で会いましょう。

17. OFJP #studygroup meetup 2015 Fall 参考ページお話した内容が記載されているページです。 • Using the ISF Editor To Create GLSL Generators and FX ̶ VDMX - MAC VJ SOFTWARE  http://vdmx.vidvox.net/tutorials/using-the-isf-editor • Introducing ISF Video Generators and FX ̶ VDMX - MAC VJ SOFTWARE  http://vdmx.vidvox.net/blog/isf • Interactive Shader Format  http://www.interactiveshaderformat.com/spec 17

18. OFJP #studygroup meetup 2015 Fall ありがとうございました！ 18 Twitter: @chimanaco Facebook: Yasushi Harada

ISFで遊ぼう！

ISFで遊ぼう！

Recomendados

Más contenido relacionado

Was ist angesagt?

Was ist angesagt?(20)

Similar a ISFで遊ぼう！

Similar a ISFで遊ぼう！(20)

Último

Último(6)

ISFで遊ぼう！