4/28(土)、GLSLライブコーディングのワークショップを開催します

f:id:amagitakayosi:20180423123311p:plain

こんにちはアマギです。
VEDAというライブコーディングVJシステムを開発しています。

この度、TOPLAP JP主催で、GLSLライブコーディングのワークショップを開催することになりました!

お申込みはこちら: http://toplap.jp/post/2018-04-28

TOPLAPは世界中に支部があるライブコーディングコミュニティです。 今回は日本支部のmoxusさんからお誘いがあり、京都でワークショップを行うことになりました。 moxusさんはAlgorave Tokyoに出演したり、Tokyo SuperColliderを運営されていたりと、東京のライブコーディングコミュニティで活躍されている方です。

http://tokyosupercollider.blogspot.jp/

ワークショップの内容

GLSLはWebGL等の3DCGで利用するシェーダー用の言語です。 本来は3DCGのライティング計算のために作られましたが、現在ではGLSL単体で映像を生成したり、VJソフトで映像エフェクトとして利用されたりと、幅広い分野で使われています。

今回のワークショップでは、ライブコーディングに特化したGLSL表現を学びます。 おおまかな内容としては以下を予定しています:

  • GLSLの基礎
  • フラグメントシェーダーの基礎
  • 画像/動画にエフェクトをかける
  • 頂点シェーダーと組み合わせる
  • 音声入力やMIDI入力を利用した表現

初学者でも学べるように心がけます。 時間に余裕があれば実習とか、GLSLで音楽を生成する話もできれば良いな。

VEDAについて

veda.gl

講義では、拙作のライブコーディングシステム VEDA を使います。 Atomのパッケージとして動作し、スムーズなGLSLのコーディングを可能にします。

VEDAは以下のような特長があります:

こちらは実際にVJをした時の様子です。 GLSLでリアルタイムにエフェクトを書いて実行しています。

www.youtube.com

他にも、3Dモデルを利用するとこのような表現も可能です。

www.youtube.com

このブログでは、これまでもVEDAについて紹介してきましたので、興味のある方はご覧ください。

というわけで

GLSLやライブコーディングに興味のある方はぜひご参加ください!! また、ワークショップという形式ではありますが、関西のクリエイティブコーディング系の方々で集まって交流できたら良いなーと思っています。

よろしくお願いします!!

お申込みはこちら: http://toplap.jp/post/2018-04-28

『君はGPUの歓声を聴いたことがあるか』という発表をした

speakerdeck.com

WebGL/GLSLで音声処理したり、音声ファイルをGPUにロードしたりといった内容です。
これらの技術を駆使することで、GLSLだけで以下のような演奏が可能になります。

この記事は Kyoto.js 14 での発表の解説です。
当日の様子は ハッシュタグ #kyotojs でご覧になれます。

また、他の発表資料はconnpassページにあるので、そちらも合わせてどうぞ。

Kyoto.js 14 - 資料一覧 - connpass

Sound Shaderとは?

GLSLはOpenGLWebGLで陰影やテクスチャを計算するための言語です。
しかし、出力された画像を音声に変換することで、無理やりGPU上で音声処理を行なうことができます。
この技術を僕は Sound Shader と呼んでいます。

Sound Shaderは、主にメガデモやShadertoy界隈で用いられてきた技術です。
先日のメガデモ勉強会でも発表があったり、Qiitaに記事が上がってたりします。

このブログでも、過去に何度か紹介してきました。

今回の発表について

今回の発表では、Sound Shaderの原理から、WebGLでの実装方法を紹介しました。
また、音声ファイルを読み込んで利用する方法についても解説しています。

発表で使ったデモは以下のページで公開しています。
(実行にはVEDAのインストールが必要です)

blog.gmork.in

たとえば、 basic.fragAtomで開き、VEDAで alt-enter を押すと、次のような音が再生されます。

www.youtube.com

GLSLのフラグメントシェーダーでは、基本的に1ピクセルにつき1回main関数が実行されます。
今回の実装では、1ピクセルを音声の1サンプルに割り当てて音声処理をしています。
つまり、 sin(440.0 * time * PI2) と書くだけで、440Hzのサイン波を鳴らす事ができるのです。

また、 samples.frag を実行することで、冒頭の動画のような音楽が再生されます。

音声ファイルのロードでは、音声ファイルを一度画像に変換し、GPU上で処理した後、出力された画像をもう一度音声に変換する、という手順を踏んでいます。

質疑応答

音声ファイルを画像に変換したのってどういう見た目か見れますか?

  • 今は見れないけど、それを利用して映像も生成したら面白そうですね

VEDA起動しながら仕事してますか?

  • たまにやってます
  • 他にも、昼休みにTidalCyclesで音楽つくって、午後垂れ流しながら仕事したりする

というわけで、Atomユーザーの皆様は是非お手元でお試しください。 質問は @amagitakayosi までお気軽にどうぞ!

そのうち京都でもGLSLのワークショップとかやりたいなあ……。