stars

client/src/scenes/background.js

@@ -1,53 +1,83 @@
 const Phaser = require('phaser');
 
+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 uResolution;
+uniform float uTime;
+
+varying vec2 outTexCoord;
+varying vec4 outTint;
+
+#define MAX_ITER 4
+
+void main( void )
+{
+    vec2 v_texCoord = gl_FragCoord.xy / uResolution;
+
+    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 = uTime * (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: `
-                precision mediump float;
-
-                uniform sampler2D uMainSampler;
-                uniform vec2 uResolution;
-                uniform float uTime;
-
-                varying vec2 outTexCoord;
-                varying vec4 outTint;
-
-                #define MAX_ITER 4
-
-                void main( void )
-                {
-                    vec2 v_texCoord = gl_FragCoord.xy / uResolution;
-
-                    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 = uTime * (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;
-                }
-        `,
+            fragShader: STARS,
         });
     },
 });
@@ -56,13 +86,13 @@ const CustomPipeline = new Phaser.Class({
 class Background extends Phaser.Scene {
     constructor() {
         super({ key: 'Background', active: true });
-        this.bgTime = 0.0;
+        this.bgTime = 10.0;
     }
 
     create() {
         const game = this.game;
         this.customPipeline = game.renderer.addPipeline('Custom', new CustomPipeline(game));
-        this.customPipeline.setFloat2('uResolution', 1600, 1000);
+        this.customPipeline.setFloat2('resolution', 1600, 1000);
 
         const sprite = this.add.sprite(0, 0);
         sprite.setPipeline('Custom');
@@ -71,7 +101,7 @@ class Background extends Phaser.Scene {
     }
 
     update() {
-        this.customPipeline.setFloat1('uTime', this.bgTime);
+        this.customPipeline.setFloat1('time', this.bgTime);
         this.bgTime += 0.005;
     }
 }