[经验分享] 圆形小地图的制作

晃晃

1023 主题	3 听众	359 积分

设计实习生

Rank: 2

纳金币: 335582
精华: 0

电梯直达

楼主

发表于 2011-11-16 17:16:00 |只看该作者 |倒序浏览

         后面有一个场景包，关于小地图的布局，里面看一下就知道了，前提是你有一定的shader基础并指导Unity中图形的渲染管道线，不然我这一片文章没法教你所有的shader知识。这个小地图的大概思想是：用一个相机正交观察一个小地图图片，小地图的上面有一个圆形中空的Mesh，通过这个Mesh将小地图圆形以外的部分“覆盖掉”。怎么贴图片啊？悲剧。里面的shader完成了主要的工作，下面我就将这个简单的shader做一下讲解：


         先看Mesh使用的Shader：


         Shader "Transparent/Alpha_Cancel" {


         Properties {


         _Color ("Main Color", Color) = (1,1,1,1)


         _SpecColor ("Spec Color", Color) = (1,1,1,0)


         _Emission ("Emissive Color", Color) = (0,0,0,0)


         _Shininess ("Shininess", Range (0.1, 1)) = 0.7


         _MainTex ("Base (RGB) Trans (A)", 2D) = "white" {}


         }


         SubShader {


         Tags {"Queue"="Geometry+999" "IgnoreProjector"="True" "RenderType"="Transparent"}


         LOD 100





         Alphatest Less 0.9


         ZWrite on


         Blend SrcAlpha OneMinusSrcAlpha


         ColorMask RGB





         // Non-lightmapped


         Pass {


         Tags { "LightMode" = "Vertex" }


         Fog { Mode off }


         /*Material {


            Diffuse [_Color]


            Ambient [_Color]


            Shininess [_Shininess]


            Specular [_SpecColor]


            Emission [_Emission]


         }*/


         Lighting On


         SeparateSpecular On


         SetTexture [_MainTex] {


         constantColor(0,0,0,0)


            Combine constant * primary DOUBLE, constant * primary


         }


         }


         }


         }


         1 "Queue"="Geometry+999" .Queue这个参数用来设置Unity中物体的渲染顺序，有4个分界点值，从小到大分别为 Background Geometry Transparent Overlay  值越小越先被渲染。


         2ZWrite on开启深度缓存，默认深度测试的规则是Less


         3Blend SrcAlpha OneMinusSrcAlpha


         利用当前计算的像素Alpha值和屏幕存在的像素的Alpha值混合呈现透明效果


         他和下面的SetTexture相联系，看SetTexture中，Alpha的值被设置成constant * primary，即0





         所以当Blend的时候，Mesh呈现出全透明。


         4现在知道了Mesh有全透明的功能，现在来看看Mesh和小地图图片的渲染先后顺序。


         Mesh的shader中 "Queue"="Geometry+999" .


         小地图的shader中"Queue"="Transparent+1" 可见Mesh要比小地图先渲染


         下面我们来模拟下过程：


         1当场景被天空盒渲染后，接下来要渲染Mesh网格，因为Mesh有全透明的功能，所以这个中间带圆形孔的Mesh会出现背景天空盒的样子。


         2然后绘制小地图图片，因为开启了深度测试，当当前将要绘制的像素值的z深度比当前屏幕像素的z深度要浅的时候，就绘制当前将要绘制的像素，反之则不绘制。可见因为小地图图片所在的位置位于Mesh的较深处，而Mesh又有圆形中空，圆形中空部分的像素是天空盒像素，深度当然比小地图的要深，所以该部分小地图会覆盖天空盒像素。而圆形四周的部分因为是属于Mesh的，该处的深度较小地图的浅，所以小地图上面该处的像素将不被绘制。