graphics - Love2D 中网格上的奇怪纹理行为，需要帮助才能达到我期望的结果

Question

下面的代码有这个结果:

local mesh = nil
local img = love.graphics.newImage("test_blue.png")

function love.load()
  mesh = love.graphics.newMesh(4, img, "fan")
  mesh:setVertices({
    {125, 100, 0, 0, 255, 255, 255, 255},  --Top Left
    {150, 100, 1, 0, 255, 255, 255, 255},  --Top Right
    {200, 400, 1, 1, 255, 255, 255, 255},  --Bottom Right
    {100, 400, 0, 1, 255, 255, 255, 255} --Bottom Left
  })
end

function love.draw()
  love.graphics.draw(mesh, 200, 0)
end

我想知道如何得到这样的结果:

Answer 1

如果不使用 3D 库，您将无法在不实现透视的情况下获得真正的深度效果。问题是多边形是由 2D 三角形组成的，并且只能应用 2D 效果，如剪切或缩放(作为一个整体)。纹理中的平行线将始终平行，而底部图像并非如此，因为它们会向消失点汇聚。

更多阅读请见 Perspective Correctness section of Texture Mapping

更改纹理贴图的坐标可以通过向消失点裁剪而不是缩放来在视觉上最小化一些伪影。

如果纹理中的线条是单独三角形的一部分，则它们不必平行，因此添加更多三角形允许它们以更多剪裁为代价相互剪切。

对于不同样式的纹理，修改纹理坐标和使用更多三角形都可能会出现问题，因此您可能需要根据具体情况进行调整。

local mesh = nil
local img = love.graphics.newImage("test_blue.png")

function love.load()
  mesh = love.graphics.newMesh(5, img, "strip")
  local top_left  = {125, 100, .125, 0, 255, 255, 255, 255} 
  local top_right = {150, 100, .875, 0, 255, 255, 255, 255}
  local bot_right = {200, 400, 1, 1, 255, 255, 255, 255}
  local bot_left  = {100, 400, 0, 1, 255, 255, 255, 255}
  local bot_mid   = {150, 400, .5,1, 255, 255, 255, 255} 

  mesh:setVertices{
      bot_left, top_left, bot_mid, top_right, bot_right,
  }

end

function love.draw()
  love.graphics.draw(mesh, 200, 0)
end