VDMX などのアプリケーションで使える GLSL ベースのシェーダフォーマットである ISF( Interactive Shader Format) のご紹介です。

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 filters
http://vidvox.net/rays_oddsnends/ISF%20files.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": "float",
"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, (floor(uv)+0.5)/256.0, -100.0 )
// ISF
IMG_NORM_PIXEL(iChannel0,mod((floor(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