如何在 Unity 中创建一个可以显示由许多小图像组成的纹理的着色器
How to create a shader that can display a texture made out of many small images in Unity
所以我想做的是从 SQL table 加载卫星图像并将它们环绕在一个球体上以创建一个地球仪。我知道我已经加载了覆盖的图像,我只是不确定如何让我的着色器以正确的方向显示图像。
我访问了 Unity 论坛并查看了 this code Unity 文档。
使用链接的着色器代码和我在论坛上获得的帮助,这是我最终得到的代码:
Properties
{
_MainTexArray("Tex", 2DArray) = "" {}
_SliceRange("Slices", Range(0,32)) = 6
_UVScale("UVScale", Float) = 1
_COLUMNS("Columns", Range(0, 5)) = 1
_ROWS("Rows", Range(0, 5)) = 1
_CELLS("Cells", Range(0, 32)) = 16
}
SubShader
{
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
// texture arrays are not available everywhere,
// only compile shader on platforms where they are
#pragma require 2darray
#include "UnityCG.cginc"
struct v2f
{
float3 uv : TEXCOORD0;
float4 vertex : SV_POSITION;
};
float _SliceRange;
float _UVScale;
v2f vert(float4 vertex : POSITION)
{
v2f o;
o.vertex = UnityObjectToClipPos(vertex);
o.uv.xy = (vertex.xy + 0.5) * _UVScale;
o.uv.z = (vertex.z + 0.5) * _SliceRange;
return o;
}
float _COLUMNS; //Columns and rows only go between 0 and 1
float _ROWS;
float _CELLS;
UNITY_DECLARE_TEX2DARRAY(_MainTexArray);
half4 frag(v2f i) : SV_Target
{
float3 uv = float3(i.uv.x * _CELLS, i.uv.y * _CELLS, 0);
uv.z = floor(i.uv.x / _COLUMNS) * floor(i.uv.y / _ROWS);
return UNITY_SAMPLE_TEX2DARRAY(_MainTexArray, uv / _CELLS);
}
ENDCG
}
}
使用它,我的材料看起来像这样:
这是我用来加载 SQL 图片的代码:
textures = new Texture2D[size];
for (int x = 0; x <= 7; x++)
{
for (int y = 0; y <= 3; y++)
{
textures[count] = tiler.Read(x, y, 2); //The z determines the zoom level, so I wouldn't want them all loaded at once
if (textures[count] != null) TextureScale.Bilinear(textures[count], 256, 256);
count++;
}
}
texArr = new Texture2DArray(256, 256, textures.Length, TextureFormat.RGBA32, true, true);
texArr.filterMode = FilterMode.Bilinear;
texArr.wrapMode = TextureWrapMode.Repeat;
for (int i = 0; i < textures.Length; i++)
{
if (textures[i] == null) continue;
texArr.SetPixels(textures[i].GetPixels(0), i, 0);
}
texArr.Apply();
mat.SetTexture("_MainTexArray", texArr);
在 SQL Table 中,x 和 y 确定图块的位置,z 确定缩放级别。我现在只使用一种缩放级别。
很抱歉链接了整个着色器class,但我对着色器不是很有经验,所以我不太清楚问题出在哪里。
如果您可以对照片数组进行索引,从而有效地获得地球的等角投影,您可以尝试使用着色器代码的修改形式,方法是 Farfarer from the Unity forums 在下面进行复制和修改:
Shader "Custom/Equirectangular" {
Properties{
_MainTexArray("Tex", 2DArray) = "" {}
_COLUMNS("Columns", Int) = 2
_ROWS("Rows", Int) = 2
}
SubShader{
Pass {
Tags {"LightMode" = "Always"}
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#pragma require 2darray
#include "UnityCG.cginc"
struct appdata {
float4 vertex : POSITION;
float3 normal : NORMAL;
};
struct v2f
{
float4 pos : SV_POSITION;
float3 normal : TEXCOORD0;
};
v2f vert(appdata v)
{
v2f o;
o.pos = UnityObjectToClipPos(v.vertex);
o.normal = v.normal;
return o;
}
UNITY_DECLARE_TEX2DARRAY(_MainTexArray);
int _ROWS;
int _COLUMNS;
#define PI 3.141592653589793
inline float2 RadialCoords(float3 a_coords)
{
float3 a_coords_n = normalize(a_coords);
float lon = atan2(a_coords_n.z, a_coords_n.x);
float lat = acos(a_coords_n.y);
float2 sphereCoords = float2(lon, lat) * (1.0 / PI);
return float2(sphereCoords.x * 0.5 + 0.5, 1 - sphereCoords.y);
}
float4 frag(v2f IN) : COLOR
{
float2 equiUV = RadialCoords(IN.normal);
float2 texIndex;
float2 uvInTex = modf(equiUV * float2(_COLUMNS,_ROWS), texIndex);
int flatTexIndex = texIndex.x * _ROWS + texIndex.y;
return UNITY_SAMPLE_TEX2DARRAY(_MainTexArray,
float3(uvInTex, flatTexIndex));
}
ENDCG
}
}
FallBack "VertexLit"
}
您还需要使用
texArr = new Texture2DArray(256, 256, textures.Length, TextureFormat.RGBA32, false, true);
而不是
texArr = new Texture2DArray(256, 256, textures.Length, TextureFormat.RGBA32, true, false);
如果我将此脚本附加到球体,它对我有用:
Material myMat;
public List<Texture2D> texes;
IEnumerator Start()
{
yield return null;
myMat = GetComponent<Renderer>().material;
Texture2DArray texArr = new Texture2DArray(256, 256, 9,
TextureFormat.RGBA32, false, true);
texArr.filterMode = FilterMode.Bilinear;
texArr.wrapMode = TextureWrapMode.Clamp;
for (int i = 0 ; i < texes.Count ; i++)
{
texArr.SetPixels(texes[i].GetPixels(), i, 0);
}
texArr.Apply();
myMat.SetTexture("_MainTexArray", texArr);
}
并在 texes
中我按顺序添加这些纹理:
0:
1:
2:
3:
4:
5:
6:
7:
8:
并为行和列设置 3,它产生不错的结果:
如果启用双线性过滤,纹理的边界处仍然存在一些伪像。但是这些人工制品必须放大到非常近才能看到。由于缺乏用于双线性过滤的相邻像素,它们大多表现为混合不当或像素缺失:
当然这个例子没有正确平铺,所以沿着一条经线有一个明显的接缝:
由于此设置需要来自球体的法线,因此这仅适用于法线接近球体的事物。例如,它无法在飞机上正确渲染。
所以我想做的是从 SQL table 加载卫星图像并将它们环绕在一个球体上以创建一个地球仪。我知道我已经加载了覆盖的图像,我只是不确定如何让我的着色器以正确的方向显示图像。
我访问了 Unity 论坛并查看了 this code Unity 文档。
使用链接的着色器代码和我在论坛上获得的帮助,这是我最终得到的代码:
Properties
{
_MainTexArray("Tex", 2DArray) = "" {}
_SliceRange("Slices", Range(0,32)) = 6
_UVScale("UVScale", Float) = 1
_COLUMNS("Columns", Range(0, 5)) = 1
_ROWS("Rows", Range(0, 5)) = 1
_CELLS("Cells", Range(0, 32)) = 16
}
SubShader
{
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
// texture arrays are not available everywhere,
// only compile shader on platforms where they are
#pragma require 2darray
#include "UnityCG.cginc"
struct v2f
{
float3 uv : TEXCOORD0;
float4 vertex : SV_POSITION;
};
float _SliceRange;
float _UVScale;
v2f vert(float4 vertex : POSITION)
{
v2f o;
o.vertex = UnityObjectToClipPos(vertex);
o.uv.xy = (vertex.xy + 0.5) * _UVScale;
o.uv.z = (vertex.z + 0.5) * _SliceRange;
return o;
}
float _COLUMNS; //Columns and rows only go between 0 and 1
float _ROWS;
float _CELLS;
UNITY_DECLARE_TEX2DARRAY(_MainTexArray);
half4 frag(v2f i) : SV_Target
{
float3 uv = float3(i.uv.x * _CELLS, i.uv.y * _CELLS, 0);
uv.z = floor(i.uv.x / _COLUMNS) * floor(i.uv.y / _ROWS);
return UNITY_SAMPLE_TEX2DARRAY(_MainTexArray, uv / _CELLS);
}
ENDCG
}
}
使用它,我的材料看起来像这样:
这是我用来加载 SQL 图片的代码:
textures = new Texture2D[size];
for (int x = 0; x <= 7; x++)
{
for (int y = 0; y <= 3; y++)
{
textures[count] = tiler.Read(x, y, 2); //The z determines the zoom level, so I wouldn't want them all loaded at once
if (textures[count] != null) TextureScale.Bilinear(textures[count], 256, 256);
count++;
}
}
texArr = new Texture2DArray(256, 256, textures.Length, TextureFormat.RGBA32, true, true);
texArr.filterMode = FilterMode.Bilinear;
texArr.wrapMode = TextureWrapMode.Repeat;
for (int i = 0; i < textures.Length; i++)
{
if (textures[i] == null) continue;
texArr.SetPixels(textures[i].GetPixels(0), i, 0);
}
texArr.Apply();
mat.SetTexture("_MainTexArray", texArr);
在 SQL Table 中,x 和 y 确定图块的位置,z 确定缩放级别。我现在只使用一种缩放级别。
很抱歉链接了整个着色器class,但我对着色器不是很有经验,所以我不太清楚问题出在哪里。
如果您可以对照片数组进行索引,从而有效地获得地球的等角投影,您可以尝试使用着色器代码的修改形式,方法是 Farfarer from the Unity forums 在下面进行复制和修改:
Shader "Custom/Equirectangular" {
Properties{
_MainTexArray("Tex", 2DArray) = "" {}
_COLUMNS("Columns", Int) = 2
_ROWS("Rows", Int) = 2
}
SubShader{
Pass {
Tags {"LightMode" = "Always"}
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#pragma require 2darray
#include "UnityCG.cginc"
struct appdata {
float4 vertex : POSITION;
float3 normal : NORMAL;
};
struct v2f
{
float4 pos : SV_POSITION;
float3 normal : TEXCOORD0;
};
v2f vert(appdata v)
{
v2f o;
o.pos = UnityObjectToClipPos(v.vertex);
o.normal = v.normal;
return o;
}
UNITY_DECLARE_TEX2DARRAY(_MainTexArray);
int _ROWS;
int _COLUMNS;
#define PI 3.141592653589793
inline float2 RadialCoords(float3 a_coords)
{
float3 a_coords_n = normalize(a_coords);
float lon = atan2(a_coords_n.z, a_coords_n.x);
float lat = acos(a_coords_n.y);
float2 sphereCoords = float2(lon, lat) * (1.0 / PI);
return float2(sphereCoords.x * 0.5 + 0.5, 1 - sphereCoords.y);
}
float4 frag(v2f IN) : COLOR
{
float2 equiUV = RadialCoords(IN.normal);
float2 texIndex;
float2 uvInTex = modf(equiUV * float2(_COLUMNS,_ROWS), texIndex);
int flatTexIndex = texIndex.x * _ROWS + texIndex.y;
return UNITY_SAMPLE_TEX2DARRAY(_MainTexArray,
float3(uvInTex, flatTexIndex));
}
ENDCG
}
}
FallBack "VertexLit"
}
您还需要使用
texArr = new Texture2DArray(256, 256, textures.Length, TextureFormat.RGBA32, false, true);
而不是
texArr = new Texture2DArray(256, 256, textures.Length, TextureFormat.RGBA32, true, false);
如果我将此脚本附加到球体,它对我有用:
Material myMat;
public List<Texture2D> texes;
IEnumerator Start()
{
yield return null;
myMat = GetComponent<Renderer>().material;
Texture2DArray texArr = new Texture2DArray(256, 256, 9,
TextureFormat.RGBA32, false, true);
texArr.filterMode = FilterMode.Bilinear;
texArr.wrapMode = TextureWrapMode.Clamp;
for (int i = 0 ; i < texes.Count ; i++)
{
texArr.SetPixels(texes[i].GetPixels(), i, 0);
}
texArr.Apply();
myMat.SetTexture("_MainTexArray", texArr);
}
并在 texes
中我按顺序添加这些纹理:
0:
1:
2:
3:
4:
5:
6:
7:
8:
并为行和列设置 3,它产生不错的结果:
如果启用双线性过滤,纹理的边界处仍然存在一些伪像。但是这些人工制品必须放大到非常近才能看到。由于缺乏用于双线性过滤的相邻像素,它们大多表现为混合不当或像素缺失:
当然这个例子没有正确平铺,所以沿着一条经线有一个明显的接缝:
由于此设置需要来自球体的法线,因此这仅适用于法线接近球体的事物。例如,它无法在飞机上正确渲染。