闪电shader_【Shader案例】怎样做出自然的闪电

f6404464af0051bbd33d16c7bb33fc0a.gif

(本次案例的效果)

最近下载了一套特效,其中一个关于闪电制作的shader想法特别聪明,这里特地附上原代码,并教你怎么把源代码转换成连连看,下面开始正文。

7c6c8b4a8e41a1e4ed5ed254c8679ca2.png

这是原本shader定义的属性:_TintColor(闪电的颜色)_MainTex(一张RGB通道分开明显的贴图,这个很关键)_DistorTex1(影响扭曲的灰度图1,这里用的是噪波图)_DistorTex2(影响扭曲的灰度图2,这里用的是噪波图)_DistortSpeed(前两个变量控制_DistorTex1,后两个变量控制_DistorTex2)_Offset(控制闪电前后渲染顺序)

4182ac2065ea267908043b60b98571fd.png

(_MainTex选用的贴图)fe6991366c8b7ca5d34f0ca2570af07f.png

c7902f70661ea1fbffeed5881b32ad38.png

顶点函数的数据和赋值都不难。

49a2fe037ff1ca1780598ca7792e554b.png

片元函数里的内容也不难,但是非常的聪明,充分利用通道,并输出,最后呈现模拟闪电的效果。下面是连连看的部分:

9c45a4c8eb4c8efc1ba52a626bebd1b2.png

(先上完整图)

其实整个节点图可以分成三份来看第一部分:

7c42a7350f4c1475ffd9d1d78688578e.png

(_DistorTex1作用的实现)

第二部分:

b4bfa71b9347012695e194f96774d211.png

(_DistorTex2作用的实现)

第三部分:

1a312a2bb06d5c1044f5c6bd76de5caa.png

把刚刚_DistorTex1和_DistorTex2效果的末节点Multiply连到图中花圈的add节点上,然后再接到_MainTex的UV,最后添上颜色输出效果。图中粒子主体部分用的就是刚刚的shader,需要用到粒子的Trails,这里仅提供思路,过于细枝末节的部分就不展示了。f6404464af0051bbd33d16c7bb33fc0a.gif

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/420262.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL8数据恢复

