pixijs shader颗粒化显示贴图
2024-09-04 15:28:52
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; float r(vec2 p){return fract(cos(mod(.,.*dot(p,vec2(23.140692632779,2.6651441426902)))));}
void main(void)
{ gl_FragColor=mix(texture2D(uSampler,vTextureCoord),vec4(.,.,.,.),((min(.,.*mod(customUniform,2.5)))<=r(vTextureCoord))?.:.); }
最新文章
- 我的MYSQL学习心得(十一) 视图
- 2014 39th ACM-ICPC 西安赛区 总结
- php一句话后门过狗姿势万千之后门构造与隐藏【二】
- POJ 3352 (边双连通分量)
- windows配置jdk
- 《Linux命令行大全》系列(一、shell是什么)
- HDU 1074 Doing Homework (dp+状态压缩)
- visio移动形状 上下左右键 移动滚动条
- Thinkphp使用phpexcel导入文件并写入数据库
- Python学习第二节——基础知识
- Jira的搭建
- python学习之旅(五)
- IDEA有用插件总结
- MyChatRoom——C#自制聊天室
- 日记整理---->;2016-11-26
- Python 核心编程
- Android-获取手机已经安装的程序
- Spark Streaming - DStream
- 如何为Drupal缓存对象指定缓存类?
- mysql 列转行,合并字段的方法