GLSLで音楽

GLSLで音楽なんて何を考えているだ。ですよね。でも、これをクリアしないとdemoが書けないのです。こいつに手を出して、もうボチボチ2年近くになります。なんとなくイケるレベルに達したようだし、記事を書いてみます。しばらく連載してみます。記事を書いて頭の中を整理して、次のステップをみたいな。

GLSLで音楽といっても、たぶん入り口が、解らないと思うので、htmlのサンプルを書いておきます。transform feedbackを使ってます。こいつのvertex shaderの部分だけで音楽をつくります。
ソースの中にある

var duration = 120;

は、音楽の演奏時間を秒で表した数字です。


<html>
<body>
<script id="vs" type="x-shader/x-vertex">
#version 300 es
uniform float sampleRate; 
out vec2 gain; 

vec2 mainSound(float time)
{
  return vec2( sin(6.2831*440.0*time)*exp(-3.0*time) );
}

void main() {
  float time = float(gl_VertexID) / sampleRate;
  gain = mainSound(time);
}

</script>

<script id="fs" type="x-shader/x-fragment">
#version 300 es
void main() {}
</script>

<script type="text/javascript" >
var duration = 120;
var audio = new AudioContext();
var sampleRate = audio.sampleRate;
var bufferSize = audio.sampleRate * duration;
var audioBuffer = audio.createBuffer(2, bufferSize, audio.sampleRate);
var node = audio.createBufferSource();
var canvas = document.createElement('canvas');
var gl = canvas.getContext("webgl2") || canvas.getContext("experimental-webgl2");
var compileShader = function(prog, src, type){
  var sh = gl.createShader(type);
  gl.shaderSource(sh, src.replace(/^\n/, ""));
  gl.compileShader(sh);
  if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) {
    alert(gl.getShaderInfoLog(sh));
  } 
  gl.attachShader(prog, sh);
  gl.deleteShader(sh);
};
var program = gl.createProgram();
compileShader(program, vs.text, gl.VERTEX_SHADER);
compileShader(program, fs.text, gl.FRAGMENT_SHADER);
gl.transformFeedbackVaryings(program, ['gain'], gl.SEPARATE_ATTRIBS);
gl.linkProgram(program);
gl.useProgram(program); 
gl.uniform1f(gl.getUniformLocation(program, "sampleRate"), sampleRate); 
var VBOs = [gl.createBuffer(),gl.createBuffer()];
for (var i = 0; i < 2; ++i) {
  gl.bindBuffer(gl.ARRAY_BUFFER, VBOs[i]);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(bufferSize*2), gl.STATIC_DRAW);
}
gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, VBOs[0]);
gl.enable(gl.RASTERIZER_DISCARD);
gl.beginTransformFeedback(gl.POINTS);
gl.drawArrays(gl.POINTS, 0, bufferSize);
gl.endTransformFeedback();
gl.disable(gl.RASTERIZER_DISCARD);
gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, null);
gl.bindBuffer(gl.ARRAY_BUFFER, VBOs[0]);
var aryBuffer = new ArrayBuffer(bufferSize*4*2);
var dataView = new DataView(aryBuffer);
gl.getBufferSubData(gl.ARRAY_BUFFER, 0, dataView); 
var buf = new Float32Array(aryBuffer);
var data0 = audioBuffer.getChannelData(0);
var data1 = audioBuffer.getChannelData(1);
for(var i = 0; i < bufferSize; i++) {
  data0[i] = buf[i*2];
  data1[i] = buf[i*2+1];
}
node.buffer = audioBuffer;
node.loop = false;
node.connect(audio.destination);
node.start(0);
</script>
</body>
</html>

音楽を作るという事は

音源とシーケンスをshaderで書く。これだけだ。きっと。

まず音源

サンプルの中のvertex shaderに書いてある

sin(6.2831*440.0*time)

これが音源です。440Hzの純音と呼ばれてるやつです。Aのキーで、なんか基準の周波数らしい。

exp(-3.0*time)

エンベロープと呼ばれてます。時間で自然衰減する関数です。ほっておけば音は小さくなる、当たり前のこと。この2つを乗算して使うが基本です。

シーケンスについて

MIDIの規格で、ノートオフまで衰減しないモノもあるけど、shaderでそれをする事は放棄しました。放棄すればshaderでシーケンスに道がみえてきます。

少しずつ書いてきます

今、シーケンスを文字数の少ない関数に納めました。だけど、これを見せても多分、理解して貰えないでしょう。単純にコマンドとして使えるし問題ないけど、説明も入れていきます。これをする理由は、久々に自分のshaderを読んで読み解けなかったからです。もう一回、最初から構築しながら記事を書いていこうと思います。

GLSLで音楽の記事

GLSLで音楽（まずは、ドラムだ）
GLSLで音楽（メロディーいってみます）
GLSLで音楽（和音を使ってみる）
GLSLで音楽（今までの応用の一つ）

GLSLで音楽（はじめに）