Clamp to edges textureAtlas

Author: michaljaz

src/scripts/world/AnimatedTextureAtlas.js

@@ -1,4 +1,4 @@
-import { MeshStandardMaterial, TextureLoader, NearestFilter } from 'three'
+import { MeshStandardMaterial, TextureLoader, NearestFilter, NearestMipmapLinearFilter } from 'three'
 
 class TextureAtlasCreator {
   constructor (options) {
@@ -23,8 +23,9 @@ class TextureAtlasCreator {
     }
     const canvasx = document.createElement('canvas')
     const ctx = canvasx.getContext('2d')
-    canvasx.width = this.willSize * 16
-    canvasx.height = this.willSize * 16
+    canvasx.width = this.willSize * (16 + 32)
+    canvasx.height = this.willSize * (16 + 32)
+    // console.log(this.willSize * (16 + 32))
     let toxelX = 1
     let toxelY = 1
     for (const i in this.textureMapping) {
@@ -40,17 +41,26 @@ class TextureAtlasCreator {
           const texmap = this.textureMapping[
                         `${xd.pref}@${lol.col}@${lol.row}`
           ]
+
           ctx.drawImage(
             this.textureX,
             (texmap.x - 1) * 16,
             (texmap.y - 1) * 16,
             16,
             16,
-            (toxelX - 1) * 16,
-            (toxelY - 1) * 16,
+            16 + (toxelX - 1) * (16 + 32),
+            16 + (toxelY - 1) * (16 + 32),
             16,
             16
           )
+          const b = ctx.getImageData(16 + (toxelX - 1) * (16 + 32), 16 + (toxelY - 1) * (16 + 32), 16, 16)
+          for (let j = 16; j > 0; j--) {
+            ctx.putImageData(b, 16 + (toxelX - 1) * (16 + 32), 16 + (toxelY - 1) * (16 + 32) - j)
+            ctx.putImageData(b, 16 + (toxelX - 1) * (16 + 32) - j, 16 + (toxelY - 1) * (16 + 32))
+            ctx.putImageData(b, 16 + (toxelX - 1) * (16 + 32) + j, 16 + (toxelY - 1) * (16 + 32))
+            ctx.putImageData(b, 16 + (toxelX - 1) * (16 + 32), 16 + (toxelY - 1) * (16 + 32) + j)
+          }
+          ctx.putImageData(b, 16 + (toxelX - 1) * (16 + 32), 16 + (toxelY - 1) * (16 + 32))
           toxelX++
           if (toxelX > this.willSize) {
             toxelX = 1
@@ -64,18 +74,27 @@ class TextureAtlasCreator {
           (this.textureMapping[i].y - 1) * 16,
           16,
           16,
-          (toxelX - 1) * 16,
-          (toxelY - 1) * 16,
+          16 + (toxelX - 1) * (16 + 32),
+          16 + (toxelY - 1) * (16 + 32),
           16,
           16
         )
+        const b = ctx.getImageData(16 + (toxelX - 1) * (16 + 32), 16 + (toxelY - 1) * (16 + 32), 16, 16)
+        for (let j = 16; j > 0; j--) {
+          ctx.putImageData(b, 16 + (toxelX - 1) * (16 + 32), 16 + (toxelY - 1) * (16 + 32) - j)
+          ctx.putImageData(b, 16 + (toxelX - 1) * (16 + 32) - j, 16 + (toxelY - 1) * (16 + 32))
+          ctx.putImageData(b, 16 + (toxelX - 1) * (16 + 32) + j, 16 + (toxelY - 1) * (16 + 32))
+          ctx.putImageData(b, 16 + (toxelX - 1) * (16 + 32), 16 + (toxelY - 1) * (16 + 32) + j)
+        }
+        ctx.putImageData(b, 16 + (toxelX - 1) * (16 + 32), 16 + (toxelY - 1) * (16 + 32))
         toxelX++
         if (toxelX > this.willSize) {
           toxelX = 1
           toxelY++
         }
       }
     }
+    // console.log(canvasx.toDataURL())
     return canvasx
   }
 
@@ -131,7 +150,7 @@ class AnimatedTextureAtlas {
       const t = this.atlasCreator.gen(i).toDataURL()
       const tekstura = new TextureLoader().load(t)
       tekstura.magFilter = NearestFilter
-      tekstura.minFilter = NearestFilter
+      tekstura.minFilter = NearestMipmapLinearFilter
       savedTextures.push(tekstura)
     }
     let tickq = 0

src/scripts/world/ChunkMesher.js

@@ -376,10 +376,12 @@ class ChunkMesher {
     let { x: toxX, y: toxY } = this.blocksMapping[name]
     toxX -= 1
     toxY -= 1
-    const x1 = this.q * toxX
-    const y1 = 1 - this.q * toxY - this.q
-    const x2 = this.q * toxX + this.q
-    const y2 = 1 - this.q * toxY
+    const b = 16 / 1296
+    const q = 48 / 1296
+    const x1 = q * toxX + b
+    const y1 = 1 - q * toxY - q + b
+    const x2 = x1 + q - 2 * b
+    const y2 = y1 + q - 2 * b
     return [
       [x1, y1],
       [x1, y2],
@@ -433,10 +435,12 @@ class ChunkMesher {
     }
     toxX -= 1
     toxY -= 1
-    const x1 = this.q * toxX
-    const y1 = 1 - this.q * toxY - this.q
-    const x2 = this.q * toxX + this.q
-    const y2 = 1 - this.q * toxY
+    const b = 16 / 1296
+    const q = 48 / 1296
+    const x1 = q * toxX + b
+    const y1 = 1 - q * toxY - q + b
+    const x2 = x1 + q - 2 * b
+    const y2 = y1 + q - 2 * b
     return [
       [x1, y1],
       [x1, y2],

src/scripts/world/World.js

@@ -45,9 +45,9 @@ const World = class World {
   }
 
   updateRenderOrder (cell) {
-    for (const [k,v] of this.chunkManager.cellMesh) {
+    for (const [k, v] of this.chunkManager.cellMesh) {
       const x = vec3(this.chunkTerrain.strToVec(k))
-      v.renderOrder=-vec3(...cell).distanceTo(x)
+      v.renderOrder = -vec3(...cell).distanceTo(x)
     }
   }