• 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=0;
            // 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*2.)) + tex)/2.;
        
        gl_FragColor = tex;
        // Merge texture + Glint
    
    
    }
  • 相关阅读:
    CSS3选择器之:nth-child(n)
    【转】JS中,中国标准时间转化为yyyy-MM-dd
    【转】浅谈JavaScript中forEach与each
    Can't connect to MySQL server (10060)
    Linux/CentOS下安装MySql RPM Bundle
    查看CentOS/Linux的版本信息
    Java中IO流,输入输出流概述与总结
    阿里历年经典Java面试题汇总
    架构师眼中的高并发架构
    Java面试经
  • 原文地址:https://www.cnblogs.com/newmiracle/p/11890861.html
Copyright © 2020-2023  润新知