shader学习之路(3)-纹理压缩与混合

原创 2016年08月28日 16:56:31

前言

最近看书看很慢,过了好久也才看到shader的纹理混合与压缩这块儿,纹理混合与压缩,在游戏中是比较常见的技术,例如在一些简易的地形贴图中便使用了纹理混合,通常在shader中加载一个填充了灰度图像的混合纹理,根据该纹理的各个通道分别混合各种贴图,来实现一个混合纹理。
图片来源Unity Shaders and Effects Cookbook
由上图可以看到,根据这张灰度图,如果在不同通道上混合不同的纹理,便能能创造出指定的混合结果。

准备工作

素材准备下载素材包
将Unity assets中5084_02_UnityAssets.rar解压后的Texture文件夹还有Terrain_001.fbx文件拷贝到unity工程目录。

内置方法:
在此先提及下线性插值,CGFX中的线性插值函数lerp(a,b,f)简介如下
图片来源Unity Shaders and Effects Cookbook
意即根据f的值,返回a、b之间的某个值,在unity3d引擎中,常用的Mathf.Lerp()函数也是这个原理。
两个纹理通过混合的灰度图作为f参数,就能获得如下的插值结果。
图片来源Unity Shaders and Effects Cookbook

tex2D(a,b):a为纹理贴图,b为uv坐标
saturate(x):如果 x 小于 0 ,返回 0 ;如果 x 大于 1 ,返回 1 ;否则,返回 x

Shader编写

打开,创建好surface shader后,添加如下Properties:

    Properties {
        _MainTint ("Diffuse Tint", Color) = (1,1,1,1)
        _ColorA ("Terrain ColorA", Color) = (1,1,1,1)
        _ColorB ("Terrain ColorB", Color) = (1,1,1,1)
        _RTexture("R Channel Texture", 2D) = ""{}
        _GTexture("G Channel Texture", 2D) = ""{}
        _BTexture("B Channel Texture", 2D) = ""{}
        _ATexture("Alpha Channel Texture", 2D) = ""{}
        _BlendTexture("Blend Channel Texture", 2D) = ""{}
    }

前三项为混合的颜色参考值,相应的需要在SubShader中定义如下变量,使其和Properties中的属性相链接

        float4 _MainTint;
        float4 _ColorA; 
        float4 _ColorB;
        sampler2D _RTexture;
        sampler2D _GTexture;
        sampler2D _BTexture;
        sampler2D _ATexture;
        sampler2D _BlendTexture;

使用自带光照模型Lambert,在此需要注意,如果系统自动生成的字段有
pragma target 3.0,请务必将其改为4.0及以上,因为3.0中无法支持同时加载如此多的贴图的限制

        CGPROGRAM
        // Physically based Standard lighting model, and enable shadows on all light types
        #pragma surface surf Lambert
        #pragma target 4.0

为了将uv值和贴图相链接,input结构体需要为变量添加uv_的字段头

        struct Input {
            float2 uv_RTexture;
            float2 uv_GTexture;
            float2 uv_BTexture;
            float2 uv_ATexture;
            float2 uv_BlendTexture;

        };

随后编写surf函数,先加载四张用于混合的贴图信息,并加载灰度图

            float4 blendData = tex2D(_BlendTexture, IN.uv_BlendTexture);
            float4 rTexData = tex2D(_RTexture, IN.uv_RTexture);
            float4 gTexData = tex2D(_GTexture, IN.uv_GTexture);
            float4 bTexData = tex2D(_BTexture, IN.uv_BTexture);
            float4 aTexData = tex2D(_ATexture, IN.uv_ATexture);

随后将最终贴图的颜色值根据灰度图进行插值计算,插值计算的参数即为刚才加载的四个贴图参数。

            float4 finalColor;
            finalColor = lerp(rTexData, gTexData, blendData.g);
            finalColor = lerp(finalColor, bTexData, blendData.b);
            finalColor = lerp(finalColor, aTexData, blendData.a);
            finalColor.a = 1.0;

