如果你还不知道如何在three.js中添加后期渲染通道,请先看一下官方的一个最简单的demo : github

正如demo中所示的那样,我们的扫光效果,也是一个自定义的ShaderPass。

所以,我们得写一个shader来实现想要的效果,这里介绍一下实现的思路。

1.在自定义通道上,先获取场景原本的uv,然后原样输出;

2.在fs里,降低gl_FragColor的亮度(乘以小于1.0的数,这里取0.3),这样,画面立马暗了下来;

3.画一条直线 y = -x;在这条直线上的部分颜色亮度为1.0,实际上光束是有宽度的,所以我们取一下abs(dy) < 0.1的时候亮度为1.0,那么光束的宽度为0.2 * 根号2;

4.光束内的abs(dy),范围是0~0.1,那么可以用smoothstep函数来做一个平滑插值处理,使得光束的亮度由中间向两边平滑过渡;

5.添加uniform参数time实现动画,此时直线函数变为y = -x + time,随着time值的变化,自然y值也会变化,最终的效果就是光束左右移动,如动图所示;

下面上shader代码:

  /**
* author:桔子桑
* time:2019.10.13
*/
THREE.SweepingLightShader = {
uniforms: {
"tDiffuse": {type: "t", value: null},
"time":{type: "f", value: -1.0}
},
vertexShader:`
varying vec2 vUv;
varying vec3 iPosition;
void main(){
vUv = uv;
iPosition = position;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragmentShader:`
uniform float time;
uniform sampler2D tDiffuse;
varying vec2 vUv;
varying vec3 iPosition;
void main(){
vec4 texel = texture2D(tDiffuse, vUv);
float x = iPosition.x;
float lighty = -x*1.2 + time;
float alpha = abs(iPosition.y - lighty);
if(alpha < 0.1){
float a = 1.0 - alpha / 0.1;
float enda = smoothstep(0.0,1.0,a) + 0.3;
gl_FragColor = texel * enda;
}else{
gl_FragColor = texel * 0.3;
}
}
`
};

为了实现动画,我们需要在每次animate的时候,适当地增减这个time参数的值:

                //扫光效果
SweepingLightShader = new THREE.ShaderPass( THREE.SweepingLightShader );
composer.addPass(SweepingLightShader);
            var type = 'add';
function animate() {
requestAnimationFrame( animate );
var time = SweepingLightShader.uniforms[ 'time' ].value;
if(time > 1.0){
type = 'reduce'
}else if(time < -1.0){
type = 'add';
}
if(type =='add'){
SweepingLightShader.uniforms[ 'time' ].value += 0.01;
}else{
SweepingLightShader.uniforms[ 'time' ].value -= 0.01;
}
composer.render();
}

three.js后期之自定义shader通道实现扫光效果的更多相关文章

  1. pixijs shader贴图扫光效果

    pixijs shader贴图扫光效果 直接贴代码 const app = new PIXI.Application({ transparent: true }); document.body.app ...

  2. Three.js粒子特效,shader渲染初探(一篇非常详细的介绍)

    Three.js粒子特效,shader渲染初探 转载来源:https://juejin.im/post/5b0ace63f265da0db479270a 这大概是个序 关于Three.js,网上有不多 ...

  3. unity中使用自定义shader进行光照贴图烘培无法出现透明度的坑爹问题

    最近开发中在对场景进行光照贴图烘焙时发现一个坑爹问题,在使用自定义shader的时候,shader命名中必须包含Transparent路径,否则烘焙的时候不对alpha通道进行计算,烘焙出来都是狗皮膏 ...

  4. bgfx入门练习3——编译自定义Shader

    马个鸡,总算编译过了自定义Shader,在此感谢自己,感谢自己,以及感谢自己.没有自己的努力,我是不可能解决这个问题的,自己真是太叼了.妈的智障!!! 管方那屎一样的make工具根本没用,反正我是折腾 ...

  5. Cocos2d-x项目移植到WP8系列之九:使用自定义shader

    本文原链接:http://www.cnblogs.com/zouzf/p/3995132.html 有时候想得到一些例如灰度图等特殊的渲染效果,就得用到自定义shader,关于shader的一些背景知 ...

  6. jquery.validate.js使用之自定义表单验证规则

    jquery.validate.js使用之自定义表单验证规则,下面列出了一些常用的验证法规则 jquery.validate.js演示查看 jquery validate强大的jquery表单验证插件 ...

  7. ScrollReveal.js – 帮助你实现超炫的元素运动效果

    ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果,帮助你的网站增加吸引力.只需要给元素增加 data-scrollreveal 属性,当元素进入可视区域的时候会自动被触发设置 ...

  8. js矩阵菜单或3D立体预览图片效果

    js矩阵菜单或3D立体预览图片效果 下载地址: http://files.cnblogs.com/elves/js%E7%9F%A9%E9%98%B5%E8%8F%9C%E5%8D%95%E6%88% ...

  9. Android 自定义View修炼-自定义HorizontalScrollView视图实现仿ViewPager效果

    开发过程中,需要达到 HorizontalScrollView和ViewPager的效果,于是直接重写了HorizontalScrollView来达到实现ViewPager的效果. 实际效果图如下: ...

随机推荐

  1. Hbuilder 开发微信小程序的代码高亮

    一.点击“工具”-“选项”-搜索“文件关联” 二.点击“添加”文件类型,点击确定 三.在相关联的编辑器中点击“添加”按钮,选择CSS Editor,点击确定,重新打开 *.wxss 类型的文件即可 其 ...

  2. Linux文件系统之删除文件、文件夹(rm,rmdir)

    rm命令,rmdir命令 rm命令Remove,功能:1)删除目录,2)删除文件.  (可以递归的删除指定目录的所有文件及子目录) 注意:rm是一个危险的命令,使用的时候要特别当心,尤其对于初学者来说 ...

  3. mali gpu debugger

    https://community.arm.com/developer/tools-software/graphics/b/blog/posts/accelerating-mali-gpu-analy ...

  4. metal feature and specification

    https://developer.apple.com/metal/Metal-Feature-Set-Tables.pdf 宝贝 https://developer.apple.com/metal/ ...

  5. bind支持mysql

    最近打算将bind的记录信息存入到数据库中去,网上找了下,原来早有老外写好了mysql-bind的补丁,重新编译bind即可实现bind支持mysql存储.(http://mysql-bind.sou ...

  6. C语言之volatile

    emOsprey  鱼鹰谈单片机 2月21日 预计阅读时间: 4 分钟 和 const 不同(关于 const 可以看 const 小节),当一个变量声明为 volatile,说明这个变量会被意想不到 ...

  7. Task , Thread 学习

    1.任务StartNew后就开始执行,使用Wait()来确保任务结束后继续 static void Main(string[] args) { try { int numberOfUsers = 10 ...

  8. [Luogu] 树

    https://www.luogu.org/problemnew/show/P4092 树剖 + 线段树区间修改,单点查询 #include <bits/stdc++.h> using n ...

  9. php 一段 shmop

    $size = 1024*1024; $shm_key = ftok(__FILE__, 't'); $shm_id = shmop_open($shm_key, "c", 064 ...

  10. SecureCRT的安装与破解,详细过程

    使用SecureCRT可以方便用户在windows环境下对linux主机进行管理,这里为大家讲一下SecureCRT的破解方法,仅供大家参考学习: 1.首先在本站下载SecureCRT 7.3.6最新 ...