21

私が取り組んでいる 3D エンジンでは、3D で立方体をうまく描画できました。私に関する限り、側面を塗りつぶす唯一の方法は、単色またはグラデーションのいずれかを使用することです。もっとエキサイティングにするために、単純なビットマップを使用してテクスチャ マッピングを実装したいと思っています。

要点は、JavaScript での画像操作に関する記事やコード サンプルがほとんど見つからないことです。さらに、HTML5 キャンバスでの画像のサポートはトリミングに限定されているようです。

長方形のビットマップが不規則な立方体の面を埋めることができるように、ビットマップを引き伸ばすにはどうすればよいですか? 2D では、投影された正方形立方体の面は遠近法により正方形ではないため、四角形に収まるように伸ばす必要があります。

うまくいけば、この画像が私の主張を明確にします。左面が白/黒のグラデーションで塗りつぶされました。テクスチャ マッピングされた後、ビットマップで塗りつぶすにはどうすればよいですか?

キューブ

JavaScript と HTML5 Canvas を使用したパースペクティブ テクスチャ マッピング (または画像操作) に関するヒントはありますか?

編集: 6502 のおかげでうまくいきました!

ただし、かなり CPU を集中的に使用するため、最適化のアイデアをぜひお聞かせください。

6502 の手法を使用した結果-テクスチャ画像を使用

4

1 に答える 1

48

正確な結果が得られることは決してないと思います... canvas 2d コンテキストを使用して 3d グラフィックスを実行する方法を調査するのに時間を費やしました。適切な 2d グラデーションとマトリックスを計算することにより、テクスチャ マッピング グーロー シェーディングを実行できることがわかりました。

  • 立体ポリゴンはもちろん簡単
  • グーロー塗りつぶしは 1 つのコンポーネントでのみ可能です (つまり、すべての頂点がバイリニア補間で塗りつぶされた任意の RGB である三角形を持つことはできませんが、たとえば単色の 3 つの任意の色合いを使用して塗りつぶすことができます)。
  • クリッピングと画像描画を使用して、線形テクスチャ マッピングを実行できます。

メッシュのサブディビジョンを使用して、パースペクティブに正確なテクスチャ マッピングを実装します (PS1 のように)。

しかし、私は多くの問題を発見しました...たとえば、マトリックス変換（テクスチャマッピングに必要）を使用した画像描画はクロムで非常に不正確であり、IMOではピクセル精度の結果を取得することは不可能です。一般に、キャンバスに描画するときにアンチエイリアシングをオフにする方法はありません。これは、三角形を分割するときに透けて見える線が表示されることを意味します。また、マルチパス レンダリングが chrome で非常にうまく機能していないこともわかりました (おそらく、ハードウェア アクセラレーション レンダリングがどのように実装されているかが原因です)。

一般に、この種のレンダリングは確かに Web ブラウザーにとってストレスであり、明らかにこれらのユース ケース (たとえば、奇妙なマトリックス) は十分にテストされていません。Firefox がひどくクラッシュして、Ubuntu の X サブシステム全体がダウンすることさえありました。

私の努力の結果は、ここまたはビデオとしてここで見ることができます... IMO は、これが 3D 拡張機能を使用せずにブラウザーで実行できることに確かに感銘を受けていますが、現在の問題が将来修正されるとは思いません。

とにかく、4 つのコーナーが特定のピクセル位置になるように画像を描画するために使用される基本的な考え方は、それぞれが双一次補間を使用する 2 つの三角形を描画することです。

texture次のコードでは、画像オブジェクトと 4 つのコーナーがあり、それぞれがターゲット キャンバス上のピクセル座標と 上のピクセル座標であるフィールドx,y,u,vを持つオブジェクトであると想定しています。x,yu,vtexture

function textureMap(ctx, texture, pts) {
    var tris = [[0, 1, 2], [2, 3, 0]]; // Split in two triangles
    for (var t=0; t<2; t++) {
        var pp = tris[t];
        var x0 = pts[pp[0]].x, x1 = pts[pp[1]].x, x2 = pts[pp[2]].x;
        var y0 = pts[pp[0]].y, y1 = pts[pp[1]].y, y2 = pts[pp[2]].y;
        var u0 = pts[pp[0]].u, u1 = pts[pp[1]].u, u2 = pts[pp[2]].u;
        var v0 = pts[pp[0]].v, v1 = pts[pp[1]].v, v2 = pts[pp[2]].v;

        // Set clipping area so that only pixels inside the triangle will
        // be affected by the image drawing operation
        ctx.save(); ctx.beginPath(); ctx.moveTo(x0, y0); ctx.lineTo(x1, y1);
        ctx.lineTo(x2, y2); ctx.closePath(); ctx.clip();

        // Compute matrix transform
        var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2;
        var delta_a = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2;
        var delta_b = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2;
        var delta_c = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2
                      - v0*u1*x2 - u0*x1*v2;
        var delta_d = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2;
        var delta_e = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2;
        var delta_f = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2
                      - v0*u1*y2 - u0*y1*v2;

        // Draw the transformed image
        ctx.transform(delta_a/delta, delta_d/delta,
                      delta_b/delta, delta_e/delta,
                      delta_c/delta, delta_f/delta);
        ctx.drawImage(texture, 0, 0);
        ctx.restore();
    }
}

これらすべての「デルタ」変数の醜い奇妙な式は、クラマーの方法と3x3 行列式のSarrusスキームを使用して、3 つの未知数で 3 つの方程式の 2 つの線形システムを解くために使用されます。

aより具体的には、 、b、 ...の値を探してf、次の式が満たされるようにします。

a*u0 + b*v0 + c = x0
a*u1 + b*v1 + c = x1
a*u2 + b*v2 + c = x2

d*u0 + e*v0 + f = y0
d*u1 + e*v1 + f = y1
d*u2 + e*v2 + f = y2

delta行列式

u0  v0  1
u1  v1  1
u2  v2  1

たとえば、最初の列を, , にdelta_a置き換えると、同じ行列の行列式になります。これらを使用すると、 を計算できます。x0x1x2a = delta_a / delta

于 2011-01-23T14:25:59.230 に答える