首页 > 其他分享 >UE5中实现Billboard公告板渲染

UE5中实现Billboard公告板渲染

时间:2024-12-15 15:03:26浏览次数:7  
标签:面片 转换 渲染 UE 空间 Billboard 测试 UE5 节点

公告板(Billboard)通常指永远面向摄像机的面片,游戏中许多技术都基于公告板,例如提示拾取图标、敌人血槽信息等,本文将使用UE5和材质节点制作一个公告板。

Gif效果:
在这里插入图片描述
网格效果:
在这里插入图片描述

1.思路

通过UE中的节点TransformVector可以将相机空间内容转换到世界空间,从而在相机空间绘制一个面片转换到世界空间输出即可。

2.实现

第一步

在这里插入图片描述
第一步,将UV转换为-1 - 1区间的归一化值。

第二步

在这里插入图片描述
第二步,因转换为-1 - 1数值的区间过小,UE又是以厘米为单位的引擎,因此需要乘以系数100将数值放大,然后将二维向量转化为三维向量(X,Y,0)丢给TransformVector节点从相机空间转换至世界空间

第三步

在这里插入图片描述
最后因为UE顶点输出只能传入偏移信息,我们需要将新顶点减去旧的顶点变为偏移值进行输出。

3.测试

在这里插入图片描述

使用UE自带面片进行测试会发现结果不对,这是因为UE自带的面片是多四边面的面片,需要外部传入一个常规单个四边面面片进行测试。

最后传入外部面片网格以测试,结果正常了:

在这里插入图片描述

标签:面片,转换,渲染,UE,空间,Billboard,测试,UE5,节点
From: https://blog.csdn.net/grayrail/article/details/144485486

相关文章

  • 零基础微信小程序开发——WXML 模板语法之列表渲染-WXML和样式设置(保姆级教程+超详细)
    ......
  • 零基础微信小程序开发——WXML 模板语法之列表渲染(保姆级教程+超详细)
    ......
  • 分帧渲染、分片渲染
    import{onUnmounted}from"vue"//分帧渲染exportfunctionuseDefer(maxCount=100){constcount=ref(0)letraqId=nullfunctionupdateFrame(){count.value++if(count.value<maxCount){raqId=reques......
  • Nuxt.js免费视频教程 开启SSR渲染
    Nuxt.js免费视频教程开启SSR渲染https://www.bilibili.com/video/BV1Xt41117Kg*100节NuxtJS视频教程介绍VM443:101节NuxtJS开发环境安装和HelloWorldVM443:102节NuxtJS目录结构和配置文件VM443:103节NuxtJS常用配置讲解VM443:104节NuxtJS路由讲解和参数传递VM443:1......
  • React服务端渲染框架Next.js入门教程
    React服务端渲染框架Next.js入门教程https://www.bilibili.com/video/BV13441117KK*101节_Next.js简介和手动创建项目02节_creat-next-app快速创建项目03节_Next.js的Page和Conponent使用04节_路由的标签跳转和编程跳转05节_路由跳使用query传递参数和接受参数06节_路由......
  • 前端性能优化实战:从加载到渲染的全链路提速
    "网站太慢了,用户都在抱怨!"上周,我接手了一个正在运行的电商项目,首屏加载时间竟然长达8秒。作为一个对性能有执念的前端开发者,这个数字让我夜不能寐。经过一周的优化,我们把首屏时间压缩到了2秒以内。今天,我想和大家分享这个过程中的实战经验。......
  • 【鸿蒙 ArkTS 开发】网络请求HTTP并渲染列表展示
    1.页面布局和网络请求(展示产品信息)在这个页面中,我们会从网络获取产品数据,并使用List组件展示产品信息。product_list_page.etsimportui;import@ohos.net.http;importohos.agp.components.List;importohos.agp.components.Text;importohos.agp.components.Image;......
  • 图片渲染 API:极速生成电商、社媒、营销、横幅、证书等图片!
    不知道还有没有同学还记得,当时自己开发智能体时,有一个自动生成证书图片的功能,既方便又实用。今天我们就来带大家回顾一下,如何快速生成图片,并且最重要的是,完全无需通过HTTP调用,极大提高了操作的便捷性和效率。那么,今天的主角就是EdgeOne,这是一款不仅具备加速功能,还有强大安全保......
  • c# blazor页面渲染前方法
    在Blazor中,如果你想在组件渲染前执行某些操作,可以使用以下几个生命周期方法:OnInitializedAsync:这个方法在组件初始化时被调用,适合执行异步初始化操作,如从服务器加载数据。这是在组件渲染前调用的,因此你可以在这里进行数据预加载。protectedoverrideasyncTaskOnInitial......
  • UE5 角色冲刺+耐力条
    A、实现思路1、在Actions里增加冲刺的IA事件,在IMC里配置相关按键。2、BP中增加相关逻辑。有两种情况:a、无耐力条时,直接修改两种速度即可,没有额外限制。IA_sprint事件里,修改角色的最大移动速度,冲刺时速度变快,反之恢复正常。b、有耐力条时,限制较多,冲刺时会消耗,平时会恢......