Unity中Shader面片一直面向摄像机

原创 已于 2024-01-09 10:29:15 修改 · 2.5k 阅读 · 19 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#unity #游戏引擎

于 2024-01-07 12:42:50 首次发布
本文介绍如何在Unity中通过Shader使模型面片始终保持面向摄像机。通过理解旋转矩阵，确定原坐标系和目标坐标系，计算Z、Y、X轴基向量，并应用向量乘法或矩阵乘法实现顶点旋转，最终达到面片始终面对摄像机的效果。适合用于特效、公告牌等场景。

文章目录

前言

在之前的文章中，我们实现了Shader的序列帧动画。

但是，我们会发现，我们的面片不会一直面向摄像机，当摄像机移动时，人物或特效就会出现穿帮的效果。所以，我们接下来就来实现让我们的面片面向摄像机。

类似的功能，还可能用于：特效、公告牌、八方旅人风格效果、饥荒风格效果。

一、实现思路

1、 我们要实现模型面片一直跟着摄像机旋转，那么就需要用到旋转矩阵

2、确定 原坐标系 和 目标坐标系

  • 原坐标系 就是模型的本地坐标
    在这里插入图片描述
  • 目标坐标系
    因为我们的面片需要一直朝向摄像机。
    所以，可以确定旋转后的坐标系Z轴方向 需要 和 原模型本地空间坐标系原点 指向 摄像机 方向一致。
    在这里插入图片描述

3、确定旋转后坐标系基向量

二、确定旋转后 坐标系基向量 在 原坐标系 下的值

1、Z轴基向量

  • 求 摄像机坐标 在模型本地空间下的坐标值，在 归一化后 就是 Z轴基向量

float3 viewDir = mul(GetWorldToObjectMatrix(),float4(_WorldSpaceCameraPos,1)).xyz;

2、假设Y轴基向量 和 世界空间下 的Y轴方向一致竖直向上

在这里插入图片描述

float3 upDir = float3(0,1,0);

3、X轴基向量

  • X轴基向量 = Z轴基向量 × Y轴基向量

  • 叉积 的顺序取决于 坐标系类型 （逆时针叉积）

  • 模型本地空间坐标系为左手坐标系
    在这里插入图片描述

  • 左手坐标系中，X轴 = 食指 × 拇指 = Z × Y

float3 rightDir = normalize(cross(viewDir,upDir));

4、Y轴基向量

  • Y轴基向量 = X轴基向量 × Z轴基向量
  • 叉积 的顺序取决于 坐标系类型 （逆时针叉积）
  • 模型本地空间坐标系为左手坐标系
  • 左手坐标系中，Y轴 = 中指 × 食指 = X × Z

upDir = normalize(cross(rightDir,viewDir));

三、顶点应用旋转

法一：向量乘法

最低0.47元/天 解锁文章
【UnityShaderLab实现“Billboard“始终面向相机_播放序列图的效果_案例分享(内附源码)】
暴走约伯的博客
09-15 1037
【代码】【UnityShaderLab实现"Billboard"始终面向相机_播放序列图的效果_案例分享(内附源码)】
Unity UI始终朝向朝向摄像机
why820mmm的博客
11-29 2608
在Unity中，有时我们需要让场景中的UI一直看向摄像机，随着摄像机的旋转而旋转，我们的实现思路是获取场景中需要看向摄像的UI，为它们设置为同一个tag，在脚本中通过查找所有物体为你所设置tag的名字，并将它们集中存储，然后获取摄像机的旋转角度，遍历所有的物体，并更新它们的旋转角度即可。第一步：在场景中为所有你需要旋转的UI添加tag。第三步：将脚本添加到物体上，并指定参数。第二步：新建脚本，脚本名字自取即可，
Unity物体始终朝向摄像机
weixin_45375968的博客
08-15 954
/游戏对象"看向"位置点。
Unity中Shader面片一直面向摄像机（个性化修改及适配BRP）
楠溪泽岸的博客
01-07 1940
在上一篇文章中，我们用Shader实现了面片一直面向摄像机的效果。在这篇文章中，我们对其进行个性化修改 及 BRP下的适配。属性面板在顶点着色器。
UnityShader 总是朝着摄像机的帧动画 Billboard
AcmHonor的专栏
04-30 655
// Upgrade NOTE: replaced '_World2Object' with 'unity_WorldToObject' Shader "Achonor/Billboard" { Properties { _MainTex ("Texture", 2D) = "white" {} _RowAmount ("Row Amount", Float) = 4 _Colu...
unityShader-广告牌效果（画面永远朝向摄像机）
weixin_45554040的博客
04-14 2462
参考unityShader入门精要 此效果模拟画面效果一直朝着摄像机的方向 Shader "Unlit/GuangGaoPai" { Properties { _MainTex ("Texture", 2D) = "white" {} [MaterialToggle]_Verical("Vercial",Range(0,1))=1 } SubShader { Tags { "RenderType"="Transparent""
unity3d shader BIllboard 使模型始终朝向摄像机
思玉
12-13 5952
修改unity 内置shader Particles/Additive 为增加 BIllboard功能 上代码Shader "Particles/AddtiveBillboard" { Properties { _TintColor ("Tint Color", Color) = (0.5,0.5,0.5,0.5) _MainTex ("Particle Texture", 2
Unity世界坐标下UI始终朝向摄像机
w091253的博客
06-06 907
Unity世界坐标下UI始终朝向摄像机
unity3d中面片植物面向相机的脚本
05-04
unity3d中的单面片类的植物或人物永远朝向相机，使用方法是将脚本拖拉至面片类物体上.
shader 广告牌
weixin_43839583的博客
02-11 850
游戏中，有时我们需要让某些物体一直的面向我们，比如天上的云和星星之类的，或者广告牌，如果用模型的话，比较耗性能，所以我们采用quad面片来节省性能，然后quad面片要一直看向摄像机。 效果如下： 无论我们怎么移动摄像机，quad面片都是面对我们的。 代码如下： Shader "MyShader/015" { Properties { _MainTex ("Text...
《Unity Shader入门精要》读书笔记第十章——面片朝向相机
Last Order
04-19 1717
在做游戏的时候，有时候会出现很多道具在场景之中 如果用3D建模去实现，会比较耗性能 这个时候通常做的就是，用2D面片实现3D效果，让正面一直朝向相机 我们可以通过旋转物体来实现，也可以通过计算物体的屏幕坐标利用UI相机来实现，也可以通过shader来实现 用shader实现的思想是这样的，通过重新建立物体的模型坐标系，使得z轴始终朝向相机就可以了 问题在于x跟z轴如何确定 通过脑补，我...
[Unity]在Shader中获取摄像机角度、视线的问题
weixin_33989780的博客
05-04 2204
又踩了一坑，好在谷歌到了之前的一个人遇到相同的问题，顺利解决。 先说说问题背景，我目前的毕设是体数据渲染，实现的办法是raycast。最基本的一点就是在fragment program里，获取raycast的方向。 问题出现在加入阴影之后。在这之前，获取方向是没问题的。 在透视相机中，可以简单地用float3 viewDir = normalize(worldPos - _WorldSpaceCa...
Unity3D始终让物体面向主摄像机
热门推荐
yuxikuo_1的专栏
04-28 1万+
m_Name.transform.LookAt(Camera.main.transform.position); m_Name.transform.rotation = Quaternion.Slerp(m_Name.transform.rotation, Quaternion.LookRotation(Camera.main.transform.position - m_Name.transf
Unity物体始终朝向摄像机方向
qq_51245392的博客
05-08 3701
【代码】Unity物体始终朝向摄像机方向。
unity 模型标签一直朝向摄像机
qq_37524903的博客
07-21 819
模型标签一直朝向摄像机，无论相机拉远拉近标签大小不变。
Unity模型正反面
paserity的博客
04-13 1887
有个很常见的概念——正反面。我们经常使用这个概念，比如Unity的cull命令：Unity中的正反面是由顶点顺序(winding order)决定的，Mesh的每个顶点都有一个索引，三角形包含三个顶点的索引。按照索引从大到小遍历，会产生两种情况：如果Mesh的顶点顺序是顺时针，就认为是正面；如果Mesh的顶点顺序是逆时针，就认为是反面。如上图，左侧三角面顶点分别是012，遍历顺序逆时针为反面。右侧三角面顶点分别是021，遍历顺序顺时针为正面。
unity中3dUI或者模型始终面向摄像机，跟随摄像机视角旋转丨视角跟随丨固定视角
weixin_42746271的博客
03-31 7404
unity中3dUI或者模型始终面向摄像机，跟随摄像机视角旋转丨视角跟随丨固定视角
【Unity开发】设置Unity物体，实现物体始终面向摄像机
NGC_Miracle的博客
10-07 1441
在unity中的Assets下创建一个新的脚本，
unity中3dUI始终面向摄像机，跟随摄像机视角旋转而旋转
哲哲
03-28 1万+
3dUI始终面向摄像机，广告牌效果 public class SimpleBillboard : MonoBehaviour { public bool IsStopInSceneView = false; void OnDrawGizmos() { if (IsStopInSceneView == false && Application.isPlaying == false && SceneView.currentDrawingS
unity 3d 头顶血条，跟着摄像机旋转
最新发布
10-18
<think>我们正在讨论Unity 3D中实现头顶血条跟随摄像机旋转的方法。根据引用内容，我们知道有两种血条：2D和3D。用户的需求是让头顶血条随着摄像机旋转而旋转，这样无论摄像机如何移动，血条始终面向摄像机（即所谓的Billboard效果）。 通常，这种效果可以通过两种方式实现： 1. 使用3D血条（在3D空间中放置一个面片，并使其始终朝向摄像机）。这种方法下，血条会随着距离产生透视变化。 2. 使用2D血条（使用Canvas的World Space模式），然后通过脚本控制其旋转，使其始终朝向摄像机。 用户特别提到“跟随摄像机旋转”，这意味着我们希望血条始终面向摄像机。因此，我们可以采用以下方法： 方法一（3D血条）： - 创建一个面片（Quad）或使用一个平面（Plane）作为血条的基础。 - 为这个血条对象创建一个材质，并设置合适的贴图（例如血条纹理）。 - 编写一个脚本，将这个对象始终朝向摄像机。可以使用如下代码： ```csharp using UnityEngine; public class Billboard : MonoBehaviour { public Camera cameraToLookAt; void Start() { // 如果未指定摄像机，则使用主摄像机 if (cameraToLookAt == null) cameraToLookAt = Camera.main; } void Update() { // 使血条始终面向摄像机 transform.LookAt(transform.position + cameraToLookAt.transform.rotation * Vector3.forward, cameraToLookAt.transform.rotation * Vector3.up); } } ``` 方法二（2D血条，使用Canvas）： - 创建一个Canvas，将Render Mode设置为World Space。 - 调整Canvas的大小和位置，使其位于角色的头顶。 - 在Canvas上添加Image组件作为血条。 - 同样，需要编写一个脚本让Canvas始终朝向摄像机。但是，由于Canvas是2D的，我们也可以使用上面的Billboard脚本，或者使用更简单的： ```csharp using UnityEngine; public class BillboardCanvas : MonoBehaviour { private Camera mainCamera; void Start() { mainCamera = Camera.main; } void LateUpdate() { // 让画布始终朝向摄像机 transform.LookAt(transform.position + mainCamera.transform.forward); } } ``` 注意：在方法二中，我们通常使用LateUpdate()来确保在摄像机移动后再更新血条方向，以避免抖动。 另外，引用[2]提到了遮挡问题。如果我们使用3D血条，当角色被墙遮挡时，血条也会被遮挡。而使用2D血条（Canvas）时，如果不做额外处理，血条会在角色被遮挡时仍然显示。用户可能希望血条在角色被遮挡时隐藏，或者进行半透明处理等。但用户当前的问题仅关注旋转，所以我们先解决旋转问题。 总结：实现头顶血条跟随摄像机旋转的核心是使用一个脚本控制血条对象（无论是3D面片还是Canvas）的旋转，使其始终面向摄像机。 下面提供一个完整的步骤（以2D血条为例，因为2D血条更常用且不受透视影响）： 步骤： 1. 在角色头顶位置创建一个空物体，作为血条的父节点（用于定位）。 2. 创建一个Canvas： - 右键点击Hierarchy面板 -> UI -> Canvas - 设置Canvas的Render Mode为World Space - 调整RectTransform的宽度和高度（例如100x20），然后调整位置（比如在角色头顶上方2个单位，即y轴偏移2）。 - 将Canvas设置为空物体的子对象。 3. 在Canvas下创建Image（作为背景）和另一个Image（作为血条前景，可以通过改变fillAmount来显示血量）。 4. 给Canvas添加一个脚本（例如Billboard.cs），使用上面的Billboard脚本。 或者，我们可以使用Unity内置的Billboard渲染组件，但这里我们使用脚本控制。 注意：在World Space模式下，Canvas是一个3D物体，因此我们可以像控制其他3D物体一样控制它的旋转。 最后，我们还可以考虑使用Shader来实现Billboard效果，但使用脚本更为直接和灵活。 因此，推荐使用Canvas（2D血条）配合Billboard脚本来实现头顶血条跟随摄像机旋转。 如果用户需要3D血条（例如需要透视效果），则使用方法一。 相关问题： 1. 如何实现血条的血量变化？ 2. 如何解决血条被其他物体遮挡的问题？ 3. 如何在多人游戏中为每个角色动态生成头顶血条？ </think>### Unity 3D实现头顶血条跟随摄像机旋转的方法 在Unity中实现头顶血条跟随摄像机旋转（Billboard效果）的核心是**让血条始终面向摄像机**。以下是两种常用实现方案： #### 方案一：使用3D血条 + 旋转脚本（推荐） ```csharp using UnityEngine; public class Billboard : MonoBehaviour { private Camera mainCamera; void Start() { // 获取主摄像机 mainCamera = Camera.main; } void LateUpdate() { // 使血条始终面向摄像机 transform.rotation = mainCamera.transform.rotation; /* 可选：保持水平方向不倾斜 */ // Vector3 euler = transform.rotation.eulerAngles; // euler.z = 0; // 锁定Z轴旋转 // transform.rotation = Quaternion.Euler(euler); } } ``` **实现步骤：** 1. 创建3D血条对象（如Quad） 2. 将脚本挂载到血条对象上 3. 调整血条位置到角色头顶（通过`Transform`组件的Y轴偏移） **特点：** - 血条会随摄像机距离产生透视效果[^1] - 使用`LateUpdate()`确保在摄像机移动后更新 - 可通过取消注释的代码锁定水平旋转 #### 方案二：使用UI Canvas（World Space模式） ```csharp using UnityEngine; public class UIBillboard : MonoBehaviour { private RectTransform rectTransform; private Camera mainCamera; void Start() { rectTransform = GetComponent<RectTransform>(); mainCamera = Camera.main; } void LateUpdate() { // 使UI始终面向摄像机 rectTransform.rotation = mainCamera.transform.rotation; } } ``` **实现步骤：** 1. 创建Canvas → 设置`Render Mode`为`World Space` 2. 设计血条UI（Slider/Image） 3. 将Canvas作为角色子物体，调整位置到头顶 4. 挂载上述脚本到Canvas **特点：** - 血条大小固定，不受透视影响[^1] - 需要处理遮挡问题（如角色躲进掩体时）[^2] - 可通过`Canvas Group`组件控制透明度 --- ### 注意事项 1. **性能优化：** - 使用对象池管理血条实例 - 超出摄像机范围时隐藏血条 ```csharp if (!renderer.IsVisibleFrom(mainCamera)) gameObject.SetActive(false); ``` 2. **遮挡处理：** - 被物体遮挡时自动隐藏： ```csharp if (Physics.Linecast(transform.position, mainCamera.transform.position, out hit)) { if (hit.collider.tag != "Player") canvas.alpha = 0.3f; } ``` 3. **旋转精度：** - 使用`Quaternion.LookRotation(mainCamera.transform.forward)`可获得更平滑的旋转 --- ### 两种方案对比 | 特性 | 3D血条方案 | UI Canvas方案 | |---------------|-------------------------------|----------------------------| | 透视效果 | ✔️ 随距离变化 | ❌ 固定大小 | | 渲染层级 | 可能被场景物体遮挡[^2] | 始终显示在最前 | | 性能消耗 | 较低（使用简单网格） | 较高（需要渲染UI） | | 适配VR | 无需额外处理 | 需要多摄像机支持 | | 文本显示 | 需配合TextMeshPro | 原生支持UI Text | > 推荐优先使用**3D血条方案**，在需要复杂UI布局（如附加角色名称、状态图标）时再选用Canvas方案[^1]。实际开发中可根据项目需求混合使用两种方案。
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

楠溪泽岸

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值