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

Question

在我正在研究的3D引擎中,我已经成功地在3D中绘制了一个立方体.就我而言,填充边的唯一方法是使用纯色或渐变.为了让事情更令人兴奋,我真的很想用简单的位图实现纹理映射.

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

我怎样才能拉伸位图,以便矩形位图可以填满不规则的立方体面？在2D中,由于透视,投影的方形立方体面不是方形,所以我必须拉伸它以使其适合任何四边形.

希望这张图片澄清了我的观点.左脸现在充满了白色/黑色渐变.在纹理映射后,我怎么能用位图填充它？

有没有人对使用JavaScript和HTML5 Canvas的透视纹理贴图(或图像处理)有任何提示？

编辑:我得到它的工作,感谢6502!

然而,它是CPU密集型的,所以我很想听到任何优化的想法.

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

Answer 1

我想你永远不会得到准确的结果......我花了一些时间研究如何使用canvas 2d上下文做3D图形,我发现通过计算适当的2d渐变和矩阵来进行纹理映射gouraud阴影是可行的:

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

我将使用网格细分实现透视正确的纹理映射(如在PS1上).

然而,我发现了许多问题......例如,使用矩阵变换(纹理映射所需)的图像绘制在chrome和IMO上是非常不准确的,因此无法获得像素精确的结果; 通常,在画布上绘制时无法关闭抗锯齿,这意味着在细分三角形时,您将看到可见的透视线.我还发现多通道渲染在chrome上工作非常糟糕(可能是因为实现了如何实现hw-accellerated渲染).

一般来说,这种渲染肯定是Web浏览器的压力,显然这些用例(例如奇怪的矩阵)没有经过很好的测试.我甚至能够让Firefox崩溃如此糟糕,以至于它在我的Ubuntu上取下了整个X susbsystem.

你可以看到我的努力的结果,在这里或视频在这里 ...... 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.