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

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

sound shader test. both graphics & music are generated by #GLSL with #VEDAJS . pic.twitter.com/Gp8OeGcNuZ
— amagi (@amagitakayosi) 2018年3月22日

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

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

Sound Shaderとは？

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

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

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

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

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

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

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

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

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

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

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