05-19-2022, 07:58 PM
(This post was last modified: 03-09-2024, 07:33 AM by rufaswan.
Edit Reason: ghpage img
)
Finally understand how to do the distortion from that Sega Saturn video (https://www.vg-resource.com/thread-38430...#pid670315).
The video title said it is using Tessellation, which is completely misleading. Tessellation is about sub-divide. It is to generate more points between vertex to make the polygon more detail. It is actually like Mipmap, and has more to do with LOD (Level of Detail) than handling degenerated polygon.
And I was wondering why the tutorials doesn't make any sense, for months.
Randomly browse around, I found PixiJS, a Javascript library/engine for 2D images, and I discover this:
https://pixijs.io/examples/#/plugin-proj...quad-bi.js
Now this is more like what I want! Google "2D Quad bilinear" and I finally got a actual work code:
http://www.fmwconcepts.com/imagemagick/b.../index.php
A comparing of multiple texture mapping algorithm:
Live code to play around:
http://rufaswan.github.io/Web2D_Games/qu...e.tpl.html
http://rufaswan.github.io/Web2D_Games/qu...y.tpl.html
http://rufaswan.github.io/Web2D_Games/qu...y.tpl.html
Now I have a new problem - while Bilinear can handle all the irregular/degenerated quads, the image is no longer in perspective anymore. And the worst part - even the lines are not straight anymore, they can be curved.
But that's not how the sprites looks like in-game.
So in the end, the whole thing is useless.
Moving forward, I would be using perspective as the default, and for any weird shaped quads, I'll just draw an outline for it.
I'll be taking a long break, and won't want to look at those ugly math formulas anytime soon. ;P
At the mean time, take care!
- Rufas
The video title said it is using Tessellation, which is completely misleading. Tessellation is about sub-divide. It is to generate more points between vertex to make the polygon more detail. It is actually like Mipmap, and has more to do with LOD (Level of Detail) than handling degenerated polygon.
And I was wondering why the tutorials doesn't make any sense, for months.
Randomly browse around, I found PixiJS, a Javascript library/engine for 2D images, and I discover this:
https://pixijs.io/examples/#/plugin-proj...quad-bi.js
Now this is more like what I want! Google "2D Quad bilinear" and I finally got a actual work code:
http://www.fmwconcepts.com/imagemagick/b.../index.php
A comparing of multiple texture mapping algorithm:
Live code to play around:
http://rufaswan.github.io/Web2D_Games/qu...e.tpl.html
http://rufaswan.github.io/Web2D_Games/qu...y.tpl.html
http://rufaswan.github.io/Web2D_Games/qu...y.tpl.html
Now I have a new problem - while Bilinear can handle all the irregular/degenerated quads, the image is no longer in perspective anymore. And the worst part - even the lines are not straight anymore, they can be curved.
But that's not how the sprites looks like in-game.
So in the end, the whole thing is useless.
Moving forward, I would be using perspective as the default, and for any weird shaped quads, I'll just draw an outline for it.
I'll be taking a long break, and won't want to look at those ugly math formulas anytime soon. ;P
At the mean time, take care!
- Rufas