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

Question

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

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

我怎样才能拉伸(stretch)位图，使矩形位图可以填满不规则的立方体面？在 2D 中，投影的正方形立方体面由于透视的原因不是正方形，因此我必须拉伸(stretch)它以使其适合任何四边形。

希望这张图片能阐明我的观点。左脸现在填充了白色/黑色渐变。在进行纹理映射后，如何用位图填充它？

有人对使用 JavaScript 和 HTML5 Canvas 进行透视纹理映射(或图像处理)有任何提示吗？

编辑:感谢 6502，我让它工作了!

但是，它相当占用 CPU，因此我很乐意听到任何优化想法。

Result using 6502's technique - Texture image used

Answer 1

我认为您永远不会得到准确的结果...我花了一些时间研究如何使用 canvas 2d 上下文制作 3d 图形，我发现通过计算适当的 2d 梯度和矩阵来进行纹理贴图 gouraud 着色是可行的:

• 实心多边形当然容易
• Gouraud 填充只能在一个组件上进行(即，您不能拥有一个三 Angular 形，其中每个顶点都是用双线性插值填充的任意 RGB，但您可以使用例如单一颜色的三种任意阴影来进行填充)
• 可以使用裁剪和图像绘制来完成线性纹理映射

我会使用网格分割(就像在 PS1 上一样)实现透视校正纹理映射。

但是我发现了很多问题...例如，使用矩阵变换(纹理映射需要)的图像绘制在 chrome 上非常不准确，IMO 不可能获得像素精确的结果；一般来说，在 Canvas 上绘图时无法关闭抗锯齿功能，这意味着在三 Angular 形中分割时您会看到可见的透明线。我还发现多 channel 渲染在 chrome 上的效果非常糟糕(可能是因为硬件加速渲染的实现方式)。

一般来说，这种渲染对网络浏览器来说肯定是一种压力，显然这些用例(例如奇怪的矩阵)没有得到很好的测试。我什至能够让 Firefox 崩溃得如此严重，以至于它在我的 Ubuntu 上摧毁了整个 X susbsystem。

你可以看到我努力的结果here或作为视频 here ... IMO 确实令人印象深刻，这可以在不使用 3D 扩展的情况下在浏览器中完成，但我认为当前的问题将来不会得到解决。

无论如何，用于绘制图像以使 4 个 Angular 最终位于特定像素位置的基本思想是绘制两个三 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();
    }
}

所有这些“delta”变量的那些丑陋的奇怪公式用于求解三个未知数的三个方程的两个线性系统，使用 Cramer's方法和Sarrus 3x3 行列式的方案。

更具体地说，我们正在寻找 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

例如，当您将第一列替换为 x0、x1、x2 时，delta_a 是同一矩阵的行列式。有了这些，您可以计算 a = delta_a/delta。