0

私はここを読んでいます。このinitBuffers関数は、描画する必要があるオブジェクトの頂点を Buffer に格納するために使用されます。

var triangleVertexPositionBuffer;
var triangleVertexColorBuffer;
function initBuffers() {
    triangleVertexPositionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
    var vertices = [
         0.0, 1.0, 0.0,
        -1.0, -1.0, 0.0,
         1.0, -1.0, 0.0
    ];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
    triangleVertexPositionBuffer.itemSize = 3;
    triangleVertexPositionBuffer.numItems = 3;

    triangleVertexColorBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);
    var colors = [
        1.0, 0.0, 0.0, 1.0,
        0.0, 1.0, 0.0, 1.0,
        0.0, 0.0, 1.0, 1.0,
    ];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
    triangleVertexColorBuffer.itemSize = 4;
    triangleVertexColorBuffer.numItems = 3;
}

これは、三角形に対して定義されたある種の「形状」です。さて、すべてのタイプとサイズの形状が必要な場合は、形状ごとにバッファを保持する必要がありますよね? triangleVertexPositionBufferそして、初期化する必要がありますよね？

すべての新しい形状の新しいバッファ オブジェクトは必須ですか?

ボタンを使用して、実行時にあらゆる種類の形状を作成できるシステムを作成する予定です。この問題の解決策はありますか？実行時に新しいバッファを作成するにはどうすればよいですか? 共通の既存のソリューションはありますか?

バッファ オブジェクトの配列を作成すると、パフォーマンスが低下しますか?

4

1 に答える 1

2

フレームごとに initBuffers を呼び出しても、WebGl は気にしません。まあ、パフォーマンスはそうかもしれません。

JavaScript はインタープリター言語であるため、実行時間とコンパイル時間の概念は実際には存在しません。ただし、高度なことの 1 つは、webgl が必要とするシェーダーを、実行時に生成される「リテラル」文字列、および外部ファイルと html 要素から生成できることです。

three.jsなどの利用可能なwebglインフラストラクチャがありますが、Javascript自体が答えだと思います。

編集：コメントでの追加の質問について。OpenGL と WebGL は、本質的には説明したとおりに機能しますが、マトリックスを使用すると、オブジェクトにオフセットを与えるだけでなく、より柔軟になります。また、三角形間で頂点を共有するのに役立つ「インデックス バッファ」もあります。 

CubeCorners = [0,0,0,   0,0,1,  0,1,0,  0,1,1,  1,0,0,  1,0,1,  1,1,0,  1,1,1 ]; 
// There are 8 corners in a cube
//              0----1  <-- vertices (aka corners, with x=0)
//             /|   /|
//            4-+--5 |
//            | 2--|-3
//            |/   |/
//            6----7 
Triangles = [0,1,2, 1,3,2, 6,4,2, 2,4,0, 5,4,7, 4,6,7,  ... + 6 other triangles ];
//
TransScaleMatrix = [X,0,0,0, 0,Y,0,0, 0,0,Z,0, ox,oy,oz,1];
// scales the object and sets an internal origin (around which object is rotated)
RotMatrix = [rx,ry,rz, 0, ux,uy,yz,0, tx,ty,tz, 0, Ox,Oy,Oz,1];
// aligns the objects orthogonal up,right,toward vectors to r,u,t, (i.e. rotates it)
// and translates it to new origin O.
CameraOrientationMatrix = [  ... ... ];
// sets cameras lookat, up and right vector + position
PerspectiveMatrix = [ ... ...];
// transforms viewing frustums 6 planes left,right,top,bottom,near and far planes
// to unit cube. (objects outside this cube are clipped away)

これらの配列を使用して、通常、頂点とオブジェクトが再利用される階層的なシーンをレンダリングします。立方体を 2 つの異なる位置だけでなく、異なる縮尺と異なる向きに配置することもできます。次に、シーンが「ワールド座標」でモデル化されると、カメラを特定の場所と特定の方向に配置し、遠近行列を適用して座標を「クリップ スペース」に変換し、画面座標 x、y、深度 z をモデル化します。

これらの行列の優れた点は、これらのそれぞれを、前述のすべてを実行する単一の行列に事前に乗算できることです。または、この一連の操作を、シェーダーでオンザフライで計算されるか、頂点バッファーで事前に計算される、可能な限り最適な量の操作に分割できます。レンダリングのボトルネックは通常、オブジェクトごとの頂点の数ではなく、 drawElements/drawArray 呼び出しと状態変更 (gl.useProgram) の量であるため、オブジェクトの再利用の最適なバランスを慎重に検討する必要があります。

于 2012-10-13T07:26:43.753 に答える