Texture deformation on 2 triangles face


I’m working on a model viewer for a Sega Saturn game, and i encounter an issue of texture deformation on faces. The Sega Saturn doesn’t use triangles but quads to generate faces and each face has its own texture (no uv mapping, non indexed vertices).

As you can see, the selected mesh has a distorsion on the face in the middle.

I know that the subject has been discussed on differents posts but i can’t find a solution that fit my project. prisoner849 posted this codepen that exactly fit what i want to do but can’t figure to use this method only by using vertices position (and not control points).

Also, is it not too performance consuming to use a custom shader (there’s a lot of different materials, on each faces of an object times the number of objects in the scene)?

Is there another way to solve this issue without using custom shader?

Thanks in advance!

Is this a threejs app?

It looks like somehow you don’t have perspective correct texture mapping enabled? which sounds impossible given modern rendering pipeline. :smiley:

Yes, it’s a threejs app.

Indeed it seems to be a problem with perspective correct texture, but if it’s a feature to enable, i don’t know where :confused:

This post is dated 2021 and seems to be related, is an option to manage this available since?

(i don’t know if it’s important, but i use non indexed buffer geometries)

The issue you’re describing is exactly the one that’s covered in the thread you linked to, which I started back then.

Not that I’m aware of. unfortunately.

Did you find a correct solution since? As manthrax said, i’m surprised that there’s not an implemented option to manage this specific case as it seems to occurs often.

Have a look at this discussion of the same topic. Apparently the designers of Three.js deliberately decided to drop support for QUADS, which is at the heart of the issue.

I still believe, the issue could be overcome through shaders, but I’m thoroughly unexperienced in writing those, and my various other interests have carried me elsewhere in the meantime.

Whether its a quad, or 2 triangles shouldn’t matter. Perpective correct texture mapping is the default. It may be that your viewer is doing the projection on the software side and you’re only displaying the already transformed and projected result which WILL NOT WORK.

You have to feed threejs the raw points and let it do the projection and rendering.

You also need to create a working example that we can access via jsfiddle or similar if you want actual help, and not just waste your/peoples time.

What you are doing here is sending a picture of your car to your mechanic and asking them why the engine is rattling.

Yes i’ve also seen this discussion. I think the case of prisoner849 is a good start, i just need to figure how can i adapt his solution with vertices instead of control points (it seems that the deformation applied to the plane with the control points is the exact deformation used on the Sega Saturn).

At first, i was just quickly asking if someone had this issue. As all the data (vertices, indices, textures etc.) are in a ISO file that i read and decompile, it’s a bit complicated to isolate this specific case in a codepen, that’s why i didn’t create a working example, but i can totally do this.

1 Like

that would help a lot.

Do you have a spec for the format? There might be an existing loader for it, or it might be easy to make one.

You can also drag files in here btw.

Maybe just drag your saturn model + textures into the thread here + any info you have on the file format… and we can try to load/render it :slight_smile:

Not really, as it’s a big binary file, i have to figure offsets and rebuild textures from palette and pixel indexed in a canvas, but i can export textures on png. I’ll made a codepen today and will post the link!

Edit: My project is on a public Github repo:

Wats three.addMesh ?

A function from a class that i made on the second link.

To add more details, the project is a website with tools that allow to edit saves from games, roms and see levels, 2D/3D models etc by importing the files (here’s a link if anyone is interested: https://game-tools-collection.com).

I have already done that on a Nintendo 64 game but as the models of the game are not complicated and the Nintendo 64 provide uvs mapping and indexed mesh, it wasn’t an issue.

ExportGLTF.js (1.5 KB)

I’ve enclosed the code to export your scene as a gltf (.glb) file.

you can call it like

import {exportGLTF} from "./ExportGLTF.js"


exportGLTF( yourScene );

Can you run this on your scene and drag us the resulting .glb file?
Then we can see whats being generated…

You can also drag the .glb on here: https://gltf-viewer.donmccurdy.com/
or here: https://gltf.report/
to view it…

Thanks manthrax, i was able to make a fiddle by myself, here is the link: ThreeJS Texure Distorsion - JSFiddle - Code Playground

1 Like

Ok now I understand. Ignore everything I said. My Apologies. :smiley:
You are doing this correctly as far as I can tell…
I’m gonna have to mull this over.
Is this really the raw data that the saturn uses? Or is the quad format converted into this vertex representation?

I would have preferred that i was wrong somewhere :sweat_smile:

The Saturn only uses quads (even triangles shapes are quads with merged indices).

Triangles representation are also an issue on my project:

But for now, i prefer to focus on the texture distorsion (maybe it’ll also solves my triangles issues).

If you take a look on the window on the right, the selected line is the 4th indice of the quad and the differents texture distorsions when we change this indice. The last screenshot is the exact representation of what happen on prisoner849’s codepen (and that i want to reproduce).

Typically, what i do with the 4 indices on the right window, i duplicate the 3th indice on the 4th position and the 1st indice in the last position ([2, 1, 0, 3] > [2, 1, 0, 0, 3, 2]).

As you can see on the last screenshot, there’s no issue on non “deformed” face, but the barrel on the left has the same distorsion.