课时73 Fragment shader - 纹理法线与凹凸贴图 1

最新推荐文章于 2024-06-24 09:00:00 发布
最新推荐文章于 2024-06-24 09:00:00 发布
阅读量313 收藏 2
点赞数
分类专栏： Unity 文章标签： shader
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a592733740/article/details/101613535
版权

  • 课时73 Fragment shader - 纹理法线与凹凸贴图 1

  • 课时74 Fragment shader - 纹理法线与凹凸贴图 2

1.灰度图范围0~1，高度图存放高度值。高度图每个像素可以是1或多个字节，一般用不到，可以从灰度图生成法线纹理(比如，将图标的TextureType改为Normalmap，然后勾选“Create from GrayScale”)。

2.需求：编写shader，从灰度图获取法线信息，而不是用上面提到的方法。

3.代码：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class CreateNormalMap : MonoBehaviour {
	//存放灰度图,格式为Default
	//如果是普通彩色图，可以将（r+g+b)/3得到灰度图，但不是标准做法
	public Texture2D tex0;
	//存放生成的法线图,格式为Default
	//由于要被写入，要求不能压缩，可设置为RGB 24 bit
	//图片内容只是在Unity项目内临时做了修改，关闭项目后效果消失，建议做成工具，导出新贴图
	public Texture2D tex1;
	// Use this for initialization
	void Start () {
		for(int h=1;h<tex0.height-1;h++)//避免处理边缘像素点
		for	(int w=1;w<tex0.width-1;w++)
		{
			float uleft=tex0.GetPixel(w-1,h).r;//灰度图的每个分量值都一样
			float uright=tex0.GetPixel(w+1,h).r;
			float u=uright-uleft;

			float vtop=tex0.GetPixel(w,h-1).r;
			float vbottom=tex0.GetPixel(w,h+1).r;
			float v=vbottom-vtop;

			Vector3 vector_u=new Vector3(1,0,u);//构建x轴方向差分向量,叉积之前不需要规范化
			Vector3 vector_v=new Vector3(0,1,v);//构建y轴方向差分向量

			Vector3 N=Vector3.Cross(vector_u,vector_v).normalized;//每个分量范围-1~1

			float r=N.x*0.5f+0.5f;
			float g=N.y*0.5f+0.5f;
			float b=N.z*0.5f+0.5f;

			tex1.SetPixel(w,h,new Color(r,g,b));
		}
		tex1.Apply(false);
	} 
}

效果：

  • 课时75 Fragment shader - 纹理法线与凹凸贴图 3

1.法线纹理贴图的解压方法UnpackNormal函数：dx5中，法线normal的x=>r=>w;y=>g=>y，z(b)由另外两个分量计算得出。所以法线贴图只用到第二（对应g）和第四（对应r）通道。

2.改进生成法线的代码：

3.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class CreateNormalMapNew : MonoBehaviour {
	//存放灰度图,格式为Default
	//如果是普通彩色图，可以将（r+g+b)/3得到灰度图，但不是标准做法
	public Texture2D tex0;
	//存放生成的法线图,格式为Default
	//由于要被写入，要求不能压缩，可设置为RGB 24 bit
	//图片内容只是在Unity项目内临时做了修改，关闭项目后效果消失，建议做成工具，导出新贴图
	public Texture2D tex1;
	// Use this for initialization
	void Start () {
		for(int h=1;h<tex0.height-1;h++)//避免处理边缘像素点
		for	(int w=1;w<tex0.width-1;w++)
		{
			float uleft=tex0.GetPixel(w-1,h).r;//灰度图的每个分量值都一样
			float uright=tex0.GetPixel(w+1,h).r;
			float u=uright-uleft;

			float vtop=tex0.GetPixel(w,h-1).r;
			float vbottom=tex0.GetPixel(w,h+1).r;
			float v=vbottom-vtop;

			Vector3 vector_u=new Vector3(1,0,u);//构建x轴方向差分向量,叉积之前不需要规范化
			Vector3 vector_v=new Vector3(0,1,v);//构建y轴方向差分向量

			Vector3 N=Vector3.Cross(vector_u,vector_v).normalized;//法线信息存储于每个分量范围-1~1

			float r=N.x*0.5f+0.5f;
			float g=N.y*0.5f+0.5f;
			float b=N.z*0.5f+0.5f;

			tex1.SetPixel(w,h,new Color(r,g,b));//法线信息存储于rgb中,对应自建shader
			// tex1.SetPixel(w,h,new Color(0,g,0,r));//法线信息存储于ga中，dx5中只用到yw分量,对应系统自带shader
		}
		tex1.Apply(false);
	} 
}

