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)
{ float lineWidth=0.1;
float modPart = mod(vTextureCoord.y, lineWidth);
float solidPart = (1.0 - customUniform) * lineWidth;
if(modPart > solidPart) {
gl_FragColor = texture2D(uSampler, vTextureCoord);
} else {
gl_FragColor = vec4(., ., ., .);
}
// Merge texture + Glint }
/moban/shader.frag 代码如上
pixijs shader 制作百叶窗效果的更多相关文章
- pixijs shader 贴图溶解效果教程
pixijs shader 贴图溶解效果教程 我直接贴代码了 没什么好讲解了 稍微有点基础的人应该能看懂 const app = new PIXI.Application({ transparent: ...
- 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.app ...
- 使用Unity3D自带动画系统制作下雨效果
之前看了以前版本的unity3d demo AngryBots ,觉得里面的下雨效果不错,刚好前段时间学习了,写出来跟大家分享下,直接开始. 使用自带动画系统制作下雨效果. 先制作下雨的雨滴涟漪 步骤 ...
- Unity3d中使用自带动画系统制作下雨效果(一)
之前看了以前版本的unity3d demo AngryBots ,觉得里面的下雨效果不错,刚好前段时间学习了,写出来跟大家分享下,直接开始. 使用自带动画系统制作下雨效果. 先制作下雨的雨滴涟漪. 步 ...
- javascript实例学习之六—百叶窗效果
一.要结合布局才能形成百叶窗的效果 二.开启两个定时器,第一个定时器控制的是百叶窗整体一次上翻,一次下翻:另一个控制百叶窗中的各页逐次翻转,形成层次效果.否则就成了普通的滚动广告的效果了 本实现借助于 ...
- PS快速制作下雪效果
PS快速制作下雪效果 具体的制作步骤如下: 1.打开PS,打开素材,打开窗口-动作 2.创建新动作,参数如下图 3.回到图层,建立一个图层,填充黑色,如下图 4.滤镜-像素化-点状化,参数如下图 5. ...
- unity3D 涂涂乐使用shader实现上色效果
unity3D 涂涂乐使用shader实现上色效果 之前我博文里面发过一个简单的通过截图方式来实现的模型上色方法,但是那个方法不合适商用,因为你需要对的很准确才可以把贴图完美截取下来,只要你手抖了一下 ...
- JS实现百叶窗效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- SpringBoot系列之@PropertySource用法简介
SpringBoot系列之@PropertySource用法简介 继上篇博客:SpringBoot系列之@Value和@ConfigurationProperties用法对比之后,本博客继续介绍一下@ ...
- 重磅来袭!Reactive 架构专场四城巡回演讲
Reactive 究竟是什么?Reactive 对架构设计的影响和冲击,以及给开发方式带来的改变有哪些?为什么阿里巴巴.Pivotal.Facebook 纷纷在生产环境中实践 Reactive? 本次 ...
- asp.net 关于gridview使用的一些小技巧
gridview中嵌套控件示例 —— 添加了一个linkbutton 前台: <asp:GridView ID="gv2" runat="server" ...
- java基础(29):JDBC、DBUtils
1. JDBC 1.1 JDBC概述 JDBC(Java Data Base Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问 ...
- 在RPA中使用Python批量生成指定尺寸的缩略图!比Ps好用!
前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. PS:如有需要Python学习资料的小伙伴可以加点击下方链接自行获取 htt ...
- PHP+Swoole 作为网络通信框架
PHP的异步.并行.高性能网络通信引擎,使用纯C语言编写,提供了PHP语言的异步多线程服务器,异步TCP/UDP网络客户端,异步MySQL,异步Redis,数据库连接池,AsyncTask,消息队列, ...
- C++ static静态成员
01 基本概念 静态成员:在定义前面加了static关键词的成员. class A { public: A(int a, int b):m_a(a),m_b(b) { num += m_a + m_b ...
- 熟悉的味道——从Java单例写到C++单例
设计模式中,单例模式是常见的一种.单例模式需要满足以下两个条件: 保证一个类只能创建一个示例: 提供对该实例的全局访问点. 关于单例最经典的问题就是DCL(Double-Checked Lock),今 ...
- mysql 之优化
# ### part1 : sql语句优化 # (1) mysql 执行流程 客户端: 发送链接请求,然后发送sql语句 服务端: 1.连接层: 提供和客户端链接的服务 show processlis ...
- Linux—网络通讯管理命令
一.ping命令 . ping 主机名 . ping 域名 [root@localhost ~]# ping www.baidu.com . ping IP地址 [root@localhost ~]# ...