我认为你永远无法得到精确的结果...... 我花了一些时间研究如何使用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]];
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;
ctx.save(); ctx.beginPath(); ctx.moveTo(x0, y0); ctx.lineTo(x1, y1);
ctx.lineTo(x2, y2); ctx.closePath(); ctx.clip();
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;
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
。