『君は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のワークショップとかやりたいなあ……。