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

Strange texture behavior on mesh in Love2D, Help needed to achieve the result I was expecting

下面的代码有这样的结果:

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

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

如果不使用 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

构建能够修复此问题的着色器的数学在许多线程中通常在 google 上进行了解释,并且有多种方法 (标签:透视校正纹理映射)。

如果您想构建自己的着色器或使用来自不同于 Love2D 的源的着色器,请注意 Love2D 目前使用 GLSL v.1.20 并进行了一些小的更改。

有一个论坛线程,您可以从中获取完整的着色器文件,当前为 Love2D v.0.10.2。使用简单,代码注释到位。

https://www.love2d.org/forums/viewtopic.php?f=5&t=12483&start=120 Post 作者 drunken_munki » 2017 年 4 月 26 日,星期三 11:03 上午