stars

client/src/scenes/background.js

@@ -1,25 +1,47 @@
 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: `
-                precision mediump float;
+const STARS = `
+//--- hatsuyuki ---
+// by Catzpaw 2016
+#ifdef GL_ES
+precision mediump float;
+#endif
 
-                uniform sampler2D uMainSampler;
-                uniform vec2 uResolution;
-                uniform float uTime;
+#extension GL_OES_standard_derivatives : enable
 
-                varying vec2 outTexCoord;
-                varying vec4 outTint;
+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);
+}
+`;
 
-                #define MAX_ITER 4
+const PLASMA = `
+precision mediump float;
 
-                void main( void )
-                {
+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);
@@ -46,8 +68,16 @@ const CustomPipeline = new Phaser.Class({
     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,
         });
     },
 });
@@ -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;
     }
 }