【Aladdin-Unity3D-Shader编程】之七-波光粼粼的鱼

2017-11-21

前言

通过shader实现一个波光粼粼的鱼的效果，效果如下图所示，鱼的游动是用的animator，我们也可以用shader通过模型vertex偏移来实现鱼儿的游动。

效果

more >>

展开全文 >>

【Aladdin-Unity3D-Shader编程】之六-模型实时阴影

2017-11-20

前言

在游戏开发中实时阴影是比较常见的需求，我们最常见的方法是实时光照，但是这个会带来性能的问题，如果场景中模型比较多，例如我最近在做的3D足球游戏，场景中22个球员，如果采用实时光照DC会增加好几百，会造成渲染的压力，就有必要采用关照贴图的方案，比关闭掉实时光，但这种方案就降低了DC，减轻了渲染压力，这就要求阴影必须采用其他方案，我这里介绍Shader来现在的方案，貌似是王者荣耀采用的一种方案，专门用一个pass来渲染球员的阴影。

效果图

会看到模型有实时阴影效果。

more >>

展开全文 >>

【Aladdin-Unity3D-Shader编程】之五-模型常见特效

2017-11-19

首先来看一个表情,是不是感觉很酷炫，这就是流光效果。我们也可以在模型上面来添加上这个效果，下面会介绍。

一、缩放效果

效果图

会看到模型有一个伸缩的效果

more >>

展开全文 >>

【Aladdin Unity3D Shader编程】之四贴图纹理

2017-11-18

关于纹理贴图介绍

纹理坐标也叫UV坐标,UV坐标都是0~1,并不是我们所理解的像素坐标,相当于是一个百分比。

编写shader映射纹理

将纹理的颜色取代漫反射的颜色

Shader "AladdinShader/11 Single Texture Shader"
{
    Properties
    {
        // _Diffuse("Diffuse Color", Color)=(1,1,1,1) //漫反射的颜色
        _MainTex("Main Tex", 2D) = "white"{} //纹理贴图 默认白色
        _Color("Color", Color) = (1,1,1,1) //整体一个色调
        _Specular("Specular Color", Color)=(1,1,1,1)
        _Gloss("Gloss",Range(10,200))=20
    }
    SubShader {
        Pass{
            //只有正确定义Tags 才能获取跟光相关的属性
            Tags { "LightMode"="ForwardBase" }
            CGPROGRAM
#include "Lighting.cginc" 
#pragma vertex vert 
#pragma fragment frag 

            // fixed4 _Diffuse;
            sampler2D _MainTex;
            fixed4 _Color;
            fixed4 _Specular;
            half _Gloss;
            //顶点函数参数
            struct a2v{
                float4 vertex:POSITION; //顶点位置
                float3 normal:NORMAL; //模型空间下的法线

                //纹理坐标只能在定点函数取到
                float4 texcoord:TEXCOORD0; 
            };

            struct v2f{
                float4 svPos:SV_POSITION;
                fixed3 worldNormal:TEXCOORD0;//世界空间下的法线
                float4 worldVertex:TEXCOORD1;

                //将取到的纹理坐标传递到片元函数
                float4 uv:TEXCOORD2;
            };

            v2f vert(a2v v)
            {
                v2f f;
                f.svPos = mul(UNITY_MATRIX_MVP,v.vertex); //模型空间位置到剪裁空间的顶点位置的转换
                f.worldNormal = UnityObjectToWorldNormal(v.normal); //模型空间的法线转成时间空间下的法线
                f.worldVertex = mul(v.vertex,unity_WorldToObject);
                f.uv = v.texcoord;
                return f;
            } 

            //片元函数返回颜色
            fixed4 frag(v2f f):SV_Target{
                //漫反射
                //漫反射颜色 先不管透明度
                //_LightColor0 平行光的颜色 cos夹角 光的方向和视野的夹角
                fixed3 normalDir = normalize(f.worldNormal);
                //光的方向
                fixed3 lightDir = normalize(WorldSpaceLightDir(f.worldVertex));

                //返回贴图上某像素颜色的值
                fixed3 texColor = tex2D(_MainTex, f.uv.xy) * _Color.rgb;

                //漫反射的颜色
                // fixed3 diffuse = _LightColor0.rgb *_Diffuse.rgb * max(dot(normalDir, lightDir),0);
                fixed3 diffuse = _LightColor0.rgb * texColor * max(dot(normalDir, lightDir), 0);

                //相机方向
                fixed3 viewDir = normalize(UnityWorldSpaceViewDir(f.worldVertex));

                //光和相机方向的平分线
                fixed3 halfDir = normalize(lightDir + viewDir);
                //高光反射
                fixed3  specular = _LightColor0.rgb * _Specular.rgb * pow(max(dot(normalDir,halfDir),0),_Gloss);
                //环境光
                // fixed3 tempColor = diffuse + specular + UNITY_LIGHTMODEL_AMBIENT.rgb; 

                //使用了纹理之后 一般环境光也跟纹理做一个融合
                fixed3 tempColor = diffuse + specular + UNITY_LIGHTMODEL_AMBIENT.rbg * texColor;
                return fixed4(tempColor,1);
            }
            ENDCG
        }
    }
    FallBack  "Specular"
}

我们找一个纹理贴图

然后将贴图赋值给_MainTex属性，调整一下高光颜色和整体贴图颜色属性并且查看效果
第一组效果:

第二组效果:

more >>

展开全文 >>

【Aladdin Unity3D Shader编程】之三-光照模型(二)

2017-11-17

使用Blinn-Phong光照模型

Specular=直射光颜色*pow(max(cosθ,0),10) θ:是发现和x的夹角 x是平行光和视野方向的平分线

Shader "AladdinShader/09 Specular Fragment Blinn Phong Shader"
{
    Properties
    {
        _Diffuse("Diffuse",Color)=(1,1,1,1) //添加自身的颜色
        _Specular("Specular",Color)=(1,1,1,1)
        _Gloss("Gloss",Range(8,200)) = 10
    }
    SubShader {
        Pass 
        {
            Tags{"LightMode"="ForwardBase"}

        CGPROGRAM
#include "Lighting.cginc" //引用一些写好的程序块 会包含一些获取光照的信息  
//_LightColor0 取得第一个直射光的颜色
//_WorldSpaceLightPos0 

#pragma vertex vert
#pragma fragment frag 
    
        fixed4 _Diffuse;
        fixed4 _Specular;
        half _Gloss;

        struct a2v 
        {
            float4 vertex:POSITION;
            float3 normal:NORMAL; //模型空间下法线
        };

        struct v2f
        {
            float4 position:SV_POSITION;
            float3 worldNormal:TEXCOORD0;//世界空间下的法线方向 
            float3 worldVertext:TEXCOORD1;//时间空间下的顶点坐标
        };
        v2f vert(a2v v)
        {
            v2f f;
            f.position = mul(UNITY_MATRIX_MVP, v.vertex);
            f.worldNormal = mul(v.normal, (float3x3)unity_WorldToObject);
            f.worldVertext = mul(v.vertex , unity_WorldToObject).xyz;
            return f;
        }

        fixed4 frag(v2f f):SV_Target
        {
            fixed3 adbient = UNITY_LIGHTMODEL_AMBIENT.rgb;
            fixed3 normalDir = normalize(f.worldNormal);
            fixed3 lightDir = normalize(_WorldSpaceLightPos0.xyz);//对于每个顶点来说 光的位置就是光的方向 因为是平行光
            fixed3 diffuse = _LightColor0.rgb * max(dot(normalDir,lightDir), 0) * _Diffuse.rgb;//取得漫反射的颜色
            
            //反射光方向
            //fixed3 reflectDir = normalize(reflect(-lightDir,normalDir));
            //视野方向
            //相机是在世界空间下              
            fixed3 viewDir = normalize(_WorldSpaceCameraPos.xyz - f.worldVertext);

            //平分线
            fixed3 halfDir = normalize(viewDir + lightDir);  //视野方向和光照方向的平分线

            //高光反射
            fixed3 specular = _LightColor0.rgb * pow(max(dot(normalDir,halfDir),0),_Gloss) * _Specular.rgb;
            fixed3 tempColor = diffuse + adbient + specular;
            return fixed4(tempColor, 1);
        }

        ENDCG
        }
    }
    FallBack  "VertexLit"
}