binlog数据恢复恢复流程恢复流程 先登录MySQL flush log flush log这样会在MySQL binglog日志目录重新生成二进制文件 查看日志文件名 binlog.000033是我刚生成的日志,现在操作的是binlog.000032这个文件。相当于备份了下。 基于位置恢复(先查看位置…

前端学习(1347):用户的增删改查操作4修改

//创建http连接 const http require(http); //创建服务器 const app http.createServer(); //第三方模块导入 const mongoose require(mongoose); //获取连接 const url require(url); // const querystring require(querystring); //数据库连接地址 mongoose.connect(mon…

前端学习(1348):用户的增删改查操作5修改

//创建http连接 const http require(http); //创建服务器 const app http.createServer(); //第三方模块导入 const mongoose require(mongoose); //获取连接 const url require(url); // const querystring require(querystring); //数据库连接地址 mongoose.connect(mon…

parallelStream与stream

并行流🍭 多线程并发🍭 多线程并发 🍕stream与parallelStream 下面的代码分别用了parallelStream与stream进行迭代。获取对应的每一项值,和对应的线程名称。 package top.lel.jvm.sdk.stream;import java.util.List; import jav…

前端学习(1349):用户的增删改查操作6删除

//创建http连接 const http require(http); //创建服务器 const app http.createServer(); //第三方模块导入 const mongoose require(mongoose); //获取连接 const url require(url); // const querystring require(querystring); //数据库连接地址 mongoose.connect(mon…

0网卡开启_中标麒麟Linux v7系统下设置双网卡bond或team绑定详细过程

中标麒麟Linux v7系统下设置双网卡bond或team绑定详细过程。所谓bond,就是把多个物理网卡绑定成一个逻辑网卡,使用同一个IP工作,在增加带宽的同时也可以提高冗余性,一般使用较多的就是来提高冗余,分别和不同交换机相连…

前端学习(1350):用户的增删改查操作7增删改查

demo25.js //创建http连接 const http require(http); //创建服务器 const app http.createServer(); //第三方模块导入 /* const mongoose require(mongoose); */ //获取连接 const url require(url); // const querystring require(querystring);require(./demo26.js);…

基于aop的日志记录

aop实现日志记录记录工具切面logback配置测试记录工具 目标: 统计rest接口请求参数,请求地址,请求IP,响应数据,响应时间。方便后续问题排查,以及性能的总体分析。 基于springboot会使用面向切面编程基于l…

前端学习(1351)模板引擎

const template require(art-template); //绝对路径 模板中显示的数据 const path require(path); const views path.join(__dirname, index.art); const html template(views, {name: 张三,age: 20 }); console.log(html); index.art <!DOCTYPE html> <html la…

前端学习(1352)模板语法

demo27.js const template require(art-template); //绝对路径 模板中显示的数据 const path require(path); const views path.join(__dirname, 01.art); const html template(views, {name: 张三,age: 20,content: <h1>我是歌谣</h1> }); console.log(html)…

前端学习(1353)模板语法条件判断

const template require(art-template); //绝对路径 模板中显示的数据 const path require(path); const views path.join(__dirname, 02.art); const html template(views, {name: 张三,age: 20,/* content: <h1>我是歌谣</h1> */ }); console.log(html); 0…

MySql 缓存查询原理与缓存监控 和 索引监控

MySql缓存查询原理与缓存监控 And 索引监控 by:授客 QQ&#xff1a;1033553122 查询缓存 1.查询缓存操作原理 mysql执行查询语句之前&#xff0c;把查询语句同查询缓存中的语句进行比较&#xff0c;且是按字节比较&#xff0c;仅完全一致才被认为相同。如下&#xff0c;这两…

前端学习(1354):集合关联

const mongoose require(mongoose); mongoose.connect(mongodb://localhost/playground, { useUnifiedTopology: true }).then(() > console.log(数据库连接成功)).catch(err > console.log(err, 数据库连接失败)) const userSchema new mongoose.Schema({name: {type:…

ati jti jwt 和_一文搞懂JWT

Django REST framework JWT一、JWT简介二、JWT 组成headersignature三.使用手动生成jwt前端保存jwt一、JWT简介JWT(Json Web Token) 是一个开放标准(RFC 7519)&#xff0c;它定义了一种用于简洁&#xff0c;自包含的用于通信双方之间以 JSON 对象的形式安全传递信息的方法。JWT…

前端学习(1355)模板语法循环

const template require(art-template); //绝对路径 模板中显示的数据 const path require(path); const views path.join(__dirname, 03.art); const html template(views, {users: [{name: geyao,age: 20,sex: 男}, {name: xiao,age: 20,sex: 男}, {name: hau,age: 20,se…

c++检测ip是否匹配子网掩码_网络工程师从入门到精通通俗易懂系列 | ARP和IP这篇文章讲的相当详细了,这么基础的知识往往也是最容易遗忘的!...

网络层负责将报文从源送到目的包括TCP建立连接&#xff0c;也需要依靠网络层&#xff0c;来将这个连接请求&#xff0c;传递到对方。为设备提供逻辑地址&#xff0c;也就是IP地址主流是IPV4地址IPV4地址&#xff0c;为32位二进制数&#xff0c;长度4个字节&#xff0c;1字节等于…

前端学习(1357) :模板配置

const template require(art-template); //绝对路径 模板中显示的数据 const path require(path); const views path.join(__dirname, 07.art); const dateFormat require(dateFormat) template.defaults.imports.dateFormat dateFormat; const html template(views, {ti…

使用Office Word 2010/2013 发布文章到博客园

使用Office Word 2010/2013 发布文章到博客园 ☆&#xff1a;参考http://www.cnblogs.com/liuxianan/archive/2013/04/13/3018732.html&#xff1b; 软件准备&#xff1a;Office Word2010/2013 初次使用&#xff0c;必要的配置&#xff1a; Office Word2010&#xff1a;代开wor…

前端学习(1355) 子模板

const template require(art-template); //绝对路径 模板中显示的数据 const path require(path); const views path.join(__dirname, 04.art); const html template(views, {msg: 我是首页,name: geyao,age: 20 }); console.log(html); 04.art {{include./index.art}} {…

前端学习(1358) :渲染模板默认

const template require(art-template); //绝对路径 模板中显示的数据 const path require(path);const dateFormat require(dateFormat) template.defaults.imports.dateFormat dateFormat; template.defaults.root path.join(__dirname); template.defaults.extname .a…