Simple Perspective Shader

2025-03-21 14:39 UTC o3-mini-high Open in ChatGPT ↗

You

I need a simple perspective projection shader in unity.

ChatGPT

Below is an example of a simple perspective projection shader written in Unity’s ShaderLab. This shader uses the built‐in transformation function (UnityObjectToClipPos) in the vertex shader to apply the perspective projection automatically based on the camera’s settings:

Shader "Custom/SimplePerspectiveProjection" {
    Properties {
        _MainTex ("Texture", 2D) = "white" {}
    }
    SubShader {
        Tags { "RenderType"="Opaque" }
        Pass {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

            struct appdata {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;

            // The vertex shader
            v2f vert (appdata v) {
                v2f o;
                // UnityObjectToClipPos multiplies the vertex by the model-view-projection matrix,
                // applying both the world and perspective transformations.
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                return o;
            }

            // The fragment shader
            fixed4 frag (v2f i) : SV_Target {
                return tex2D(_MainTex, i.uv);
            }
            ENDCG
        }
    }
    FallBack "Diffuse"
}

How This Works

• Vertex Shader (vert):
  The function UnityObjectToClipPos converts each vertex from object space to clip space. This multiplication applies the model, view, and projection matrices – including the perspective projection set up by your camera. As objects move further away, their projected size is reduced automatically.

• Fragment Shader (frag):
  A simple texture sampler is used to return the pixel color from the provided texture.

Usage

1. Create a Material:
   Save the shader as a .shader file (for example, SimplePerspectiveProjection.shader), then create a material in Unity and assign this shader to it.

2. Assign the Material:
   Apply the material to a mesh (like a cube or plane) in your scene. When you run the scene with a camera, the shader will automatically use the camera’s perspective projection.

This basic shader should serve as a good starting point. You can expand on it by adding more features or tweaking it for specific effects as needed.

You

I need a quad to appear perspectively tilted, but in screen space.

ChatGPT

Below is an example of a Unity shader that takes a screen‐space quad (with vertices defined in normalized device coordinates) and applies a custom perspective “tilt” effect. In this example, we use a simple custom perspective matrix that modifies the w component based on the quad’s y coordinate. When the GPU does its standard perspective division, the quad appears distorted (tilted) as if it were in 3D space.

You can adjust the uniform _Tilt to control the strength of the effect.

Shader "Custom/ScreenSpacePerspectiveQuad" {
    Properties {
        _MainTex ("Texture", 2D) = "white" {}
        _Tilt ("Tilt", float) = 0.5
    }
    SubShader {
        Tags { "RenderType"="Opaque" "Queue"="Overlay" }
        Pass {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

            // Vertex input structure
            struct appdata {
                float4 vertex : POSITION;  // Expected in NDC or object space for a full-screen quad
                float2 uv : TEXCOORD0;
            };

            // Data passed to the fragment shader
            struct v2f {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            float _Tilt;

            v2f vert (appdata v)
            {
                v2f o;
                // Here we define a custom perspective matrix that tilts along the y axis.
                // This matrix leaves x and y unchanged except that it adjusts the w component:
                //   [ 1    0    0    0 ]
                //   [ 0    1    0    0 ]
                //   [ 0    0    1    0 ]
                //   [ 0  _Tilt  0    1 ]
                //
                // For a vertex (x, y, z, 1), the multiplication yields:
                //   x' = x,
                //   y' = y,
                //   z' = z,
                //   w' = 1 + _Tilt * y.
                // After the GPU’s automatic perspective division, the final screen position becomes:
                //   (x / (1 + _Tilt*y), y / (1 + _Tilt*y), z, 1)
                //
                // This creates a simple perspective effect in screen space.
                float4x4 persp = float4x4(
                    1, 0, 0, 0,
                    0, 1, 0, 0,
                    0, 0, 1, 0,
                    0, _Tilt, 0, 1
                );
                o.vertex = mul(persp, v.vertex);
                o.uv = v.uv;
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                // Sample the texture normally.
                fixed4 col = tex2D(_MainTex, i.uv);
                return col;
            }
            ENDCG
        }
    }
    FallBack "Diffuse"
}

How to Use This Shader

1. Prepare Your Quad:
   Make sure your quad’s vertex positions are defined in normalized coordinates (for example, from (-1, -1) to (1, 1)) so that they cover screen space as needed.

2. Create a Material:
   Save the shader as (for instance) ScreenSpacePerspectiveQuad.shader in your project. Then create a material and assign this shader to it.

3. Apply and Tweak:
   Assign the material to your quad. You can adjust the _Tilt property (via script or the inspector) to control how strong the perspective tilt appears. Positive values of _Tilt will cause vertices with higher y coordinates to be “pulled” back more, simulating a tilt.

This approach lets you simulate a perspective distortion on a screen-space quad without needing to change your camera’s projection settings.

You

I want it to appear at the center of my camera, at 2 meter distance + the custom tilt

ChatGPT

Below is an example shader that “pins” a quad to the center of the camera at a 2‑meter distance and then applies a custom tilt effect. In this example the vertex shader does the following:

1. Transforms the vertex from object space to world space.
2. Converts the world space position into view (camera) space.
3. Overrides the view space z component so that every vertex is exactly 2 m in front of the camera.
4. Projects the modified view space position into clip space using the standard projection matrix.
5. Applies a custom “tilt” matrix that adjusts the w component (based on the y coordinate) so that after perspective division the quad appears tilted.

Make sure your quad’s vertex positions (and UVs) are set up so that it’s centered in object space (for example, with positions from –0.5 to +0.5 in x and y). Then—regardless of the quad’s world transform—the shader forces it to appear at the camera’s center at 2 m away.

Shader "Custom/ScreenSpaceCenterAt2mWithTilt" {
    Properties {
        _MainTex ("Texture", 2D) = "white" {}
        _Tilt ("Tilt", float) = 0.5
    }
    SubShader {
        Tags { "RenderType"="Opaque" "Queue"="Overlay" }
        Pass {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

            // Vertex input structure
            struct appdata {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            // Data passed to the fragment shader
            struct v2f {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            float _Tilt;

            v2f vert(appdata v) {
                v2f o;

                // Transform from object space to world space.
                float4 worldPos = mul(unity_ObjectToWorld, v.vertex);

                // Transform world space position to view (camera) space.
                float4 viewPos = mul(UNITY_MATRIX_V, worldPos);

                // Force the depth to 2 meters.
                viewPos.z = 2;

                // Project the view space position to clip space.
                float4 clipPos = mul(UNITY_MATRIX_P, viewPos);

                // Define a custom tilt matrix that modifies the w component based on y.
                // This matrix is:
                //   [ 1    0    0    0 ]
                //   [ 0    1    0    0 ]
                //   [ 0    0    1    0 ]
                //   [ 0  _Tilt  0    1 ]
                // When a vertex (x,y,z,1) is multiplied, its new w becomes (1 + _Tilt*y).
                float4x4 tilt = float4x4(
                    1, 0, 0, 0,
                    0, 1, 0, 0,
                    0, 0, 1, 0,
                    0, _Tilt, 0, 1
                );

                // Apply the tilt effect.
                o.vertex = mul(tilt, clipPos);

                // Pass through UV coordinates.
                o.uv = v.uv;
                return o;
            }

            fixed4 frag(v2f i) : SV_Target {
                return tex2D(_MainTex, i.uv);
            }
            ENDCG
        }
    }
    FallBack "Diffuse"
}

How to Use This Shader

1. Quad Setup:
   Create a quad (for example, a simple mesh with vertices centered around the origin) so that in its local space it is centered. The shader will ignore the quad’s original depth and force it to be 2 m away.

2. Material Assignment:
   Save this shader in your project (e.g. as ScreenSpaceCenterAt2mWithTilt.shader), then create a material that uses it. Assign your texture to _MainTex if desired.

3. Placing the Quad:
   To ensure the quad appears centered in the camera, you can leave its transform at the origin (or adjust it as needed) since the shader forces its depth relative to the camera’s view space. (If needed, you can also write a small script to align the quad with the camera’s center.)

4. Adjusting the Tilt:
   The _Tilt property controls how strongly the vertices’ w component is modified by their y value. Experiment with different values (positive or negative) to get the desired perspective tilt.

This approach forces the quad to always appear at 2 meters in front of the camera while also applying a custom tilt effect—all in the vertex shader without altering your camera’s standard projection settings.

You

Actually I don’t want the object to be distorted when it moves around the scene

ChatGPT

Below is an approach that avoids non‐uniform (vertex‐dependent) distortion by “baking” the tilt as a uniform rotation applied to the entire quad in view space. In this version, we ignore the object’s rotation and use its world position (the center of the quad) to place the quad 2 m in front of the camera. Then we add the quad’s local offset (assuming the quad’s vertices are centered around (0,0)) and apply a simple rotation (the tilt) uniformly across all vertices. Because the tilt is applied as a rotation rather than by modifying the w component per vertex, the quad keeps its shape even when it moves.

You can adjust the _Tilt (in radians) and _Size (for the quad’s overall size) properties as needed.

Shader "Custom/ScreenSpaceCentered2mWithUniformTilt" {
    Properties {
        _MainTex ("Texture", 2D) = "white" {}
        _Tilt ("Tilt Angle (radians)", float) = 0.0
        _Size ("Size", float) = 1.0
    }
    SubShader {
        Tags { "RenderType"="Opaque" "Queue"="Overlay" }
        Pass {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

            sampler2D _MainTex;
            float _Tilt;
            float _Size;

            struct appdata {
                float4 vertex : POSITION; // Expect quad vertices centered at (0,0)
                float2 uv : TEXCOORD0;
            };

            struct v2f {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            v2f vert (appdata v) {
                v2f o;

                // Compute the object's center in world space (ignoring rotation)
                float4 centerWorld = mul(unity_ObjectToWorld, float4(0, 0, 0, 1));

                // Transform the center to view space.
                float4 centerView = mul(UNITY_MATRIX_V, centerWorld);
                // Force the center to be 2 meters in front of the camera.
                centerView.z = 2.0;

                // Compute the vertex offset from the center.
                // (Assumes the quad is defined from roughly -0.5 to +0.5 in X and Y.)
                float2 localOffset = v.vertex.xy * _Size;

                // In view space, x and y correspond to right and up.
                float4 posView = centerView;
                posView.x += localOffset.x;
                posView.y += localOffset.y;

                // Apply a uniform tilt rotation around the x-axis.
                // This rotates the (y, z) coordinates without distorting the shape.
                float s = sin(_Tilt);
                float c = cos(_Tilt);
                float newY = posView.y * c - posView.z * s;
                float newZ = posView.y * s + posView.z * c;
                posView.y = newY;
                posView.z = newZ;

                // Project to clip space.
                o.vertex = mul(UNITY_MATRIX_P, posView);
                o.uv = v.uv;
                return o;
            }

            fixed4 frag (v2f i) : SV_Target {
                return tex2D(_MainTex, i.uv);
            }
            ENDCG
        }
    }
    FallBack "Diffuse"
}

How This Shader Works

1. Centering in View Space:
   We take the world-space position of the object’s center (ignoring any rotation from the object) and transform it to view space. We then force its z component to 2 so that the quad appears 2 m in front of the camera.

2. Billboarding the Quad:
   The quad’s vertex offsets (its local XY coordinates) are added to the center. Since we use view space’s x and y (which correspond to right and up), the quad always faces the camera without distortion.

3. Uniform Tilt:
   Instead of altering each vertex’s w component (which would distort vertices differently across the quad), we apply a uniform rotation about the x-axis (controlled by _Tilt). This tilts the quad in a consistent manner regardless of its position in the scene.

4. Projection:
   Finally, the modified view-space position is projected using the camera’s projection matrix.

Usage

• Quad Setup:
  Ensure your quad’s vertices are centered around (0,0) (for example, positions from –0.5 to +0.5 in X and Y).

• Material Assignment:
  Save this shader (e.g. as ScreenSpaceCentered2mWithUniformTilt.shader), create a material with it, and assign your texture to _MainTex.

• Scene Placement:
  When you move the object in your scene, its world position is used for the quad’s center—but its rotation is ignored so that the tilt effect remains uniform and the quad’s shape is preserved.

This approach ensures that the tilt is applied as a clean rotation rather than a per‐vertex distortion, keeping the object’s appearance consistent as it moves around the scene.

You

Ok this is going somewhere. Requirements:

• Tilt perspectively
• Ignore objects world position
• Move only in screen space as a UI element

ChatGPT

Below is an example shader that draws a quad as a UI element in screen space—ignoring its world position—and then applies a perspective‐correct tilt. In this shader the quad is constructed entirely in view space so that it appears at a fixed distance (2 m) from the camera and can be moved around (via an offset) in screen space. The tilt is applied as a rotation (around the x‑axis in this example) so that the quad is tilted in perspective without per‑vertex distortion.

You can adjust:

• _Tilt – the tilt angle in radians
• _Size – a uniform scale for the quad (assumes its vertices range from –0.5 to +0.5)
• _Offset – a view‐space offset (in camera units) to position the element on screen

Shader "Custom/ScreenSpaceUIWithPerspectiveTilt" {
    Properties {
        _MainTex ("Texture", 2D) = "white" {}
        _Tilt ("Tilt Angle (radians)", float) = 0.0
        _Size ("Size", float) = 1.0
        _Offset ("Screen Offset (XY in view space)", Vector) = (0,0,0,0)
    }
    SubShader {
        Tags { "Queue"="Overlay" "RenderType"="Transparent" }
        Pass {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

            sampler2D _MainTex;
            float _Tilt;
            float _Size;
            float4 _Offset; // using only xy

            struct appdata {
                float4 vertex : POSITION; // Expect positions from -0.5 to 0.5
                float2 uv : TEXCOORD0;
            };

            struct v2f {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            v2f vert (appdata v)
            {
                v2f o;

                // Build a view-space position:
                // Start at the center at 2 meters away.
                // _Offset.xy lets you move the UI element around in screen space.
                float4 posView = float4(_Offset.xy, 2.0, 1.0);

                // Add the vertex's local offset, scaled by _Size.
                // This assumes the quad's vertices are defined centered around (0,0).
                posView.xy += v.vertex.xy * _Size;

                // Apply a uniform tilt rotation about the x-axis to simulate perspective tilt.
                // This rotates the (y,z) plane.
                float s = sin(_Tilt);
                float c = cos(_Tilt);
                float newY = posView.y * c - posView.z * s;
                float newZ = posView.y * s + posView.z * c;
                posView.y = newY;
                posView.z = newZ;

                // Project the view-space position into clip space.
                o.vertex = mul(UNITY_MATRIX_P, posView);
                o.uv = v.uv;
                return o;
            }

            fixed4 frag (v2f i) : SV_Target {
                return tex2D(_MainTex, i.uv);
            }
            ENDCG
        }
    }
    FallBack "UI/Default"
}

How This Shader Meets Your Requirements

1. Tilt Perspectively:
   A rotation is applied in view space (around the x-axis) so that the quad appears tilted with proper perspective. The rotation is uniform across the quad, ensuring it isn’t distorted when moving.

2. Ignore Object’s World Position:
   The shader does not use the object’s world transform at all. Instead, it directly constructs the quad’s position in view space (centered at 2 m in front of the camera).

3. Move Only in Screen Space as a UI Element:
   The _Offset property (applied in view space) lets you position the quad anywhere on screen without relying on its world position. This setup is ideal for UI elements that need to remain in screen space while still benefiting from a perspective tilt.

Simply assign this shader to a material, set up a quad (with vertices typically from –0.5 to 0.5), and then use the _Offset property (or a script) to control its screen position. Enjoy the effect!

You

Let’s start from scratch. I want a quad to appear always perspectively tilted, but I don’t want it to exist in world space. I want to be able to move it around the frame without its perspective changung at all, like a UI element

ChatGPT

Below is a complete shader that “lives” entirely in screen space (no world-space transforms are used) while always displaying a quad with a constant perspective‐tilt effect. In this example the quad’s 3D look is baked in by computing its vertices as if its center were fixed at a constant view‑space depth (2 m) and then rotated around the x‑axis. A screen offset (in normalized device coordinates) is added after projection so you can move the UI element around without changing its perspective distortion.

Adjust the properties as follows:
• _Tilt – tilt angle in radians (rotates around the x‑axis)
• _Size – scales the quad (assuming the quad’s vertices run from –0.5 to 0.5)
• _Offset – an (x,y) offset in normalized device coordinates (–1 to 1) to position the quad on screen

Shader "Custom/ScreenSpaceUI_PerspectiveTilt" {
    Properties {
        _MainTex ("Texture", 2D) = "white" {}
        _Tilt ("Tilt (radians)", float) = 0.0
        _Size ("Size", float) = 1.0
        _Offset ("Screen Offset (NDC)", Vector) = (0, 0, 0, 0)
    }
    SubShader {
        Tags { "Queue"="Overlay" "RenderType"="Transparent" }
        Pass {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

            sampler2D _MainTex;
            float _Tilt;
            float _Size;
            float4 _Offset; // Use only xy; defined in normalized device coordinates

            struct appdata {
                float4 vertex : POSITION;  // Expect vertices from -0.5 to +0.5
                float2 uv : TEXCOORD0;
            };

            struct v2f {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            v2f vert (appdata v) {
                v2f o;
                // Scale the quad's local coordinates.
                float3 localPos = float3(v.vertex.xy * _Size, 0);

                // Apply a tilt rotation around the x-axis.
                // Since the quad lies in the XY plane (z = 0), the math simplifies:
                //   rotated.x = localPos.x
                //   rotated.y = localPos.y * cos(_Tilt)
                //   rotated.z = localPos.y * sin(_Tilt)
                float s = sin(_Tilt);
                float c = cos(_Tilt);
                float3 rotated;
                rotated.x = localPos.x;
                rotated.y = localPos.y * c;
                rotated.z = localPos.y * s;

                // Place the quad's center at a fixed view-space depth (2 m).
                // The view-space center is always (0,0,2), so the perspective look is constant.
                float3 viewCenter = float3(0, 0, 2);
                float3 viewPos = viewCenter + rotated;

                // Project the view-space position to clip space.
                float4 clipPos = mul(UNITY_MATRIX_P, float4(viewPos, 1.0));

                // Apply the screen offset in clip space.
                // Multiplying _Offset.xy by clipPos.w converts the NDC offset to clip-space.
                clipPos.xy += _Offset.xy * clipPos.w;

                o.vertex = clipPos;
                o.uv = v.uv;
                return o;
            }

            fixed4 frag (v2f i) : SV_Target {
                return tex2D(_MainTex, i.uv);
            }
            ENDCG
        }
    }
    FallBack "UI/Default"
}

Explanation

1. No World-Space Involvement:
   The shader ignores any object transform. All calculations are done in a fixed view-space where the quad’s center is set to (0, 0, 2).

2. Perspective Tilt:
   By rotating the quad’s local Y coordinates into the Z axis (using a sine/cosine pair), the top and bottom edges are given different depths. This simulates a perspective tilt effect that stays constant regardless of where the quad is moved.

3. Screen-Space Movement:
   The _Offset property is applied in clip space (after projection). This allows you to reposition the UI element anywhere on the screen (using normalized device coordinates) without altering the baked-in perspective tilt.

Simply assign this shader to a material and use it on a quad (with vertices centered around (0,0)) to get a UI element that always appears with the same perspective tilt, independent of its screen position.

You

Ok this works. I now want to apply tilt on the other axis as well

ChatGPT

Below is an updated shader that applies a perspective tilt on both axes. In this version, the quad is still constructed entirely in screen space (fixed at 2 m in view space) and moved around via an offset in clip space. Two separate properties—_TiltX and _TiltY—let you control the tilt around the x‑axis and y‑axis respectively, so the perspective distortion stays constant regardless of its screen position.

Shader "Custom/ScreenSpaceUI_PerspectiveTilt2Axis" {
    Properties {
        _MainTex ("Texture", 2D) = "white" {}
        _TiltX ("Tilt X (radians)", float) = 0.0
        _TiltY ("Tilt Y (radians)", float) = 0.0
        _Size ("Size", float) = 1.0
        _Offset ("Screen Offset (NDC)", Vector) = (0, 0, 0, 0)
    }
    SubShader {
        Tags { "Queue"="Overlay" "RenderType"="Transparent" }
        Pass {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

            sampler2D _MainTex;
            float _TiltX;
            float _TiltY;
            float _Size;
            float4 _Offset; // Use only xy; defined in normalized device coordinates

            struct appdata {
                float4 vertex : POSITION;  // Expect vertices from -0.5 to +0.5
                float2 uv : TEXCOORD0;
            };

            struct v2f {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            v2f vert (appdata v) {
                v2f o;
                // Scale the quad's local coordinates.
                float3 localPos = float3(v.vertex.xy * _Size, 0);

                // --- Apply tilt around the X-axis ---
                // Rotates the local Y coordinate into the Z axis.
                float sX = sin(_TiltX);
                float cX = cos(_TiltX);
                float3 rotX;
                rotX.x = localPos.x;
                rotX.y = localPos.y * cX;
                rotX.z = localPos.y * sX;

                // --- Apply tilt around the Y-axis ---
                // Rotates the local X coordinate into the Z axis.
                float sY = sin(_TiltY);
                float cY = cos(_TiltY);
                float3 rotated;
                rotated.x = rotX.x * cY + rotX.z * sY;
                rotated.y = rotX.y;
                rotated.z = -rotX.x * sY + rotX.z * cY;

                // Place the quad at a fixed view-space center (0, 0, 2).
                float3 viewCenter = float3(0, 0, 2);
                float3 viewPos = viewCenter + rotated;

                // Project the view-space position into clip space.
                float4 clipPos = mul(UNITY_MATRIX_P, float4(viewPos, 1.0));

                // Apply the screen offset in clip space.
                // (_Offset.xy) is in normalized device coordinates (range -1 to 1).
                clipPos.xy += _Offset.xy * clipPos.w;

                o.vertex = clipPos;
                o.uv = v.uv;
                return o;
            }

            fixed4 frag (v2f i) : SV_Target {
                return tex2D(_MainTex, i.uv);
            }
            ENDCG
        }
    }
    FallBack "UI/Default"
}

Explanation

• Screen-Space Setup:
  The shader bypasses world-space entirely. The quad’s center is fixed at (0,0,2) in view space, so its perspective appearance (size and distortion) remains constant regardless of its on-screen position.

• Two-Axis Tilt:
  First, the shader applies a rotation around the x‑axis (_TiltX) by remapping the quad’s Y coordinate into the Z axis. Then it applies a rotation around the y‑axis (_TiltY) by remapping the X coordinate into Z. The two rotations combine to produce a tilt effect in both directions.

• Movement via Offset:
  The _Offset property (in normalized device coordinates) is applied in clip space. This lets you reposition the quad anywhere on the screen without affecting its internal perspective tilt.

Use this shader on a quad (with vertices ideally ranging from –0.5 to 0.5 in both X and Y) to have a UI element that always displays the same perspective tilt even as you move it around the frame.

You

Add controls for:

Size X Size Y

Distance from camera

Offset X Offset Y

dont use a vector4 for a 2d offset. it looks confusing to users

ChatGPT

Below is an updated shader that meets your requirements. It displays a quad entirely in screen space (ignoring world space) at a fixed view‑space depth (controlled by _Distance), applies perspective tilt on both axes, and lets you control its independent X/Y size and screen offsets (using separate _OffsetX and _OffsetY properties).

Shader "Custom/ScreenSpaceUI_PerspectiveTilt2Axis_Controls" {
    Properties {
        _MainTex ("Texture", 2D) = "white" {}
        _TiltX ("Tilt X (radians)", float) = 0.0
        _TiltY ("Tilt Y (radians)", float) = 0.0
        _SizeX ("Size X", float) = 1.0
        _SizeY ("Size Y", float) = 1.0
        _Distance ("Distance from Camera", float) = 2.0
        _OffsetX ("Offset X (NDC)", float) = 0.0
        _OffsetY ("Offset Y (NDC)", float) = 0.0
    }
    SubShader {
        Tags { "Queue"="Overlay" "RenderType"="Transparent" }
        Pass {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

            sampler2D _MainTex;
            float _TiltX;
            float _TiltY;
            float _SizeX;
            float _SizeY;
            float _Distance;
            float _OffsetX;
            float _OffsetY;

            struct appdata {
                float4 vertex : POSITION; // Expected vertices from -0.5 to +0.5
                float2 uv : TEXCOORD0;
            };

            struct v2f {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            v2f vert (appdata v) {
                v2f o;

                // Scale the quad's local coordinates with separate size controls.
                float2 localPosXY = float2(v.vertex.x * _SizeX, v.vertex.y * _SizeY);
                float3 localPos = float3(localPosXY, 0);

                // --- Apply tilt around the X-axis ---
                // Rotates the Y component into Z.
                float sX = sin(_TiltX);
                float cX = cos(_TiltX);
                float3 rotX;
                rotX.x = localPos.x;
                rotX.y = localPos.y * cX;
                rotX.z = localPos.y * sX;

                // --- Apply tilt around the Y-axis ---
                // Rotates the X component into Z.
                float sY = sin(_TiltY);
                float cY = cos(_TiltY);
                float3 rotated;
                rotated.x = rotX.x * cY + rotX.z * sY;
                rotated.y = rotX.y;
                rotated.z = -rotX.x * sY + rotX.z * cY;

                // Place the quad's center at a fixed view-space position (0, 0, _Distance).
                float3 viewCenter = float3(0, 0, _Distance);
                float3 viewPos = viewCenter + rotated;

                // Project the view-space position into clip space.
                float4 clipPos = mul(UNITY_MATRIX_P, float4(viewPos, 1.0));

                // Apply the screen offset.
                // The offsets are in normalized device coordinates (range -1 to 1).
                clipPos.xy += float2(_OffsetX, _OffsetY) * clipPos.w;

                o.vertex = clipPos;
                o.uv = v.uv;
                return o;
            }

            fixed4 frag (v2f i) : SV_Target {
                return tex2D(_MainTex, i.uv);
            }
            ENDCG
        }
    }
    FallBack "UI/Default"
}

Explanation

• Screen-Space Setup:
  The quad is constructed in view space with its center fixed at (0, 0, _Distance). This makes it independent of any world-space transformations and ideal for UI use.

• Two-Axis Perspective Tilt:
  The shader first scales the quad using separate _SizeX and _SizeY values. Then, it applies a rotation around the x‑axis (_TiltX) to tilt the Y coordinates into Z, and around the y‑axis (_TiltY) to tilt the X coordinates into Z. This produces a combined perspective tilt that remains constant.

• Screen Offsets:
  The _OffsetX and _OffsetY properties (defined in normalized device coordinates) allow you to reposition the quad on the screen after projection without affecting its perspective.

Simply assign this shader to a material, apply it to a quad (with vertices defined from –0.5 to +0.5), and adjust the controls to achieve your desired effect.

You

How can I make this shader ignore the Edit View camera and only work using the game view?

ChatGPT

Shaders themselves can’t tell whether they’re being rendered by the Scene (Edit) view or the Game view. To make the shader “ignore” the Edit view (and only apply your perspective tilt in the Game view), you must supply that information from your C# code.

How to Do It

1. Add a Flag Property:
   Add a new float property (for example, _IsGameView) to your shader that acts as a flag. When set to 1 the shader will apply the full perspective tilt, and when 0 it will bypass the tilt.

2. Use the Flag in Your Shader:
   In the vertex shader, check the _IsGameView flag. If it’s 1, run the full transformation; otherwise (e.g. in the Scene view) use a simpler transform (or none) so that the effect is disabled.

3. Set the Flag from C# Code:
   Create a small script attached to your camera (or a manager) that sets the global shader property based on whether you’re in play mode. For example, during runtime (game view) set _IsGameView to 1 and in the editor (Scene view) set it to 0. (Keep in mind that when you run the game in the editor, the Game view will also be rendered with UNITY_EDITOR defined, so you need to check Application.isPlaying or the camera’s name/tag to decide.)

Below is an updated version of your shader with an _IsGameView flag and two code paths in the vertex shader:

Shader "Custom/ScreenSpaceUI_PerspectiveTilt2Axis_Controls_WithFlag" {
    Properties {
        _MainTex ("Texture", 2D) = "white" {}
        _TiltX ("Tilt X (radians)", float) = 0.0
        _TiltY ("Tilt Y (radians)", float) = 0.0
        _SizeX ("Size X", float) = 1.0
        _SizeY ("Size Y", float) = 1.0
        _Distance ("Distance from Camera", float) = 2.0
        _OffsetX ("Offset X (NDC)", float) = 0.0
        _OffsetY ("Offset Y (NDC)", float) = 0.0
        _IsGameView ("Is Game View", float) = 1.0
    }
    SubShader {
        Tags { "Queue"="Overlay" "RenderType"="Transparent" }
        Pass {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

            sampler2D _MainTex;
            float _TiltX;
            float _TiltY;
            float _SizeX;
            float _SizeY;
            float _Distance;
            float _OffsetX;
            float _OffsetY;
            float _IsGameView;

            struct appdata {
                float4 vertex : POSITION; // Expected vertices from -0.5 to +0.5
                float2 uv : TEXCOORD0;
            };

            struct v2f {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            v2f vert (appdata v) {
                v2f o;
                if (_IsGameView > 0.5) {
                    // --- Full Perspective Tilt Path (Game view) ---
                    // Scale the quad with separate X/Y sizes.
                    float2 localPosXY = float2(v.vertex.x * _SizeX, v.vertex.y * _SizeY);
                    float3 localPos = float3(localPosXY, 0);

                    // Apply tilt around the X-axis (rotating Y into Z)
                    float sX = sin(_TiltX);
                    float cX = cos(_TiltX);
                    float3 rotX;
                    rotX.x = localPos.x;
                    rotX.y = localPos.y * cX;
                    rotX.z = localPos.y * sX;

                    // Apply tilt around the Y-axis (rotating X into Z)
                    float sY = sin(_TiltY);
                    float cY = cos(_TiltY);
                    float3 rotated;
                    rotated.x = rotX.x * cY + rotX.z * sY;
                    rotated.y = rotX.y;
                    rotated.z = -rotX.x * sY + rotX.z * cY;

                    // Position the quad at a fixed view-space distance.
                    float3 viewCenter = float3(0, 0, _Distance);
                    float3 viewPos = viewCenter + rotated;

                    // Project to clip space.
                    float4 clipPos = mul(UNITY_MATRIX_P, float4(viewPos, 1.0));

                    // Apply screen offset (in normalized device coordinates).
                    clipPos.xy += float2(_OffsetX, _OffsetY) * clipPos.w;
                    o.vertex = clipPos;
                } else {
                    // --- Bypass Perspective Tilt Path (Scene view) ---
                    // Simply scale and position the quad without any tilt.
                    float2 localPosXY = float2(v.vertex.x * _SizeX, v.vertex.y * _SizeY);
                    float3 viewCenter = float3(0, 0, _Distance);
                    float3 viewPos = viewCenter + float3(localPosXY, 0);
                    float4 clipPos = mul(UNITY_MATRIX_P, float4(viewPos, 1.0));
                    clipPos.xy += float2(_OffsetX, _OffsetY) * clipPos.w;
                    o.vertex = clipPos;
                }
                o.uv = v.uv;
                return o;
            }

            fixed4 frag (v2f i) : SV_Target {
                return tex2D(_MainTex, i.uv);
            }
            ENDCG
        }
    }
    FallBack "UI/Default"
}

Setting the _IsGameView Flag from C#

Create a small script (for example, called GameViewShaderFlag) and attach it to your main game camera. In the script you can set the global shader property based on whether you’re in play mode. For example:

using UnityEngine;

public class GameViewShaderFlag : MonoBehaviour
{
    void OnPreRender()
    {
        // When rendering the game view, set the flag to 1.
        Shader.SetGlobalFloat("_IsGameView", 1.0f);
    }

    void OnPostRender()
    {
        // Optionally, reset the flag after rendering.
        Shader.SetGlobalFloat("_IsGameView", 0.0f);
    }
}

Note:
When you run the game in the editor, both the Scene view and Game view might be active. This approach uses the camera’s render callbacks to ensure that only the Game view (i.e. the camera rendering your actual gameplay) gets the flag set.

Summary

• The shader now has an _IsGameView property that determines which transformation path to use.
• A C# script sets this flag based on the rendering context so that the perspective tilt is only applied in the Game view.
• This way, the shader “ignores” the Edit (Scene) view and only works with your intended perspective in the Game view.

This solution lets you keep the shader’s effect intact for your UI in the Game view while avoiding unwanted transformations in the Scene (Edit) view.

You

What modification do I need to make to make it work correctly with Canvas UI (IMAGE)

ChatGPT

When using a Canvas UI (Image), the default UI system expects a different transformation flow than a typical world‐space or camera‐space shader. The shader we’ve been building computes clip space positions by multiplying by UNITY_MATRIX_P (the camera’s projection matrix). This works fine if your Canvas is in Screen Space – Camera mode, but not if you’re in Screen Space – Overlay (since there’s no camera projection).

To have the shader work correctly with a Canvas UI Image, consider these options:

1. Use a Screen Space – Camera Canvas:
   Set your Canvas’s Render Mode to Screen Space – Camera and assign your main camera. In this mode the camera’s projection (UNITY_MATRIX_P) is valid, and our shader’s math (including perspective tilt) will work as intended.

2. Or Modify the Shader for Screen Space – Overlay:
   If you must use Screen Space – Overlay, you’ll need to replace the multiplication by UNITY_MATRIX_P with a custom projection that converts your view‐space position into clip space based on the Canvas’s pixel dimensions. For example, you might pass the canvas size (or compute it via a script) and then convert your view‑space coordinates (which you still want to use to “bake in” perspective) into normalized device coordinates manually.

A simple solution is to require Screen Space – Camera mode for your UI elements. That way you can leave the shader’s transformation code unchanged, and it will work correctly with the UI Image component.

Summary

• For Screen Space – Camera:
  No modification is needed in the shader—the computed clip space positions (via UNITY_MATRIX_P) will be correct.

• For Screen Space – Overlay:
  You must modify the vertex shader to replace UNITY_MATRIX_P with your own projection calculation (based on the canvas resolution) since there is no camera. This typically means mapping your view‑space coordinates (or even your raw vertex positions) into NDC manually.

Choose the approach that best fits your project. If you want to keep things simple, setting the Canvas to Screen Space – Camera is the easiest route.