unity3d - 图像大小独立着色器
问题描述
我正在尝试为绘制圆形的图像材质创建着色器,而不管图像本身的纵横比如何。
在 Shadertoy (hlsl) 中,无论纵横比如何,我都可以执行以下操作来创建一个圆形:
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
vec2 uv = fragCoord/iResolution.xy;
uv -= 0.5;
uv.x *= iResolution.x/iResolution.y; // < this compensates for the aspect ratio
float l = length(uv);
float s = smoothstep(0.5, 0.55, l);
vec4 col = vec4(s);
fragColor = vec4(col);
}
如果我删除这条线uv.x *= iResolution.x/iResolution.y;
,圆圈将根据当前的纵横比扭曲。
现在我想在 Unity 中创建相同的效果,所以我尝试了(在我看来)相同的方法。
_MainTex_TexelSize
包含纹理的宽度/高度(来自文档):
{TextureName}_TexelSize - float4 属性包含纹理大小信息:
- x 包含 1.0/宽度
- y 包含 1.0/高度
- z 包含宽度
- w 包含高度
Shader "Unlit/Shader"
{
Properties
{
_MainTex ("Texture", 2D) = "white" {}
}
SubShader
{
Tags { "RenderType"="Opaque" }
LOD 100
Blend SrcAlpha OneMinusSrcAlpha
Cull off
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;
float4 _MainTex_TexelSize;
v2f vert (appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = TRANSFORM_TEX(v.uv, _MainTex);
o.uv -= 0.5;
o.uv.x *= _MainTex_TexelSize.z / _MainTex_TexelSize.w;
return o;
}
float DrawCircle(float2 uv, float radius, float fallOff)
{
float d = length(uv);
return smoothstep(radius, fallOff, d);
}
fixed4 frag (v2f i) : SV_Target
{
fixed4 col = tex2D(_MainTex, i.uv);
float c = DrawCircle(i.uv, 0.5, 0.55);
col = lerp(col, fixed4(1,0,0,1), c);
return col;
}
ENDCG
}
}
}
我认为这可能是由于 uv 的设置方式造成的,o.uv = TRANSFORM_TEX(v.uv, _MainTex);
所以我尝试将其除以图像的大小:
o.uv = TRANSFORM_TEX(v.uv, _MainTex);
o.uv / _MainTex_TexelSize.zw;
o.uv -= 0.5;
然而这什么也没做
并以不同的方式设置紫外线
o.uv = v.uv / _MainTex_TexelSize.zw;
o.uv / _MainTex_TexelSize.zw;
o.uv -= 0.5;
导致圆的中心向右上方移动,但当纵横比发生变化时仍会变形。
我错过了/做错了什么步骤来获得像我在shadertoy中获得的纵横比独立结果?
解决方案
输入纹理_MainTex
的纵横比与输出*的纵横比无关。在 shadertoy 示例中,输出是屏幕,并iResolution
为您提供屏幕尺寸(统一中的等价物是_ScreenParams
)。
如果要绘制非全屏四边形,则必须将四边形纵横比与_MainTex
要使用的纵横比相匹配_MainTex_TexelSize
,否则只需在着色器属性中提供纵横比或尺寸(基本上就是_ScreenParams
这样做的):
float _Aspect;
fixed4 frag(v2f i) : SV_Target
{
i.uv -= .5;
i.uv.x *= _Aspect;
fixed4 col = tex2D(_MainTex, i.uv);
float c = DrawCircle(i.uv, .5, .55);
col = lerp(col, fixed4(1,0,0,1), c);
return col;
}
您可以使用导数计算纵横比。这里 dx 和 dy 是每个像素的 uv 变化量。fallOff
例如,如果您希望始终为 10 像素,这也会很有用。
fixed4 frag(v2f i) : SV_Target
{
i.uv -= .5;
float dx = ddx(i.uv.x);
float dy = ddy(i.uv.y);
float aspect = dy/dx;
i.uv.x *= aspect;
fixed4 col = tex2D(_MainTex, i.uv);
float c = DrawCircle(i.uv, .5, .55);
col = lerp(col, fixed4(1,0,0,1), c);
return col;
}
推荐阅读
- flutter - 有条件地执行一个函数,抛出错误`Conditions must have a static type of 'bool'。尝试改变条件`
- reactjs - 接收缺少返回类型注释的“useState”,尽管指定了类型,但隐含地具有“任何”返回类型
- flutter - flutter_riverpod 如何监听列表
- reactjs - ReactAdmin 不能完全识别自定义资源功能组件
- database - 如何安排 Oracle 数据库中的作业在特定时间每天重复 5 次
- typescript - 我可以在不先构建所有包的情况下在我的 yarn 工作区 typescript 项目上运行 lint 吗?
- java - 根据与每个轴android的对齐方式更改颜色
- c - 素数分解程序不适用于某些输入
- vue-router - router-link “to” 属性复制部分 url(使用 VueJS 3)
- kubernetes-helm - 秘密注入@azurekeyvault 永远等待