LÖVE

Posted: **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 (94.7 KiB) Viewed 10688 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!

Posted: **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

Posted: **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

Posted: **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.

Posted: **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.

Posted: **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.

Posted: **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 (328.82 KiB) Viewed 10471 times

Posted: **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

Posted: **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!

Posted: **Tue May 23, 2017 6:30 pm**

Finally i found an solution to render trapezoid

: Bildschirmfoto von »2017-05-23 20-26-04«.png (8.27 KiB) Viewed 10232 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

LÖVE

Texturing Meshes at an Angle

Texturing Meshes at an Angle

Re: Texturing Meshes at an Angle

Re: Texturing Meshes at an Angle

Re: Texturing Meshes at an Angle

Re: Texturing Meshes at an Angle

Re: Texturing Meshes at an Angle

Re: Texturing Meshes at an Angle

Re: Texturing Meshes at an Angle

Re: Texturing Meshes at an Angle

Re: Texturing Meshes at an Angle