pixijs shader fade 从左到有右淡入 从下到上淡入效果
pixijs shader fade 从左到有右淡入 从下到上淡入效果
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;
if(i>=1.9) {
i=1.9;
}
filter.uniforms.customUniform = i;
});
precision mediump float; varying vec2 vTextureCoord;
varying vec4 vColor; uniform sampler2D uSampler;
uniform float customUniform; float w = 0.2;
void main(void)
{ vec2 uv = vTextureCoord; float g = 1.5;
vec4 gamma = vec4(g, g, g, 1.0); vec4 color0 = pow(texture2D(uSampler, uv), gamma);
vec4 color1 = vec4(.,.,.,.); float duration = 2.0; float t = mod(float(customUniform), duration) / duration; float correction = mix(w, -w, t);
//从左到右需要时间递增
float choose = smoothstep(t + w, t - w, uv.x + correction); // clamped ramp
//从上到下需要时间递增
// float choose = smoothstep(t + w, t - w, uv.y + correction); // clamped ramp
//从下到上 需要时间递减
// float choose = smoothstep(t - w, t + w, uv.y + correction); // clamped ramp gl_FragColor = mix(color1, color0, choose); // lerp }
上面代码 算法 也可以学习下
pixijs shader fade 从左到有右淡入 从下到上淡入效果的更多相关文章
- [iOS]技巧集锦:UITableView自定义Cell中的控件无法完全对齐Cell的左边界和右边界
这是个很诡异的问题,由于一些特殊需求,我的TableView的Cell的背景色是透明,其中的控件会有背景色,第一个控件和最后一个控件我都用IB自动设了约束,对齐Cell的左边界和右边界,但是自动约束很 ...
- c++左值和右值
c++编程中如果出现把一个函数的返回值.强行转化后的对象 作为函数的参数传进去时,编译器会报错的情况.这时候就该注意了,你需要把该函数的参数类型前加上const修饰. 原因在于c++的左值和右值有所区 ...
- Oracle 左连接、右连接、全外连接、(+)号作用
分类: Oracle Oracle 外连接 (1)左外连接 (左边的表不加限制) (2)右外连接(右边的表不加限制) (3)全外连接(左右两表都不加限制) 外连接(Outer ...
- 【转】C#中如何实现左截取和右截取字符串
使用C#语法编写程序时,我们需要截取一个字符串左边或右边的若干个字符,该如何操作呢?在VB中可以使用left或right函数实现,C#中没有提供这样的函数呢?答案是没有.但是,C#中提供Substri ...
- c++ 左值 和 右值
什么是lvalue, 什么是rvalue? lvalue: 具有存储性质的对象,即lvalue对象,是指要实际占用内存空间.有内存地址的那些实体对象,例如:变量(variables).函数.函数指针等 ...
- C++中的左值与右值(二)
以前以为自己把左值和右值已经弄清楚了,果然发现自己还是太年轻了,下面的这些东西是自己通过在网上拾人牙慧,加上自己的理解写的. 1. 2. 怎么区分左值和右值:知乎大神@顾露的回答. 3. 我们不能直接 ...
- SQL Server中的连接查询【内连接,左连接,右连接,。。。】
在查询多个表时,我们经常会用“连接查询”.连接是关系数据库模型的主要特点,也是它区别于其它类型数据库管理系统的一个标志. 什么是连接查询呢? 概念:根据两个表或多个表的列之间的关系,从这些表中查询数据 ...
- sql左连接,右连接,内连接
1.sql查询时什么叫左连接和右连接 左连接和右连接都是外部连接,也就是区别于内部连接,它对不满足连接条件的行并不是象内部连接一样将数据完全过滤掉,而是保留一部分数据,行数不会减少. 左或 ...
- pageControl设置不居中显示,居左或居右
UIPageControl控件,默认是居中显示的,如下图: 在很多的APP中,会看到pageControl是居左或居右显示的,如下图: 如何控制pageControl的位置显示呢? 设置为居右的代 ...
随机推荐
- [Go] 轻量服务器框架tcp的粘包问题 封包与拆包
tcp传输的数据是以流的形式传输的,因此就没有办法判断到哪里结束算是自己的一个消息,这样就会出现粘包问题,多个包粘在一起了 可以使用这样一个自定义的形式来解决,一个消息分为 head+body he ...
- Centos7_sl命令跑火车
一.更新yum源 wget -O /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-6.repo 二.安装sl命令 yum ...
- 查看/运行jpynb文件
Windows OS:安装好pip包,能使用pip进行安装第三方包. cmd命令行: pip install jupyter jupyter notebook cd (xx.jpynb文件所在文件夹) ...
- MongoDB学习笔记(六、MongoDB复制集与分片)
目录: MongoDB部署模型 MongoDB可复制集 MongoDB读写分离 分片架构部署 最佳实践 MongoDB部署模型: 单机 -> 可复制集 -> 分片集群 MongoDB可复制 ...
- pwn-200
题目连接 https://adworld.xctf.org.cn/media/task/attachments/49bd95c78386423997fa044a9e750015 借鉴 https:// ...
- 硬盘容量统计神器WinDirStat
最近遇到C盘快要爆满的问题,我的笔记本是128G SSD + 1t HDD,给C盘分配的空间是80G固态,由于平时疏远管理,造成了C盘臃肿,迁移一些软件,但还是没有太好的解决,这是上知乎发现有大神推荐 ...
- PAT 1007 Maximum Subsequence Sum 最大连续子序列和
Given a sequence of K integers { N1, N2, …, NK }. A continuous subsequence is defined to be { Ni, Ni ...
- SpringMVC参数绑定,这篇就够了!
SpringMVC参数绑定,简单来说就是将客户端请求的key/value数据绑定到controller方法的形参上,然后就可以在controller中使用该参数了 下面通过5个常用的注解演示下如何进行 ...
- C#Winform窗体利用单例子窗体传值父窗体
简述:最近在做C#和HALCON编程,要用到单例的参数由子窗体改变父窗体的值.此例为简化版 1,点击系统设置 2,弹出子窗体,在其输入修改参数后点修改按钮 3,点击确定按钮后,关闭子窗体后,主窗体te ...
- Selenium(一):原理与安装、简单的使用
1. selenium原理 1.1 selenium介绍 Selenium是一个Web应用的自动化框架. 通过它,我们可以写出自动化程序,像人一样在浏览器里操作web界面. 比如点击界面按钮,在文本框 ...