Recreate the PS1's Affine Texture Warping with Unity Shaders

the playstation 1 was many people's first 3d games console that's the case for me and i grew up playing games like spyro and crash bandicoot and metal gear solid but i think i turned out okay anyway the ps1 game aesthetic is intensely nostalgic although it's broadly the result of technical limitations that developers had to work around while making games one of those limitations was the ps1's inability to properly account for the camera's perspective during texturing causing this strange warping effect when the camera comes close to a wall or other objects this phenomenon is called afghan texture warping and today we're going to explore how this effect happens in the first place and recreate it using shader code if you enjoy my work please consider subscribing on youtube supporting me on patreon or throw me support on kofi all of them help me to continue making videos the ps1 does not properly account for perspective during the texturing process instead the ps1 uses what's called afwain texture mapping where uv coordinates are interpolated between vertices using only the xy positions and ignoring their depth along the z-axis this process happens between the vertex and fragment shader stages you'll be able to tell when we're using outline texture mapping because for every triangle the texture will always appear parallel to two of the triangle's edges it's really easy to see with a checkerboard texture modern hardware and even other consoles at the time that the nintendo 64 correctly account for the z-axis during this step so we see the squares on the texture start large at the bottom and gets smaller as they get further away from the camera unfortunately for us this step is automatic on modern hardware luckily i'll be showing you two ways to undo it one is quite short and the other is even shorter our standard vertex shader will transform vertex positions from object space to clip space using the unity object to clip pause or transform object.h clip function depending on the render pipeline you're using for texture coordinates we can just make the output equal to the input or use transform text macro to account for offset and tiling options on a specific texture what we're going to do different here is undo the perspective divide manually by using the w component from the position let's take the uvs and multiply by that w component then in the fragment shader we can divide by the positions w component when sampling the texture the trick here is that we're not multiplying and dividing by the same value because the vertex positions are getting interpolated between the vertex and fragment shader too the result is that we've undone the perspective correction for texturing just like we wanted to that's one way to do it but there's an even easier way let's start with a fresh vertex and fragment shader and instead of making any changes here we can just use the no perspective keyword in front of the uvs in the vertex output straps and unity will know not to apply the correction easy later ps1 games attempted to mitigate this effect by simply using subdivided geometry so that the texturing artifacts occur on smaller surfaces and are therefore less noticeable i hope you're able to put this great effect in your own ps1 style games if you're looking to make more effects try this glitter effect which makes your object sparkle and glisten in the light

Channel: Daniel Ilett

Views: 31,824

Keywords: unity shaders, urp, shader tutorial, unity shader tutorial, playstation 1 shader, affine texture, affine texture mapping, affine texture warping, shaders, shader code, hlsl, daniel ilett shader, metal gear solid shader, spyro 2 shader, unity tutorial, unity game effect, ps1 shader, ps1 effect, unity ps1 shader, gamedev, indie game, psx effect, psx, unity urp, unity urp tutorial, universal render pipeline, noperspective, graphical artifacts

Id: Tbe2niFQI2M

Length: 3min 22sec (202 seconds)

Published: Thu Oct 28 2021