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

Question

私は3Dエンジンで、キューブを3Dで描くことに成功しました。側面を埋める唯一の方法は、私が心配している限り、ソリッドカラーまたはグラデーションのいずれかを使用しています。物事をもっとエキサイティングにするために、私は本当に単純なビットマップを使ってテクスチャマッピングを実装するのが大好きです。

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

どのようにしてビットマップを伸ばして、長方形のビットマップが不規則なキューブの面を埋めることができますか？ 2Dでは、投影された正方形のキューブの面は、正方形ではなく、四角形ではないので、四角形に収まるように伸ばしなければなりません。

この画像が私の所を明確に示してくれることを願っています。左面に白黒グラデーションが表示されます。テクスチャマップされた後、どのようにビットマップを塗りつぶすことができますか？

誰もがJavaScriptとHTML5のキャンバスを使用して透視テクスチャマッピング（または画像操作ですべての）上の任意のヒントを持っていますか？

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

しかし、CPUが集中しているので、最適化のアイディアを聞いてみたいと思います。

Result using 6502's techniqueからTexture image used

Answer 1

私はあなたが正確な結果を得ることは決してないだろうと思います...私はキャンバス2Dコンテキストを使用して3Dグラフィックスを行う方法を調査するいくつかの時間を費やして、私はそれが実行可能な計算することによって、テクスチャマッピングのグーローシェーディングを行うことが見いださ適切な2D勾配とマトリックス：

• 固体ポリゴンもちろん容易で
• グロー充填（すなわち、あなたがすべての頂点がバイリニア補間で満たされた任意のRGBである三角形を有するが、Yすることができない唯一のコンポーネントに可能ですOUは、例えば、単一色の任意の3つのシェード）リニアテクスチャマッピングは、私は同様に（メッシュの細分割を使用して、パースペクティブ補正テクスチャマッピングを実装し

描画クリッピングして画像を用いて行うことができる

を用いて充填することを行うことができPS1）。

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

一般に、この種のレンダリングは確かにウェブブラウザのストレスであり、明らかにこれらのユースケース（たとえば奇妙な行列）はうまくテストされません。 Firefoxをクラッシュさせて、UbuntuのX susbsystem全体を取り壊すことさえできた。

私の努力の結果を見ることができますhereまたはビデオhere ...IMOは3D拡張機能を使わずにブラウザでこれを行うことができると確信していますが、現在の問題は今後修正されるとは考えていません。

とにかく、4つのコーナーが特定のピクセル位置になるように画像を描画するために使用される基本的な考え方は、それぞれが双一次補間を使用する2つの三角形を描画することです。私はあなたが画像オブジェクトをx,y画素がターゲットキャンバスとu,v上の座標であるフィールドx,y,u,v持つオブジェクトである各々がtexture及び4隅を有すると仮定し、次のコードで

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

これらすべての「デルタ」変数のこれらの醜い奇妙な式は、Cramer'sメソッドを使用して3つの未知数の3つの方程式の2つの線形システムを解くために使用され、3×3行列式の場合はSarrusスキームです。

は、具体的には、我々は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,に置き換えたときの同じ行列の行列式です210。これらを使ってa = delta_a/deltaを計算することができます。