三角形のストライプを以前のストライプと接続する必要があるのはなぜですか

debugcn 投稿 Dev

Joji

こんにちは私は最近webglを学び、それからある種のゲームを作ろうとしました。

これまでに作成したものはあまり意味がありませんが、ゲームロジックの一部が含まれています。

基本的には正方形を動かしたいのですが、一定のステップ内で正方形を動かすと、現在の位置が新しい正方形になり、前の正方形が大きくなったり長くなったりします。そして、あるポイントに到達すると、移動する正方形は最後の正方形を消去し、前の正方形から離れます。

これがデモです：https：//codepen.io/zhenghaohe/pen/xMVeWq

まず、バッファに十分なスペースを割り当てます。

gl.bufferData(gl.ARRAY_BUFFER, 200*4*8, gl.STATIC_DRAW);

画像サイズ400ピクセルx200ピクセルの20x10の正方形グリッドがあり、最大200の正方形を含めることができます。正方形ごとに、4つの頂点（三角形のストライプ）を使用して描画します。すべての頂点は8バイト（2フロート）です。

次に、先頭の正方形の中心を移動し、bufferSubDateを使用して新しい頂点をバッファーに送信します

function setNewBuffer(dir) {
        const newCenter = getNewCenter(dir,previousCenter);
        const newVertices = getNewVertices(newCenter);
        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
        if(index === BREAK_POINT) {
            index--;
        }
        gl.bufferSubData(gl.ARRAY_BUFFER, 32*index, new Float32Array(newVertices));
        index++;
        previousCenter = newCenter;
    }

今のところ問題は、ブレークポイントに達した後、私の正方形が水平に動いているときだけ、それは適切に切り離されてそれ自体で動くことができます、しかし私がそれを垂直に動かすとそれはどういうわけかそれらの前の正方形と突然接続します。理由がわかりません。

誰かがこの問題で私を助けることができますか？コードについて何か提案があれば、遠慮なく教えてください。

ありがとう

おじさんの古い顔

You use four point value to draw a rectangle with TRIANGLE_STRIP. TRIANGLE_STRIP will use each three point value to make a triganle: [ABCD] , webgl will draw triangle : ABC and BCD.

in your code :

initialVertices = [
    0, 0,
    0, 20,
    20, 0,
    20, 20,
];

When I enter RIGHT it will create a new vertices like this(for example , plus 10px):

[
    10, 0,
    10, 20,
    30, 0,
    30, 20,
]

and your code will subbuffer data to add the new vertices data in the buffer , so whole vertices data in the buffer is :

[
    0, 0,
    0, 20,
    20, 0,
    20, 20,
    10, 0,
    10, 20,
    30, 0,
    30, 20,
];

it means the vertices data are [ABCDEFGH] now.

TRIANGLE_STRIP type will use each three points to draw triangle , so there is 6 triangles will be drawn not 4 : ABC BCD CDE DEF EFG FGH , I think that you just want get : ABC BCD EFG FGH triangles.

resolve:

use the degenerate triangle.

Don't use [ABCD] vertices data directly , you can use [AABCDD] , 6 points data to make a rectangle.

[AABCDD] -> AAB ABC BCD CDD , AAB and CDD縮退した三角形であるため、webglはそれを描画しません。したがって、次のような新しい長方形のポイントデータを追加する[EEFGHH]と、バッファ内のデータ全体が[AABCDDEEFGHH]、webglによって三角形になります。

AAB ABC BCD CDD DDE DEE EFG FGH GHH、

AAB CDD DDE DEE GHH描画されないことがわかるので、2つの別個の長方形を取得できます。ABC BCD EFG FGH

あなたが私の優れた英語を理解できることを願っています

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-08-14

コメントを追加

サインイン

分類Dev

Related 関連記事

記事

三角形のストライプを以前のストライプと接続する必要があるのはなぜですか

三角形のストライプを以前のストライプと接続する必要があるのはなぜですか

三角形のスプライトでSKPhysicsBodyを作成する

RでChainLadder損失三角形の列をスライスする方法はありますか？

C ++で三角形の外側にポイントが生成されるのはなぜですか？

三角形が不等辺三角形、二等辺三角形、正三角形、または三角形でないかどうかをチェックするJAVAプログラム

三角ストリップのある新しい列に三角形を移動する

移動するスライドに角の三角形を追加できますか？

三角形のタイプを定義するプログラム

このOpenGLプログラムはなぜ三角形を描かないのですか？

ChromeとSafarifor Ipad 2がCSSの三角形を台無しにするのはなぜですか？

回転する三角形のスプライト内でヒットボックスを中央に配置するにはどうすればよいですか?

三角形のブートストラップ列

HTML入力を色の三角形とテキストでオーバーレイするにはどうすればよいですか？

フォーカスされたときにEditTextに小さな三角形と背景のハイライト色を作成するにはどうすればよいですか？

プロットされたグラフで、最大の三角形の交差がある領域を知りたいです

パスカルの三角形を印刷するようにプログラムを変更するにはどうすればよいですか？

リストビューに三角形のマークが付いているのはなぜですか？

三角形のforループでインデックスを回復する

ポリゴンから三角形のリストを取得する

PythonでネストされたForループ（三角形の周囲長を計算する）

SQLのストアドプロシージャを使用して星の三角形を作成するにはどうすればよいですか？

三角形ベースのクラフトツリーの解決策はありますか？

Meshlabは三角形の面を視覚化しません、プライフォーマットが間違っていますか？

クラスを理解する：3つのポイントを拡張して三角形を作成しますか？

左下から数を保持するリストの三角形のような構造を作成する

Vuforia iOSプロジェクトのティーポットオブジェクトを置き換えると、キューブの代わりに三角形だけが表示されるのはなぜですか？

凸多角形から均一にサンプリングするために、なぜ凸多角形を三角形分割する必要があるのですか？

Excelシートの隅にある小さな三角形は何ですか？

三角形分割されたポイントがOpenCVの同じイメージポイントに投影されないのはなぜですか？

外部ライブラリなしでPythonを使用して三角形の外心円を見つけるにはどうすればよいですか？