利用shader绘制矩形网格

最新推荐文章于 2025-05-02 10:52:29 发布

探求虚无

最新推荐文章于 2025-05-02 10:52:29 发布

阅读量4.8k

点赞数

分类专栏： Shader Unity3d

本文链接：https://blog.youkuaiyun.com/tankerhunter/article/details/55105322

版权

Unity3d 同时被 2 个专栏收录

27 篇文章

订阅专栏

Shader

2 篇文章

订阅专栏

实现说明：

本文将使用geometry shader实现一类网格体的网格显示。mesh的组成单元为三角片，但实际应用中有时需要实现不显示网格的第三边的矩形网格，这时可以用c#来修改贴图实现这种效果，也可以直接对GPU进行编程，让其绘制指定的区域。本文编写的shader源码是基于AssetStore的免费shader:UCLA Wireframe Shader制作而来，感谢原作者

效果预览：

（在Editor模式的Wireframe模式下：）

（在本文编写的shader模式下:）

实现步骤详解：

一、利用uv特性获取三角型直角点

二、对geometry Shader处理后的每个像素点赋值

三、完整shader脚本

一、利用uv特性获取三角型直角点

之所以要获取三角型的直角点，是因为如果得到geometry 参数插值后的对应到两个直角边的距离，就可以判断这一点是保留还是舍去

// Geometry Shader
[maxvertexcount(3)]
void UCLAGL_geom(triangle UCLAGL_v2g p[3], inout TriangleStream<UCLAGL_g2f> triStream)
{
	UCLAGL_v2g np[3];
	bool find = false;
	for (int i = 0; i < 3 && !find; i++)
	{
		for (int j = i + 1; j < 3 && !find; j++)
		{
			if (abs(p[i].uv.x - p[j].uv.x)>0.01f && abs(p[i].uv.y - p[j].uv.y)>0.01f)
			{
				np[0] = p[3 - i - j];//设置np[0]为直角点
				np[1] = p[i];
				np[2] = p[j];
				find = true;
			}
		}
	}
	//points in screen space
	float2 p0 = _ScreenParams.xy * np[0].pos.xy / np[0].pos.w;
	float2 p1 = _ScreenParams.xy * np[1].pos.xy / np[1].pos.w;
	float2 p2 = _ScreenParams.xy * np[2].pos.xy / np[2].pos.w;

	//edge vectors
	float2 v0 = p2 - p1;
	float2 v1 = p2 - p0;
	float2 v2 = p1 - p0;

	//area of the triangle
	float area = abs(v1.x*v2.y - v1.y * v2.x);

	//values based on distance to the edges
	float dist0 = area / length(v0);
	float dist1 = area / length(v1);
	float dist2 = area / length(v2);


	UCLAGL_g2f pIn;

	//add the first point
	pIn.pos = np[0].pos;
	pIn.uv = np[0].uv;
	pIn.dist = float3(dist0, 0, 0);
	triStream.Append(pIn);

	//add the second point
	pIn.pos = np[1].pos;
	pIn.uv = np[1].uv;
	pIn.dist = float3(0, dist1, 0);
	triStream.Append(pIn);

	//add the third point
	pIn.pos = np[2].pos;
	pIn.uv = np[2].uv;
	pIn.dist = float3(0, 0, dist2);
	triStream.Append(pIn);
}

二、对Fragment Shader的每个像素点赋值

在geometry Shader处理后的每个点的信息中，保存当前点到三角形每个边的距离，利用这些信息进行如下方法：

// Fragment Shader
float4 UCLAGL_frag(UCLAGL_g2f input) : COLOR
{
    //blend between the lines and the negative space to give illusion of anti aliasing
    float4 targetColor = _Color * tex2D(_MainTex, input.uv);
    float4 transCol = float4(0, 0, 0, 0);
    return (_Thickness > input.dist.y || _Thickness > input.dist.z) ? targetColor : transCol;
}
可以得到透明的区域和线条区域

三、完整shader脚本

