在我正在使用的 3D 引擎中，我成功地绘制了一个 3D 立方体。就我而言，填充侧面的唯一方法是使用纯色或渐变色。为了让事情更令人兴奋，我真的很喜欢使用简单的位图来实现纹理映射。
关键是我几乎找不到任何关于 JavaScript 图像处理主题的文章或代码示例。此外，HTML5 画布中的图像支持似乎仅限于裁剪。
我怎样才能拉伸位图以便矩形位图可以填充不规则的立方体面？在 2D 中，由于透视，投影的方形立方体面不是方形，因此我必须拉伸它以使其适合任何四边形。
希望这张图片可以澄清我的观点。左面现在填充了白色/黑色渐变。在纹理映射之后，如何用位图填充它？
有没有人对使用 JavaScript 和 HTML5 Canvas 的透视纹理映射（或根本图像处理）有任何提示？
编辑：我让它工作了，感谢 6502！
然而，它是 CPU 密集型的，所以我很想听听任何优化的想法。
我认为你永远不会得到准确的结果......我花了一些时间研究如何使用画布 2d 上下文制作 3d 图形，我发现通过计算适当的 2d 梯度和矩阵来进行纹理映射 gouraud 着色是可行的：
我将使用网格细分（如在 PS1 上）实现透视正确的纹理映射。
但是我发现了很多问题......例如，使用矩阵变换（纹理映射所需）的图像绘制在 chrome 和 IMO 上非常不准确，不可能获得像素准确的结果；一般来说，在画布上绘图时无法关闭抗锯齿，这意味着在细分三角形时您将获得可见的透明线条。我还发现多通道渲染在 chrome 上的工作非常糟糕（可能是因为硬件加速渲染的实现方式）。
一般来说，这种渲染肯定会给 Web 浏览器带来压力，而且显然这些用例（例如奇怪的矩阵）没有经过很好的测试。我什至让 Firefox 崩溃得如此严重，以至于它在我的 Ubuntu 上关闭了整个 X 子系统。
你可以看到我的努力的结果，在这里或视频在这里...... IMO无疑是令人印象深刻，这可以在浏览器中完成，无需使用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();
}
}
对于所有这些“delta”变量，那些丑陋的奇怪公式用于使用Cramer方法和针对 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,替换第一列时，相同矩阵的行列式x2。有了这些你可以计算a = delta_a / delta。