fix: some visual camera world view issues (visible lines between blocks)

Author: zardoy

renderer/viewer/three/cameraShake.ts

@@ -80,8 +80,12 @@ export class CameraShake {
       camera.setRotationFromQuaternion(yawQuat)
     } else {
       // For regular camera, apply all rotations
-      const pitchQuat = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(1, 0, 0), this.basePitch)
-      const yawQuat = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), this.baseYaw)
+      // Add tiny offsets to prevent z-fighting at ideal angles (90, 180, 270 degrees)
+      const pitchOffset = this.addAntiZfightingOffset(this.basePitch)
+      const yawOffset = this.addAntiZfightingOffset(this.baseYaw)
+
+      const pitchQuat = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(1, 0, 0), pitchOffset)
+      const yawQuat = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), yawOffset)
       const rollQuat = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 0, 1), THREE.MathUtils.degToRad(this.rollAngle))
       // Combine rotations in the correct order: pitch -> yaw -> roll
       const finalQuat = yawQuat.multiply(pitchQuat).multiply(rollQuat)
@@ -96,4 +100,21 @@ export class CameraShake {
   private easeInOut (t: number): number {
     return t < 0.5 ? 2 * t * t : 1 - (-2 * t + 2) ** 2 / 2
   }
+
+  private addAntiZfightingOffset (angle: number): number {
+    const offset = 0.001 // Very small offset in radians (about 0.057 degrees)
+
+    // Check if the angle is close to ideal angles (0, π/2, π, 3π/2)
+    const normalizedAngle = ((angle % (Math.PI * 2)) + Math.PI * 2) % (Math.PI * 2)
+    const tolerance = 0.01 // Tolerance for considering an angle "ideal"
+
+    if (Math.abs(normalizedAngle) < tolerance ||
+      Math.abs(normalizedAngle - Math.PI / 2) < tolerance ||
+      Math.abs(normalizedAngle - Math.PI) < tolerance ||
+      Math.abs(normalizedAngle - 3 * Math.PI / 2) < tolerance) {
+      return angle + offset
+    }
+
+    return angle
+  }
 }

renderer/viewer/three/world/cursorBlock.ts

@@ -28,7 +28,7 @@ export class CursorBlock {
   }
 
   cursorLineMaterial: LineMaterial
-  interactionLines: null | { blockPos: Vec3, mesh: THREE.Group } = null
+  interactionLines: null | { blockPos: Vec3, mesh: THREE.Group, shapePositions: BlocksShapes | undefined } = null
   prevColor: string | undefined
   blockBreakMesh: THREE.Mesh
   breakTextures: THREE.Texture[] = []
@@ -62,13 +62,23 @@ export class CursorBlock {
     this.worldRenderer.onReactivePlayerStateUpdated('gameMode', () => {
       this.updateLineMaterial()
     })
+    // todo figure out why otherwise fog from skybox breaks it
+    setTimeout(() => {
+      this.updateLineMaterial()
+      if (this.interactionLines) {
+        this.setHighlightCursorBlock(this.interactionLines.blockPos, this.interactionLines.shapePositions, true)
+      }
+    })
   }
 
   // Update functions
   updateLineMaterial () {
     const inCreative = this.worldRenderer.playerStateReactive.gameMode === 'creative'
     const pixelRatio = this.worldRenderer.renderer.getPixelRatio()
 
+    if (this.cursorLineMaterial) {
+      this.cursorLineMaterial.dispose()
+    }
     this.cursorLineMaterial = new LineMaterial({
       color: (() => {
         switch (this.worldRenderer.worldRendererConfig.highlightBlockColor) {
@@ -115,8 +125,8 @@ export class CursorBlock {
     }
   }
 
-  setHighlightCursorBlock (blockPos: Vec3 | null, shapePositions?: BlocksShapes): void {
-    if (blockPos && this.interactionLines && blockPos.equals(this.interactionLines.blockPos)) {
+  setHighlightCursorBlock (blockPos: Vec3 | null, shapePositions?: BlocksShapes, force = false): void {
+    if (blockPos && this.interactionLines && blockPos.equals(this.interactionLines.blockPos) && !force) {
       return
     }
     if (this.interactionLines !== null) {
@@ -140,7 +150,7 @@ export class CursorBlock {
     }
     this.worldRenderer.scene.add(group)
     group.visible = !this.cursorLinesHidden
-    this.interactionLines = { blockPos, mesh: group }
+    this.interactionLines = { blockPos, mesh: group, shapePositions }
   }
 
   render () {