zoukankan      html  css  js  c++  java
  • 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
    
    
    }
  • 相关阅读:
    HomeWork2
    An error I have completed recently
    C#之规格说明书
    App上架审核指南翻译
    使用CollectionView做横向滑动分页效果:
    推荐一些CSS命名规范
    关于让左右2个DIV高度相等
    带有缩略图和文字提示的轮播图
    动画的定义:
    .Net基础篇_学习笔记_第五天_流程控制while循环002
  • 原文地址:https://www.cnblogs.com/newmiracle/p/11890861.html
Copyright © 2011-2022 走看看