碼農干貨系列【8】--世界上最簡單的3D渲染(no webgl)

簡介

進行上圖所示的3D格子地板的渲染，需要進行Canvas的像素級別操作，從視點連接屏幕（屏幕就是canvas）中的所有像素點，形成大量的射線，倘若射線與地板相交，把交點以及交點的顏色反饋給屏幕(canvas)。如下圖所示:

像素操作

在進行3D渲染之前，必須了解Canvas的像素操作相關概念。在給定了width和height的canvas上，在坐標(x ,y)上的像素的index構成如下。

var data=getImageData(0, 0, canvas.width, canvas.height);

紅色index：((width * y) + x) * 4          像素值：data[((width * y) + x) * 4]

綠色index：((width * y) + x) * 4 + 1    像素值：data[((width * y) + x) * 4+1]

藍色index：((width * y) + x) * 4 + 2    像素值：data[((width * y) + x) * 4+2]

透明度index：((width * y) + x) * 4 + 3 像素值：data[((width * y) + x) * 4+3]

修改了任何像素的紅、綠、藍和alpha值之后，可以通過第二個函數來更新canvas上的顯示，那就是context.putImageData(imagedata, dx, dy)。

尋找交點

怎么找到射線與地板的交點？可以先列出已知的條件:

視點坐標A、屏幕上的點坐標B、交點P的Y坐標（y=0），向量AP,BP共線。

根據上面的條件，利用兩兩向量共線(Ax-Px/Bx-Px = Ay-Py/By-Py = Az-Pz/Bz-Pz) 可以推導出交點的坐標。

格子材質

找到交點后，還剩下的問題就是根據z的坐標渲染格子材質，如下面代碼所示:

 (Math.ceil(cv.x / sideLength) + Math.ceil(cv.z / sideLength)) % 2 === 0 

上面的cv為交點坐標,sideLength為地板格子編程，根據上面的true和false返回相應的顏色值。

在線演示

修改代碼里面的變量值點擊run again試試！
var Vector3 = function (x, y, z) { this.x = x || 0; this.y = y || 0; this.z = z || 0; }; var Camera = function (x, y, z) { this.x = x || 0; this.y = y || 0; this.z = z || 0; } var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); var imgdata = ctx.getImageData(0, 0, canvas.width, canvas.height); var pixels = imgdata.data, i = 0, cm = new Camera(0, 200, 200), sideLength = 100, planeLength = 4400; for (var y = 0; y < canvas.height; y++) { for (var x = 0; x < canvas.width; x++) { var v = new Vector3(-canvas.width / 2 + x, canvas.height - y, 0); var cv = new Vector3(cm.y * v.x / (cm.y - v.y), 0, cm.z * v.y / (v.y - cm.y)); (cv.z > -planeLength && cv.z < 0) && (pixels[i] = pixels[i + 1] = pixels[i + 2] = (Math.ceil(cv.x / sideLength) + Math.ceil(cv.z / sideLength)) % 2 === 0 ? 148 : 0, pixels[i + 3] = 255 * (planeLength - Math.abs(cv.z)) / planeLength); i += 4; } } ctx.putImageData(imgdata, 0, 0);

Have Fun!