效果：

4.需求：如果法线贴图将法线信息存储在rgb中，实现自定义shader可以解压法线。

5.代码：

Shader "Custom/Lesson74"
{
	Properties
	{
		_Color("Main Color",Color)=(1,1,1,1)
		_MainTex("MainTex",2D)="white"{}
		_BumpMap("NormalMap",2D)="bump"{}
	}
	SubShader
	{
		Tags { "RenderType"="Opaque" }
		LOD 300

		 
			CGPROGRAM
			#pragma surface surf Lambert
			
			sampler2D _MainTex;
			sampler2D _BumpMap;
			fixed4 _Color;

			struct Input{
				float2 uv_MainTex;
				float2 uv_BumpMap;
			};

			void surf (Input IN,inout SurfaceOutput o)
			{
				fixed4 c=tex2D(_MainTex,IN.uv_MainTex)*_Color;
				o.Albedo=c.rgb;
				o.Alpha=c.a;
				float4 cn=(tex2D(_BumpMap,IN.uv_BumpMap));
				o.Normal=cn.rgb*2-1;//取代UnPackNormal方法
			}
			

			ENDCG
		}
		Fallback "Legacy Shaders/Diffuse"
	}

  • 课时76 Fragment shader - 纹理法线与凹凸贴图 4

1.纹理坐标系（切空间坐标系），由法线N，切线t和垂直于法线，切线的B向量组成。

2.需求：自定义Shader在片段程序内对法线贴图进行采样，并计算光照，在光照类型为点光源时也能显示正常。

3.当LightMode=ForwardBase，且场景只有一个点光源时，因为点光源ForwardBase下只能作为非像素光，所以法线计算显示有问题：

4.需要新建通道，LightMode=ForwardAdd。第一个通道可以渲染平行光和非像素光；第二个通道可以渲染平行光外的像素光；两个通道的混合模式为“blend one one”,否则第一个通道不起作用。

5.代码：

