[docker-push] Add factions special effect for map

bin/convert-textures.js

@@ -1,3 +1,5 @@
+/* eslint-disable no-console */
+const childProcess = require('child_process')
 const imagemin = require('imagemin')
 const imageminWebp = require('imagemin-webp')
 const imageminZopfli = require('imagemin-zopfli')
@@ -10,7 +12,8 @@ const textures = {
   text_pattern: {},
   map_text: { hqAvailable: true },
   shadesmar_map_text: { hqAvailable: true },
-  hover_text: {}
+  hover_text: {},
+  factions: { hqAvailable: true }
 }
 
 const basePath = './public/img/textures'
@@ -23,29 +26,34 @@ Promise.all(Object.keys(textures).flatMap((name) => {
     files.push(`${basePath}/hq_${name}.png`)
   }
 
-  return imagemin(files, {
+  const changedFiles = files.filter(path => childProcess.execSync(`git status -s ${path}`).toString().length > 0)
+
+  if (changedFiles.length === 0) {
+    console.log(`Files for texture '${name}' haven't changed, ignoring...`)
+    return
+  }
+
+  console.log(`Optimizing and converting texture '${name}'...`)
+
+  return imagemin(changedFiles, {
     destination: basePath,
     plugins: [
       imageminZopfli({ more: true })
     ]
   }).then(() => {
-    // eslint-disable-next-line no-console
     console.log(`Optimized PNGs for texture '${name}'`)
 
-    return imagemin(files, {
+    return imagemin(changedFiles, {
       destination: basePath,
       plugins: [
         imageminWebp({ quality: texture.lossy === true ? 90 : 100, lossless: texture.lossy !== true })
       ]
     })
   }).then(() => {
-    // eslint-disable-next-line no-console
     console.log(`Converted texture '${name}' to WEBP`)
   })
 })).catch((error) => {
-  // eslint-disable-next-line no-console
   console.error(error)
 }).then(() => {
-  // eslint-disable-next-line no-console
   console.log('All textures optimized and converted successfully')
 })

src/components/editor/EventProperties.vue

@@ -92,6 +92,9 @@
         <option value="shattering">
           The Shattering
         </option>
+        <option value="factions">
+          Factions after OB
+        </option>
       </select>
 
       <label>Tags</label>

src/components/map/Factions.js

@@ -0,0 +1,76 @@
+import { AdditiveBlending, Group, Mesh, PlaneBufferGeometry, ShaderMaterial } from 'three'
+import factionsFragmentShader from '@/components/map/factionsFragmentShader'
+import { clamp01 } from '@/utils.js'
+
+export default class Factions extends Group {
+  constructor (texture) {
+    super()
+    this.position.set(0, 0, 1)
+    this.frustumCulled = false
+
+    this.enabled = false
+    this.entering = true
+    this.t = 0
+
+    this.init(texture)
+  }
+
+  init (texture) {
+    const geo = new PlaneBufferGeometry(2, 2, 1, 1)
+    const mat = new ShaderMaterial({
+      // language=GLSL
+      vertexShader: `
+        varying vec2 vUv;
+
+        void main() {
+          vUv = uv;
+
+          gl_Position = projectionMatrix * modelViewMatrix * vec4(position * vec3(512, 256, 1.0), 1.0);
+        }
+      `,
+      fragmentShader: factionsFragmentShader,
+      uniforms: {
+        Texture: { value: texture },
+        Time: { value: 0 },
+        Progress: { value: 0 }
+      },
+      depthTest: false,
+      premultipliedAlpha: true,
+      transparent: true,
+      blending: AdditiveBlending
+    })
+
+    this.plane = new Mesh(geo, mat)
+    this.plane.frustumCulled = false
+
+    this.add(this.plane)
+  }
+
+  enter () {
+    this.entering = true
+    this.enabled = true
+  }
+
+  leave () {
+    this.entering = false
+    this.enabled = true
+  }
+
+  update (camera, timestamp) {
+    if (!this.enabled) {
+      return
+    }
+
+    if (this.t <= 1) {
+      this.t = clamp01(this.t + (this.entering ? 0.05 : -0.05))
+    }
+
+    if (!this.entering && this.t <= 0) {
+      this.enabled = false
+      this.t = 0
+    }
+
+    this.plane.material.uniforms.Progress.value = this.t
+    this.plane.material.uniforms.Time.value = timestamp / 1000
+  }
+}

src/components/map/Map.vue

@@ -25,6 +25,7 @@ import textFragmentShader from '@/components/map/mapTextFragmentShader'
 import ShatteringPass from '@/components/map/ShatteringPass'
 import TextureManager from '@/components/map/TextureManager'
 import { clamp01 } from '@/utils'
+import Factions from '@/components/map/Factions.js'
 
 export default {
   name: 'Map',
@@ -99,7 +100,8 @@ export default {
         transition: {},
         text_pattern: {},
         map_text: { hqAvailable: true },
-        shadesmar_map_text: { hqAvailable: true }
+        shadesmar_map_text: { hqAvailable: true },
+        factions: { hqAvailable: true }
       }
 
       return this.textureManager.load(textures)
@@ -151,6 +153,7 @@ export default {
           PerpTransition: { value: this.perpendicularityTransition },
           PerpLocation: { value: new Vector2() },
           PerpPeriod: { value: 3.05355 },
+          DimTransition: { value: 0 },
           Time: { value: 0 }
         },
         extensions: {
@@ -192,15 +195,18 @@ export default {
         transparent: true,
         depthTest: false
       })
+
       this.plane = new Mesh(geo, this.mapMaterial)
       this.plane.frustumCulled = false
 
       this.textPlane = new Mesh(geo, textMaterial)
       this.textPlane.position.z = 1
       this.textPlane.frustumCulled = false
 
+      this.factions = new Factions(textures.factions)
+
       this.scene = new Scene()
-      this.scene.add(this.plane, this.textPlane, this.highlights)
+      this.scene.add(this.plane, this.textPlane, this.highlights, this.factions)
 
       this.composer.addPass(new RenderPass(this.scene, this.camera))
       this.shatteringPass = new ShatteringPass()
@@ -220,6 +226,12 @@ export default {
         this.shatteringPass.leave()
       }
 
+      if (event !== null && event.specialEffect === 'factions') {
+        this.factions.enter()
+      } else if (oldEvent !== null && oldEvent.specialEffect === 'factions') {
+        this.factions.leave()
+      }
+
       if (event === null) {
         return
       }
@@ -254,10 +266,12 @@ export default {
       }
 
       this.highlights.children.forEach(h => h.update(this.camera, timestamp))
+      this.factions.update(this.camera, timestamp)
 
       this.controls.update()
 
       this.mapMaterial.uniforms.PerpTransition.value = this.perpendicularityTransition
+      this.mapMaterial.uniforms.DimTransition.value = this.factions.t
       this.mapMaterial.uniforms.Time.value = timestamp / 1000
 
       this.mapMaterial.uniforms.Transition.value = this.transitionValue

src/components/map/factionsFragmentShader.js

@@ -0,0 +1,68 @@
+// language=GLSL
+export default `
+  #ifdef GL_ES
+  precision highp float;
+  #endif
+
+  varying vec2 vUv;
+
+  uniform sampler2D Texture;
+  uniform float Progress;
+  uniform float Time;
+
+  const int OCTAVES = 4;
+  const float INTENSITY = 2.;
+
+  float random (vec2 st) {
+    return fract(sin(dot(st.xy, vec2(12.9818, 79.279)))*43758.5453123);
+  }
+
+  vec2 random2(vec2 st){
+    st = vec2(dot(st, vec2(127.1, 311.7)), dot(st, vec2(269.5, 183.3)));
+    return -1.0 + 2.0 * fract(sin(st) * 43759.34517123);
+  }
+
+  float noise(vec2 st) {
+    vec2 i = floor(st);
+    vec2 f = fract(st);
+
+    // smootstep
+    vec2 u = f*f*(3.0-2.0*f);
+
+    return mix(mix(dot(random2(i + vec2(0.0, 0.0)), f - vec2(0.0, 0.0)),
+    dot(random2(i + vec2(1.0, 0.0)), f - vec2(1.0, 0.0)), u.x),
+    mix(dot(random2(i + vec2(0.0, 1.0)), f - vec2(0.0, 1.0)),
+    dot(random2(i + vec2(1.0, 1.0)), f - vec2(1.0, 1.0)), u.x), u.y);
+  }
+
+  float fractal_brownian_motion(vec2 coord) { 
+    float value = 0.0;
+    float scale = 0.5;
+    for (int i = 0; i < 2; i++) { 
+      value += noise(coord) * scale;
+      coord *= 2.0;
+      scale *= 0.5;
+     }
+    return value + 0.25;
+  }
+
+  void main() {
+    vec3 base = texture2D(Texture, vUv).rgb;
+    vec2 pos = vec2(vUv * 8.0);
+    vec2 motion = vec2(fractal_brownian_motion(pos + vec2(Time * 0.3, Time * 0.3)));
+    vec3 factors = vec3(
+      fractal_brownian_motion(pos + motion),
+      fractal_brownian_motion(pos + motion + vec2(5., 0.)),
+      fractal_brownian_motion(pos + motion + vec2(12., 4.))
+    ) * INTENSITY;
+
+    vec3 mixed = mix(vec3(.0, .0, .0), vec3(239. / 255., 187. / 255., 21. / 255.), base.r * factors.r); // Odium
+    mixed = mix(mixed, vec3(85. / 255., 211. / 255., 35. / 255.), base.g * factors.g); // Neutral
+    float total = floor(vUv.x * 256.) + floor(vUv.y * 128.);
+    bool isEven = mod(total, 2.0) == 0.0;
+    vec3 coalitionColor = mix(vec3(32. / 255., 137. / 255., 227. / 255.), vec3(136. / 255., 67. / 255., 19. / 255.), isEven ? 1. : 0.);
+    mixed = mix(mixed, coalitionColor, base.b * (factors.b + 0.1)); // Coalition
+    
+    gl_FragColor = vec4(mixed * Progress, 0.8 * max(factors.r, max(factors.g, factors.b)) * max(base.r, max(base.g, base.b)) * Progress);
+  }
+`

src/components/map/mapFragmentShader.js

@@ -19,6 +19,7 @@ export default `
   uniform highp float PerpTransition;
   uniform highp vec2 PerpLocation;
   uniform highp float PerpPeriod;
+  uniform highp float DimTransition;
   uniform highp float Time;
 
   float wave(float maxGrad, float value, float threshold, float opacity) {
@@ -133,6 +134,6 @@ export default `
       );
     }
 
-    gl_FragColor = color;
+    gl_FragColor = mix(vec4(.0, .0, .0, 1.), color, .5 + .5 * (1. - DimTransition));
   }
 `

src/store/events.json

@@ -1954,5 +1954,24 @@
             "shallan",
             "adolin"
         ]
+    },
+    {
+        "id": "state-of-the-world",
+        "specialEffect": "factions",
+        "date": [
+            1174,
+            2,
+            10,
+            6
+        ],
+        "coordinates": {
+            "x": 486.1,
+            "y": 318.5
+        },
+        "tags": [
+            "ob",
+            "shallan",
+            "dalinar"
+        ]
     }
 ]

translations/en/events/state-of-the-world.md

@@ -0,0 +1,5 @@
+# State of the World
+Blurb
+
+## Details
+Details