Texturing Meshes at an Angle

General discussion about LÖVE, Lua, game development, puns, and unicorns.
noegddgeon
Prole
Posts: 6
Joined: Mon May 08, 2017 6:22 pm

Texturing Meshes at an Angle

Post by noegddgeon » Mon May 08, 2017 6:30 pm

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
Screen Shot 2017-05-08 at 2.21.33 PM.png (94.7 KiB) Viewed 4821 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
Prole
Posts: 1
Joined: Tue May 09, 2017 12:59 am

Re: Texturing Meshes at an Angle

Post by edjamesking » Tue May 09, 2017 1:01 am

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

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

User avatar
Davidobot
Party member
Posts: 1181
Joined: Sat Mar 31, 2012 5:18 am
Location: Cambridge, UK
Contact:

Re: Texturing Meshes at an Angle

Post by Davidobot » Tue May 09, 2017 1:03 pm

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
My projects: Raycaster, love.js v11.3 port
itch page: link
My website: link
My library: LovelyMoon

MasterLee
Party member
Posts: 141
Joined: Tue Mar 07, 2017 4:03 pm
Contact:

Re: Texturing Meshes at an Angle

Post by MasterLee » Tue May 09, 2017 3:38 pm

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.

User avatar
slime
Solid Snayke
Posts: 2897
Joined: Mon Aug 23, 2010 6:45 am
Location: Nova Scotia, Canada
Contact:

Re: Texturing Meshes at an Angle

Post by slime » Tue May 09, 2017 5:06 pm

Davidobot wrote:
Tue May 09, 2017 1:03 pm
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.

User avatar
raidho36
Party member
Posts: 2063
Joined: Mon Jun 17, 2013 12:00 pm

Re: Texturing Meshes at an Angle

Post by raidho36 » Tue May 09, 2017 5:17 pm

slime wrote:
Tue May 09, 2017 5:06 pm
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
Prole
Posts: 6
Joined: Mon May 08, 2017 6:22 pm

Re: Texturing Meshes at an Angle

Post by noegddgeon » Sat May 13, 2017 2:03 am

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
Screen Shot 2017-05-12 at 10.01.50 PM.png (328.82 KiB) Viewed 4604 times

User avatar
Davidobot
Party member
Posts: 1181
Joined: Sat Mar 31, 2012 5:18 am
Location: Cambridge, UK
Contact:

Re: Texturing Meshes at an Angle

Post by Davidobot » Sat May 13, 2017 10:19 am

noegddgeon wrote:
Sat May 13, 2017 2:03 am
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
My projects: Raycaster, love.js v11.3 port
itch page: link
My website: link
My library: LovelyMoon

noegddgeon
Prole
Posts: 6
Joined: Mon May 08, 2017 6:22 pm

Re: Texturing Meshes at an Angle

Post by noegddgeon » Sun May 14, 2017 1:49 am

Davidobot wrote:
Sat May 13, 2017 10:19 am
noegddgeon wrote:
Sat May 13, 2017 2:03 am
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
Party member
Posts: 141
Joined: Tue Mar 07, 2017 4:03 pm
Contact:

Re: Texturing Meshes at an Angle

Post by MasterLee » Tue May 23, 2017 6:30 pm

Finally i found an solution to render trapezoid
Bildschirmfoto von »2017-05-23 20-26-04«.png
Bildschirmfoto von »2017-05-23 20-26-04«.png (8.27 KiB) Viewed 4365 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

Post Reply

Who is online

Users browsing this forum: No registered users and 4 guests