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({ ...
随机推荐
- Linux 部署redis集群
下载Redis 下载网址 http://www.redis.cn/download.html Redis需要gcc环境(如果已经有该环境跳过此步骤) yum install gcc-c++ 安装Red ...
- 解决root用户下都无权限操作的问题
问题现象: 有时系统设置了一种文件,无法编辑其所有权 sudo chown users:username {filename} 或者root用户下执行 chown users:username {f ...
- 【LOJ#575】【LNR#2】不等关系(容斥,动态规划,分治FFT)
[LOJ#575][LNR#2]不等关系(容斥,动态规划,分治FFT) 题面 LOJ 题解 一个暴力\(dp\),设\(f[i][j]\)表示考虑完了前\(i\)个位置,其中最后一个数在前面所有数中排 ...
- WPF自定义控件之图片控件 AsyncImage
AsyncImage 是一个封装完善,使用简便,功能齐全的WPF图片控件,比直接使用Image相对来说更加方便,但它的内部仍然使用Image承载图像,只不过在其基础上进行了一次完善成熟的封装 Asyn ...
- python基础(30):黏包、socket的其他方法
1. 黏包 1.1 黏包现象 让我们基于tcp先制作一个远程执行命令的程序(命令ls -l ; lllllll ; pwd) 同时执行多条命令之后,得到的结果很可能只有一部分,在执行其他命令的时候又接 ...
- 重新安装和更新所有的 nuget包
重新安装指定项目中所有的 nuget 包 Update-Package -ProjectName MyProject –reinstall 更新指定项目中所有的 nuget 包 Update-Pack ...
- Python之Beautiful Soup 4使用实例
Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库,它能够通过你喜欢的转换器实现惯用的文档导航.查找.修改文档的方式.Beautiful Soup 4 官方文档: ...
- MySQL基础之数据管理【2】
where条件筛选记录 select id,username,age from uesr where id=5; alter table user add userDesc varchar(100); ...
- 一语点醒技术人:你不是 Google(转载)
转载链接:https://www.infoq.cn/article/2017/06/U-no-Google 在为问题寻找解决方案时要先充分了解问题本身,而不是一味地盲目崇拜那些巨头公司.Ozan On ...
- hisi mmz模块驱动讲解
一.概述 如图所示,在海思平台上将内存分为两个部分:os内存和mmz内存.os内存指:由linux操作系统管理的内存:mmz内存:由mmz驱动模块进行管理供媒体业务单独使用的内存,在驱动加载时可以指定 ...