ShaderGraph制作“红旗迎风飘扬”效果(Unity2019版)

2023-10-09 05:30

本文主要是介绍ShaderGraph制作“红旗迎风飘扬”效果(Unity2019版),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

    • 零、准备“旗面”游戏物体
    • 一、核心1 模仿旗面的“起伏”
    • 二、核心2 让旗面的“吹动”起来
    • 三、几点改进
        • A、 “旗面的摆动幅度”改进01:前后对称
        • B、 “旗面的摆动幅度”改进02:从左往右逐渐增大
        • C、 “旗面的飘动方向”改进01:只让在X轴方向飘
        • D、 “旗面的飘动方向”改进02:完成“”只让在X轴方向飘”后,让它从左往右飘
        • E、 重要参数做成属性,让其在Inspector里能手动调节大小
        • F、 单面渲染变双面
        • G、 改变光滑度
    • 注意、修改完ShaderGraph后,点击SaveAsset,才起作用(另附总图)

零、准备“旗面”游戏物体

  旗面是一个平面,右键创建的3D物体里是平面的,有Quad和Plan,模仿旗面“起伏”的原理是对平面的顶点,做不同程度的抬升:Quad从线框图中看,是一个长方形,只有四个顶点;Plane是10x10个长方形方格,11x11有121个顶点——所以Plan较为合适。(Quad、Plane线框图,如下Scene视图所示)在这里插入图片描述

  Unity提供的Plane里长方形方格,顶点数就121个,顶点数较少,模拟起伏,可能不够理想,如果我们想拥有更多顶点,可用工具PreBuilder自建Plane:
      先按照下面蓝色链接的讲述,导入PreBuilder工具
       【游戏开发建模】教你使用Unity ProBuilder制作基础模型,搭建场景原型( 保姆级教程 | Unity 2021最新版)
      再用PreBuilder自建Plane(20x20个长方形方格,拥有21x21,共441个顶点;Shape Tool 面板,最下有Build按钮,别忘了点击),步骤如下两图,结果如第三图
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

一、核心1 模仿旗面的“起伏”

创建PBR Graph(下图一),
把“噪点”(Simple Noise)与“模型坐标”(选项为Object的Position)相加,连给“顶点坐标”(Vertex Position)——可以理解为,在地面上种植了一层(高度从0到1)的草(下图二),
把Shader Graph 的预览图,设置成Plane,PBR Master颜色设为红色(修改Aldobe相的颜色)观察效果,注意SaveAsset保存此Shader Graph ;或直接用此Asset里ShaderGraph,右键创建Materail,赋给我们自建的Plane(如图三)。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、核心2 让旗面的“吹动”起来

原理里让噪点的UV,随时间进行偏移(Offset)——我们把噪点的Scale从500改为10,效果会变明显(也是要注意保存SaveAsset),连线及动图如下
在这里插入图片描述
请添加图片描述

三、几点改进

A、 “旗面的摆动幅度”改进01:前后对称

在这里插入图片描述
我们从顶视图观察,橘色框是原Plane的位置,加噪点后,Plane朝着单一方向进行了偏移——真实的吹动,应该是Plane前后两个方向都有偏移——我们把噪点减去0.5,让其取值范围从[0,1]变成[-0.5,0.5]
在这里插入图片描述
请添加图片描述

B、 “旗面的摆动幅度”改进02:从左往右逐渐增大

把UV节点的R分离出来,与噪点节点相乘:原理是R在预览图(Preview节点)中可以看到,它从左到右,依次由黑到白,预示着它的值从0到1——它与噪点节点的多个由0到1的区域,相乘后,结果值在0到1的范围内,从左到右依次此增大,比如左中右采样依次是0,0.27,1。
在这里插入图片描述
请添加图片描述

C、 “旗面的飘动方向”改进01:只让在X轴方向飘

在这里插入图片描述

TillingAndOffset节点的Offset选项,可以看到它是个二维向量,默认值是(0,0)
我们把Time节点连给它,此时值是(1,1)整个噪点在从右上,往左下偏移
请添加图片描述
我们只保留X值,让其在X方向偏移——把Offset项分离出来(建Vector2节点),让Vector2的X=1,Y=0
在这里插入图片描述
连上Time
在这里插入图片描述
此时,噪点的UV只在X轴上发生偏移
请添加图片描述

