pixijs shader贴图扫光效果

直接贴代码

     const app = new PIXI.Application({ transparent: true });
document.body.appendChild(app.view); // Create background image
const background = PIXI.Sprite.from('/moban/bg_grass.jpg');
background.width = app.screen.width;
background.height = app.screen.height;
app.stage.addChild(background); // Stop application wait for load to finish
app.stop(); app.loader.add('shader', '/moban/shader.frag')
.load(onLoaded); let filter; // Handle the load completed
function onLoaded(loader, res) {
// Create the new filter, arguments: (vertexShader, framentSource)
filter = new PIXI.Filter(null, res.shader.data, {
customUniform: 0.0,
}); // === WARNING ===
// specify uniforms in filter constructor
// or set them BEFORE first use
// filter.uniforms.customUniform = 0.0 // Add the filter
background.filters = [filter]; // Resume application update
app.start();
}
var i=;
// Animate the filter
app.ticker.add((delta) => {
i-=0.03; filter.uniforms.customUniform = i;
});
})
shader.frag代码如下
precision mediump float;

varying vec2 vTextureCoord;
varying vec4 vColor; uniform sampler2D uSampler;
uniform float customUniform; void main(void)
{ vec2 uvs = vTextureCoord.xy;
vec4 fg = texture2D(uSampler, vTextureCoord);
fg.rgb += sin(customUniform + uvs.x * . + uvs.y * .) * 0.2;
gl_FragColor = fg;
// Merge texture + Glint }

pixijs shader贴图扫光效果的更多相关文章

  1. three.js后期之自定义shader通道实现扫光效果

    如果你还不知道如何在three.js中添加后期渲染通道,请先看一下官方的一个最简单的demo : github. 正如demo中所示的那样,我们的扫光效果,也是一个自定义的ShaderPass. 所以 ...

  2. pixijs shader 贴图溶解效果教程

    pixijs shader 贴图溶解效果教程 我直接贴代码了 没什么好讲解了 稍微有点基础的人应该能看懂 const app = new PIXI.Application({ transparent: ...

  3. CSS3实现文字扫光效果

    本篇文章由:http://xinpure.com/css3-text-light-sweep-effect/ CSS3 实现的文字扫光效果,几乎可以和 Flash 相媲美了 效果解析 我们分析一下实现 ...

  4. pixijs shader 扫光加强版

    pixijs shader 扫光加强版 const app = new PIXI.Application({ transparent: true }); document.body.appendChi ...

  5. pixijs shader fade 从左到有右淡入 从下到上淡入效果

    pixijs shader fade 从左到有右淡入     从下到上淡入效果 const app = new PIXI.Application({ transparent: true }); doc ...

  6. pixijs shader颗粒化显示贴图

    pixijs shader颗粒化显示贴图 const app = new PIXI.Application({ transparent: true }); document.body.appendCh ...

  7. pixijs shader 制作百叶窗效果

    pixijs shader 制作百叶窗效果 直接贴代码了 const app = new PIXI.Application({ transparent: true }); document.body. ...

  8. 封装bt轮播图淡入淡出效果样式

    <!--BT轮播图-->    <div data-ride="carousel" class="carousel slide carousel_inn ...

  9. 支持辉光效果的Label

    支持辉光效果的Label 效果 源码 https://github.com/YouXianMing/UI-Component-Collection 中的 FBGlowLabel // // FBGlo ...

随机推荐

  1. IT兄弟连 Java语法教程 数据类型3

    字符型 在Java中,用于存储字符串的数据类型是char.然而,C/C++程序员要当心:Java中的char与C或C++中的char是不同的.在C/C++中,char的宽度是8位.而在Java中不是这 ...

  2. 15-scrapy-redis两种形式分布式爬虫

    什么叫做分布式爬虫? 分布式爬虫,就是多台机器共用一个scrapy—redis程序高效爬取数据, 为啥要用分布式爬虫? 其一:因为多台机器上部署的scrapy会各自拥有各自的调度器,这样就使得多台机器 ...

  3. Jenkins的安装后配置

    配置Jenkins server 1.安装插件:选择自定义插件安装 Locale plugin Localization: Chinese (Simplified) Git Subversion HT ...

  4. 自定义异常类;键盘输入;try catch用法

    相关考点:自定义异常类:键盘输入:try catch用法 1.设计一个java程序,自定义一个异常类,从键盘输入一个字符串,如果等于“abc”,则抛出异常. public class MyExcept ...

  5. operator ->重载是怎么做到的?

    https://stackoverflow.com/questions/8777845/overloading-member-access-operators-c struct client { in ...

  6. oracle学习笔记(二十二) REF 动态游标

    动态游标 定义语法 --声明 $cursor_name$ sys_refcursor --打开动态游标 open $cursor_name$ is 查询语句; --关闭游标 close $cursor ...

  7. python基础(7):基本数据类型二(list、tuple)、range

    1. 列表 1.1 列表的介绍 列表是python的基础数据类型之⼀,其他编程语⾔也有类似的数据类型.比如JS中的数组, java中的数组等等.它是以[ ]括起来,每个元素⽤','隔开⽽且可以存放各种 ...

  8. Python中全局变量的引用与修改之格式影响

    先来看下面的代码及执行结果: a = 1 b = [2,3] def nums(): a = 2 b[0] = 0 print(a) print(b) print(a) print(b) nums() ...

  9. new一个对象的初始化过程

    ############################### 今天总结一下,new对象的初始化过程. ############################### 首先,当不含static成员时, ...

  10. iOS----------苹果警告

    Dear Developer, We identified one or more issues with a recent delivery for your app, "私募排排网-连接 ...