[Solved] Distorted VertexArray problem

[Reconik]

Never posted here before, so apologies in advanced if I didn't follow the guidelines quite right. I have been recently messing around with a pseudo3D system in SFML, and have successfully done so using transforms and several vertex arrays with quads as a primitive type. These are pretty bad textures for seeing the issue but I labeled the image with the different points. The dotted line is the distorted area, a result of a quad being two triangles.

So I'm really just here for advice on how to get this effect without the distortion. I've pretty much already accepted this chunk of code is gonna need an overhaul if I want it to look pretty.

[eXpl0it3r]

What's your code? I remember it not being as trivial, but I don't know the details. Hapax has written such a pseudo 3D thing and put it into a class: https://github.com/Hapaxia/SelbaWard/wiki/Sprite-3D

[Reconik]

Thanks for the reply!

I could send my code, but there really isn't any issue with it. (Other than looking very ugly) Everything works as expected. Though I'll give the general premise if that helps you understand where I am now vs. what I believe Sprite3D does.

I have a vertex array that holds all geometry that has the perspective effect applied to it. For every quad, the first and last points remain stationary and the two others are calculated using an algorithm to bring them a calculated distance towards the center of the screen. (As seen in the original picture) Updated every frame this makes for the pseudo3D appearance.

Sprite3D, after a very quick glance, appears to be a rotatable sprite for every dimension. Which, probably would work after some pretty substantial changes to my code, but also not exactly ideal. Unless I missed it, you can't pass four vectors to Sprite3D as a method for drawing it.

I'll admit that the strategies that might be required to fix this effectively and cleanly may be a bit above my level.

[Hapax]

You are correct; Sprite 3D is designed to be a sprite that is rotatable in all 3 dimensions to allow added perspective view of a sprite. One thing to note, though, is that Sprite 3D 'solves' the texture distortion by splitting the sprite into many smaller quads. This reduces the effect of that distortion.

However, since you already have the quad as your want it, there is a better solution: Selba Ward's Elastic Sprite. In fact, it's more accurate than Sprite 3D since it removes completely all of the distortion using a shader.

Examples (code on its Wiki page, also linked above):

Bi-linear interpolation (default):


Perspective interpolation:

[Reconik]

Thanks for the resources!

I've done some research on the problem and decided I'd try and replicate what Sprite3D does in a way that's streamline for what I need. Turns out that process of dividing into smaller pieces of geometry is called tessellation, something I've never messed with before so it'll be good practice if I can get it to work. If it works (and looks half decent) I'll post what I've come up with here for future users. That said, there's just as good a chance I'll use Selba Ward's solution as it could pretty much completely replace my current method with no headache. So that's a great suggestion.

Thanks for the responses, they definitely helped point me in the right direction. I'll mark this as solved.

[Hapax]

You are welcome.

Yes, breaking down geometry into smaller geometry is called tessellation. Feel free to have a deeper look into how Sprite 3D does it if it helps; it uses a single triangle strip to creates rows of quads that go right and left alternatively. I believe that I left in some of the algebra that I used within the comments to make it a bit clearer as to what is happening but I'm not sure if it's still there.

I've been irritated by this particular artifact for a long time...
- My first attempt was called Spinning Card, which faked a 3D rotating sprite. It sub-divided the quad into four quads so that the centre point was where it should be. Just this move made a noticeable difference.
 Sprite 3D went further to allow any number of sub-divisions that allows (although less likely to use) quad-per-pixel or even quad-per-subpixel! However, this creates a massive mesh that needs to be updated constantly.
- My latest approach is to allow it to be done 'properly' where the texture is "perfectly" interpolated. That is Elastic Sprite. The default mode treats it like elastic whereas the perspective mode works out the angle of the quad and adds distance to it.

These were created to allow myself and others to avoid this particular problem.

Note also, that Selba Ward allow each of its drawables to be used independantly of its others. This means that you can simply copy into your project the header and source files for the drawable(s) that you want to use instead of building the library and including it externally. Note that if you do use this method, all drawables require the small, common header file: Common.hpp to be included alongside their headers.