最后创建地形的着色值,其值将在_ColorA\ _ColorB之间由灰度图的红色通道来确定,最后将着色值同混合纹理相乘。注意最后的颜色值使用了sature()来避免计算结果超出1或者小于0。

            float4 terrainLayers = lerp(_ColorA, _ColorB, blendData);
            finalColor *= terrainLayers;
            finalColor = saturate(finalColor);

            o.Albedo = finalColor.rgb * _MainTint.rgb;
            o.Alpha = finalColor.a;

最终shader代码如下

Shader "Custom/PackAndBlend" {
    Properties {
        _MainTint ("Diffuse Tint", Color) = (1,1,1,1)
        _ColorA ("Terrain ColorA", Color) = (1,1,1,1)
        _ColorB ("Terrain ColorB", Color) = (1,1,1,1)
        _RTexture("R Channel Texture", 2D) = ""{}
        _GTexture("G Channel Texture", 2D) = ""{}
        _BTexture("B Channel Texture", 2D) = ""{}
        _ATexture("Alpha Channel Texture", 2D) = ""{}
        _BlendTexture("Blend Channel Texture", 2D) = ""{}
    }
    SubShader {
        Tags { "RenderType"="Opaque" }
        LOD 200

        CGPROGRAM
        // Physically based Standard lighting model, and enable shadows on all light types
        #pragma surface surf Lambert

        // Use shader model 3.0 target, to get nicer looking lighting
        #pragma target 4.0

        float4 _MainTint;
        float4 _ColorA; 
        float4 _ColorB;
        sampler2D _RTexture;
        sampler2D _GTexture;
        sampler2D _BTexture;
        sampler2D _ATexture;
        sampler2D _BlendTexture;


        struct Input {
            float2 uv_RTexture;
            float2 uv_GTexture;
            float2 uv_BTexture;
            float2 uv_ATexture;
            float2 uv_BlendTexture;

        };



        void surf (Input IN, inout SurfaceOutput o) {
            float4 blendData = tex2D(_BlendTexture, IN.uv_BlendTexture);
            float4 rTexData = tex2D(_RTexture, IN.uv_RTexture);
            float4 gTexData = tex2D(_GTexture, IN.uv_GTexture);
            float4 bTexData = tex2D(_BTexture, IN.uv_BTexture);
            float4 aTexData = tex2D(_ATexture, IN.uv_ATexture);

            float4 finalColor;
            finalColor = lerp(rTexData, gTexData, blendData.g);
            finalColor = lerp(finalColor, bTexData, blendData.b);
            finalColor = lerp(finalColor, aTexData, blendData.a);
            finalColor.a = 1.0;

            float4 terrainLayers = lerp(_ColorA, _ColorB, blendData);
            finalColor *= terrainLayers;
            finalColor = saturate(finalColor);

            o.Albedo = finalColor.rgb * _MainTint.rgb;
            o.Alpha = finalColor.a;

        }
        ENDCG
    }
    FallBack "Diffuse"
}

最终效果

创建新的Material后将改shader放入其中,随后在shader属性中放入Textures文件夹中的Chapter02_RockSmooth0045_2_S.jpg、Chapter02_SandPebbles0027_1_S.jpg、Chapter02_Grass0103_2_S.jpg、Chapter02_SandPebbles0030_3_S.jpg、Chapter02_TerrainBlend_001.tga
这里写图片描述
除开Blend Channel Texture中必须放入Chapter02_TerrainBlend_001.tga以外,其他的几张贴图的可以互换放入的位置
最终效果如图:
这里写图片描述
当然可以尝试修改shader参数来观察参数变化带来的效果变化,例如修改ColorA参数,可以的得到下面的效果
这里写图片描述

