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

Question

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

javascripthtml3dtexture-mappinghtml5-canvas

21

在我正在开发的3D引擎中，我已经成功地在三维空间中绘制了一个立方体。据我所知，唯一填充面的方法是使用纯色或渐变。为了让事情更有趣，我真的很想使用简单的位图实现纹理映射。

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

我该如何拉伸位图，以便矩形位图可以填满不规则的立方体面？在二维平面上，由于透视原因，投影的正方形立方体面不是正方形，因此我必须拉伸它以使其适合任何四边形。

希望这张图片能够澄清我的观点。左侧的面现在用白色/黑色渐变填充。在纹理映射之后，我应该如何使用位图来填充它？

Cube

有人能分享一下使用JavaScript和HTML5 Canvas进行透视纹理映射（或任何图像处理）的技巧吗？

编辑：多亏了6502，我终于搞定了。

但是这个方法相当占用CPU，我很想听听任何优化的建议。

使用6502技术的结果 - 使用的纹理图像

- pimvdb

如果你正在制作一个真正的3D引擎，这可能不是执行纹理贴图的最佳方式。纹理坐标/颜色/法线等应该按顶点存储，以提供更大的灵活性。 - Karel Petranek

1

这只是一个简单的业余项目，它不会变得比这个立方体更复杂。 - pimvdb

@pimvdb 有没有分享代码的机会？ - Flash Thunder

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- 6502 · Accepted Answer

我认为你永远无法得到精确的结果...... 我花了一些时间研究如何使用canvas 2d上下文进行3d图形，我发现通过计算适当的2D渐变和矩阵来实现纹理映射gouraud着色是可行的：

实心多边形当然很容易
只能在一个分量上执行Gouraud填充（即您不能有每个顶点都是任意RGB，使用双线性插值填充的三角形，但可以使用单个颜色的三种任意阴影来进行填充）
可以使用剪辑和图像绘制来进行线性纹理映射

我将使用网格细分（例如PS1上的方法）实现透视纠正的纹理映射。

然而，我遇到了许多问题......例如使用矩阵变换进行图像绘制（用于纹理映射）在chrome上非常不准确，在我的看法中不可能得到像素精确的结果；通常情况下，在Canvas上绘制时无法关闭抗锯齿，这意味着在三角形中进行细分时会出现可见的透明线条。我还发现多遍渲染在Chrome上表现非常糟糕（可能是由于硬件加速渲染的实现方式）。

总的来说，这种渲染对于Web浏览器肯定是一种压力，显然这些用例（例如奇怪的矩阵）没有得到很好的测试。我甚至能够让Firefox崩溃，以至于它将我的Ubuntu的整个X子系统拖垮。

你可以在这里看到我的努力成果，或者在这里观看视频... 在没有使用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方法和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

例如，delta_a 是将第一列替换为 x0、x1 和 x2 后，同一矩阵的行列式。使用这些值，您可以计算出 a = delta_a / delta。