pixijs shader 扫光加强版
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 扫光加强版的更多相关文章
- pixijs shader贴图扫光效果
pixijs shader贴图扫光效果 直接贴代码 const app = new PIXI.Application({ transparent: true }); document.body.app ...
- three.js后期之自定义shader通道实现扫光效果
如果你还不知道如何在three.js中添加后期渲染通道,请先看一下官方的一个最简单的demo : github. 正如demo中所示的那样,我们的扫光效果,也是一个自定义的ShaderPass. 所以 ...
- CSS3实现文字扫光效果
本篇文章由:http://xinpure.com/css3-text-light-sweep-effect/ CSS3 实现的文字扫光效果,几乎可以和 Flash 相媲美了 效果解析 我们分析一下实现 ...
- pixijs shader 贴图溶解效果教程
pixijs shader 贴图溶解效果教程 我直接贴代码了 没什么好讲解了 稍微有点基础的人应该能看懂 const app = new PIXI.Application({ transparent: ...
- pixijs shader 案例
pixijs shader 案例 const app = new PIXI.Application({ transparent: true }); document.body.appendChild( ...
- pixijs shader fade 从左到有右淡入 从下到上淡入效果
pixijs shader fade 从左到有右淡入 从下到上淡入效果 const app = new PIXI.Application({ transparent: true }); doc ...
- pixijs shader颗粒化显示贴图
pixijs shader颗粒化显示贴图 const app = new PIXI.Application({ transparent: true }); document.body.appendCh ...
- pixijs shader 制作百叶窗效果
pixijs shader 制作百叶窗效果 直接贴代码了 const app = new PIXI.Application({ transparent: true }); document.body. ...
- pixijs shader教程
pixijs 写shader 底层都封装好了 只要改改片段着色器就行了 pxijs一定刚要设置支持透明 不然 颜色不支持透明度了 const app = new PIXI.Application({ ...
随机推荐
- 11-Django站点管理
站点管理 内容发布的部分由网站的管理员负责,包括查看.添加.修改.删除数据 开发这些重复的功能是一件单调乏味.缺乏创造力的工作,为此,Django能够根据定义的模型类自动地生成管理模块 在Django ...
- Mysql优化之Explain查询计划查看
我们经常说到mysql优化,优化中一种常见的方式就是对于经常查询的字段创建索引.那么mysql中有哪些索引类型呢? 一.索引分类1.普通索引:即一个索引只包含单个列,一个表可以有多个单列索引 2.唯一 ...
- CENTOS 7 内网网段在用IP地址检测Shell脚本优化版
脚本内容 #!/bin/bash ############################################################################# # 用途: ...
- SpringBoot中数据加密存储和获取后解密展示AttributeConverter的实现
1. 需求: 数据库存入数据的时候要加密处理,不同的字段加密方式不同. 界面上展示的时候要解密处理,解密方式相同. 2. 实现方案一: 定义公共的加密解密方法,然后在对应的字段上重写他的getset方 ...
- Spring Cloud Alibaba基础教程:Sentinel Dashboard同步Apollo存储规则
在之前的两篇教程中我们分别介绍了如何将Sentinel的限流规则存储到Nacos和Apollo中.同时,在文末的思考中,我都指出了这两套整合方案都存在一个不足之处:不论采用什么配置中心,限流规则都只能 ...
- 部署asp.net core Kestrel 支持https 使用openssl自签ssl证书
通过openssl生成证书 openssl req -newkey rsa:2048 -nodes -keyout my.key -x509 -days 365 -out my.cer openssl ...
- 训练DQN,报错:OSError: [Errno 12] Cannot allocate memory
训练DQN,报错:OSError: [Errno 12] Cannot allocate memory 问题介绍: 这两天在做强化学习的作业,使用 DQN 打 Atari 游戏,但在训练过程中,出现了 ...
- Python--方法/技巧在哪用的典型例子
就我个人在学习Python的过程中,经常会出现学习了新方法后,如果隔上几天不用,就忘了的情况,或者刚学习的更好的方法没有得到应用,还是沿用已有的方法,这样很不利于学习和掌握新姿势,从而拉长学习时间,增 ...
- XAF-从业务类继承 (XPO)
In this lesson, you will learn how to implement business classes for your application using the Busi ...
- 阿里P7工作总结:Spring MVC的工作原理,看完受益匪浅
这篇文章将深入探讨Spring框架的一部分——Spring Web MVC的强大功能及其内部工作原理. 项目安装 在本文中,我们将使用最新.最好的Spring Framework 5.我们将重点介绍S ...