使用HTML5 Canvas进行image processing和纹理映射？
在我正在研究的3D引擎中，我成功地devise了3D立方体。 填补双方的唯一方法是使用纯色或渐变就我而言。 为了使事情更加令人兴奋，我真的很喜欢用一个简单的位图来实现纹理映射。
重点是我几乎找不到任何关于JavaScript中image processing主题的文章或代码示例。 而且，HTML5canvas中的图像支持似乎仅限于裁剪。
我怎么能伸展一个位图，以便一个矩形的位图可以填补一个不规则的立方体脸？ 在2D中，由于透视，投影的方形立方体面不是正方形，所以我必须将其拉伸以使其适合任何四边形。
希望这张图片能澄清我的观点。 现在左脸上已经充满了白色/黑色渐变。 如何在纹理映射之后使用位图填充它？
有没有人有使用JavaScript和HTML5canvas透视纹理映射（或image processing）的任何提示？
编辑：我得到了它的工作，感谢6502！
但是，这是相当CPU密集型，所以我很乐意听到任何优化的想法。
结果使用6502的技术 – 使用纹理图像
我想你永远不会得到一个准确的结果…我花了一些时间研究如何使用canvas 2d上下文做3Dgraphics，我发现它可以通过计算适当的2d梯度和matrix做纹理映射gouraud着色：
- 固体多边形当然很容易
- Gouraud填充只能在一个组件上进行（也就是说，不能有三angular形，其中每个顶点都是用双线性插值填充的任意RGB，但是可以使用例如三种任意颜色的单色进行填充）
- 线性纹理映射可以使用裁剪和图像绘制来完成
我会实现透视正确的纹理映射使用网格细分（如在PS1上）。
然而，我发现很多问题…例如用matrix变换（纹理映射所需的）的图像绘制在铬和IMO上是相当不准确的，因此不可能获得像素精确的结果; 通常在绘制canvas时无法closures抗锯齿function，这意味着在细分三angular形时会看到可见的透视线。 我也发现在chrome上多通道渲染效果很差（可能是因为如何实现高速渲染）。
一般来说，这种渲染对网页浏览器来说确实是一种压力，显然这些用例（奇怪的matrix）没有得到很好的testing。 我甚至能够让Firefox崩溃，使我的Ubuntu上的整个X系统崩溃。
你可以在这里看到我的努力的结果，或者在这里看到一个video……海事组织确实印象深刻，这可以在浏览器中完成，而不使用3D扩展，但我不认为将来会解决当前的问题。
无论如何，用于绘制图像的基本思想，使4个angular落在特定的像素位置结束是绘制两个三angular形，其中每个将使用双线性插值。
在下面的代码中，我假设你有一个图片对象的texture和4个angular落，每个angular落是一个对象的字段x,y,u,v ，其中x,y是目标canvas上的像素坐标， 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(); } }
对于所有这些“三angular”variables，这些丑陋的奇怪的公式用于解决三个未知数的三个方程的两个线性系统，使用Cramer方法和Sarrusscheme的3×3决定因素。
更具体地说，我们正在寻找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是matrix的行列式
u0 v0 1 u1 v1 1 u2 v2 1
例如，当用x0 ， x1 ， x2replace第一列时， delta_a是同一个matrix的行列式。 有了这些，你可以计算a = delta_a / delta 。