虽然游戏实际开发中的贴图更加复杂,但在没接触shader前,对地形贴图的概念还在刷刷草地、雪地的帝国时代2编辑器那种认识,显然使用shader来做这个带来的新的思维,而使用shader本身也应该是开发中需要多多接触了解的。

以上文章所使用的图片和素材均来自:
Unity Shaders and Effects Cookbook

UnityShader之压缩和混合纹理贴图

纹理压缩,大多情况会在地形着色器中使用,当我们遇到需要将一组纹理混合显示在一个游戏物体上的需求时,我们就需要使用一种特殊的纹理操作或者纹理压缩的方式来完美的进行纹理混合。准备工作:四张地形贴图 和 包...
  • AutisticPatient
  • AutisticPatient
  • 2017年03月27日 13:36
  • 580

Shader山下(十一)纹理混合

Shader山下(八)片段着色器介绍了如何编写片段着色器,本文就使用它实现纹理混合效果。...
  • ecidevilin
  • ecidevilin
  • 2016年10月12日 13:57
  • 1138

Unity Shader之混合纹理基础示例

对于游戏,始于好玩,陷于好玩,忠于好玩。 今个学习了浅墨大神的一篇关于混合纹理的文章,比较基础,整理如下: 一.双纹理混合 Shader "WC/双纹理混合" { Properties { _...
  • leo_wc
  • leo_wc
  • 2017年05月02日 15:56
  • 707

Unity Shader 学习笔记(十一) 混合纹理Shader实例

Unity Shader 学习笔记(十一) 混合纹理Shader实例 Shader "Custom/Blend" { Properties { _MainTint ("Diffuse Tin...
  • u011416077
  • u011416077
  • 2016年01月04日 15:46
  • 829

Unity3d Shader(三) Pass(Texturing)混合纹理(同时显示2张图),自发光

After the basic vertex lighting has been calculated, textures are applied. In ShaderLab this is done...
  • FindSuningShine
  • FindSuningShine
  • 2014年01月07日 09:22
  • 760

unity 多重纹理 绘制 shader处理

最近想把多个mesh上的纹理的绘制合并到一个mesh上,在处理shader时遇到了问题 使用纹理渲染模式公式实现正常的纹理叠加效果(SrcAlpha OneMinusSrcAlpha)并不能...
  • fgfg12345
  • fgfg12345
  • 2016年07月13日 11:40
  • 1662

【Unity3D Shader编程】之五 圣诞夜篇: Unity中Shader的三种形态对比&混合操作合辑

本文算是固定功能Shader的最后一篇,下一次更新应该就会开始讲解表面Shader,而讲解完表面Shader,后续文章最终会讲解到顶点着色器和片段着色器(也就是可编程Shader)。文章第一部分复习和...
  • zhmxy555
  • zhmxy555
  • 2014年12月21日 17:28
  • 27395

unity3d 纹理贴图移动特效产生岩浆、瀑布效果

shader处理纹理贴图移动特效产生岩浆、瀑布效果
  • wolf96
  • wolf96
  • 2014年12月08日 11:07
  • 6481

GLSL着色器实现多重纹理与帧缓冲对象(FBO)

还记得我前面几篇博客上写的东西都是将纹理直接渲染到屏幕上,就是产生一个和纹理尺寸大小相同的窗口进行渲染,那么渲染完了就正好完整的显示了纹理图案。但是在做数值计算的时候,一般是不需要输出到屏幕上的,这就...
  • wozhengtao
  • wozhengtao
  • 2016年10月12日 18:46
  • 975

学习使用Shader处理纹理

使用Shader处理纹理本是件简单的事情,但是我在尝试写一个简单的例子的时候却犯了个错误,导致郁闷了一天,这个稍后再说。 先整理下怎么用Shader处理纹理吧。 1.原理: 用Shader...
  • linuxheik
  • linuxheik
  • 2015年05月28日 20:27
  • 1600
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:shader学习之路(3)-纹理压缩与混合
举报原因:
原因补充:

(最多只允许输入30个字)