Search the Community

I have opened the same question on stackoverflow: https://stackoverflow.com/questions/47342853/perspective-correct-texture-mapping-in-pixi-js My purpose is making a simple 3d engine with 2D sprite (I choose Pixi.js this time as I can control the vertices of sprite arbitrarily), but I cannot understand how to map the texture to a perspective projected quad correctly. texture: https://imgur.com/Z5xDL8V I am using the PIXI.mesh.Plane for the quad, if the subdivision is low var verticesX = 2, verticesY = 2; this.field = new PIXI.mesh.Plane(resources['palette'].texture, verticesX , verticesY ); This will give out the result of screenshot01: https://imgur.com/a/m261h You can see the texture mapping is incorrect. Goes on I increase the division to 4 after the projection to screen vertices, and calculate the division point linearly. this.field = new PIXI.mesh.Plane(resources['palette'].texture, 5, 5); var lt = [this.field.model.screenVertices[0], this.field.model.screenVertices[1]]; var rt = [this.field.model.screenVertices[2], this.field.model.screenVertices[3]]; var rb = [this.field.model.screenVertices[4], this.field.model.screenVertices[5]]; var lb = [this.field.model.screenVertices[6], this.field.model.screenVertices[7]]; var segX = this.field.verticesX - 1; var segY = this.field.verticesY - 1; var vertices = []; for (var i = 0; i < (segY + 1); i++) { var l = (lb[0] - lt[0]) / segY * i + lt[0]; var r = (rb[0] - rt[0]) / segY * i + rt[0]; for (var j = 0; j < (segX + 1); j++) { var t = (rt[1] - lt[1]) / segX * j + lt[1]; var b = (rb[1] - lb[1]) / segX * j + lb[1]; vertices[(i * (segY + 1) + j) * 2] = (r - l) / segX * j + l; vertices[(i * (segY + 1) + j) * 2 + 1] = (b - t) / segY * i + t; } } this.field.vertices.set(vertices); that is 4x4 division as 5 points for each edges, the result is shown as screenshot02: https://imgur.com/a/6HREk, but the height of each division is the same, the illusion of perspective is broken How can I achieve the result as the screenshot: https://imgur.com/a/ZEUHu The height of division proportion to the depth respectively Or am I heading to a wrong direction to solve the problem, please suggest me some advise, thanks. PS. The debug message in the screen is describing the vertices coordinate of the field lay on ground in clipping space, not the screen space.