当前位置:   article > 正文

Unity Shader - Billboard 广告板/广告牌 - BB树,BB投影_unity3d广告牌理论基础

unity3d广告牌理论基础

前面翻译了一篇:OpenGL Tutorials - Billboards,这篇我们就在Unity中实现Billboard的功能。
后面一篇是使用Billboard来制作火堆热扭曲:Unity Shader - Billboard火堆热扭曲

Billboard一般应用于:

  • 单位顶部的血条,名字等
  • 树,草
  • 3D中场景中的2D人物(如:《饥荒》)
  • 粒子特效
  • 热扭曲的面片

先看看看一张ShadowGun里将Billboard应用在绿色水管两旁,当做发光效果用,即使镜头怎么转动,左右两边的面片出了Y轴,X,Z轴都依然对着镜头(有些是X,Y,Z三轴都对齐的,一般都是写偏圆球体的可以这么用,对于非球体的一般都会不对齐Y轴,这样可在镜头的高低上,表达透视,像:树,草,还有下面这个长条形的水管,都可以不对齐Y轴就可以了):
在这里插入图片描述

开始制作之前,先说面一下,下面我们叫Billboard简称为:BB

实现BB的方法太多了,而且根据不同的需要,处理的细节也是不一样的。

实现

CPU层

使用简单实现方式

将下面的脚本挂载到任意GameObject上,设置好cam镜头,与bb需要billboard处理的对象,alignYAxis是否对应Y轴的意思,下面的RotationType,我提供了三种写法,最要是后面对forward的.y处理alignYAxis的功能。

using UnityEngine;
/// <summary>
/// jave.lin 2020.03.24 使用Transform.LookAt(Transform target)的方式
/// </summary>
public class TransformRotationScript : MonoBehaviour
{
    public enum RotationType
    {
        One,Two,Three
    }
    public RotationType rotationType;
    public Transform cam;
    public Transform bb;
    [Range(0, 1)]
    public float alignYAxis = 1;

    public void Update()
    {
        if (rotationType == RotationType.One)
        {
            bb.LookAt(cam);
        }
        else if (rotationType == RotationType.Two)
        {
            bb.forward = (cam.position - bb.position).normalized;
        }
        else
        {
            bb.rotation = cam.transform.rotation;
        }
        var f = bb.forward;
        f.y *= alignYAxis;
        bb.forward = f;
    }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36

我们的BB对象是一个Quad面片:
在这里插入图片描述

运行效果:
在这里插入图片描述

模仿Shader层的复杂逻辑写法

Shader层, 的封装比较少,所以实现某些功能就不想Unity脚本层那么方便了。

我们先用CSharp层模拟Shader层逻辑的写法,思路是:

