HTML5キャンバスを使用した画像操作とテクスチャマッピング？

Question

私が取り組んでいる3Dエンジンでは、3Dでキューブを描くことができました。側面を埋める唯一の方法は、私に関する限り、固体または勾配のいずれかを使用することです。物事をよりエキサイティングにするために、私は本当にシンプルなビットマップを使用してテクスチャマッピングを実装したいです。

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

長方形のビットマップが正規のないキューブの顔を埋めることができるように、ビットマップを伸ばすにはどうすればよいですか？ 2Dでは、予測される四角い立方体の顔は、視点のため、正方形の形状ではないため、四辺形に収まるようにするために伸ばす必要があります。

うまくいけば、このイメージが私の主張を明確にすることを願っています。左の顔は、白/黒の勾配で満たされています。テクスチャマップになった後、どうすればビットマップで埋めることができますか？

JavaScriptとHTML5キャンバスを使用して、パースペクティブテクスチャマッピング（または画像操作）に関するヒントはありますか？

編集： 6502のおかげで、私はそれを機能させました！

しかし、それはむしろCPU集中的なので、最適化のアイデアを聞きたいです。

6502のテクニックを使用した結果 - 使用されるテクスチャ画像

Answer 1

正確な結果は得られないと思います... Canvas 2Dコンテキストを使用して3Dグラフィックスを行う方法を調査するのに時間を費やしました。

• もちろん、固体ポリゴンは簡単です
• Gouraudの充填は1つのコンポーネントでのみ可能です（つまり、すべての頂点が双線形補間で満たされた任意のRGBである三角形を持つことはできませんが、たとえば単一の色の3つの任意の色合いを使用してその充填を行うことができます）
• 線形テクスチャマッピングは、クリッピングと画像描画を使用して実行できます

Mesh Subdivision（PS1など）を使用して、Perspective-Cortureテクスチャマッピングを実装します。

しかし、私は多くの問題を発見しました...たとえば、マトリックス変換（テクスチャマッピングに必要な）を使用した画像描画（テクスチャマッピングに必要）は、ChromeとIMOで非常に不正確です。一般に、キャンバスを描くときにアンチアリアーシングをオフにする方法はありません。これは、三角形で細分化するときに目に見えるシースルーラインを取得することを意味します。また、Chromeでマルチパスレンダリングが非常に悪く動作することがわかりました（おそらく、HWアクセラル化されたレンダリングがどのように実装されているかのためです）。

一般に、この種のレンダリングは確かにWebブラウザーにとってストレスであり、明らかにこれらのユースケース（たとえば奇妙なマトリックス）はあまりうまくテストされていません。 Firefoxをひどくcrash落させることができたので、UbuntuのX Susbs -Stume全体を倒しました。

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

とにかく、4つのコーナーが特定のピクセルの位置に終わるように画像を描画するために使用される基本的なアイデアは、2つの三角形を描画することであり、それぞれが双線形補間を使用します。

次のコードで、私はあなたが画像オブジェクトを持っていると仮定します texture それぞれがフィールドを持つオブジェクトです x,y,u,v どこ x,y ターゲットキャンバスのピクセル座標です u,v ピクセル座標です texture:

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

これらすべての「デルタ」変数のこれらのugい奇妙な式は、3つの不明の3つの方程式の2つの線形システムを使用して使用して使用されます。 クレイマー 方法と サラス 3x3決定要因のスキーム。

より具体的には、の価値を探しています 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 最初の列をに置き換えるとき、同じマトリックスの決定要因です x0, x1, x2. 。これらを使用すると、計算できます a = delta_a / delta.