web-dev-qa-db-ja.com

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

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

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

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

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

Cube

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

編集：6502のおかげで動作しました！

ただし、CPUを集中的に使用するため、最適化のアイデアを聞いてみたいと思います。

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

javascripthtml3dtexture-mappinghtml5-canvas
19
pimvdb

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

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

メッシュの細分割を使用して、遠近法で正しいテクスチャマッピングを実装します（PS1のように）。

しかし、私は多くの問題を発見しました...たとえば、マトリックス変換（テクスチャマッピングに必要）を使用した画像描画は、chromeおよびIMOでは、ピクセル精度の結果を取得することは不可能です。キャンバスに描画するときにアンチエイリアスをオフにする方法はありません。これは、三角形に分割するときにシースルーラインが表示されることを意味します。また、マルチパスレンダリングがchrome（おそらくhw-accelleratedレンダリングがどのように実装されているかのため）。

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

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

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

次のコードでは、画像オブジェクトtextureと4つのコーナーがあり、それぞれがフィールド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();
    }
}

これらすべての「デルタ」変数の醜い奇妙な式は、3x3行列式の クラメルの メソッドと サラス スキームを使用して、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、x0、x1に置き換えると、x2は同じ行列の行列式になります。これらを使用して、a = delta_a / deltaを計算できます。

43
6502