会发现高光部分会显得更大了，这也是平时用的比较多的高光反射模型。

more >>

展开全文 >>

【Aladdin Unity3D Shader编程】之二-光照模型(一)

2017-11-16

光照模型

光照模型就是一个公式，使用这个公式来计算在某个点的光照效果。
在标准光照模型里面，我们把进入摄像机的光分为下面四个部分：

自发光
类似生活中的萤火虫等自己能够发光
高光反射
类似生活中的镜子，近似认为百分百反射出去
漫反射
类似生活中的光照射到墙壁上、桌子上的反光不会百分百反射出去，各个方向都会反射。
环境光
类似生活中的光照照射在某个物体上，物体漫反射然后反射到其他物体上这些过程的光是环境光。

以上都是模拟生活中的光照效果，并不等同于实际生活中的光照计算，实际生活中的光照会更加复杂。

光照模型中关于漫反射的计算

漫反射计算放在顶点函数里面就是逐顶点光照
Disffuse = 直射光颜色*max(0,cosθ) (θ是法线跟光照的夹角) 如果夹角小于0的话就是背光面就直接取黑色
理论知识:

向量点乘(结果值)
a*b=|a||b|cosθ
向量叉乘(结果是向量)
a*b=c c的一个向量，值是|a||b|sinθ

more >>

展开全文 >>

【Aladdin Unity3D Shader编程】之二光照模型(一)

2017-11-15

光照模型

光照模型就是一个公式，使用这个公式来计算在某个点的光照效果。

在标准光照模型里面，我们把进入摄像机的光分为下面四个部分：

自发光

类似生活中的萤火虫等自己能够发光
高光反射

类似生活中的镜子，近似认为百分百反射出去
漫反射

类似生活中的光照射到墙壁上、桌子上的反光不会百分百反射出去，各个方向都会反射。
环境光

类似生活中的光照照射在某个物体上，物体漫反射然后反射到其他物体上这些过程的光是环境光。

以上都是模拟生活中的光照效果，并不等同于实际生活中的光照计算，实际生活中的光照会更加复杂。

光照模型中关于漫反射的计算

漫反射计算放在顶点函数里面就是逐顶点光照

Disffuse = 直射光颜色*max(0,cosθ) (θ是法线跟光照的夹角) 如果夹角小于0的话就是背光面就直接取黑色

理论知识:

向量点乘(结果值)

a*b=|a||b|cosθ

向量叉乘(结果是向量)

a*b=c  c的一个向量，值是|a||b|sinθ

more >>

展开全文 >>

【Aladdin Unity3D Shader编程】之一基本入门

2017-11-14

OpenGL、DirectX以及GLSL、HLSL、CG

OpenGL和DirectX是图像应用编程接口，用于渲染二维或者三维图形。
GLSL着色语言是用来在OpenGL中着色编程的语言，有点在于跨平台性，可以再Windows、Linux、Mac甚至移动平台上工作。
HLSL是微软控制着色的编译，几乎只支持微软自己的产品，如Windows，XBox等，其他平台没有可编译HLSL的编译器。
CG是有英伟达公司出的真正意义上的跨平台着色器语言。

GPU渲染管线概述

1.顶点着色器

顶点着色器是流水线的第一个阶段，它的输入来自于CPU。顶点着色器的处理单位是顶点，也就是说输入进来的每个顶点都会调用一次顶点着色器。
顶点着色器需要完成的工作主要有:坐标变换和逐顶点光照。当然，除了这两个主要任务外，顶点着色器还可以输出后续阶段所需的数据。
坐标变换，顾名思义，就是对顶点的坐标进行某种变换。例如我们可以通过改变顶点位置来模拟水面，布料等。

more >>

展开全文 >>