5

頂点配列を WebGL テクスチャに格納しようとしていますが、正しく行う方法がわかりません。これの目的は、頂点をフラグメント シェーダーに渡し、レイトレーシング用に処理することです。

現在、私の JavaScript コードは次のようになっています。

var a = new ArrayBuffer();
// Model.VerticeMap is an array holding all vertices [x1, y1, z1, x2, y2, z2, ...]
a = Model.VerticeMap;  // array length: 36864
var dataArray = new Float32Array(a);
var vMapTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, vMapTexture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, 2, 2, 0, gl.RGB, gl.FLOAT, dataArray);

テクスチャの幅と高さが 2 の場合、エラーは発生しません。値を大きくすると、エラーが発生しますArrayBufferView not big enough for request。

OES_texture_floatテクスチャの float 値にも拡張を使用しています。

私がそこで何をしているのか 100% 確信が持てないことを認めなければなりません。このコードでエラーが発生しないようになったときは、ちょっとうれしかったです。私の主な考えは、すべての頂点の x、y、z 値をテクスチャのすべてのピクセルの r、g、b 値として保存することでした。したがって、テクスチャ サイズは、3D モデルの三角形の数以上にする必要があります。残念ながら、WebGL のテクスチャ サイズは 2 の累乗に制限されています。シーンで複数のモデルをレンダリングする予定なので、頂点の数も可変にする必要があります。

WebGL のフラグメント シェーダーに頂点を送信する際の問題を解決するための、 ArrayBuffer、 a 、Float32Arrayおよびコマンドの正しい使用法に関する支援をいただければ幸いです。texImage2D()

4

2 に答える 2

2

私の問題の解決策を見つけたと思います：

まず、適切なテクスチャ幅を計算する必要があります

var vMapTexture = gl.createTexture();
var vertexTextureWidth = Math.ceil(Math.sqrt(verticeCount/3));

頂点配列の長さをverticeCount3 で割り、ピクセルの RGB コンポーネントに合わせます。平方根を取り、切り上げて、すべての頂点がテクスチャに収まるようにします。テクスチャの幅もテクスチャの高さと同じです。

次に、Float32Array を作成します。

var a = new Float32Array(vertexTextureWidth * vertexTextureWidth * 3);

頂点配列の値を入力します

for(var i = 0; i < (verticeCount); i++){
a[i] = Model.VerticeMap[i];
}

テクスチャをアクティブに設定してバインドします。

gl.activeTexture(gl.TEXTURE1);
gl.bindTexture(gl.TEXTURE_2D, vMapTexture);
gl.uniform1i(gl.getUniformLocation(this.program, "uVertexTexture"), 1);

データをテクスチャにパックするには、次の行を使用します

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, vertexTextureWidth, vertexTextureWidth, 0, gl.RGB, gl.FLOAT, a);

RGB形式と型を使用しますFLOAT。これを行うには、OES_texture_float拡張機能を有効にする必要があります。

最後に、次のテクスチャ パラメータを追加します。

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);

結果のテクスチャには頂点配列が含まれ、次のようになります

RGB 頂点テクスチャ

このソリューションへのコメントやコメントをお待ちしています。コードの簡素化やその他のアプローチに自由に貢献してください。

于 2013-07-04T09:23:14.220 に答える
-3

バッファが気に入らない場合は、WebGL の学習から始める必要があります (他の誰もがそうしています)。

各カラー値は 1 バイトしか格納せず、頂点には少なくともいくつかの float32 が必要になるため、テクスチャは頂点データを格納するのに適していません。とにかく、あなたの試みはシェーダー属性とポイントプロットに行きます。

于 2013-07-03T23:09:20.737 に答える