pixijs shader教程

pixijs 写shader 底层都封装好了 只要改改片段着色器就行了 pxijs一定刚要设置支持透明 不然 颜色不支持透明度了

 

复制代码
const app = new PIXI.Application({ transparent: true });
document.body.appendChild(app.view);

// Create background image
const background = PIXI.Sprite.from('examples/assets/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', 'examples/assets/pixi-filters/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();
}

// Animate the filter
app.ticker.add((delta) => {
    filter.uniforms.customUniform += 0.04 * delta;
});
复制代码
examples/assets/pixi-filters/shader.frag 代码文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
precision mediump float;
 
varying vec2 vTextureCoord;
varying vec4 vColor;
 
uniform sampler2D uSampler;
uniform float customUniform;
 
void main(void)
{
   vec2 uvs = vTextureCoord.xy;
 
   vec4 fg = texture2D(uSampler, vTextureCoord);
 
 
   fg.r = uvs.y + sin(customUniform);
 
   //fg.r = clamp(fg.r,0.0,0.9);
 
   gl_FragColor = fg;
 
}

  直接改shader

posted @   newmiracle宇宙  阅读(1417)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示