D、 “旗面的飘动方向”改进02:完成“”只让在X轴方向飘”后,让它从左往右飘

此时是往左飘,我们希望往右飘——给Time节点的输出,乘-1
请添加图片描述

E、 重要参数做成属性,让其在Inspector里能手动调节大小

希望飘动速度可调:在Time后的乘法节点前,再加一维向量Vector1——右键Convert To Property,并命名为Speed
在这里插入图片描述
请添加图片描述

希望起伏多少可调:在噪点节点的Scale项前,再加一维向量Vector1——右键Convert To Property,并命名为Count
在这里插入图片描述

希望振幅可调:在UV节点分出的R后,加乘法节点,让其乘一维向量Vector1——右键Convert To Property,并命名为amplitude
在这里插入图片描述
最终我调的参数及效果
在这里插入图片描述
请添加图片描述

F、 单面渲染变双面

图一是正面,图二是背面——背面看不到,也就是说它是单面渲染——我们用图三改成双面的
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

G、 改变光滑度

在这里插入图片描述

注意、修改完ShaderGraph后,点击SaveAsset,才起作用(另附总图)

在这里插入图片描述
在这里插入图片描述

这篇关于ShaderGraph制作“红旗迎风飘扬”效果(Unity2019版)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/170666

相关文章

springboot项目打jar制作成镜像并指定配置文件位置方式

《springboot项目打jar制作成镜像并指定配置文件位置方式》:本文主要介绍springboot项目打jar制作成镜像并指定配置文件位置方式,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录一、上传jar到服务器二、编写dockerfile三、新建对应配置文件所存放的数据卷目录四、将配置文

Kotlin Compose Button 实现长按监听并实现动画效果(完整代码)

《KotlinComposeButton实现长按监听并实现动画效果(完整代码)》想要实现长按按钮开始录音,松开发送的功能,因此为了实现这些功能就需要自己写一个Button来解决问题,下面小编给大... 目录Button 实现原理1. Surface 的作用(关键)2. InteractionSource3.

使用WPF实现窗口抖动动画效果

《使用WPF实现窗口抖动动画效果》在用户界面设计中,适当的动画反馈可以提升用户体验,尤其是在错误提示、操作失败等场景下,窗口抖动作为一种常见且直观的视觉反馈方式,常用于提醒用户注意当前状态,本文将详细... 目录前言实现思路概述核心代码实现1、 获取目标窗口2、初始化基础位置值3、创建抖动动画4、动画完成后

uniapp小程序中实现无缝衔接滚动效果代码示例

《uniapp小程序中实现无缝衔接滚动效果代码示例》:本文主要介绍uniapp小程序中实现无缝衔接滚动效果的相关资料,该方法可以实现滚动内容中字的不同的颜色更改,并且可以根据需要进行艺术化更改和自... 组件滚动通知只能实现简单的滚动效果,不能实现滚动内容中的字进行不同颜色的更改,下面实现一个无缝衔接的滚动

Java实现图片淡入淡出效果

《Java实现图片淡入淡出效果》在现代图形用户界面和游戏开发中,**图片淡入淡出(FadeIn/Out)**是一种常见且实用的视觉过渡效果,它可以用于启动画面、场景切换、轮播图、提示框弹出等场景,通过... 目录1. 项目背景详细介绍2. 项目需求详细介绍2.1 功能需求2.2 非功能需求3. 相关技术详细

使用animation.css库快速实现CSS3旋转动画效果

《使用animation.css库快速实现CSS3旋转动画效果》随着Web技术的不断发展,动画效果已经成为了网页设计中不可或缺的一部分,本文将深入探讨animation.css的工作原理,如何使用以及... 目录1. css3动画技术简介2. animation.css库介绍2.1 animation.cs

Flutter实现文字镂空效果的详细步骤

《Flutter实现文字镂空效果的详细步骤》:本文主要介绍如何使用Flutter实现文字镂空效果,包括创建基础应用结构、实现自定义绘制器、构建UI界面以及实现颜色选择按钮等步骤,并详细解析了混合模... 目录引言实现原理开始实现步骤1:创建基础应用结构步骤2:创建主屏幕步骤3:实现自定义绘制器步骤4:构建U

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件:四、dhtmlx

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》:本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2