Shader "Custom/Lesson76"
{
	//课时76 Fragment shader - 纹理法线与凹凸贴图 4
	Properties{
			_BumpTex("NormalMap", 2D)="white"{}
		}
	SubShader
	{
		Tags { "RenderType"="Geometry" }
		pass{
			tags{"LightMode"="ForwardBase"}//一个平行光，其余为非像素光

			CGPROGRAM

			#pragma vertex vert
			#pragma fragment frag
			#include "UnityCG.cginc"
			#include "lighting.cginc"

			struct v2f{
				float4 pos:POSITION;
				float2 uv:TEXCOORD0;
				float wpos:TEXCOORD1;//世界空间坐标
				float3 lightDir:TEXCOORD2;//切线空间光向量
			};
			sampler2D _BumpTex;
			v2f vert(appdata_tan v)
			{
				v2f o;
				o.pos=UnityObjectToClipPos(v.vertex);
				o.wpos=mul(unity_ObjectToWorld,v.vertex);
				o.uv=v.texcoord.xy;

				//===================构建切线空间（相当于“TANGENT_SPACE_ROTATION;”）==========================
				// float3 binormal=cross(v.tangent.xyz,v.normal);
				// float3x3 rotation=float3x3(v.tangent.xyz,binormal,v.normal);
				//=============================================
				TANGENT_SPACE_ROTATION;//构建切线空间（通用方式）

				o.lightDir=mul(rotation,_WorldSpaceLightPos0.xyz);//转换光向量至切线空间
				
				return o;
			}
			//法线纹理采样要放在片段函数中
			fixed4 frag(v2f IN):COLOR{ 
				float3 L=normalize(IN.lightDir);
				float3 N=UnpackNormal(tex2D(_BumpTex,IN.uv));//来自纹理贴图的法向量已在切线空间
				N=normalize(N);
				
				float ndotl=saturate(dot(N,L));
				fixed4 col=_LightColor0*ndotl;
				//非像素光
				col.rgb+=Shade4PointLights(unity_4LightPosX0,unity_4LightPosY0,unity_4LightPosZ0,
						unity_LightColor[0].rgb,unity_LightColor[1].rgb,
						unity_LightColor[2].rgb,unity_LightColor[3].rgb,
						unity_4LightAtten0,
						IN.wpos,N );
				return col+UNITY_LIGHTMODEL_AMBIENT;
			}

			ENDCG
		}
		//=================================================
		pass{
			tags{"LightMode"="ForwardAdd"}//不止一个像素光
			blend one one
			CGPROGRAM

			#pragma vertex vert
			#pragma fragment frag
			#include "UnityCG.cginc"
			#include "lighting.cginc"

			struct v2f{
				float4 pos:POSITION;
				float2 uv:TEXCOORD0;
				float wpos:TEXCOORD1;//世界空间坐标
				float3 lightDir:TEXCOORD2;//切线空间光向量
			};
			sampler2D _BumpTex;
			v2f vert(appdata_tan v)
			{
				v2f o;
				o.pos=UnityObjectToClipPos(v.vertex);
				o.wpos=mul(unity_ObjectToWorld,v.vertex);
				o.uv=v.texcoord.xy;

				//===================构建切线空间（相当于“TANGENT_SPACE_ROTATION;”）==========================
				// float3 binormal=cross(v.tangent.xyz,v.normal);
				// float3x3 rotation=float3x3(v.tangent.xyz,binormal,v.normal);
				//=============================================
				TANGENT_SPACE_ROTATION;//构建切线空间（通用方式）

				//_WorldSpaceLightPos0表示像素光，如果为平行光，记录方向信息，如果为点光源，记录位置信息
				o.lightDir=mul(rotation,_WorldSpaceLightPos0.xyz);//转换光向量至切线空间
				
				return o;
			}
			//法线纹理采样要放在片段函数中
			fixed4 frag(v2f IN):COLOR{
				float3 L=normalize(IN.lightDir);

				float3 N=UnpackNormal(tex2D(_BumpTex,IN.uv));//来自纹理贴图的法向量已在切线空间
				N=normalize(N);
				
				float ndotl=saturate(dot(N,L));

				float atten=1;
				if(_WorldSpaceLightPos0.w!=0)//表示点光源，计算衰减.否则表示方向光，没有衰减
				{
					atten=1.0/length(IN.lightDir);	
				}

				fixed4 col=_LightColor0*ndotl*atten;
				
				return col+UNITY_LIGHTMODEL_AMBIENT;
			}

			ENDCG
		}
	}
		Fallback "Diffuse"
}

效果：

 

 

 

