使用HTML5 Canvas进行图像处理和纹理映射？

Question

在我正在研发的3D引擎中，我成功地设计了3D立方体。就我而言，填充边的唯一方法是使用纯色或渐变。为了让事情更加令人兴奋，我真的很喜欢用简单的位图来实现纹理映射。

问题是，我几乎找不到关于JavaScript中图像处理主题的任何文章或代码示例。而且，HTML5画布中的图像支持似乎仅限于裁剪。

我怎么能去拉伸位图，以便矩形位图可以填满一个unregular立体面？在2D中，由于透视，投影的方形立方体面不是正方形，所以我必须将其拉伸以使其适合任何四边形。

希望这张图解释我的观点。现在左脸已经充满了白色/黑色渐变。如何在纹理映射之后使用位图填充它？

是否有人在使用JavaScript和HTML5画布角度纹理映射（或图像处理的话）任何提示？

编辑：我得到它的工作，感谢6502！

然而，它是CPU密集型的，所以我很乐意听到任何优化的想法。

Result using 6502's technique - Texture image used

Answer 1

我想你永远不会得到一个准确的结果......我花了一些时间研究如何使用Canvas 2D背景的，做3D图形，我发现它可行通过计算做纹理映射洛德着色适当2D梯度和矩阵：

• 实心多边形是当然容易的
• 高洛德填充有可能仅在一个部件（即，可以不具有三角形，其中每个顶点是任意RGB填充有双线性插值，但ÿ OU可以做，使用例如使用剪裁和图像绘制

我会使用网格细分实现立体-正确的纹理映射的单个颜色的三个任意色调）

线性纹理映射可以做填充（像PS1）。

不过，我发现了许多问题。例如图像与矩阵变换绘图（需要纹理映射）是对铬相当不准确和国际海事组织这是不可能得到一个像素精确的结果;通常在绘制画布时无法关闭抗锯齿功能，这意味着在细分为三角形时会看到可见的透视线。我还发现多通道渲染在chrome上的工作非常糟糕（可能是因为如何实现高速渲染渲染）。

一般来说这种渲染无疑是对Web浏览器，显然这些用例（例如奇怪矩阵）应力未经测试非常好。我甚至能够让Firefox崩溃得如此糟糕，以至于它在我的Ubuntu上占用了整个X系统。

您可以看到我的努力here的结果或视频here ...国际海事组织确实印象深刻的是，这可以在浏览器中完成，而不使用3D扩展，但我认为未来将不会解决当前的问题。

反正使用使得4个角中的特定像素位置结束绘制一个图像的基本思路是绘制两个三角形，其中的每一个将使用双线性内插。

在下面的代码我假设你有一个图象对象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(); 
    } 
} 

用于

所有这些“增量”的变量的那些难看奇怪的公式来解决三个方程的两个线性系统使用Cramer's方法和3x3的决定因素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。