AudioVisual勉強会 #1

title.frag

body.frag

GLSL LiveCoding

について

Renard

1

2

3

4

5

6

7

8

9

10

11

12

13

14

AudioVisual勉強会 #1

title.frag

body.frag

自己紹介

• Renard(レナード)と名乗っています
• 普段はVRChatで動くシェーダーを書いたり、色々なところでVJしたりしています
• 大学4年です

1

2

3

4

5

6

7

8

9

10

11

12

13

14

AudioVisual勉強会 #1

title.frag

body.frag

少しだけ作品を紹介

1

2

3

4

5

6

7

8

9

10

11

12

13

14

AudioVisual勉強会 #1

title.frag

body.frag

1

2

3

4

5

6

7

8

9

10

11

12

13

14

AudioVisual勉強会 #1

title.frag

body.frag

LiveCodingについて

• この話はDemoparty文化との関りが深い
• Inigo Quilez(iq先生)が画面全体を一つのフラグメントシェーダーで覆い始め、ShaderToyで世界中のShader書きが色々なシェーダーを書いてきた
• このsingle-shader-single-quad-single-pass shader codingの思想はShaderShowdownという文化を生み出した
• ShaderShowdown：25分でゼロからシェーダーを書く、狂気の所業

​

1

2

3

4

5

6

7

8

9

10

11

12

13

14

AudioVisual勉強会 #1

title.frag

body.frag

1

2

3

4

5

6

7

8

9

10

11

12

13

14

AudioVisual勉強会 #1

title.frag

body.frag

LiveCodingの準備

1

2

3

4

5

6

7

8

9

10

11

12

13

14

AudioVisual勉強会 #1

title.frag

body.frag

LiveCodingツールを選ぶ - 1

https://github.com/slerpyyy/sh4der-jockey

• glslを書く事だけに集中できるツール
• コードエディタはないが、ホットリロードしてくれるのでライブコーディングできる
• MIDIのバインディングがGUIで簡単にできる

1

2

3

4

5

6

7

8

9

10

11

12

13

14

AudioVisual勉強会 #1

title.frag

body.frag

LiveCodingツールを選ぶ - 2

https://hexler.net/kodelife

• MIDI,fft,3dモデル,video,OSC,spoutとかを色々扱える
• エディタとか諸々すべてついているので、これだけ買えば(3,628円)直ぐ始められる
• 初心者におすすめ！

1

2

3

4

5

6

7

8

9

10

11

12

13

14

AudioVisual勉強会 #1

title.frag

body.frag

LiveCodingツールを選ぶ - 3

https://twigl.app/

• ブラウザで動くので手軽
• 動画も簡単にエクスポートできる
• つぶやきGLSLの公式(?)レギュレーション

1

2

3

4

5

6

7

8

9

10

11

12

13

14

AudioVisual勉強会 #1

title.frag

body.frag

LiveCodingツールを選ぶ - 4

https://github.com/Gargaj/Bonzomatic

• 先ほど少し触れたShaderShowdownの公式レギュレーション
• スタンドアロンでエディタも包含してるので、ダウンロードしたらすぐに使える
• Demoparty用に作られた為(多分)サーバーを建ててリモートでライブコーディングできる

1

2

3

4

5

6

7

8

9

10

11

12

13

14

AudioVisual勉強会 #1

title.frag

body.frag

LiveCodingをしよう

1

2

3

4

5

6

7

8

9

10

11

12

13

14

AudioVisual勉強会 #1

title.frag

body.frag

LiveCoding - 何を作るか考える

​

• 本当に空でコードを書く人もいますが、私は怖いのでパフォーマンスの前には大雑把な仕込みをしています
• 出したい絵に向かってある程度コードを書いてみて、できそうだったら「よし、いけるな」と思ってよしとなります

できたもの

メモ(本番中は見ない)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

AudioVisual勉強会 #1

title.frag

body.frag

LiveCoding - パフォーマンス中に考える事

​

• VJとしてパフォーマンスする場合、音と合わせる必要があります
• 私は以下の手法をよく使います�
• BPMから拍を計算し、拍ごとに演出を割り当てる
• ドロップの時にチカチカさせる
• 穏やかになった時にbackbufferとmixする

https://www.shadertoy.com/view/4fVGDK

このLiveCodingのアーカイブを例に説明していきます(この時はBonzomaticを使用)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

AudioVisual勉強会 #1

title.frag

body.frag

LiveCoding - パフォーマンス中に考える事1

​

BPMから拍を計算し、拍ごとに演出を割り当てる

• グローバルに拍のインデックス(bt)、正規化された時間(tr)、拍毎にイージングされた全体の時間(lt)を定義し、コード全体で使用可能にしておく
• btに対するhashも用意しておくと、拍ごとに固有の演出を作りやすい

1

2

3

4

5

6

7

8

9

10

11

12

13

14

AudioVisual勉強会 #1

title.frag

body.frag

LiveCoding - パフォーマンス中に考える事2

​

ドロップの時にチカチカさせる

• ドロップが来そうなときに、コメントアウトを解除して備える
• 1秒で8回点滅
• 光を足すより、引く形で点滅させると目にやさしい説

1

2

3

4

5

6

7

8

9

10

11

12

13

14

AudioVisual勉強会 #1

title.frag

body.frag

LiveCoding - パフォーマンス中に考える事3

​

穏やかになった時にbackbufferとmixする

• ドロップと同じく、穏やかになりそうなときにコメントアウトする
• ブラーがかかるので、無理やり穏やかにできる
• 色収差とか入れるとエモい感じに

1

2

3

4

5

6

7

8

9

10

11

12

13

14

AudioVisual勉強会 #1

title.frag

body.frag

まとめ1

• とりあえず、良さそうなツールを使ってシェーダーを書いてみるのが良いと思います
• GLSLの学習については触れませんでしたが調べるといっぱい資料があるので、学ぶのには困らないと思います！�おすすめの教材等はスライドの最期にまとめています
• 即興でコードを書いたりしていると、自分の期待通りではない、想像の外側から絵が出てくることがあります�その感覚をつかむとシェーダーを書くのがまるでガチャの様に感じるため、無限に楽しくなります

1

2

3

4

5

6

7

8

9

10

11

12

13

14

AudioVisual勉強会 #1

title.frag

body.frag

まとめ2

• GLSLは割とどこでも動くので、あまりLiveCoding環境は重要ではない(テンションが上がるのを使っています)
• VJとしてLiveCodingする場合、曲のテンポや展開に完全に合わせるのは難しいが、それっぽいだけでも十分効果的だと思う
• 慣れないうちはゼロからコードを書くのは難しいと思うので、幾つかの関数やマクロを事前に書いちゃうのも良いと思う(ShaderShowdownの様なレギュレーションが無ければ)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

AudioVisual勉強会 #1

title.frag

body.frag

GLSLおすすめ資料

• リアルタイムグラフィックスの数学
• レイマーチング0から1 by 0b5vr
• Inigo Quilez - articles
• wgld.org - GLSL Contents
• The Book of Shaders

1

2

3

4

5

6

7

8

9

10

11

12

13

14