Texturing Meshes at an Angle

[noegddgeon]

Hello all!

In trying to create a little floor perspective thingy using a Mesh, I've encountered an issue; seems that it's rendering it a bit odd, showing the seam between the mesh's triangles and also skewing the UV mapping?

Screen Shot 2017-05-08 at 2.21.33 PM.png (94.7 KiB) Viewed 10884 times

Here's the source for the bit that generates the quad; note that in the first function, "frame" is a number that just refers to which tile in the sheet we want to grab the UVs for (starting at 1, top left, and going left to right, top to bottom, till the very bottom right tile):

Code: Select all

function ExploreState:getUVsByFrame(texture, frame, tileHeight, tileWidth)
    local textureWidth = texture:getWidth()
    local textureHeight = texture:getHeight()
    local tilesPerRow = textureWidth / 32
    local tilesPerColumn = textureHeight / 32
    local numTiles = tilesPerRow * tilesPerColumn

    local x = frame % tilesPerRow + 1
    local y = math.floor(frame / tilesPerRow)

    local xIncrement = 1 / tilesPerRow
    local yIncrement = 1 / tilesPerColumn

    local topLeft = {
        xIncrement * x, yIncrement * y
    }
    print_r(topLeft)

    local topRight = {
        xIncrement * x + xIncrement, yIncrement * y
    }
    print_r(topRight)

    local bottomRight = {
        xIncrement * x + xIncrement, yIncrement * y + yIncrement
    }
    print_r(bottomRight)

    local bottomLeft = {
        xIncrement * x, yIncrement * y + yIncrement
    }
    print_r(bottomLeft)

    return topLeft, topRight, bottomRight, bottomLeft;
end

function ExploreState:createFloorVertices()
    local topLeft, topRight, bottomRight, bottomLeft =
        self:getUVsByFrame(gTextures['tiles'], 1179, 32, 32)

    return {
        {
            -- top-left corner
            0, 0,
            topLeft[1], topLeft[2],
            255, 255, 255
        },
        {
            -- top-right corner
            128, 0,
            topRight[1], topRight[2],
            255, 255, 255
        },
        {
            -- bottom-right corner
            256, 128,
            bottomRight[1], bottomRight[2],
            255, 255, 255
        },
        {
            -- bottom-left corner
            -128, 128,
            bottomLeft[1], bottomLeft[2],
            255, 255, 255
        }
    }
end

function ExploreState:renderMap()
    -- render the ground and the ceiling
    love.graphics.clear()
    love.graphics.draw(self.meshes['floor1'], virtualWidth / 2 - 64, virtualHeight / 2 + 16)
end

If there's a way to get it to render without the seam and anyone knows, that would be amazing If there's a way to better filter the texture on the mesh too so that there's less interpolation (even though default filter is already nearest), I would love to know that as well! Thank you so much for your help!

[edjamesking]

Unfortunately I don't have a solution for you, but here is some background:

https://en.wikipedia.org/wiki/Texture_m ... re_mapping

[Davidobot]

Yeah, there is no workaround for this if you only use meshes. I would recommend you try the forum's favourite Textured Polygon library - https://love2d.org/forums/viewtopic.php?f=5&t=12483 (for usage)

Here is a version for 0.10.X - https://love2d.org/forums/viewtopic.php ... 40#p211248

[MasterLee]

Or try using four triangles. Form them by connecting each edge against the midpoint which has UV coordinates of (0.5,0.5).
It is only an guess, but it looks at least an little bit nicer.

[slime]

Yeah, there is no workaround for this if you only use meshes.

There absolutely is, but it involves vertex shaders and perspective projection matrices.

The 'distortion' and seams you see are because you're trying to emulate a perspective projection and 3D coordinates just using 2 triangles in 2D with an orthographic projection.

love allows you to specify full 3D position coordinates for meshes. It also allows you to use a custom projection matrix (in a vertex shader) rather than the orthographic one love uses by default. All 3D game engines do that rather than trying to emulate it, and love provides the tools to do so as well, albeit not very visibly or in a particularly user-friendly manner.

You may find the love3d and CPML libraries to be of some use.

If you don't want to go down that route, then adding enough vertices along the top and bottom edges of the mesh will hide the artifacts enough that people won't notice.

[raidho36]

If you don't want to go down that route, then adding enough vertices along the top and bottom edges of the mesh will hide the artifacts enough that people won't notice.

In fact, you can go as far as to make so many triangles that each of them is only one or two pixels wide. This will hide such artifacts completely, and modern hardware has more than enough power to plow through such meshes. As long as you don't render too many of them at a time.

[noegddgeon]

Thanks so much for replying, everyone; sorry I was crap at responding. I've been working full force on a renderer using what Davidobot proposed, which I found shortly after posting this topic. Here's a screenshot of what it looks like now. Thanks again for your replies!

Screen Shot 2017-05-12 at 10.01.50 PM.png (328.82 KiB) Viewed 10667 times

[Davidobot]

Thanks so much for replying, everyone; sorry I was crap at responding. I've been working full force on a renderer using what Davidobot proposed, which I found shortly after posting this topic. Here's a screenshot of what it looks like now. Thanks again for your replies!

Oh cool, a raycaster, I look forward to seeing what you can come up with. If you need any help, feel free to message me, otherwise, you can look at my raycaster for inspiration or code implementation - https://love2d.org/forums/viewtopic.php?f=5&t=78608

[noegddgeon]

Thanks so much for replying, everyone; sorry I was crap at responding. I've been working full force on a renderer using what Davidobot proposed, which I found shortly after posting this topic. Here's a screenshot of what it looks like now. Thanks again for your replies!

Oh cool, a raycaster, I look forward to seeing what you can come up with. If you need any help, feel free to message me, otherwise, you can look at my raycaster for inspiration or code implementation - https://love2d.org/forums/viewtopic.php?f=5&t=78608

Actually, it's a little simpler than that, just a bunch of meshes drawn to look like a raycaster, but it's step-based movement a la Eye of the Beholder and other classic 2D FPS games Although your raycaster looks really cool! May end up going down the realtime route in the future, but the goal was to make a roguelike, where step-based movement is a bit easier to implement things with. We'll see how it goes! Thanks for the link!

[MasterLee]

Finally i found an solution to render trapezoid

Bildschirmfoto von »2017-05-23 20-26-04«.png (8.27 KiB) Viewed 10428 times

i used following data: (x,y)(s,t,p)

Code: Select all

             ((-1,-1),(0,0,1)),
             ((-.1,+1),(0,1,.1)),
             ((+1,-1),(1,0,1)),
             ((+.1,+1),(.1,1,.1)),

Then in the fragment shader i divide s by p