[deploy] Introduce JPG for lossy textures and make more textures lossy

bin/convert-textures.js

@@ -9,15 +9,15 @@ const imageminZopfli = require('imagemin-zopfli')
 const isDirectory = source => lstatSync(path.resolve(source)).isDirectory()
 
 const textures = {
-  map_bg: { lossy: true },
+  map_bg: { hqAvailable: true, lossy: true },
   map: { hqAvailable: true },
   shadesmar_map_bg: { lossy: true },
   transition: {},
   text_pattern: {},
   map_text: { hqAvailable: true, localized: true },
   shadesmar_map_text: { hqAvailable: true, localized: true },
   hover_text: { localized: true },
-  factions: { hqAvailable: true },
+  factions: { lossy: true, hqAvailable: true },
   oathgates_text: { hqAvailable: true, localized: true },
   silver_kingdoms: { hqAvailable: true },
   silver_kingdoms_text: { hqAvailable: true, localized: true },
@@ -26,8 +26,8 @@ const textures = {
 }
 
 const basePath = './src/assets/textures'
-const webpOnly = process.argv.slice(2)[0] === '--webp-only'
-const filter = process.argv.slice(webpOnly ? 3 : 2)
+const webpOnly = process.argv.slice(3)[0] === '--webp-only'
+const filter = process.argv.slice(webpOnly ? 4 : 3)
 const locales = readdirSync(path.resolve(`${basePath}/localized`)).filter(locale => isDirectory(`${basePath}/localized/${locale}`))
 
 Promise.all(Object.keys(textures).flatMap((name) => {
@@ -43,16 +43,18 @@ Promise.all(Object.keys(textures).flatMap((name) => {
       transformed.push({ ...texture, name: `${name}[${locale}]`, files, destination: `${basePath}/localized/${locale}` })
     })
   } else {
-    const files = [`${basePath}/${name}.png`]
+    const directory = texture.lossy ? 'lossy' : 'lossless'
+    const ext = texture.lossy ? 'jpg' : 'png'
+    const files = [`${basePath}/${directory}/${name}.${ext}`]
     if (texture.hqAvailable === true) {
-      files.push(`${basePath}/hq_${name}.png`)
+      files.push(`${basePath}/${directory}/hq_${name}.${ext}`)
     }
-    transformed.push({ ...texture, name, files, destination: basePath })
+    transformed.push({ ...texture, name, files, destination: `${basePath}/${directory}` })
   }
 
   return transformed
 }).flatMap((texture) => {
-  const { name } = texture
+  const { name, lossy } = texture
 
   const changedFiles = texture.files.filter(path => childProcess.execSync(`git status -s ${path}`).toString().length > 0)
 
@@ -69,7 +71,7 @@ Promise.all(Object.keys(textures).flatMap((name) => {
   const forced = filter.includes(name)
   console.log(`Optimizing and converting texture '${name}${forced ? ' (forced)' : ''}'...`)
 
-  return (webpOnly ? new Promise(resolve => resolve()) : imagemin(changedFiles, {
+  return (webpOnly || lossy ? new Promise(resolve => resolve()) : imagemin(changedFiles, {
     destination: texture.destination,
     plugins: [
       imageminZopfli({ more: true })

src/components/editor/Editor.vue

@@ -596,9 +596,9 @@ export default {
     },
     loadTextures () {
       const textures = {
-        map_bg: { hqWebpAvailable: true },
+        map_bg: { hqAvailable: true, lossy: true },
         map: { hqAvailable: true },
-        shadesmar_map_bg: {},
+        shadesmar_map_bg: { lossy: true },
         map_text: { hqAvailable: true, localized: true },
         shadesmar_map_text: { hqAvailable: true, localized: true }
       }
@@ -1105,7 +1105,7 @@ export default {
     },
     async renderPng (locations, base, fileAction) {
       const { width, height, data: baseData } = base !== undefined
-        ? (await this.textureManager.loadData(base, false, true, 'rgba'))
+        ? (await this.textureManager.loadData(base, false, true, false, 'rgba'))
         : { width: 1024, height: 512 }
 
       const xScale = width / 1024

src/components/map/Map.vue

@@ -144,18 +144,18 @@ export default {
   methods: {
     loadTextures () {
       const textures = {
-        map_bg: { hqWebpAvailable: true },
+        map_bg: { hqAvailable: true, lossy: true },
         map: { hqAvailable: true },
-        shadesmar_map_bg: {},
+        shadesmar_map_bg: { lossy: true },
         transition: {},
         text_pattern: {},
         map_text: { hqAvailable: true, localized: true },
         shadesmar_map_text: { hqAvailable: true, localized: true },
-        factions: { hqAvailable: true },
+        factions: { hqAvailable: true, lossy: true },
         oathgates_text: { hqAvailable: true, localized: true },
         silver_kingdoms: { hqAvailable: true },
         silver_kingdoms_text: { hqAvailable: true, localized: true },
-        graticule: { hqAvailable: true },
+        graticule: { hqAvailable: true, lossy: true },
         graticule_text: { hqAvailable: true }
       }
 
@@ -279,7 +279,7 @@ export default {
       this.shatteringPass = new ShatteringPass()
       this.composer.addPass(this.shatteringPass)
 
-      this.hoverTexture = await this.textureManager.loadData('hover_text', false, true, 'gb')
+      this.hoverTexture = await this.textureManager.loadData('hover_text', false, true, false, 'gb')
     },
     onEventChanged (event, oldEvent) {
       this.highlights.children.forEach(h => h.leave())

src/components/map/TextureManager.js

@@ -20,11 +20,12 @@ export default class TextureManager {
     this.locale = locale
   }
 
-  buildPath (prefix, name, localized) {
-    const base = `${prefix}${name}.${this.webpSupported ? 'webp' : 'png'}`
+  buildPath (prefix, name, localized, lossy) {
+    const fallbackExt = lossy === true && (localized === undefined || localized === false) ? 'jpg' : 'png'
+    const base = `${prefix}${name}.${this.webpSupported ? 'webp' : fallbackExt}`
 
     if (localized === undefined || localized === false) {
-      return base
+      return `${lossy ? 'lossy' : 'lossless'}/${base}`
     }
 
     return `localized/${this.locale}/${base}`
@@ -40,7 +41,7 @@ export default class TextureManager {
         const texture = textures[name]
 
         const prefix = (texture.hqAvailable || (texture.hqWebpAvailable && this.webpSupported)) && this.useHq ? 'hq_' : ''
-        const path = this.buildPath(prefix, name, texture.localized)
+        const path = this.buildPath(prefix, name, texture.localized, texture.lossy)
 
         textureLoader.load(
           require(`@/assets/textures/${path}`),
@@ -59,7 +60,7 @@ export default class TextureManager {
     }))
   }
 
-  loadData (name, hqAvailable, localized, channelsToKeep) {
+  loadData (name, hqAvailable, localized, lossy, channelsToKeep) {
     const channels = {}
     channelsToKeep.split('').forEach((c) => {
       channels[c] = channelsToKeep.indexOf(c)
@@ -106,7 +107,7 @@ export default class TextureManager {
 
       image.onerror = errorEvent => reject(new Error(`Could not load texture '${name}': ${errorEvent.message}`))
 
-      const path = this.buildPath(hqAvailable && this.useHq ? 'hq_' : '', name, localized)
+      const path = this.buildPath(hqAvailable && this.useHq ? 'hq_' : '', name, localized, false)
 
       image.src = require(`@/assets/textures/${path}`)
     }))

src/components/map/layers/graticuleFragmentShader.js

@@ -53,7 +53,7 @@ export default `
     vec4 map = texture2D(Texture, vUv);
     vec4 textMap = texture2D(TextTexture, vUv);
 
-    vec4 fineTexel = Sample(map.r, 0.47, maxGrad);
+    vec4 fineTexel = Sample(map.r, 0.475, maxGrad);
     vec4 coarseTexel = Sample(map.g, 0.48, maxGrad);
     fineTexel.a *= 0.9;
     coarseTexel.a *= 1.5;