lsw5530
关注
专栏目录
Shader 笔记二 片段着色器 Fragment Shader
王王王渣渣的博客
04-22 1677
简介 顶点片段着色器，运行于具有可编程渲染管线的硬件上，它包括顶点程序Vertex Programs和片段程序Fragment Programs。当在使用顶点程序或片段程序进行渲染的时候，图形硬件的固定功能管线会关闭，具体来说就是编写的顶点程序会替换掉固定管线中标准的3D变换，光照，纹理坐标生成等功能，而片段程序会替换掉SetTexture命令中的纹理混合模式。 顶点着色程序与片段着色程序通常...
shader 获取法线_Unity Shader-法线贴图（Normal）及其原理
weixin_32236671的博客
12-29 928
简介以前经常听说“模型不好看啊，怎么办啊？”答曰“加法线”，”做了个高模，准备烘一下法线贴图”，“有的美术特别屌，直接画法线贴图”.....法线贴图到底是个什么鬼，当年天真的我真的被这个图形学的奇淫杂技忽悠了，然而毕竟本人还算有点刨根问底的精神，决定研究一下法线贴图的原理以及Unity下的实现。本人才疏学浅，如有错误，欢迎指正。法线贴图是目前游戏开发中最常见的贴图之一。我们知道，一般情况下，模型面...
Fragment shader---纹理法线与凹凸贴图3
nicolelili1的专栏
01-08 298
Fragment shader---纹理法线与凹凸贴图3
【Unity Shader】片段着色器（Fragment Shader）的概念及其使用方法
Richard_shen的博客
06-24 804
在Unity和图形编程中，片段着色器（Fragment Shader）是渲染管线中的一个阶段，负责计算屏幕上每个像素（片段）的颜色和特性。片段着色器通常在顶点着色器和任何几何处理之后运行，是决定最终像素颜色的关键步骤。
Fragment Shader(片段着色器)
magic-zhu
08-09 4087
什么是 Fragment Shader(片段着色器)？ 如果你曾经有用计算机绘图的经验，你就知道在这个过程中你需要画一个圆，然后一个长方形，一条线，一些三角形……直到画出你想要的图像。这个过程很像用手写一封信或一本书 —— 都是一系列的指令，需要你一件一件完成。 Shaders 也是一系列的指令，但是这些指令会对屏幕上的每个像素同时下达。也就是说，你的代码必须根据像素在屏幕上的不同位置执行不同的操作。就像活字印刷，你的程序就像一个 function（函数），输入位置信息，输出颜色信息，当它编译完之后会以相当
Fragment Shader
Young的博客
04-07 1748
顶点程序计算光照执行效率高，片段程序计算光照较慢，但是效果更加细腻平滑。 从顶点集中传参数到片段集中，是不可以用NORMAL语义的 将光照计算从顶点程序集中移植到片段程序集中 ： struct  v2f {      float4  pos : POSITION;      float3  normal : TEXCOORD1;      // 不
Cg入门22：Fragment shader - 2D纹理采样(光照贴图制作和使用)
Potter：I am not for learning and learning, but for study and work
03-23 6184
一、光照贴图制作：实时光照效果：使用光照贴图步骤：1.选择要灯光贴图的模型，然后设置为Lightmap Static2.光源Baking设置为Baked3.选择Windows/Lighting，打开Lighting界面，1》选择Scene 选项卡，设置Ambient Gi为Baked2》选择LightMaps 选项卡，然后按Build，生成光照贴图数秒后LightMaps界面会显示光照贴图，效果如
Unity Shader-法线贴图（Normal Map）与视差贴图（Parallax Map）
puppet_master的专栏
03-15 1万+
简介 法线贴图技术至今一直是游戏增强画面效果的利器之一。随着移动设备的性能越来越好，曾经的在PC平台的各种高级技术在移动平台也都开始大规模使用了。最近印象最深刻的就是《镇魔曲》，场景地形全部都加了法线，可以说是无所不用其极了....之前还没见过哪个游戏在移动平台敢这么大规模地使用法线。而且人模的渲染也是走的次时代的流程。不得不说大厂就是牛，本屌丝只能望别人家的游戏兴叹啊。本篇文章主要是研
Unity Shader-法线贴图（Normal）及其原理
热门推荐
puppet_master的专栏
12-20 5万+
简介 以前经常听说“模型不好看啊，怎么办啊？”答曰“加法线”，”做了个高模，准备烘一下法线贴图”，“有的美术特别屌，直接画法线贴图”.....法线贴图到底是个什么鬼，当年天真的我真的被这个图形学的奇淫杂技忽悠了，然而毕竟本人还算有点刨根问底的精神，决定研究一下法线贴图一家子。毕竟本人才疏学浅，如有错误，欢迎指正。 先附上几个参考链接 凹凸贴图（Bump Map） 既
【Unity Shader】（四） ------ 纹理之法线纹理、单张纹理及遮罩纹理的实现
爱喝柠檬的二哈的博客
09-27 2157
笔者使用的是 Unity 2018.2.0f2 + VS2017，建议读者使用与 Unity 2018 相近的版本，避免一些因为版本不一致而出现的问题。 【Unity Shader】（三） ------ 漫反射和高光反射的实现 【Unity Shader】（四） ------ 纹理之法线纹理、单张纹理及遮罩纹理的实现 【Unity Shader】（五） ------ 透明效果之半透明效...
翻译Shader(6)---法线贴图(切线空间)
一个无聊的人做一些有意思的事
05-07 496
Shader "BBBBBBBBBB/贴图/03---法线贴图" { Properties{ _MainTex("Main Texture",2D) = "white"{}// 纹理贴图 _BaseColor("Base Color",Color) = (1.0,1.0,1.0,1.0)// 控制纹理贴图的颜色 //由于我们本次只计算漫反射，所以只需要_MainTex和_BaseC...
Cg入门21：Fragment shader - 2D纹理采样
Potter：I am not for learning and learning, but for study and work
03-23 2571
体纹理：是啥？tex2D 以前只能在Fragment程序中纹理采样UV坐标系：其实点为左下角，范围为【0,1】，U为x轴，V为y轴Texture.wrapMode 循环模式：TextureWrapMode.Clamp：设置纹理充满拉伸使用TextureWrapMode.Repeat：纹理重复平铺使用如果采用Repeat，那么等于U>=1的情况就会用纹理图在右边在平铺一张图Texture.filte
Fragment shader---2D纹理采样2
nicolelili1的专栏
01-07 338
1、Tiling：x：在x上的平铺数   y:在y方向的平铺数 Offset: x:在x方向上的偏移量   y：在y方向的偏移量 使用自定义的着色器，并没有进行平铺 改为系统默认的着色器，立方体进行了平铺 2、平铺texture Shader "Custom/s_texture_two" { Properties{ _MainTex("MainTe
Cg入门21：Fragment shader - 2D纹理採样
weixin_34161083的博客
08-09 123
体纹理：是啥？tex2D 曾经仅仅能在Fragment程序中纹理採样UV坐标系：事实上点为左下角，范围为【0,1】。U为x轴，V为y轴Texture.wrapMode 循环模式：TextureWrapMode.Clamp：设置纹理充满拉伸使用TextureWrapMode.Repeat：纹理反复平铺使用假设採用Repeat，那么等于U&gt;=1的情况就会用纹理图在右边在平铺一张图Textur...
Learn OpenGL（四）——片段着色器(Fragment Shader)
YBAdiam的博客
11-16 6668
片段着色器(Fragment Shader)        片段着色器是第二个也是最终我们打算创建的用于渲染三角形的着色器。 片段着色器的全部， 都是用来计算你的像素的最后颜色输出。 为了让事情比较简单， 我们的片段着色器只输出橘黄色。   注： 在计算机图形中颜色被表示为有4个元素的数组： 红色、 绿色、 蓝色和alpha(透明度)元素， 通常缩写为RGBA。     #vers...
Unity3D shader（13）——Fragment Shader（简单的纹理采样）
niuge8905的博客
08-13 1332
Shader的纹理采样千变万化，正真要把所有的计算效果做出来，可以写出厚厚的一本书。这里就仅仅表达一下Fragment Shader的纹理采样的语法。 1）首先在Properties 里声明贴图 2）然后将贴图的纹理的uv坐标传导到v2f结构里 3）最后在fram函数里，计算uv坐标的变化，达到各种各样的效果。这里主要和时间（_Time）关联起来，从而形成一个动态的样图。Shader "Cus
Unity3D Shader（10）——Fragment Shader（漫反射、phong效果、blinnPhong效果、阴影、halfLambert、渐变纹理）
niuge8905的博客
08-12 654
Fragment Shader的效果要好于vertex shader，前者基于面，然后逐像素处理对象，后者基于顶点来处理对象，缺点就是前者计算相对复杂，会多耗费一些资源。 首先对应着vertex shader（看之前的博客），来看一下Fragment的漫反射的效果。 Fragment Shader的主要计算在Frag方法里计算，Vert方法主要起传递数据的作用，而vertex shader主要
Android OpenGL ES 2.0 手把手教学（4）- 片段着色器 fragment shader
weixin_34417200的博客
04-06 652
大家好，下面和大学一起学习如何使用片段着色器fragment shader来渲染丰富多彩的颜色，在我的github上有一个项目OpenGLES2.0SamplesForAndroid，我会不断地编写学习样例，文章和代码同步更新，欢迎关注，链接：github.com/kenneycode/… 在上一篇文章中，我们介绍了渲染管线，下面来回顾一下fragment shader在渲染管线中的位置： fr...
Fragment shader---边缘泛光2
nicolelili1的专栏
01-07 383
遇到的问题： Shader "Custom/s_edge" { Properties{ _MainColor("MainColor",color)=(1,1,1,1) _Scale("Scale",range(1,8)) = 2 _Outer("Outer",range(0,1))=0.2 } SubShader{ Tags{ "queue" = "transp
unityshader中求法线矩阵的逆矩阵
最新发布
08-24
在Unity Shader中，求取法线矩阵的逆矩阵通常是为了进行光照计算，尤其是在使用了表面着色器（Surface Shader）时。法线矩阵是由模型变换矩阵的上3x3部分构成的，用于保持法线向量在空间变换后的方向正确。如果模型...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值