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 扫光加强版的更多相关文章

  1. pixijs shader贴图扫光效果

    pixijs shader贴图扫光效果 直接贴代码 const app = new PIXI.Application({ transparent: true }); document.body.app ...

  2. three.js后期之自定义shader通道实现扫光效果

    如果你还不知道如何在three.js中添加后期渲染通道,请先看一下官方的一个最简单的demo : github. 正如demo中所示的那样,我们的扫光效果,也是一个自定义的ShaderPass. 所以 ...

  3. CSS3实现文字扫光效果

    本篇文章由:http://xinpure.com/css3-text-light-sweep-effect/ CSS3 实现的文字扫光效果,几乎可以和 Flash 相媲美了 效果解析 我们分析一下实现 ...

  4. pixijs shader 贴图溶解效果教程

    pixijs shader 贴图溶解效果教程 我直接贴代码了 没什么好讲解了 稍微有点基础的人应该能看懂 const app = new PIXI.Application({ transparent: ...

  5. pixijs shader 案例

    pixijs shader 案例 const app = new PIXI.Application({ transparent: true }); document.body.appendChild( ...

  6. pixijs shader fade 从左到有右淡入 从下到上淡入效果

    pixijs shader fade 从左到有右淡入     从下到上淡入效果 const app = new PIXI.Application({ transparent: true }); doc ...

  7. pixijs shader颗粒化显示贴图

    pixijs shader颗粒化显示贴图 const app = new PIXI.Application({ transparent: true }); document.body.appendCh ...

  8. pixijs shader 制作百叶窗效果

    pixijs shader 制作百叶窗效果 直接贴代码了 const app = new PIXI.Application({ transparent: true }); document.body. ...

  9. pixijs shader教程

    pixijs 写shader 底层都封装好了 只要改改片段着色器就行了 pxijs一定刚要设置支持透明 不然 颜色不支持透明度了 const app = new PIXI.Application({ ...

随机推荐

  1. Leetcode练习题Longest Common Prefix

    Question: Longest Common Prefix Write a function to find the longest common prefix string amongst an ...

  2. 二、Mapper映射文件

    Mapper映射文件 mapper.xml映射文件主要是用来编写SQL语句的,以及一些结果集的映射关系的编写,还有就是缓存的一些配置等等. 在映射文件里面可以配置以下标签: 元素名称 描述 备注 se ...

  3. kfifo

    kfifo 的一些伪代码 kfifo_len() out = LOAD fifo->out smp_rmb() len = LOAD fifo->in - out kfifo_in() k ...

  4. 在.net core程序中使用EntityFrameok(非EF Core)

    最近用NoSQL较多写,用传统的EF到不多,但在一些.net core小程序中也小试牛刀过,不过当时用的是微软为.net core量身定制的Entity Framework Core,只是一些比较常规 ...

  5. Python笔记:设计模式之观察者模式

    观察者模式中的主题对象一般存在着一个其他服务依赖的核心服务,并且维护着其他依赖此核心服务的对象列表(即观察者或监视者列表),当主题对象发生变化时,观察者应该改变自己的状态或者进行某些操作 观察者模式中 ...

  6. Java入门——编写并运行第一个程序

    Java入门——编写并运行第一个程序 摘要:本文主要介绍如何使用Java语言编写并通过DOS运行简单的程序. 编写简单的程序 在D盘新建一个文本文档,输入如下代码: class Hello { pub ...

  7. 一文解读Spring全家桶 (转)

    Spring框架自2002年诞生以来一直备受开发者青睐,它包括SpringMVC.SpringBoot.Spring Cloud.Spring Cloud Dataflow等解决方案.有人亲切的称之为 ...

  8. 记录C#泛型

    常见的泛型类型 泛型类 class MyClass<T> { //...... } 泛型接口 interface GenericInterface<T> { void Gene ...

  9. apicloud如何实现优雅的下拉刷新与加载更多

    apicloud中提供下拉刷新监听事件api,也提供滚动到底部事件的监听,能够实现下拉刷新和滚动到底部加载更多功能,但是我们真的就满足实现功能了吗?将两个代码拼凑起来运行看看发现了什么?是的,在滚动到 ...

  10. c++ 模板特化与局部特化

    c++ 模板特化与局部特化 模板的由来是要处理泛化,也就是任何类型都可以处理.但是泛化的同时,如果针对某种特殊的类型,又更加效率的处理方法.c++提供针对特殊的类型,可以定义不同的处理方法.针对某种特 ...