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;