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;
});
precision mediump float;

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

pixijs shader 扫光加强版的更多相关文章

  1. pixijs shader贴图扫光效果

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

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

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

  3. CSS3实现文字扫光效果

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

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

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

  5. pixijs shader 案例

    pixijs shader 案例 const app = new PIXI.Application({ transparent: true }); document.body.appendChild( ...

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

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

  7. pixijs shader颗粒化显示贴图

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

  8. pixijs shader 制作百叶窗效果

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

  9. pixijs shader教程

    pixijs 写shader 底层都封装好了 只要改改片段着色器就行了 pxijs一定刚要设置支持透明 不然 颜色不支持透明度了 const app = new PIXI.Application({ ...

随机推荐

  1. python3中的数字类型

    今天在学校机房刷python题时发现自己对python中的数字类型不理解,回寝室后百度一下. 现在做一个总结. python中的数字类型有: 整数,布尔值,复数,科学计数法,浮点数 1,整数,大小没有 ...

  2. Long Jumps CodeForces - 479D

    E - Long Jumps CodeForces - 479D Valery is a PE teacher at a school in Berland. Soon the students ar ...

  3. 天天向上的力量python(举一反三)

    天天向上的力量python实例(举一反三) 实例1: 一年365天,以第1天的能力值为基数,记为1.0,当好好学习时能力值相比前一天提高0.1%,没有学习实能力值相比前一天下降0.1%. 问:每天努力 ...

  4. MVC过滤器:自定义授权过滤器

    一.授权过滤器 授权过滤器用于实现IAuthorizationFilter接口和做出关于是否执行操作方法(如执行身份验证或验证请求的属性)的安全策略.AuthorizeAttribute类继承了IAu ...

  5. MySQL学习——查询表里的数据

    MySQL学习——查询表里的数据 摘要:本文主要学习了使用DQL语句查询表里数据的方法. 数据查询 语法 select [distinct] 列1 [as '别名1'], ..., 列n [as '别 ...

  6. C#操作SQLite数据库增、删、改、查 欢迎转载

    C#操作SQLite数据库增.删.改.查 欢迎转载 转载记得留下链接地址哦!!! 最近项目上要使用SQLite数据库,不怕大伙笑话毕业四年多了,一直使用Oracle或者MySQL或者SQLServer ...

  7. Wireshark分析实战:某达速递登录帐号密码提取

    - 准备工作 首先,备好Wireshark,打开,在外网网卡上抓包. 其次,用浏览器访问http://www.yundaex.com/cn/index.php,并在手机上下载安装其APP,找到登录页面 ...

  8. nginx 文件服务器配置,模板配置文件,有注释

    # For more information on configuration, see: # * Official English Documentation: http://nginx.org/e ...

  9. Django框架(二十二)-- Django rest_framework-解析器

    一.解析器的作用 根据请求头 content-type 选择对应的解析器对请求体内容进行处理,将传过来的数据解析成字典 二.使用解析器 1.局部使用 在视图类中重定义parser_classes即可, ...

  10. 渗透测试学习 十、 MSsql注入下

    大纲:MySQL介绍及操作 MySQL注入原理 MySQL注入其他操作 一.MySQL介绍及操作 介绍 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle ...