javascript - WebGL: フレームバッファを使用して複数のオブジェクトを選択する

Question

WebGL でピッキングを実装しようとしています。多くのオブジェクト (約 500) があり、それぞれを選択できるようにしたいと考えています。そのために、各オブジェクトに一意の色を割り当てるループを実行しました (ピッキングの原則を参照)。

for (var i = 0, len = objects.length; i < len; i++) {
   framecolors[count++] = i % 256 / 256; //Red
   framecolors[count++] = Math.floor(i/256) / 256; //Green
   framecolors[count++] = Math.floor(i/(256*256)) / 256; //Blue
}

framecolors次に、従来のバッファで使用して、各オブジェクトの赤の色合いが異なるかどうかを確認しました。出来た。

ここで、オブジェクトの元の色と、背景に赤の色合いを持つフレーム バッファーを使用したいと考えています。私はいくつかのコードを経験しましたが、少し混乱しています。

これが私がこれまでに試したことです。

選択する前に呼び出される関数:

//Creates texture
colorTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, colorTexture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 400, 400, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);

//Creates framebuffer
fb = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, colorTexture, 0);
gl.bindTexture(gl.TEXTURE_2D, colorTexture);
gl.enable(gl.DEPTH_TEST);

gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
gl.clear(gl.DEPTH_BUFFER_BIT);
gl.drawArrays(gl.POINTS, 0, vertexPositionBuffer.numItems);

後に呼び出される関数:

gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.bindTexture(gl.TEXTURE_2D, colorTexture);
gl.drawArrays(gl.POINTS, 0, vertexPositionBuffer.numItems);

おそらく理解できると思いますが、私はフレームバッファにあまり慣れていません。フレームバッファについてたくさん読んだにもかかわらず、フレームバッファがどのように機能するのかよくわかりません。フレームバッファにリンクする方法がわかりませんframecolors。方法はありますか？

ありがとう、R.