stars

client/src/scenes/background.js

@@ -1,12 +1,34 @@
 const Phaser = require('phaser');
 
-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: `
+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;
@@ -47,7 +69,15 @@ const CustomPipeline = new Phaser.Class({
 
     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,
         });
     },
 });
@@ -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;
     }
 }