Threejs 精灵火焰特效 Sprite Firey Aura effect
Threejs 精灵火焰特效 Sprite Firey Aura effect
- Threejs 精灵火焰特效 Sprite Firey Aura effect
- 核心代码
Threejs 精灵火焰特效 Sprite Firey Aura effect
最近看了一些关于用shader写的特效,感觉这个火焰一般的效果还有趣,我们经常在一些场景中也是会遇到,废话不多说先上效果:
其实原理也比较好理解,比较关键的在于:
1、通过上下左右的纹理采样的偏移来实现周围圆环的透明度设置;
2、流动的纹理结合
这样就行成这个效果
比较关键核心的逻辑,引用别人的图了
1、第一个left\right\top\bottom的偏移
2、求和的目的是覆盖全部图形的外围
3、求alpha通道的逆值才是圆环需要显示的通道值。
核心代码
vertexShader:
varying vec2 vUv;
void main() {vUv = uv;gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );}
fragmentShader:
uniform float time;
uniform float repeatX;
varying vec2 vUv;
uniform sampler2D map;
uniform sampler2D fireyMap;
uniform vec3 uColor;void main() {float offset = 0.09;vec4 finalcolor=texture2D(map, vec2(vUv.x, vUv.y));float left=texture2D(map, vec2(vUv.x + offset, vUv.y)).a;float right=texture2D(map, vec2(vUv.x - offset, vUv.y)).a;float top=texture2D(map, vec2(vUv.x,vUv.y + offset)).a;float bottom=texture2D(map, vec2(vUv.x,vUv.y - offset)).a;float result=left+right+top+bottom;result=result*(1.0-finalcolor.a);vec4 freyColor=texture2D(fireyMap, vec2(vUv.x , vUv.y - time * 0.1))*result;gl_FragColor = finalcolor + freyColor;
}
ShaderMaterial:
var customMaterial = new THREE.ShaderMaterial({uniforms: { time: { type: "f", value: 1.0},repeatX: { type: "f", value: 1.0},map: { value: undefined },fireyMap: { value: undefined },uColor: { type: "v3", value: new THREE.Vector4(0.0 , 1.0, 1.0) },},vertexShader: document.getElementById( 'vertexShader' ).textContent,fragmentShader: document.getElementById( 'fragmentShader' ).textContent,side: THREE.FrontSide,blending: THREE.AdditiveBlending,transparent: true
})
纹理参数设置:
var map = textureLoader.load( "textures/sprites/alarm.png" );
var fireyMap = textureLoader.load( "textures/sprites/3.png" );
fireyMap.wrapS = THREE.RepeatWrapping;
fireyMap.wrapT = THREE.RepeatWrapping;
createHUDSprites()
spriteC.material.uniforms.map.value = map;
spriteC.material.uniforms.fireyMap.value = fireyMap;
renader函数中不断循环的纹理坐标:
spriteC.material.uniforms.time.value += 0.01;
核心代码都在这里了
感兴趣的还在看下下面参考文章:
https://zhuanlan.zhihu.com/p/267320941
https://link.zhihu.com/?target=https%3A//www.patreon.com/posts/shader-graph-32245554
BIM树洞
做一个静谧的树洞君
用建筑的语言描述IT事物;
用IT的思维解决建筑问题;
共建BIM桥梁,聚合团队。
本学习分享资料不得用于商业用途,仅做学习交流!!如有侵权立即删除!!
微信公众号: BIM树洞
知乎专栏:BIM树洞
气氛组博客:http://www.31bim.com
BIM应用及咨询,CAD,Revit, OpenGL,图形开发交流,加Q群1083064224
Threejs 精灵火焰特效 Sprite Firey Aura effect相关推荐
- threejs精灵(Sprite)
Sprite精灵 Sprite叫精灵,计算机图形学中,精灵指包含于场景中的二维图像或动画(wiki).在threejs中,这样说明Sprtite(doc) : A sprite is a plane ...
- 少了五毛钱不卖的酷炫火焰特效!3D粒子哦!
先展示一下最终效果,然后再逼逼 最终效果 后边图片挺多的,使用流量看文章的,祝好运. 你听说过5毛钱特效吗? 我是个电视迷,在读大学的时候,经常通宵刷剧. 往往有很多引人入胜的情节,搭配着粗制滥造的特 ...
- 【Cocos2d-x】Sprite精灵类-创建Sprite精灵对象
精灵在Cocos2d-x中的地位就像一场电影中的主角,男主角/女主角,是一场电影中的灵魂所在.也是我们游戏中的灵魂 无论我们控制的对象还是电脑控制的对象,我们都称之为精灵,或者背景中的图片,也可以称为 ...
- 五、pink老师的学习笔记——CSS精灵技术(sprite)
5. CSS精灵技术(sprite) 重点 5.1 为什么需要精灵技术 图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户. 然而,一 ...
- html5火苗特效代码,视频添加火焰特效 视频画面中加动态的火苗效果
我想好了等我三十岁的时候还没有结婚的话,我就给那些结了婚.生了孩子.我随了份子钱的人打电话,让他们来参加我的三十岁大寿,我想我这样做他们应该可以理解吧!!好了来看看我们今天的教程吧,同样也是视频加特效 ...
- fcpx:火焰特效坍塌爆炸特效高清视频素材Vfx-Starter-Pack
今天小编带来 火焰特效坍塌爆炸特效高清视频素材Vfx-Starter-Pack推荐给大家!包含8种风格的视频,分别是EXPLOSIONS爆炸类, LASERS激光特效,BLASTS爆炸烟雾气流,EL ...
- SuperMap iClient3D for WebGL教程 粒子特效-基础火焰特效
SuperMap iClient3D for WebGL教程 粒子特效-基础火焰特效 粒子特效简介 使用粒子特效 完整代码 作者: NIck Cheng 粒子特效简介 粒子特效通常使用与要表现某些动态 ...
- Unity3D粒子系统之制作火焰特效
Unity3D粒子系统之制作火焰特效 本文将会介绍如何使用Unity内的粒子系统制作烟雾效果. 如果想了解Unity粒子系统中的基础属性,可以看这篇博客:Unity3D粒子系统之基础属性介绍 先上预览 ...
- AE火焰特效怎么做?两种方法快速实现高大上效果!
酷炫的AE火焰特效怎么做? 两种方式教你快速实现这么高大上的效果! 方法1:用到爱剪辑里的"烈火燎原"的动景特效 先可以看看加上火焰特效后,画面一下有了炸裂的视觉感. 把视频导入到 ...
- Aescripts Bang for mac(AE三维枪口火焰特效插件)
Aescripts Bang for mac是一款安装在After Effects使用的三维枪口火焰特效插件,bang插件主要用于快速制作逼真的枪火特效,支持自由调整颜色.位置.外观等属性,ae插件a ...
最新文章
- k8s的网络优化(metallb)
- lin-cms-dotnetcore功能模块的设计
- java中事务的管理
- Python递归算法
- 板子制作_使用Buildroot制作Ubootamp;Kernelamp;Rootfs
- java 8 biconsumcr_java8新特性
- Appium + python - online-install-apk
- wxpython开发实例_Python中使用wxPython开发的一个简易笔记本程序实例
- webAppbuilder微件使用教程1 快速入门
- itil 容量管理流程_ITIL的十个核心管理流程
- JQ 吸顶导航-Demo
- Cannot access a disposed object. A common cause of this error is disposing a context that was resolv
- supermap制作专题图并发布
- 孩子学python_小孩子的内心世界
- (增删查改+排序+文件存储)通讯录实现(附源码)
- krpano限制场景视角
- AARRR模型的使用注意事项【防坑提醒】
- IDEA超实用方法类注释模板大全
- python百度地图标注,Python+百度地图实现地址多点标注--用上BMap了
- Linux ls命令大全
热门文章
- excel多表数据自动关联
- 计算机中丢失d3dx9 43.dll,游戏提示“没有找到d3dx9_43.dll”的解决方法
- 为什么我没圣诞帽!?微信一键生成圣诞帽方法
- 记录一些遇见的bug——Lombok和Mapstruct的冲突导致,A component required a bean of type ‘com.XXX.controller.converter.
- 物联网关键技术————传感器技术
- 【转】win7 uac关闭
- 小米官网首页简单实现及分析
- 布隆过滤器在HBase中的应用
- python和mysql匹配吗_python使用mysql
- Power按键流程分析