ISFで遊ぼう！

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

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

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

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で購入

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

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/

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 にする。

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();
}

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

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 など

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

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

素敵な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
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)

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

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

参考ページ
お話した内容が記載されているページです。
• 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
Twitter: @chimanaco
Facebook: Yasushi Harada

ISFで遊ぼう！

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie ISFで遊ぼう！

Ähnlich wie ISFで遊ぼう！ (20)

ISFで遊ぼう！