  • 先获得相机相对BB的模型空间的坐标:var camPos = W2L.MultiplyPoint(cam.transform.position);
  • 再利用BB的锚点指向相机的方向作为BB的面片法线:var normal = camPos - anchorPos;
  • 再通过up或是forward来作为up顶部方向向量:var up = Mathf.Abs(normal.y) > 0.999f ? Vector3.forward : Vector3.up;,Mathf.Abs(normal.y) > 0.999f的判断是为了防止法线几乎与Vector3.up相同,或是直接向量或相反方向而平行,导致选后面叉乘为零向量的问题(可以看我下面的代码描述的很清楚)。
  • 再通过法线与顶部向量叉乘获得向右的向量:var right = Vector3.Cross(normal, up).normalized;
  • 这时normal,right都是坐标基向量了,同通过叉乘获得up的基向量:up = Vector3.Cross(right, normal).normalized;
  • 再通过:right, up, normal三个坐标基向量,构建BB的新的本地坐标的变换矩阵:Matrix4x4 newLocalMatrix = new Matrix4x4(right,up,normal);
  • 再通过将原来的v.vertex的本地坐标通过newLocalMatrix变换到新的BB本地坐标:var newLocalPos = newLocalMatrix.MultiplyPoint(localPos_AfterOffsetToAnchor);
  • 最后将将新的BB本地坐标变换回世界坐标,然后更新到四个代表顶点的球体的世界坐标上:bbp.transform.position = L2W.MultiplyPoint(newLocalPos);
    private void UpdateBillboard1()
    {
        var W2L = transform.worldToLocalMatrix;
        var camPos = W2L.MultiplyPoint(cam.transform.position);
        var anchorPos = anchor.transform.localPosition;
        var normal = camPos - anchorPos;

        // reconstructs the base-vector of coordinate
        // 从原点到相机的方向作为法向量,还是保持垂直的Y分量
        normal.y *= normalYLockToCam;
        normal = normal.normalized;
        var up = Mathf.Abs(normal.y) > 0.999f ? Vector3.forward : Vector3.up;
        /* var up = normal.y > 0.999f ? Vector3.forward : Vector3.up;
         * 这句代码的理解为
         * 如果normal法线是相当接近与Vector3.up或是-Vector3.down的话,我们就认为这个Billboard的位置,基于是位于相机的正上方或是正下方
         * 所以法线几乎就是指向上,或是下,因为我们要先用一个假定是相对法线来说是向上的的向量:up,与normal来叉乘求的right的向量。
         * 那么首先就要保证up与normal是不平行的,因为两个平行的向量叉乘的结果一个:零向量,零向量是没有方向的
         * 所以Mathf.Abs(normal.y) > 0.999f这句就是判断是否与Vector3.up几乎平行,为何不用normal == Vector3.up,因为浮点数会有精度限制问题
         * 所以如果abs(normal.y)相当接近1的话,但有不等于1,也是有可能导致两向量叉乘还是等于0
         * 所以abs(normal.y)相当接近1的时,我们就将up向量假设位:Vector3.forward,即:(0,0,1),否者的话,我们就用回Vector3.up作为up向量
         * */

        /* 为何用假设的up也可以求出,正确的right呢,是因为我们先用up, normal当作是某个平面上的两个向量,这两个向量是不一定相互垂直的
         * 但是我们可以先使用这两个向量叉乘求出垂直于这两个向量的向量
         * 
         * 这里头的叉乘需要注意:
         * cross(vec1, vec2),如果平面中vec1, vec2两向量叉乘
         * 先把该平面对准我们屏幕,cross(vec1, vec2) ,如果平面上的vec1在vec2右边,那么叉乘的结果是对着我们人的方向的
         * 否者如果平面上的vec1在vec2左边,叉乘对着屏幕里面的方向
         */
        var right = Vector3.Cross(normal, up).normalized;
        /* cross(up, normal)出来right肯定是垂直于normal的
         * 然后再用两个相互垂直的right与normal计算出正确的up
         * 这时normal, right, up都是相互垂直的向量了
         * 而且这三个向量我们都归一化了,就可以作用这个Billboard的,相对normal指向镜头的本地坐标系的三个基向量
         */
        up = Vector3.Cross(right, normal).normalized;

        // 用三个基向量构建:新的Billboard的坐标系 矩阵
        // unity 矩阵构建时是主列,向量当列排列,matrix * vector = matrix行 * vector列
        // shaderLab的mul(matrix, vec)是matrix行 * vec列,这点与CSharp的Matrix4x4是一样的
        Matrix4x4 newLocalMatrix = new Matrix4x4();
        newLocalMatrix.SetColumn(0, right);
        newLocalMatrix.SetColumn(1, up);
        newLocalMatrix.SetColumn(2, normal);
        newLocalMatrix.SetColumn(3, new Vector4(0, 0, 0, 1)); // 不需要位移
        newLocalMatrix.SetRow(3, new Vector4(0, 0, 0, 1)); // 因为我们不知道Vector3隐藏转换到Vector4时,不知道第四个w分量是1还是0,所以为了保证,我们都对1~3列的w分量赋值一遍

        var L2W = transform.localToWorldMatrix;

        foreach (var bbp in bbps)
        {
            // anchorPos就相当于这个新本地坐标系的原点
            // 先将顶点的偏移到锚点的位置,这里减去锚点,可以理解为,将顶点都偏移到相对anchorPos,以anchorPos作为原点
            var offsetPos = bbp.sourceLocalPos - anchorPos;
            // 再将偏移到锚点后的顶点坐标做变换(就只旋转),做变换到新的坐标系下(就是我们前面构建的新的Billboard本地坐标系)
            var newLocalPos = newLocalMatrix.MultiplyPoint(offsetPos);
            // 相对anchorPos锚点变换完后的坐标,要记得偏移回来
            // 这样就可以实现相对anchorPos锚点的缩放或旋转
            newLocalPos += anchorPos;
            // 再将新的本地坐标变换到世界坐标,更新表示顶点坐标的四个球体的世界坐标
            bbp.transform.position = L2W.MultiplyPoint(newLocalPos);
        }
        ...
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65

上面的代码中有几点需要给注意:

  • 向量叉乘的顺序
  • 新的BB本地坐标系矩阵:newLocalMatrix可以不构建

向量叉乘的顺序

我就画一张图:
在这里插入图片描述
简单理解特性为:某个面向你的平面中vec1,vec2,如果叉乘的vec1在vec2右手边,那么叉乘的结果将指向屏幕内(forward),如果vec1在左边,那么叉乘结果指向你(back)。注意:如果两个向量:vec1,vec2平行,就是:vec1与vec2的方向相同或是相反,那么叉乘结果是一个:零向量。

还有另一个需要注意:上面是左手坐标系下的向量叉乘;如果是右手坐标系下的叉乘的话,只需要将上面的forward与back对调就可以了。

新的BB本地坐标系矩阵:newLocalMatrix可以不构建

其实矩阵就是一个次多项式,矩阵的每一行就是一次多项式中的项的未知数,而被乘向量就是项的系数
上面代码中的:

Matrix4x4 newLocalMatrix = new Matrix4x4();
newLocalMatrix.SetColumn(0, right);
newLocalMatrix.SetColumn(1, up);
newLocalMatrix.SetColumn(2, normal);
newLocalMatrix.SetColumn(3, new Vector4(0, 0, 0, 1));
newLocalMatrix.SetRow(3, new Vector4(0, 0, 0, 1));
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

对应就是下面的矩阵: → \to
[ r i g h t . x u p . x n o r m a l . x 0 r i g h t . y u p . y n o r m a l . y 0 r i g h t . z u p . z n o m r a l . z 0 0 0 0 1 ]

[right.xup.xnormal.x0right.yup.ynormal.y0right.zup.znomral.z00001]
right.xright.yright.z0up.xup.yup.z0normal.xnormal.ynomral.z00001
第四行,第四列我们都不需要,一般用于位移用的,我们BB的新本地坐标都是相对Anchor点处理的,在应用BB矩阵前,我们都先位移到原点了:var offsetPos = bbp.sourceLocalPos - anchorPos;。然后应用完矩阵后,再移动回原来Anchor的偏移上:newLocalPos += anchorPos;。所以我们将第四行第四列删除,变换下面的矩阵:
[ r i g h t . x u p . x n o r m a l . x r i g h t . y u p . y n o r m a l . y r i g h t . z u p . z n o m r a l . z ]
[right.xup.xnormal.xright.yup.ynormal.yright.zup.znomral.z]
right.xright.yright.zup.xup.yup.znormal.xnormal.ynomral.z

将right,up,normal分别简写为x,y,z形式再得矩阵:

[ r i g h t . x r i g h t . y r i g h t . z ] = [ x 1 x 2 x 3 ] , [ u p . x u p . y u p . z ] = [ y 1 y 2 y 3 ] , [ n o r m a l . x n o r m a l . y n o r m a l . z ] = [ z 1 z 2 z 3 ]

[right.xright.yright.z]
=
[x1x2x3]
,
[up.xup.yup.z]
=
[y1y2y3]
,
[normal.xnormal.ynormal.z]
=
[z1z2z3]
right.xright.yright.z=x1x2x3,up.xup.yup.z=y1y2y3,normal.xnormal.ynormal.z=z1z2z3

[ r i g h t . x u p . x n o r m a l . x r i g h t . y u p . y n o r m a l . y r i g h t . z u p . z n o r m a l . z ] = [ x 1 y 1 z 1 x 2 y 2 z 2 x 3 y 3 z 3 ]

[right.xup.xnormal.xright.yup.ynormal.yright.zup.znormal.z]
=
[x1y1z1x2y2z2x3y3z3]
right.xright.yright.zup.xup.yup.znormal.xnormal.ynormal.z=x1x2x3y1y2y3z1z2z3

而我们的原始偏移后的坐标:var offsetPos = bbp.sourceLocalPos - anchorPos,可以表达为:
[ a b c ]

[abc]
abc
因为本地偏移后的坐标我们是知道的,所以作为参数a,b,c来记,而上面的矩阵我们是不知道的,是通过right=cross(normal,up),up=cross(right,normal)求得的,而矩阵先当作我们以前学习的未知数:
将矩阵(未知数)与顶点(常数项)结合,等于新的顶点,可以写为:
[ a b b b b b c b b ]
[abbbbbcbb]
abbbbbcbb

其中 X X X b b XXX_{bb} XXXbb是BB下新的坐标顶点
但在Unity的CSharp的Matrix4x4封装类中,Matrix4x4.MultiplePoint(Vector3)是一个矩阵行x向量列的方式,所以可以表达为下面的方式:
[ x 1 y 1 z 1 x 2 y 2 z 2 x 3 y 3 z 3 ] . 行 × [ a b c ] . 列 = [ a b b b b b c b b ]

[x1y1z1x2y2z2x3y3z3]
.行 \times
[abc]
.列=
[abbbbbcbb]
x1x2x3y1y2y3z1z2z3.×abc.=abbbbbcbb

该式子其实可对应为:
a ∗ x 1 + b ∗ y 1 + c ∗ z 1 = a b b a ∗ x 2 + b ∗ y 2 + c ∗ z 2 = b b b a ∗ x 3 + b ∗ y 3 + c ∗ z 3 = c b b a*x1+b*y1+c * z1 = a_{bb}\\ a*x2+b*y2+c * z2 = b_{bb}\\ a*x3+b*y3+c * z3 = c_{bb} ax1+by1+cz1=abbax2+by2+cz2=bbbax3+by3+cz3=cbb
而未知数的矩阵,我们求得后,代入公式,就可以得到: X X X b b XXX_{bb} XXXbbBB下新的坐标顶点
经过前面的描述,理解后,还有向量乘以标量:Vector3 * Scale = (Scale*x,Scale*y,Scale*z),所以var newLocalPos = newLocalMatrix.MultiplyPoint(offsetPos);可以写成不使用矩阵的方式,这样就不用new Matrix4x4了,如下:

var newLocalPos = right * offsetPos.x + up * offsetPos.y + normal * offsetPos.z;
  • 1

所以经过简化后,删除注释后(比较方便阅读)的写法:

    private void UpdateBillboard2()
    {
        var W2L = transform.worldToLocalMatrix;
        var camPos = W2L.MultiplyPoint(cam.transform.position);
        var anchorPos = anchor.transform.localPosition;
        var normal = camPos - anchorPos;

        normal.y *= normalYLockToCam;
        normal.Normalize();

        var up = Mathf.Abs(normal.y) > 0.999f ? Vector3.forward : Vector3.up;
        var right = Vector3.Cross(normal, up);
        right.Normalize();
        up = Vector3.Cross(right, normal);
        up.Normalize();

        var L2W = transform.localToWorldMatrix;

        foreach (var bbp in bbps)
        {
            var offsetPos = bbp.sourceLocalPos - anchorPos;
            var newLocalPos = anchorPos + right * offsetPos.x + up * offsetPos.y + normal * offsetPos.z;
            bbp.transform.position = L2W.MultiplyPoint(newLocalPos);
        }
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

最后创建一个Quad网格显示:

    private void CreateQuadHandle()
    {
        if (createQuad)
        {
            if (meshFilter == null)
            {
                meshFilter = gameObject.AddComponent<MeshFilter>();
                meshRenderer = gameObject.AddComponent<MeshRenderer>();
                meshRenderer.material = quadMat;
                mesh = new Mesh();
                mesh.MarkDynamic();
                meshFilter.mesh = mesh;
                mesh.vertices = vertices;
                mesh.uv = uvs;
                mesh.triangles = indices;
                mesh.RecalculateBounds();
            }

            for (int i = 0; i < bbps.Length; i++)
            {
                vertices[i] = bbps[i].transform.localPosition;
            }

            mesh.vertices = vertices;
            //transform.rotation = cam.transform.rotation;
        }
        if (meshRenderer) meshRenderer.enabled = createQuad;
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

运行效果如下:(中间的绿色的光,就是一张面片,即使我怎么装着个片面,说是转动镜头,它都一直朝向镜头)
在这里插入图片描述
如果你看不出来效果,那我就转动一下没有BB功能的面片:
在这里插入图片描述
明显没有BB的面片就不会自动朝向镜头

2D的Billboard

引用OpenGL教程里的一段CPP代码,该代码在前面翻译了一篇:OpenGL Tutorials - Billboards也有:

// Everything here is explained in Tutorial 3 ! There's nothing new.
glm::vec4 BillboardPos_worldspace(x,y,z, 1.0f);
glm::vec4 BillboardPos_screenspace = ProjectionMatrix * ViewMatrix * BillboardPos_worldspace;
BillboardPos_screenspace /= BillboardPos_screenspace.w;

if (BillboardPos_screenspace.z < 0.0f){
    // Object is behind the camera, don't display it.
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

就是将BB面片的世界坐标转到NDC下,判断z<0就不渲染。原文:OpenGL Tutorials - Billboards
改成CSharp,差不多就是这样:(伪代码)

Vector4 localPos = new Vector4(x,y,z,1);
Vector4 clipPos = MVP * localPos;
Vector4 ndc = clipPos / clipPos.w;
if (ndc.z < 0.0f) {
	// NDC.z超出0不绘制,我记得DX是-1~1的NDC.Z范围,OPENGL的话是:0~1,忘记了,有兴趣可以去查一下,这些差异重视需要的时候再去查,谁会用心记这些平台导致的差异(手动哭笑一下)
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

关于什么是NDC,可以查考我之前写的:OpenGL Transformation 几何变换的顺序概要(MVP,NDC,Window坐标变换过程)

GPU层

有时候,如果硬件允许的情况下,如果GPU负担不重时,是可以考虑将Billboard的面向相机的计算逻辑放到GPU上的VS处理的,特别是一个粒子,如果数量多,分担CPU计算就更加明显:

带有可指定是否Y轴垂直的

在《Unity Shader 入门精要》-11.3.2也有类似的代码处理,更具体的描述其实与我在CPU层中第二种比较复杂的方式的是一模一样的,所以原理什么的,直接看上面的描述也是可以的,我在这里就不再重复了,shader代码里注释我也尽量不添加了:
CSharp代码:

using UnityEngine;

/// <summary>
/// jave.lin 2020.03.24 测试Shader来控制的Billboard
/// </summary>
public class BillboardScene3 : MonoBehaviour
{
    private static int _NormalYLockToCam_hash = Shader.PropertyToID("_NormalYLockToCam");
    private static int _AnchorPos_hash = Shader.PropertyToID("_AnchorPos");
    private static int _CamPos_hash = Shader.PropertyToID("_CamPos");

    public Transform cam;           // 相机
    public Transform anchor;        // Billboard的锚点
    public Transform billboard;     // 需要BB的对象
    // 1:完全是;
    // 0:将指向法线的Y分量设置为0
    //      不控制Billboard朝向镜头的Y分量
    //      一般树,草,都会设置这个为0就好
    [Header("是否完全将法线Y面指向镜头")]
    [Range(0, 1)]
    public float normalYLockToCam = 1f;    // 法线Y趋向镜头的强度
    public Material mat;
    private void Update()
    {
        var W2L = billboard.worldToLocalMatrix;

        mat.SetFloat(_NormalYLockToCam_hash, normalYLockToCam);
        mat.SetVector(_AnchorPos_hash, W2L.MultiplyPoint(anchor.position));
        mat.SetVector(_CamPos_hash, W2L.MultiplyPoint(cam.position));
    }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32

将上面的CSharp脚本挂载到任意的GameObject上,设置好:

    public Transform cam;           // 相机
    public Transform anchor;        // Billboard的锚点
    public Transform billboard;     // 需要BB的对象
  • 1
  • 2
  • 3

三个字段就好了。

接着就是Shader,也比较简单,和我上面的

// jave.lin 2020.03.24 - Billboard
Shader "Custom/T2_GpuBBMat" {
    Properties {
        [KeywordEnum(T1,T2)] _CAM_POS ("Camera Pos Type", Float) = 0
        [MaterialToggle(_BB_ON)] _BB_ON ("Billboard On", Float) = 1
        _MainTex ("Texture", 2D) = "white" {}
        _MainColor ("Color", Color) = (1,1,1,1)
        _NormalYLockToCam ("Normal's Y Lock To Cam", Range(0, 1)) = 1
        _AnchorPos ("Anchor Pos", Vector) = (0, 0, 0, 0)
    }
    SubShader {
        Tags { "RenderType"="Transparent" "Queue"="Transparent" "IgnoreProjector"="True" "DisableBatching"="True" }
        LOD 100 // ZWrite Off
        // Cull Off
        // Blend SrcAlpha OneMinusSrcALpha
        Blend One One
        Cull Off
        Pass {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma multi_compile _CAM_POS_T1 _CAM_POS_T2
            #pragma multi_compile _ _BB_ON
            // #pragma enable_d3d11_debug_symbols
            #include "UnityCG.cginc"
            struct appdata {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };
            struct v2f {
                float4 vertex : SV_POSITION;
                float2 uv : TEXCOORD0;
            };
            sampler2D _MainTex;
            float4 _MainTex_ST;
            fixed4 _MainColor;
            float _NormalYLockToCam;
            float3 _AnchorPos;          // 本地坐标的锚点
            float3 _CamPos;             // 镜头相对本地坐标的位置
            v2f vert (appdata v) {
                v2f o;

                #if _BB_ON
                // 这里的注释我就不写了,逻辑上与CSharp脚本的差不多
                // 想要了解,就直接查看CSharp脚本吧
                // 下面的代码部分是可以优化写法的
                // 但是为了可读性,我就不优化了
                #if _CAM_POS_T1
                float3 camPos = _CamPos;
                #else
                float3 camPos = mul(unity_WorldToObject, float4(_WorldSpaceCameraPos, 1)).xyz;
                #endif
                float3 normal = camPos - _AnchorPos;
                normal.y *= _NormalYLockToCam;
                normal = normalize(normal);
                
                float3 up = abs(normal.y) > 0.999 ? float3(0, 0, 1) : float3(0, 1, 0);
                float3 right = normalize(cross(normal, up));// * -1;
                up = normalize(cross(right, normal));// * -1;

                // 与CSharp脚本相同,这里是ShaderLab是主列,CSharp脚本的Matrix4x4是主列
                float3x3 newLocalMatrix = { /*col0*/right, /*col1*/up, /*col2*/normal };
                newLocalMatrix = transpose(newLocalMatrix); // row0:right, row1:up, row2:normal
                float3 offsetPos = v.vertex.xyz - _AnchorPos;
                // 上面的newLocalMatrix可以不用transpose,可以将下面的mul(matrix,vec)改为mul(vec, matrix)就好了
                float3 newLocalPos = mul(newLocalMatrix, offsetPos);
                newLocalPos += _AnchorPos;

                o.vertex = UnityObjectToClipPos(newLocalPos);
                #else
                o.vertex = UnityObjectToClipPos(v.vertex.xyz);
                #endif
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                return o;
            }
            fixed4 frag (v2f i) : SV_Target {
                fixed4 col = tex2D(_MainTex, i.uv);
                return col * _MainColor * _MainColor.a;
            }
            ENDCG
        }
    }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84

运行效果就不发了,和前面的没什么区别

调试带有是否Y轴垂直的GPU BB

CSharp

using UnityEngine;

#if UNITY_EDITOR
using UnityEditor;
#endif

/// <summary>
/// jave.lin 2020.03.22 测试Shader来控制的Billboard
/// </summary>
public class T2_GpuBB_DebuggingBBScript : MonoBehaviour
{
    private static int _NormalYLockToCam_hash = Shader.PropertyToID("_NormalYLockToCam");
    private static int _AnchorPos_hash = Shader.PropertyToID("_AnchorPos");
    private static int _CamPos_hash = Shader.PropertyToID("_CamPos");

    public Transform cam;
    public Transform anchor;        // Billboard的锚点
    public Transform billboarCube_X;  // Billboard的Cube
    public Transform billboarCube_Y;  // Billboard的Cube
    public Transform billboarCube_Z;  // Billboard的Cube
    // 1:完全是;
    // 0:将指向法线的Y分量设置为0
    //      不控制Billboard朝向镜头的Y分量
    //      一般树,草,都会设置这个为0就好
    [Header("是否完全将法线Y面指向镜头")]
    [Range(0, 1)]
    public float normalYLockToCam = 1f;    // 法线Y趋向镜头的强度
    private void Update()
    {
        Transform[] trs = new Transform[] { billboarCube_X, billboarCube_Y, billboarCube_Z };
        foreach (var item in trs)
        {
            var W2L = item.worldToLocalMatrix;
            var mat = item.GetComponent<MeshRenderer>().sharedMaterial;

            mat.SetFloat(_NormalYLockToCam_hash, normalYLockToCam);
            mat.SetVector(_AnchorPos_hash, W2L.MultiplyPoint(anchor.position));
            mat.SetVector(_CamPos_hash, W2L.MultiplyPoint(cam.position));
        }
    }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42

将这个CSharp脚本挂载都任意GameObject上,设置好:

    public Transform cam;
    public Transform anchor;        // Billboard的锚点
    public Transform billboarCube_X;  // Billboard的Cube
    public Transform billboarCube_Y;  // Billboard的Cube
    public Transform billboarCube_Z;  // Billboard的Cube
  • 1
  • 2
  • 3
  • 4
  • 5

billboarCube_X,Y,Z就是我们要调试BB的重构BB正交基矩阵的三个基向量显示用的三个Cube

Shader代码:

// jave.lin 2020.03.22 - 调试Billboard 的立方体材质shader
Shader "Custom/DebuggingBillboardCube" {
    Properties {
        [KeywordEnum(T1,T2)] _CAM_POS ("Camera Pos Type", Float) = 0
        [KeywordEnum(X,Y,Z)] _AXIS ("AxisType", Float) = 0
        _AxisScale ("AxisScale", Range(0, 10)) = 2
        _MainTex ("Texture", 2D) = "white" {}
        _MainColor ("Color", Color) = (1,1,1,1)
        _NormalYLockToCam ("Normal's Y Lock To Cam", Range(0, 1)) = 1
        _AnchorPos ("Anchor Pos", Vector) = (0, 0, 0, 0)
    }
    SubShader {
        Tags { "RenderType"="Transparent" "Queue"="Transparent" "IgnoreProjector"="True" "DisableBatching"="True" }
        LOD 100  ZWrite Off
        Cull Off
        Pass {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma multi_compile _CAM_POS_T1 _CAM_POS_T2
            #pragma multi_compile _AXIS_X _AXIS_Y _AXIS_Z
            // #pragma enable_d3d11_debug_symbols
            #include "UnityCG.cginc"
            struct appdata {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
                uint id : SV_VertexID;
            };
            struct v2f {
                float4 vertex : SV_POSITION;
                float2 uv : TEXCOORD0;
                fixed4 c : TEXCOORD1;
            };
            sampler2D _MainTex;
            float4 _MainTex_ST;
            fixed4 _MainColor;
            float _NormalYLockToCam;
            float3 _AnchorPos;          // 本地坐标的锚点
            float3 _CamPos;             // 镜头相对本地坐标的位置
            float _AxisScale;
            v2f vert (appdata v) {
                v2f o;
                // 这里的注释我就不写了,逻辑上与CSharp脚本的差不多
                // 想要了解,就直接查看CSharp脚本吧
                // 下面的代码部分是可以优化写法的
                // 但是为了可读性,我就不优化了
                #if _CAM_POS_T1
                float3 camPos = _CamPos;
                #else
                float3 camPos = mul(unity_WorldToObject, float4(_WorldSpaceCameraPos, 1)).xyz;
                #endif
                float3 normal = camPos - _AnchorPos;
                normal.y *= _NormalYLockToCam;
                normal = normalize(normal);
                
                float3 up = abs(normal.y) > 0.999 ? float3(0, 0, 1) : float3(0, 1, 0);
                float3 right = normalize(cross(normal, up));// * -1;
                up = normalize(cross(right, normal));// * -1;

                // 与CSharp脚本相同,这里是ShaderLab是主列,CSharp脚本的Matrix4x4是主列
                float3x3 newLocalMatrix = { /*col0*/right, /*col1*/up, /*col2*/normal };
                newLocalMatrix = transpose(newLocalMatrix); // row0:right, row1:up, row2:normal
                // float3x3 newLocalMatrix = { float3(1,0,0), float3(0,1,0), float3(0,0,1) };
                float3 offsetPos = v.vertex.xyz - _AnchorPos;
                // 上面的newLocalMatrix可以不用transpose,可以将下面的mul(matrix,vec)改为mul(vec, matrix)就好了
                float3 newLocalPos = mul(newLocalMatrix, offsetPos);
                // float3 newLocalPos = 
                // right * offsetPos.x +
                // up * offsetPos.y +
                // normal * offsetPos.z;
                newLocalPos += _AnchorPos;
                o.c = 1;

                float3 vertexPos = v.vertex;
                // newLocalPos = vertexPos;

                // 控制1,3顶点
                // if (v.id == 1 || v.id == 3)
                // {
                //     #if _AXIS_X
                //     vertexPos = newLocalPos * _AxisScale;
                //     #elif _AXIS_Y
                //     vertexPos = newLocalPos * _AxisScale;
                //     #else // _AXIS_Zx
                //     vertexPos = newLocalPos * _AxisScale;
                //     #endif
                // }
                // right = float3(1,0,0);
                // up = float3(0,1,0);
                // normal = float3(0,0,-1);

                #if _AXIS_X
                if (v.id == 21 || v.id == 10 || v.id ==  4 ||
                    v.id == 12 || v.id ==  6 || v.id == 20 ||
                    v.id == 22 || v.id ==  2 || v.id ==  8 ||
                    v.id == 23 || v.id ==  0 || v.id == 13)
                    {
                        // vertexPos = newLocalPos * _AxisScale;
                        vertexPos = newLocalPos + (right * _AxisScale);
                        o.c = fixed4(1,0,0,1);
                    }
                #elif _AXIS_Y
                if (v.id ==  5 || v.id == 18 || v.id == 11 ||
                    v.id == 10 || v.id == 21 || v.id ==  4 ||
                    v.id ==  9 || v.id ==  3 || v.id == 17 ||
                    v.id == 22 || v.id ==  2 || v.id ==  8)
                    {
                        // vertexPos = newLocalPos * _AxisScale;
                        vertexPos = newLocalPos + (up * _AxisScale);
                        o.c = fixed4(0,1,0,1);
                    }
                #else // _AXIS_Z
                if (v.id == 22 || v.id ==  2 || v.id ==  8 ||
                    v.id ==  9 || v.id ==  3 || v.id == 17 ||
                    v.id == 16 || v.id == 14 || v.id ==  1 ||
                    v.id == 23 || v.id == 13 || v.id ==  0)
                    {
                        // vertexPos = newLocalPos * _AxisScale;
                        vertexPos = newLocalPos + (normal * _AxisScale);
                        o.c = fixed4(0,0,1,1);
                    }
                #endif

                o.vertex = UnityObjectToClipPos(vertexPos);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                return o;
            }
            fixed4 frag (v2f i) : SV_Target {
                // #if _AXIS_X
                //     return fixed4(1,0,0,1);
                // #elif _AXIS_Y
                //     return fixed4(0,1,0,1);
                // #else // _AXIS_Z
                //     return fixed4(0,0,1,1);
                // #endif
                return i.c;
                fixed4 col = tex2D(_MainTex, i.uv);
                return col * _MainColor * _MainColor.a;
            }
            ENDCG
        }
    }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144

运行调试效果:
在这里插入图片描述

每个Cube都设置单独的材质,然后依次调整AxisType材质属性,X轴色红,Y轴绿色,Z轴蓝色。
还可以调整轴的长度,如下GIF:
在这里插入图片描述

然后可以调整他们的容器的旋转,或是镜头旋转,来查看GPU的VS的Billboard轴向实时计算是否正确:
在这里插入图片描述

上面的红色轴就是right绿色轴up蓝色轴toCameraDir瞄准镜头的方向)

在Shader中我们看到:_AXIS_X,Y,Z都有判断很多ID,这些ID就是unity Cube Primitive的顶点顺序ID号,你可能会好奇,这些ID我是怎么知道的,因为我用了对ID==0~23的分别使用了红色的标记顶点颜色,然后一个一个的记录下来的,为了调试这是有多痛苦(手动哭笑一下),下面就是我记录的顶点ID的图片:
在这里插入图片描述

WorldSpace下的BB

在我之前翻译的OpenGL Billboard,也有在WorldSpace下的处理:OpenGL Tutorials - Billboards

我将下面翻译的引进来:我用个分割线间隔起来


CameraRight_worldspace = {ViewMatrix[0][0], ViewMatrix[1][0], ViewMatrix[2][0]}
CameraUp_worldspace = {ViewMatrix[0][1], ViewMatrix[1][1], ViewMatrix[2][1]}
  • 1
  • 2

(译者jave.lin:这里我要说明一下,ViewMatrix是视图矩阵,不是视图矩阵的逆矩阵,但其实使用其逆矩阵的方式获取会更加简便,只不过会需要更多性能,只要获取ViewMatrix的逆矩阵即可,而ViewMatrix是个正交基矩阵,所以其逆矩阵就是其转置矩阵,所以right = transpose(ViewMatrix)[0], up = traspose(ViewMatrix)[1]

一旦获取这些数据后,就可以非常简单的计算出最终的顶点位置:

vec3 vertexPosition_worldspace =
    particleCenter_wordspace
    + CameraRight_worldspace * squareVertices.x * BillboardSize.x
    + CameraUp_worldspace * squareVertices.y * BillboardSize.y;
  • 1
  • 2
  • 3
  • 4
  • particleCenter_worldspace 正如其名字描述的,就是billboard的世界坐标中心点位置。它是指定为uniform vec3
  • squareVertices 是网格的原点。squareVertices.x-0.5 就是左边的顶点,因此根据他来位移就是相对镜头左边方向移动(因为是乘以 CameraRight_worldspace的)
  • BillboardSize 是大小,使用世界单位,也是个uniform。

OK上面都是引用内容

所以我们获取相机的Right,Up都可以直接通过ViewMatrix的逆矩阵的第一行与第二行即可拿到。在Unity中,Shader获取ViewMatrix的逆矩阵会很简单,因为内置了一些宏定义: #define UNITY_MATRIX_IT_MV unity_MatrixITMV,所以下面我们就直接使用:UNITY_MATRIX_IT_MV
WorldSpace下的BB 的Shader如下:(可以看我写的注释)

// jave.lin 2020.03.25 WorldSpace下的BB
Shader "Custom/T4_GpuBB_WorldSapce" {
    Properties {
        _MainTex ("Texture", 2D) = "white" {}
        _BillboardSize ("BillboardSize", Vector) = (1, 1, 0, 0)
    }
    SubShader {
        Tags { "RenderType"="Transparent" "Queue"="Transparent" }
        LOD 100 Cull Off Blend One One ZWrite Off
        Pass {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"
            struct appdata {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };
            struct v2f {
                float4 vertex : SV_POSITION;
                float2 uv : TEXCOORD0;
            };
            sampler2D _MainTex;
            float4 _MainTex_ST;
            float4 _BillboardSize;
            v2f vert (appdata v) {
                v2f o;
                // 先获取BB的世界坐标点
                float4 worldPos = mul(unity_ObjectToWorld, float4(0,0,0,1));
                // 再获取cam的世界坐标下的Right,Up,通过ViewMatrix的逆矩阵的第一行与第二行
                float3 camRight = UNITY_MATRIX_IT_MV[0].xyz;
                float3 camUp = UNITY_MATRIX_IT_MV[1].xyz;
                worldPos.xyz += // 使用原始顶点的大小与缩放系数:_BillboardSize来控制世界坐标下的顶点位置
                camRight * v.vertex.x * _BillboardSize.x + 
                camUp * v.vertex.y * _BillboardSize.y;
                // 最后将按照camRight,camUp重新调整后的worldPos,再转换到clipSpace,片段需要
                o.vertex = mul(UNITY_MATRIX_VP, worldPos);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                return o;
            }
            fixed4 frag (v2f i) : SV_Target {
                fixed4 col = tex2D(_MainTex, i.uv);
                return col;
            }
            ENDCG
        }
    }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49

ViewSpace下的BB

// jave.lin 2020.3.25 在View Space 下处理的Billboard
// jave.lin 2020.3.25 在View Space 下处理的Billboard
Shader "Custom/T5_GpuBB_ViewSapce" {
   Properties {
      _MainTex ("Texture Image", 2D) = "white" {}
      _BillboardSize ("BillboardSize", Vector) = (1, 1, 0, 0)
   }
   SubShader {
      Tags { "RenderType"="Transparent" "Queue"="Transparent" }
      Pass {
         ZWrite Off Cull Off Blend One One 
         CGPROGRAM
         #pragma vertex vert  
         #pragma fragment frag
         sampler2D _MainTex;        
         float4 _BillboardSize;
         struct a2v {
            float4 vertex : POSITION;
            float2 uv : TEXCOORD0;
         };
         struct v2f {
            float4 vertex : SV_POSITION;
            float2 uv : TEXCOORD0;
         };
         v2f vert(a2v v) {
            v2f o;
            float4 viewSpacePos = mul(UNITY_MATRIX_MV, float4(0.0, 0.0, 0.0, 1.0));
            viewSpacePos.xy += v.vertex.xy * _BillboardSize.xy;
            o.vertex = mul(UNITY_MATRIX_P, viewSpacePos);
            o.uv = v.uv;
            return o;
         }
         float4 frag(v2f i) : SV_Target {
            return tex2D(_MainTex, i.uv);   
         }
         ENDCG
      }
   }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39

这种方式和WorldSpace的差不多:
在这里插入图片描述

ClipSpace下的BB(不透视大小时:固定大小)

Shader代码也比较简单,具体看注释,我都说明的比较详细

// jave.lin 2020.3.25 Clip Space 下处理的Billboard
Shader "Custom/T6_GpuBB_ClipSpace" {
   Properties {
      [MaterialToggle(_PERSPECTIVE_SIZE)] _PERSPECTIVE_SIZE ("Perspective Size", Float) = 0
      _MainTex ("Texture Image", 2D) = "white" {}
      _BillboardSize ("BillboardSize", Vector) = (1, 1, 0, 0)
   }
   SubShader {
      Tags { "RenderType"="Transparent" "Queue"="Transparent" }
      Pass {
         ZWrite Off Cull Off Blend One One 
         CGPROGRAM
         #pragma vertex vert  
         #pragma fragment frag
         #pragma multi_compile _ _PERSPECTIVE_SIZE
         sampler2D _MainTex;        
         float4 _BillboardSize;
         struct a2v {
            float4 vertex : POSITION;
            float2 uv : TEXCOORD0;
         };
         struct v2f {
            float4 vertex : SV_POSITION;
            float2 uv : TEXCOORD0;
         };
         v2f vert(a2v v) {
            v2f o;
            // 將先BB的中心变换到ClipSpace
            o.vertex = UnityObjectToClipPos(float3(0,0,0));
            // 是否需要透視大小
            #if _PERSPECTIVE_SIZE
            // 这里手动透视除法,即使底层流水线再次透视除法也关系,因为我们前面透视除法后: o.vertex.w == 1
            o.vertex /= o.vertex.w;
            #endif
            // 在ClipSpace下做尺寸控制
            o.vertex.xy += v.vertex.xy * _BillboardSize.xy;
            o.uv = v.uv;
            return o;
         }
         float4 frag(v2f i) : SV_Target {
            return tex2D(_MainTex, i.uv);   
         }
         ENDCG
      }
   }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46

这里留意我开了一个_PERSPECTIVE_SIZEMaterialToggle开关,这样可以关闭或是开启:透视大小的效果。

o.vertex /= o.vertex.w;
  • 1

这句话我注释里也描述了:这里手动透视除法,即使底层流水线再次透视除法也关系,因为我们前面透视除法后: o.vertex.w == 1

ScreenSpace下的BB(固定大小,按像素控制大小)

其实 ScreenSpace下的BB与ClipSpace很类似,只不过我们将控制大小的系数的作用改为:以像素为单位来控制,这样也符合Screen的控制方式。

下面是Shader代码:

// jave.lin 2020.3.25 Screen Space 下处理的Billboard - 起始于Clip Space下的是很类似,只不过我们给外部控制大小的单位是:像素
Shader "Custom/T7_GpuBB_ScreenSpace" {
   Properties {
      _MainTex ("Texture Image", 2D) = "white" {}
      _PixelSize ("Pixel Size", Vector) = (1, 1, 0, 0)
   }
   SubShader {
      Tags { "RenderType"="Transparent" "Queue"="Transparent" }
      Pass {
         ZWrite Off Cull Off Blend One One 
         CGPROGRAM
         #pragma vertex vert  
         #pragma fragment frag
         sampler2D _MainTex;        
         float4 _PixelSize;
         struct a2v {
            float4 vertex : POSITION;
            float2 uv : TEXCOORD0;
            uint id : TEXCOORD1;
         };
         struct v2f {
            float4 vertex : SV_POSITION;
            float2 uv : TEXCOORD0;
         };
         v2f vert(a2v v) {
            v2f o;
            // 將先BB的中心变换到ClipSpace
            o.vertex = UnityObjectToClipPos(float3(0,0,0));
            // 这里手动透视除法,即使底层流水线再次透视除法也关系,因为我们前面透视除法后: o.vertex.w == 1
            o.vertex /= o.vertex.w;
            // 在ClipSpace下做尺寸控制,并以像素为单位的方式来控制,已达到屏幕下控制大小的感觉
            // 使用到了:_ScreenParams,的全局uniform,下面列出了Unity对_ScreenParams的描述与定义
            // x = width
            // y = height
            // z = 1 + 1.0/width
            // w = 1 + 1.0/height
            // uniform vec4 _ScreenParams;
            o.vertex.xy += v.vertex.xy * (_PixelSize.xy / _ScreenParams.xy);
            o.uv = v.uv;
            return o;
         }
         float4 frag(v2f i) : SV_Target {
            return tex2D(_MainTex, i.uv);   
         }
         ENDCG
      }
   }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48

主要与ClipSpace的区别,看这么一句:

o.vertex.xy += v.vertex.xy * (_PixelSize.xy / _ScreenParams.xy);
  • 1

使用到了:_ScreenParams,的全局uniform,下面列出了Unity对_ScreenParams的描述与定义

            // x = width
            // y = height
            // z = 1 + 1.0/width
            // w = 1 + 1.0/height
            // uniform vec4 _ScreenParams;
  • 1
  • 2
  • 3
  • 4
  • 5

_PixelSize是材质外部可以控制的大小,单位是:像素,这样无论什么分辨率下都可以按固定大小来控制。


游戏中的 BB 树

// jave.lin
Shader "BB/WS_AlphaTest" {
    Properties{
        _MainTex("Texture", 2D) = "white" {}
        _BBSizePos("Billboard Position & Size", Vector) = (1, 1, 0, 0)
        _Culloff ("Alpha Cull Off", Range(0, 1)) = 0.5
    }
    SubShader{
        Tags { "RenderType" = "Opaque" "Queue" = "AlphaTest" }
        LOD 100 Cull Off Blend One Zero ZWrite On ZTest LEqual
        Pass {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"
            struct appdata {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };
            struct v2f {
                float4 vertex : SV_POSITION;
                float2 uv : TEXCOORD0;
            };
            sampler2D _MainTex;
            float4 _MainTex_ST;
            float4 _BBSizePos;
            fixed _Culloff;
            v2f vert(appdata v) {
                v2f o = (v2f)0;
                float4 worldPos = mul(unity_ObjectToWorld, float4(0,0,0,1));
                float3 R = UNITY_MATRIX_IT_MV[0].xyz;
                float3 U = UNITY_MATRIX_IT_MV[1].xyz;
                worldPos.xyz += R * v.vertex.x * _BBSizePos.x + U * v.vertex.y * _BBSizePos.y;
                worldPos.xy += _BBSizePos.zw;
                o.vertex = mul(UNITY_MATRIX_VP, worldPos);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                return o;
            }
            fixed4 frag(v2f i) : SV_Target {
                fixed4 col = tex2D(_MainTex, i.uv);
                clip(col.a - _Culloff);
                return col;
            }
            ENDCG
        }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47

效果
在这里插入图片描述


游戏中的 BB树,BB阴影


Shader

Shader "BB/Default - GPUInstance - WS_AlphaTest" {
    Properties{
        _MainTex("Texture", 2D) = "white" {}
        _BBSizePos("Billboard Size & Position", Vector) = (1, 1, 0, 0)
        _Cutoff("Alpha Cut Off", Range(0, 1)) = 0.5
        _NormalYLockToCam("Normal's Y Lock To Cam", Range(0, 1)) = 1
        _AnchorPos("Anchor Pos", Vector) = (0, 0, 0, 0)
    }

        SubShader{
            Tags { "RenderType" = "Opaque" "Queue" = "AlphaTest" }
            LOD 100 Cull Off Blend One Zero ZWrite On ZTest LEqual
            Pass {
                // Bill board
                CGPROGRAM
                #pragma vertex vert
                #pragma fragment frag
                #pragma multi_compile_fog
                #pragma multi_compile_instancing
                #pragma multi_compile _ LIGHT_AREA_CIRCLE

                #include "UnityCG.cginc"
                #include "../CGInclude/LightCircleEffectCommon.cginc"
                #include "../CGInclude/FogLinearCommon.cginc"
                struct appdata {
                    float4 vertex : POSITION;
                    float2 uv : TEXCOORD0;
#if INSTANCING_ON
                    UNITY_VERTEX_INPUT_INSTANCE_ID
#endif
                };
                struct v2f {
                    float4 vertex : SV_POSITION;
                    float2 uv : TEXCOORD0;
                    float3 worldPos : TEXCOORD1;
                    V2F_FOG_COORD_TEXCOORD(2)
#if INSTANCING_ON
                    //UNITY_VERTEX_INPUT_INSTANCE_ID
#endif
                };
                sampler2D _MainTex;
                float4 _MainTex_ST;
                float4 _BBSizePos;
                fixed _Cutoff;
                float _NormalYLockToCam;
                float3 _AnchorPos;

                v2f vert(appdata v) {

                    v2f o = (v2f)0;

#if INSTANCING_ON
                    UNITY_SETUP_INSTANCE_ID(v)
                        //UNITY_TRANSFER_INSTANCE_ID(v, o);
#endif
                    float3 camPos = mul(unity_WorldToObject, float4(_WorldSpaceCameraPos, 1)).xyz;
                    float3 normal = camPos - _AnchorPos;
                    normal.y *= _NormalYLockToCam;
                    normal = normalize(normal);

                    float3 up = abs(normal.y) > 0.999 ? float3(0, 0, 1) : float3(0, 1, 0);
                    float3 right = normalize(cross(normal, up));// * -1;
                    up = normalize(cross(right, normal));// * -1;

                    float3 offsetPos = v.vertex.xyz - _AnchorPos;
                    float3x3 newLocalMatrix = { /*col0*/right, /*col1*/up, /*col2*/normal };
                    float3 newLocalPos = mul(offsetPos, newLocalMatrix);
                    newLocalPos += _AnchorPos;

                    newLocalPos.xyz += right * v.vertex.x * _BBSizePos.x + up * v.vertex.y * _BBSizePos.y;
                    newLocalPos.xy += _BBSizePos.zw;

                    o.vertex = UnityObjectToClipPos(newLocalPos);
                    o.worldPos = mul(unity_ObjectToWorld, float4(newLocalPos, 1)).xyz;
                    o.uv = TRANSFORM_TEX(v.uv, _MainTex);

                    V2F_HANDLE_FOG_COORD(o.vertex.z)

                    return o;
                }
                fixed4 frag(v2f i) : SV_Target{
                    fixed4 col = tex2D(_MainTex, i.uv);
                    clip(col.a - _Cutoff);
                    CAL_LIGHT_CIRCLE(i.worldPos.xyz, col)
                    FAG_LERP_FOG_COL(i.fogCoord.x, col)
                    return col;
                }
                ENDCG
            }

            Pass {
                    // ShadowCaster
                    Tags { "LightMode" = "ShadowCaster" "RenderType" = "AlphaTest" "Queue" = "AlphaTest" }

                    ZWrite On ZTest LEqual Cull Off

                    CGPROGRAM
                    #pragma vertex vert
                    #pragma fragment frag
                    #pragma target 2.0
                    #pragma multi_compile_shadowcaster
                    #pragma multi_compile_instancing
                    #include "UnityCG.cginc"

                    struct appdata {
                        float4 vertex : POSITION;
                        float2 uv : TEXCOORD0;
#if INSTANCING_ON
                        UNITY_VERTEX_INPUT_INSTANCE_ID
#endif
                    };

                    struct v2f {
                        V2F_SHADOW_CASTER;
                        float2 uv : TEXCOORD1;
                        UNITY_VERTEX_OUTPUT_STEREO
                    };

                    sampler2D _MainTex;
                    float4 _MainTex_ST;
                    float4 _BBSizePos;
                    fixed _Cutoff;
                    float _NormalYLockToCam;
                    float3 _AnchorPos;

                    v2f vert(appdata_base v)
                    {
                        v2f o;
#if INSTANCING_ON
                        UNITY_SETUP_INSTANCE_ID(v);
#endif
                        UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(o);

                        // jave.lin : 这里使用的是 灯光方向来处理
                        float3 wpos = mul(unity_WorldToObject, v.vertex).xyz;
                        float3 camPos = UnityWorldSpaceLightDir(wpos);
                        float3 normal = camPos - _AnchorPos;
                        normal.y *= _NormalYLockToCam;
                        normal = normalize(normal);

                        float3 up = abs(normal.y) > 0.999 ? float3(0, 0, 1) : float3(0, 1, 0);
                        float3 right = normalize(cross(normal, up));// * -1;
                        up = normalize(cross(right, normal));// * -1;

                        float3 offsetPos = v.vertex.xyz - _AnchorPos;
                        float3x3 newLocalMatrix = { /*col0*/right, /*col1*/up, /*col2*/normal };
                        float3 newLocalPos = mul(offsetPos, newLocalMatrix);
                        newLocalPos += _AnchorPos;

                        newLocalPos.xyz += right * v.vertex.x * _BBSizePos.x + up * v.vertex.y * _BBSizePos.y;
                        newLocalPos.xy += _BBSizePos.zw;

                        v.vertex.xyz = newLocalPos;

                        TRANSFER_SHADOW_CASTER_NORMALOFFSET(o)
                        o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
                        return o;
                    }

                    float4 frag(v2f i) : SV_Target
                    {
                        fixed4 texcol = tex2D(_MainTex, i.uv);
                        clip(texcol.a - _Cutoff);

                        SHADOW_CASTER_FRAGMENT(i)
                    }
                    ENDCG

                }
        }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171

主要看:Pass ShadowCaster 部分

ShadowCaster 的思路也是比较简单的,就是 BB 朝向不再是相机,而是朝向光源方向即可

运行效果

在这里插入图片描述


BB 树 Instancing 注意合批失败、绘制闪烁的问题

一般是由于 Unity 项目配置中 开启了 DynamicBatch 导致的:

解决方法

  • ShaderLab 中添加 Tags :"DisableBatching" = "True"
  • 或是 ShaderLab 不添加 Tags 也行,如果说你的项目不需要 unity 的 DynamicBatch 的功能的话,可以通过:Edit/Project Settings.../Player/Other Settings/Dynamic Batching 的复选框的勾 去掉,如下图

在这里插入图片描述

具体参考: Unity - Instancing 合批失败、绘制闪烁的问题解决(Dynamic Batching 动态合批导致)


总结

Billboard应用还是非常多的,但是要根据需求来选择Billboard的类型也是很重要的。
如:

  • 远处的树,草,灯,或是ShadowGun里的水管外发光,都可以用Y轴对齐的旋转就好。
  • 热扭曲的,直接放在View Space下按顶点偏移就好。这个在References Heat Distortion Shader Tutorial 有实现,下一篇我就根据他的来实现一遍,要动手写,至少要写一次,光看,是很容易理解的,但就怕Unity有什么坑,快速实现过一篇就好了。
  • 粒子的Billboard,我们在用Unity自带的粒子系统也会看到Render那项也有RenderMode设置,可以设置为:Billboard,它就是视图+缩放系数控制的。
  • 还有就是是否需要保留透视的近大远小的效果来选择,如头顶上的名字,或是血条,一般都是使用这种方式。

最后吐槽:

这里要吐槽一下,Unity的材质属性有时候不及时刷新的问题:
Unity Shader中制作Billboard过程中,给ShaderLab中的[KeywordEnum()][MaterialToggle()]属性不及时刷新的问题搞得头都晕,因为这两个属性有时候添加了不会自动刷新,需要到Unity选择材质,在材质面板调整这两类属性后,它才会生效,搞得我写了很多测试用例,结果都对的,但就不知道为和在ShaderLab在不对。。。原来是这个问题。。。真的要气死。。。浪费我好多时间。

因为我当时遇到一个问题,我在CSharp中,演算的数据都对的,放到Shader中就不对了。
然后我怀疑是否Shader与CSharp有些差异,我就直接将《入门精要》的代码都抄一遍了,结果还是不对,然后我在将OpenGL的一些Billboard也弄到Unity Shader结果也不对,然后我又大量的在网上查找其他的Billboard代码,放到UnityShader中,还是不对。。。我使用了FrameDebuggerVusial Studio Graphics Debugger查看输出,传入的数据都是没有问题的(就差PIXRenderDocs没用上,原因:打不开,太慢,我没梯子,本想使用Visual Studio Graphics Debugger来调试shader的,但报错了,而且第一次用,不熟悉,后来解决了,我就暂时没去研究怎么用,后面有空的话,还是需要去学习一下怎么用,还有PIX),最后,真的要疯了,我就对着材质的一些KeywordEnum或是MaterialToggle中的属性随便点了一下(切断了属性值),结果就对了。最后我发现,其他之前部分效果对的Shader,就是因为没加这两类属性。。。

所以:在开发UnityShader中,如果添加了这类属性,验证效果时,觉得效果不对时,就需要调整一个:KeywordEnum或是MaterialToggle中的属性。

Project

backup : UnityShader_BillboardTesting_2018.3.0F2

References

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/你好赵伟/article/detail/75037
推荐阅读
相关标签
  

闽ICP备14008679号