( 1,cg脚本：）

//Algorithms and shaders based on code from this journal
//http://cgg-journal.com/2008-2/06/index.html

#ifndef UCLA_GAMELAB_WIREFRAME
#define UCLA_GAMELAB_WIREFRAME

#include "UnityCG.cginc"

// DATA STRUCTURES //
// Vertex to Geometry
struct UCLAGL_v2g
{
	float4	pos		: POSITION;		// vertex position
	float2  uv		: TEXCOORD0;	// vertex uv coordinate
};

// Geometry to  UCLAGL_fragment
struct UCLAGL_g2f
{
	float4	pos		: POSITION;		// fragment position
	float2	uv		: TEXCOORD0;	// fragment uv coordinate
	float3  dist	: TEXCOORD1;	// distance to each edge of the triangle
};

// PARAMETERS //

//float4 _Texture_ST;			// For the Main Tex UV transform
float _Thickness = 1;		// Thickness of the wireframe line rendering
float4 _Color = { 1,1,1,1 };	// Color of the line
float4 _MainTex_ST;			// For the Main Tex UV transform
sampler2D _MainTex;			// Texture used for the line

// SHADER PROGRAMS //
// Vertex Shader
UCLAGL_v2g UCLAGL_vert(appdata_base v)
{
	UCLAGL_v2g output;
	output.pos = mul(UNITY_MATRIX_MVP, v.vertex);
	output.uv = TRANSFORM_TEX(v.texcoord, _MainTex);//v.texcoord;

	return output;
}
// Geometry Shader
[maxvertexcount(3)]
void UCLAGL_geom(triangle UCLAGL_v2g p[3], inout TriangleStream<UCLAGL_g2f> triStream)
{
	UCLAGL_v2g np[3];
	bool find = false;
	for (int i = 0; i < 3 && !find; i++)
	{
		for (int j = i + 1; j < 3 && !find; j++)
		{
			if (abs(p[i].uv.x - p[j].uv.x)>0.01f && abs(p[i].uv.y - p[j].uv.y)>0.01f)
			{
				np[0] = p[3 - i - j];//设置np[0]为直角点
				np[1] = p[i];
				np[2] = p[j];
				find = true;
			}
		}
	}
	//points in screen space
	float2 p0 = _ScreenParams.xy * np[0].pos.xy / np[0].pos.w;
	float2 p1 = _ScreenParams.xy * np[1].pos.xy / np[1].pos.w;
	float2 p2 = _ScreenParams.xy * np[2].pos.xy / np[2].pos.w;

	//edge vectors
	float2 v0 = p2 - p1;
	float2 v1 = p2 - p0;
	float2 v2 = p1 - p0;

	//area of the triangle
	float area = abs(v1.x*v2.y - v1.y * v2.x);

	//values based on distance to the edges
	float dist0 = area / length(v0);
	float dist1 = area / length(v1);
	float dist2 = area / length(v2);


	UCLAGL_g2f pIn;

	//add the first point
	pIn.pos = np[0].pos;
	pIn.uv = np[0].uv;
	pIn.dist = float3(dist0, 0, 0);
	triStream.Append(pIn);

	//add the second point
	pIn.pos = np[1].pos;
	pIn.uv = np[1].uv;
	pIn.dist = float3(0, dist1, 0);
	triStream.Append(pIn);

	//add the third point
	pIn.pos = np[2].pos;
	pIn.uv = np[2].uv;
	pIn.dist = float3(0, 0, dist2);
	triStream.Append(pIn);
}

// Fragment Shader
float4 UCLAGL_frag(UCLAGL_g2f input) : COLOR
{
    //blend between the lines and the negative space to give illusion of anti aliasing
    float4 targetColor = _Color * tex2D(_MainTex, input.uv);
	float4 transCol = float4(0, 0, 0, 0);
    return (_Thickness > input.dist.y || _Thickness > input.dist.z) ? targetColor : transCol;
}


#endif

（ 2，shader脚本：）
Shader "UCLA Game Lab/Wireframe/Double-Sided Cutout"
{
   Properties
   {
       _Color ("Line Color", Color) = (1,1,1,1)
       _MainTex ("Main Texture", 2D) = "white" {}
       _Thickness ("Thickness", Float) = 1
   }

   SubShader
   {
       Pass
       {
           Tags { "RenderType"="Opaque" "Queue"="Geometry" }

           Blend SrcAlpha OneMinusSrcAlpha
           Cull Off
           LOD 200

           CGPROGRAM
               #pragma target 5.0
               #include "UnityCG.cginc"
               #include "UCLA GameLab Wireframe Functions.cginc"
               #pragma vertex vert
               #pragma fragment frag
               #pragma geometry geom

               // Vertex Shader
               UCLAGL_v2g vert(appdata_base v)
               {
                   return UCLAGL_vert(v);
               }

               // Geometry Shader
               [maxvertexcount(3)]
               void geom(triangle UCLAGL_v2g p[3], inout TriangleStream<UCLAGL_g2f> triStream)
               {
                   UCLAGL_geom(p, triStream);
               }

               // Fragment Shader
               float4 frag(UCLAGL_g2f input) : COLOR
               {
                   float4 col = UCLAGL_frag(input);
                   if(col.a < 0.5f) discard;
                   else col.a = 1.0f;

                   return col;
               }

           ENDCG
       }
   }
}

后续说明：

1.判断直角的地方可能会出现uv的x或y不直接相等的问题，所以改成了约等于的方式