zoukankan      html  css  js  c++  java
  • 关于Unity中顶点片元Shader实例

    补充

    float4 fixed4 _Time

    1: float4是内置向量 (x, y, z, w); float4 a; 访问单独成员a.x, a.y, a.z, a.w;
    2: fixed4 是内置向量(r, g, b, a); fixed4 c; color.r, color.g, color.b, color.a;
    3: float3是内置向量(x, y, z);
    4: fixed3 是内置向量(r, g, b);
    5: float2 是内置向量(x, y);
    6: _Time: 自场景加载开始所经过的时间t,4个分量分别是 (t/20, t, t*2, t*3);
    7: _SinTime: t 是时间的正弦值,4个分量分别是 (t/8, t/4, t/2, t);
    8: _CosTime: t 是时间的余弦值,4个分量分别是 (t/8, t/4, t/2, t);
    9: unity_DeltaTime: dt 是时间增量,4个分量的值(dt, 1/dt, smoothDt, 1/smoothDt),平滑时间,防止时间间隔起伏太大;

    正弦波实例

    1.创建Unity工程目录

    2.创建一个节点plane

    3.在resources文件夹下面创建shaders文件夹

    4.打开shaders文件夹,创建一个用于顶点片元着色的shader,create---->shader---->unlit shader,重命名为SinShader

    5.打开SinShader

    第一步:先把第一行改成Shader "Custom/SinShader",这样才能在编辑器里面显示这个shader

    第二步:

    Shader "Custom/SinShader"
    {
        Properties//可以绑定到编辑上面的属性
        {
            _MainTex ("Texture", 2D) = "white" {}
        }
        SubShader
        {
            Tags { "RenderType"="Opaque" }//标记
            LOD 100
    
            Pass
            {
                CGPROGRAM//CG代码的开始
                #pragma vertex vert
                #pragma fragment frag            
                #include "UnityCG.cginc"
    
                struct appdata
                {
                    float4 vertex : POSITION;//模型顶点的位置
                    float2 uv : TEXCOORD0;//纹理坐标
                };
    
                struct v2f
                {
                    float2 uv : TEXCOORD0;//纹理坐标
                    float4 vertex : POSITION;//模型顶点的位置
                };
    
                sampler2D _MainTex;
                float4 _MainTex_ST;
    
                v2f vert (appdata v)//对模型的顶点坐标的修改写在这里面
                {
                    v2f o;
                    float dist = distance(v.vertex.xyz, float3(0, 0, 0));//求得模型各个顶点坐标到中心原点的相位距离
                    float h = sin(dist * 2 + _Time.z) / 5;//Time是自场景加载开始所经过的时间,t,4个分量分别是 (t/20, t, t*2, t*3);用这个变量.z表示t*2,时间是不断增加的,但是因为周期性,所以h有一个范围
                                                          //调整相位dist可以改变水波的振动幅度从而改变水波形态,直接改变振动幅度(除于5)也可以改变水波形态
            
    
                    
                    o.vertex = mul(unity_ObjectToWorld, v.vertex);//模型顶点坐标转换为世界坐标
                    o.vertex.y = h;//让模型的y坐标等于h这个范围
                    o.vertex = mul(unity_WorldToObject, o.vertex);//时间坐标再转换为模型顶点坐标
    
                    //这两句不是造成正弦波的语句,是简单的shader模板,一开始写的,把图像贴到模型上
                    o.vertex = mul(UNITY_MATRIX_MVP, o.vertex);//变换成Unity的MVP,模型坐标转为透视坐标
                    o.uv = TRANSFORM_TEX(v.uv, _MainTex);//根据顶点的纹理坐标,计算出对应的纹理的真正的UV坐标,有了UV坐标,才能在fixed4 frag (v2f i) : SV_Target里面通过它得到颜色
    
                    return o;//这个o其实等下要传给fixed4 frag (v2f i) : SV_Target里面的i
                }
                
                fixed4 frag (v2f i) : SV_Target//对模型的像素着色的修改写在这里面
                {
                    fixed4 col = tex2D(_MainTex, i.uv);//使用uv坐标,寻址得到颜色,返回颜色,着色到模型上面去,就把贴图给贴上了
                    return col;
                }
                ENDCG//CG代码的结束
            }
        }
    }

    6.打开shaders文件夹,创建一个材质球叫SinShader,选择shader的属性custom---->SinShader

    7.把贴图拖进材质球SinShader

    8.给平面plane关联材质球SinShader,平面有了纹理,运行起来像水波

    UV动画(捕鱼达人3中使用的技术)

    1.把鱼模型(jinqiangyu.FBX,jinqiangyu.png)拖进Hierachy,设置鱼Materials/jinqiangyu的材质球的shader为为mobile diffuse

    2.把caustics.png资源拖进resources

    3.打开shaders文件夹,创建一个unlit shader,重命名为UVShader

    4.打开UVShader

    第一步:先把第一行改成Shader "Custom/SinShader",这样才能在编辑器里面显示这个shader

    第二步:增加一个纹理的定义

    Properties
    {
      _MainTex ("Texture", 2D) = "white" {}
      _SubTex ("Texture", 2D) = "white" {}
    }

    第三步:

    Shader "Custom/UVShader"
    {
        Properties
        {
            _MainTex ("Texture", 2D) = "white" {}
            _SubTex ("Texture", 2D) = "white" {}//放波光的纹理贴图
        }
    
        SubShader
        {
            Tags { "RenderType"="Opaque" }
            LOD 100
    
            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 _SubTex;//要用就要再声明一下,波光
                sampler2D _MainTex;//要用就要再声明一下,鱼 
    
                float4 _MainTex_ST;
                
                v2f vert (appdata v)//对顶点坐标的修改写在这里面,因为没有修改顶点,所以没有新增什么
                {
                    v2f o;
                    o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
                    o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                    
                    return o;
                }
                
                fixed4 frag (v2f i) : SV_Target//对像素纹理的修改写在这里面
                {
                    float2 uv_offset = float2(0, 0);
                    uv_offset.x = _Time.y * 0.25;//不断地获得变化的纹理坐标的x
                    uv_offset.y = _Time.y * 0.25;//不断地获得变化的纹理坐标的y
                    // sample the texture
                    fixed4 linght_color = tex2D(_SubTex, i.uv + uv_offset);//通过uv_offset来让纹理动起来,由于波光纹理属性设置为repeat,所以不用担心图片越界的问题。通过i.uv+uv_offset查找获得波光的纹理
                    fixed4 col = tex2D(_MainTex, i.uv) + linght_color;//把两张纹理加在一起,为什么用黑色的波光图:因为黑色的值是0,0,0,这里加了也不会改变原来的鱼的整体感觉,正是我们要的效果
                    return col;
                }
                ENDCG
            }
        }
    }

    4.选择鱼材质球的shader为custom---->UVShader

    5.把波光的贴图拖进鱼材质球的另外一个贴图属性

    6.运行就可以看见鱼被动态波光笼罩

    注意:

    遇到函数使用有问题的,打开#include “UnityCG.cginc”  Unity-->Edit-->Data-->CGIncludes;查看

  • 相关阅读:
    QML学习笔记(三)-引入Font-awesome
    QML学习笔记(一)-防止鼠标穿透事件
    JS小积累(一)— 判断在线离线
    electron入门笔记(三)- 引入bootstrap
    express搭建服务器
    生成SSH密钥添加到GitHub
    python中常见的错误
    PyCharm在同一个包(package)下,如何把一个.py文件导入另外一个.py文件下
    在PyCharm中导入Numpy和Pygame模块 (win8.1)
    Pycharm中安装Pygame并写第一个程序
  • 原文地址:https://www.cnblogs.com/HangZhe/p/7226116.html
Copyright © 2011-2022 走看看