UE4渲染目标开发教程(ue4渲染效果图质量怎么样)
myzbx 2025-05-03 15:40 36 浏览
渲染目标(Render Target)是你可以在运行时写入的纹理。在引擎方面,它们存储基础颜色、法线和环境光遮蔽等信息。
在用户方面,渲染目标主要用作一种辅助相机。你可以将场景捕捉指向某物并将图像存储到渲染目标。然后,可以在网格上显示渲染目标以模拟安全摄像头之类的东西。
随着 4.13 的发布,Epic 引入了使用蓝图直接绘制材质以渲染目标的能力。此功能允许使用高级效果,例如流体模拟和雪变形。听起来很令人兴奋,对吧?但是在你进入这些高级效果之前,最好从简单的开始。还有什么比仅仅在渲染目标上绘画更简单的呢?
在本教程中,我们将学习如何:
- 使用蓝图动态创建渲染目标
- 在网格上显示渲染目标
- 在渲染目标上绘制纹理
- 在游戏过程中更改画笔大小和纹理
1、入门
首先下载本教程的材料(可以在本教程的顶部或底部找到链接)。解压缩并导航到CanvasPainterStarter并打开CanvasPainter.uproject。如果按Play,将看到以下内容:
中间的正方形(画布)是你将要在上面绘画的地方。左侧的 UI 元素将是要绘制的纹理及其大小。
首先,让我们回顾一下用于绘画的方法。
2、绘画方法
我们需要的第一件事是充当画布的渲染目标。要确定在哪里绘制渲染目标,你需要从相机向前进行光线跟踪。如果线条击中画布,就可以获得 UV 空间中的击中位置。
例如,如果画布是完美的 UV 映射,则中心的命中将返回(0.5, 0.5)的值。如果它到达右下角,将获得(1, 1)的值。然后,可以使用一些简单的数学来计算绘制位置。
但是为什么要在 UV 空间中获取位置呢?为什么不使用实际的世界空间位置?使用世界空间,首先需要计算命中相对于平面的位置,此外还需要考虑平面的旋转和比例。
使用 UV 空间,则无需进行任何这些计算。在完美的 UV 映射平面上,无论平面的位置和旋转如何,中间的命中都将始终返回(0.5, 0.5)。
注意:本教程中的方法通常只适用于平面或类平面表面。对于其他类型的几何,需要一种更高级的方法,我们将在以后的教程中介绍。
首先,将创建将显示渲染目标的材质。
3、创建画布材质
导航到Materials文件夹,然后打开M_Canvas。
在本教程中,我们将在蓝图中动态创建渲染目标。这意味着需要将纹理设置为参数,以便可以传入渲染目标。为此,请创建一个TextureSampleParameter2D并将其命名为RenderTarget。之后,将其连接到BaseColor。
不必担心在此处设置纹理 - 你将在接下来的蓝图中执行此操作。单击应用,然后关闭M_Canvas。
下一步是创建渲染目标,然后在画布材质中使用它。
4、创建渲染目标
有两种方法可以创建渲染目标。首先是通过单击Add New\Materials & Textures\Render Target在编辑器中创建它们。这将允许你轻松地跨多个参与者引用相同的渲染目标。但是,如果想拥有多个画布,则必须为每个画布手动创建一个渲染目标。
更好的方法是使用蓝图创建渲染目标。这样做的好处是你只根据需要创建渲染目标,它们不会使项目文件膨胀。
首先,需要创建渲染目标并将其存储为变量以供以后使用。转到Blueprints文件夹并打开BP_Canvas。找到Event BeginPlay并添加突出显示的节点。
将宽度和高度设置为1024。这会将渲染目标的分辨率设置为1024×1024。较高的值会提高图像质量,但会以更多的视频内存为代价。
接下来是Clear Render Target 2D节点。可以使用此节点来设置渲染目标的颜色。将清除颜色设置为(0.07, 0.13, 0.06)。这将用绿色填充整个渲染目标。
现在需要在画布网格上显示渲染目标。
5、显示渲染目标
目前,画布网格正在使用其默认材质。要显示渲染目标,需要创建M_Canvas的动态实例并提供渲染目标。然后,需要将动态材质实例应用于画布网格。为此,请添加突出显示的节点:
首先,转到Create Dynamic Material Instance节点并将Parent设置为M_Canvas。这将创建M_Canvas的动态实例。
接下来,转到Set Texture Parameter Value节点并将Parameter Name设置为RenderTarget。这会将渲染目标传递给之前创建的纹理参数。
现在画布网格将显示渲染目标。单击编译,然后返回主编辑器。按Play以查看画布更改颜色。
现在有了画布,需要创建一个材质来充当你的画笔。
6、创建画笔材质
导航到材料文件夹。创建一个名为M_Brush的材质,然后打开它。首先,将混合模式设置为半透明。这将允许我们使用具有透明度的纹理。
就像画布材质一样,我们还将在蓝图中设置画笔的纹理。创建一个TextureSampleParameter2D并将其命名为BrushTexture。像这样连接它:
单击应用,然后关闭M_Brush。
接下来要做的是创建画笔材质的动态实例,以便我们可以更改画笔纹理。打开BP_Canvas,然后添加突出显示的节点。
接下来,转到Create Dynamic Material Instance节点并将Parent设置为M_Brush。
画笔材质完成后,我们现在需要一个函数将画笔绘制到渲染目标上。
7、将画笔绘制到渲染目标
创建一个新函数并将其命名为DrawBrush。首先,我们将需要使用哪个纹理、画笔大小和绘制位置的参数。创建以下输入:
- BrushTexture:将类型设置为Texture 2D
- BrushSize:设置类型为浮动
- DrawLocation:将类型设置为Vector 2D
在绘制画笔之前,我们需要设置它的纹理。为此,请创建以下设置。确保将Parameter Name设置为BrushTexture。
现在需要绘制到渲染目标。为此,请创建突出显示的节点:
Begin Draw Canvas to Render Target会让引擎知道你想开始绘制到指定的渲染目标。然后,绘制材质将允许您在指定的位置、大小和旋转处绘制材质。
计算绘制位置是一个两步过程。首先,需要缩放DrawLocation以适应渲染目标的分辨率。为此,请将 DrawLocation与Size相乘。
默认情况下,引擎将使用左上角作为原点绘制材质。这将导致画笔纹理不在您要绘制的位置的中心。要解决此问题,需要将BrushSize除以2,然后减去上一步的结果。
之后,像这样连接所有东西:
最后,需要告诉引擎要停止绘制到渲染目标。将End Draw Canvas 添加到 Render Target节点并像这样连接它:
现在,无论何时执行DrawBrush,它都会首先将BrushMaterial的纹理设置为提供的纹理。之后,它将使用提供的位置和大小将BrushMaterial绘制到RenderTarget 。
这就是绘图功能。单击编译,然后关闭BP_Canvas。下一步是从相机执行线跟踪,然后在有命中时绘制画布。
8、来自相机的线跟踪
在画布上绘画之前,需要指定画笔纹理和大小。转到Blueprints文件夹并打开BP_Player。然后,将BrushTexture变量设置为T_Brush_01并将BrushSize 设置为500。这会将画笔设置为大小为500×500像素的猴子图像。
接下来需要进行光线跟踪。找到InputAxis Paint并创建以下设置:
只要玩家按住Paint的键绑定(在本例中,左键单击),这将执行从相机向前的线跟踪。
现在需要检查线迹是否击中画布。添加突出显示的节点:
现在,如果线条轨迹触及画布,DrawBrush函数将使用提供的画笔变量和 UV 位置执行。
在Find Collision UV节点起作用之前,需要更改两个设置。首先,转到LineTraceByChannel节点并启用Trace Complex。
其次,转到Edit\Project Settings然后Engine\Physics。启用Support UV From Hit Results,然后重新启动项目。
重新启动后,按播放并左键单击以在画布上绘画
甚至可以创建多个画布并分别在每个画布上绘画。这是可能的,因为每个画布都会动态创建自己的渲染目标。
在下一节中,将实现功能,以便玩家可以更改画笔大小。
9、更改画笔大小
打开BP_Player并找到InputAxis ChangeBrushSize节点。此轴映射设置为使用鼠标滚轮。要更改画笔大小,需要做的就是根据Axis Value更改BrushSize的值。为此,请创建以下设置:
每次玩家使用鼠标滚轮时,这将增加或减少BrushSize 。第一个乘法将确定加法或减法的速度。为了安全起见,添加了一个Clamp (float)以确保画笔大小不会低于0或高于1,000。
单击编译,然后返回主编辑器。在绘画时使用鼠标滚轮更改画笔大小。
在最后一部分中,您将创建让玩家更改画笔纹理的功能。
10、更改画笔纹理
首先,需要一个数组来保存玩家可以使用的纹理。打开BP_Player,然后创建一个数组变量。将类型设置为Texture 2D并将其命名为Textures。
然后,在Textures中创建三个元素。将它们中的每一个设置为:
- T_Brush_01
- T_Brush_02
- T_Brush_03
这些是玩家可以绘制的纹理。要添加更多纹理,只需将它们添加到此数组即可。
接下来,需要一个变量来保存数组中的当前索引。创建一个整数变量并将其命名为CurrentTextureIndex。
接下来,需要一种循环浏览纹理的方法。对于本教程,我设置了一个名为NextTexture的操作映射,设置为右键单击。每当玩家按下此按钮时,它都应该切换到下一个纹理。为此,请找到InputAction NextTexture节点并创建以下设置:
这将在玩家每次按下right-click时增加CurrentTextureIndex。如果索引到达数组的末尾,它将重置回0。最后,将 BrushTexture设置为适当的纹理。
单击编译,然后关闭BP_Player。按播放并按右键单击在纹理之间循环。
原文链接:
http://www.bimant.com/blog/render-targethui-painting/
相关推荐
- 如何设计一个优秀的电子商务产品详情页
-
加入人人都是产品经理【起点学院】产品经理实战训练营,BAT产品总监手把手带你学产品电子商务网站的产品详情页面无疑是设计师和开发人员关注的最重要的网页之一。产品详情页面是客户作出“加入购物车”决定的页面...
- 怎么在JS中使用Ajax进行异步请求?
-
大家好,今天我来分享一项JavaScript的实战技巧,即如何在JS中使用Ajax进行异步请求,让你的网页速度瞬间提升。Ajax是一种在不刷新整个网页的情况下与服务器进行数据交互的技术,可以实现异步加...
- 中小企业如何组建,管理团队_中小企业应当如何开展组织结构设计变革
-
前言写了太多关于产品的东西觉得应该换换口味.从码农到架构师,从前端到平面再到UI、UE,最后走向了产品这条不归路,其实以前一直再给你们讲.产品经理跟项目经理区别没有特别大,两个岗位之间有很...
- 前端监控 SDK 开发分享_前端监控系统 开源
-
一、前言随着前端的发展和被重视,慢慢的行业内对于前端监控系统的重视程度也在增加。这里不对为什么需要监控再做解释。那我们先直接说说需求。对于中小型公司来说,可以直接使用三方的监控,比如自己搭建一套免费的...
- Ajax 会被 fetch 取代吗?Axios 怎么办?
-
大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发!今天给大家带来的主题是ajax、fetch...
- 前端面试题《AJAX》_前端面试ajax考点汇总
-
1.什么是ajax?ajax作用是什么?AJAX=异步JavaScript和XML。AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX可以使网页实...
- Ajax 详细介绍_ajax
-
1、ajax是什么?asynchronousjavascriptandxml:异步的javascript和xml。ajax是用来改善用户体验的一种技术,其本质是利用浏览器内置的一个特殊的...
- 6款可替代dreamweaver的工具_替代powerdesigner的工具
-
dreamweaver对一个web前端工作者来说,再熟悉不过了,像我07年接触web前端开发就是用的dreamweaver,一直用到现在,身边的朋友有跟我推荐过各种更好用的可替代dreamweaver...
- 我敢保证,全网没有再比这更详细的Java知识点总结了,送你啊
-
接下来你看到的将是全网最详细的Java知识点总结,全文分为三大部分:Java基础、Java框架、Java+云数据小编将为大家仔细讲解每大部分里面的详细知识点,别眨眼,从小白到大佬、零基础到精通,你绝...
- 福斯《死侍》发布新剧照 "小贱贱"韦德被改造前造型曝光
-
时光网讯福斯出品的科幻片《死侍》今天发布新剧照,其中一张是较为罕见的死侍在被改造之前的剧照,其余两张剧照都是死侍在执行任务中的状态。据外媒推测,片方此时发布剧照,预计是为了给不久之后影片发布首款正式预...
- 2021年超详细的java学习路线总结—纯干货分享
-
本文整理了java开发的学习路线和相关的学习资源,非常适合零基础入门java的同学,希望大家在学习的时候,能够节省时间。纯干货,良心推荐!第一阶段:Java基础重点知识点:数据类型、核心语法、面向对象...
- 不用海淘,真黑五来到你身边:亚马逊15件热卖爆款推荐!
-
Fujifilm富士instaxMini8小黄人拍立得相机(黄色/蓝色)扫二维码进入购物页面黑五是入手一个轻巧可爱的拍立得相机的好时机,此款是mini8的小黄人特别版,除了颜色涂装成小黄人...
- 2025 年 Python 爬虫四大前沿技术:从异步到 AI
-
作为互联网大厂的后端Python爬虫开发,你是否也曾遇到过这些痛点:面对海量目标URL,单线程爬虫爬取一周还没完成任务;动态渲染的SPA页面,requests库返回的全是空白代码;好不容易...
- 最贱超级英雄《死侍》来了!_死侍超燃
-
死侍Deadpool(2016)导演:蒂姆·米勒编剧:略特·里斯/保罗·沃尼克主演:瑞恩·雷诺兹/莫蕾娜·巴卡林/吉娜·卡拉诺/艾德·斯克林/T·J·米勒类型:动作/...
- 停止javascript的ajax请求,取消axios请求,取消reactfetch请求
-
一、Ajax原生里可以通过XMLHttpRequest对象上的abort方法来中断ajax。注意abort方法不能阻止向服务器发送请求,只能停止当前ajax请求。停止javascript的ajax请求...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)
- JS Loop For (32)
