mnml/phaser-client/src/scenes/background.js

const Phaser = require('phaser');

const CHART = `
#ifdef GL_ES
precision mediump float;
#endif

#extension GL_OES_standard_derivatives : enable

uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;

float rand(float n){return fract(sin(n) * 43758.5453123 * time * 0.00001);}

float noise(float p){
    float fl = floor(p);
    float fc = fract(p);
    // return mix(rand(fl), rand(fl + 1.0), p);
    return mix(rand(fl), rand(fl + 1.0), p);
}

float getLine(vec2 p, float y){
    float margin = 0.;

    vec2 pos = p;
    float a = time * 100. + y * 31.;
    vec2 lineCenter = vec2(0.5, y);

    pos -= lineCenter;
    pos *- mat2(cos(a), -sin(a), sin(a), cos(a));
    pos += lineCenter;


    float marginb = 0.005;
    float b = 0.004;
    float t = y + (noise((pos.x + y) * 100.) - 0.5) * 0.02;
    float f = (smoothstep(t - b, t, pos.y) - smoothstep(t, t + b, pos.y));
    f *= smoothstep(margin - marginb, margin, pos.x) - smoothstep(1. - margin, 1. -  margin + marginb, pos.x);
    f *= 0.8;

    float light = 0.5 + 0.5 * sin(time * .2);
    vec2 point = vec2(margin + light * (1. - margin * 2.), t);
    f += .008 / distance(pos, point);
    return f;
}

void main( void ) {
    vec2 p = gl_FragCoord.xy / resolution.xy;
    float f = 0.;

    for(int i = 0; i < 10; i++){
        f += getLine(p, 0.1 + (0.8) / 10. * float(i));
    }

    vec3 color = vec3(0., .4, .6) * f;
    gl_FragColor = vec4(color, 1.);
}`;

const STARS = `
//--- hatsuyuki ---
// by Catzpaw 2016
#ifdef GL_ES
precision mediump float;
#endif

#extension GL_OES_standard_derivatives : enable

uniform float time;
uniform vec2 resolution;
            float hash(float x){
                return fract(sin(x*133.3)*12.13);
            }
            void main(void){
            vec2 uv=(gl_FragCoord.xy*2.-resolution.xy)/min(resolution.x,resolution.y);
            vec3 c=vec3(.2,.2,.2);
            float a=4.4;
            float si=sin(a),co=cos(a);
            uv*=mat2(co,-si,si,co);
            uv*=length(uv+vec2(0,1.9))*.5+1.;
            float v=1.-sin(hash(floor(uv.x*200.))*2.);
            float b=clamp(abs(sin(5.*time*v+uv.y*(5./(2.+v))))-.95,0.,1.)*20.;
            c*=v*b;
            gl_FragColor = vec4(c,2);
}
`;

const PLASMA = `
precision mediump float;

uniform sampler2D uMainSampler;
uniform vec2 resolution;
uniform float time;

varying vec2 outTexCoord;
varying vec4 outTint;

#define MAX_ITER 4

void main( void )
{
    vec2 v_texCoord = gl_FragCoord.xy / resolution;

    vec2 p =  v_texCoord * 8.0 - vec2(20.0);
    vec2 i = p;
    float c = 1.0;
    float inten = .05;

    for (int n = 0; n < MAX_ITER; n++)
    {
        float t = time * (1.0 - (3.0 / float(n+1)));

        i = p + vec2(cos(t - i.x) + sin(t + i.y),
        sin(t - i.y) + cos(t + i.x));

        c += 1.0/length(vec2(p.x / (sin(i.x+t)/inten),
        p.y / (cos(i.y+t)/inten)));
    }

    c /= float(MAX_ITER);
    c = 1.5 - sqrt(c);

    vec4 texColor = vec4(0.01, 0.01, 0.01, 1.0);

    texColor.rgb *= (1.0 / (1.0 - (c + 0.05)));

    gl_FragColor = texColor;
}
`;

const CustomPipeline = new Phaser.Class({
    Extends: Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline,
    initialize: function CustomPipeline (game) {
        Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline.call(this, {
            game,
            renderer: game.renderer,
            fragShader: STARS,
        });
    },
});


class Background extends Phaser.Scene {
    constructor() {
        super({ key: 'Background', active: true });
        this.bgTime = 10.0;
    }

    create() {
        const game = this.game;
        this.customPipeline = game.renderer.addPipeline('Custom', new CustomPipeline(game));
        this.customPipeline.setFloat2('resolution', 1600, 1000);

        const sprite = this.add.sprite(800, 500);
        sprite.setPipeline('Custom');
        sprite.displayWidth = 1600 * window.devicePixelRatio;
        sprite.displayHeight = 1000 * window.devicePixelRatio;
    }

    update() {
        this.customPipeline.setFloat1('time', this.bgTime);
        this.bgTime += 0.005;
    }
}

module.exports = Background;