minecraft-renderer 0.1.47 → 0.1.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "minecraft-renderer",
-  "version": "0.1.47",
+  "version": "0.1.48",
   "description": "The most Modular Minecraft world renderer with Three.js WebGL backend",
   "type": "module",
   "main": "./dist/index.js",

package/src/graphicsBackend/rendererOptionsSync.ts

@@ -170,6 +170,7 @@ export function applyRendererOptions(
   cfg.shadingTheme = o.vanillaLook ? 'vanilla' : 'high-contrast'
   cfg.starfield = o.starfieldRendering
   cfg.defaultSkybox = o.defaultSkybox
+  cfg.fov = o.fov
 }
 
 /** World-view + hand/camera options (call when WorldView is ready). */

package/src/playerState/playerState.ts

@@ -47,6 +47,8 @@ export const getInitialPlayerState = () => proxy({
   heldItemOff: undefined as HandItemBlock | undefined,
   perspective: 'first_person' as CameraPerspective,
   onFire: false,
+  /** Gameplay FOV scale (sprint, bow, zoom, etc.); base FOV comes from renderer options. */
+  fovMultiplier: 1,
 
   cameraSpectatingEntity: undefined as number | undefined,
 

package/src/three/menuBackground/defaultOptions.ts

@@ -72,7 +72,8 @@ export const RENDERER_DEFAULT_OPTIONS = {
   viewBobbing: true,
   dayCycleAndLighting: true,
   keepChunksDistance: 1,
-  gpuPreference: 'default' as RendererGpuPreference
+  gpuPreference: 'default' as RendererGpuPreference,
+  fov: 75
 } as const
 
 /** App options storage shape for renderer-owned keys. */
@@ -226,6 +227,12 @@ export const RENDERER_OPTIONS_META: Partial<Record<RendererDefaultOptionKey, Ren
     max: 5,
     unit: ''
   },
+  fov: {
+    min: 30,
+    max: 110,
+    unit: '°',
+    text: 'Field of view'
+  },
   gpuPreference: {
     text: 'GPU preference',
     tooltip: 'WebGL power preference. Requires reload / backend restart to apply.',
@@ -260,6 +267,7 @@ export const RENDERER_RENDER_GUI_SECTIONS: ReadonlyArray<{
         'renderEars',
         'showHand',
         'viewBobbing',
+        'fov',
         'keepChunksDistance',
         'highlightBlockColor',
         'clipWorldBelowY'

package/src/three/worldRendererThree.ts

@@ -65,6 +65,9 @@ export class WorldRendererThree extends WorldRendererCommon {
   cursorBlock: CursorBlock
   onRender: Array<(deltaTime: number) => void> = []
   private lastRenderTime = 0
+  private animatedFov = 0
+  private lastFovAnimTime = 0
+  private static readonly FOV_TRANSITION_MS = 200
   cameraShake: CameraShake
   cameraContainer!: THREE.Object3D
   media: ThreeJsMedia
@@ -1055,10 +1058,42 @@ export class WorldRendererThree extends WorldRendererCommon {
   }
 
   setCinimaticFov(fov: number): void {
+    this.animatedFov = fov
     this.camera.fov = fov
     this.camera.updateProjectionMatrix()
   }
 
+  private updateSmoothFov(): void {
+    if (this.cinimaticScript.running) return
+
+    const baseFov = this.displayOptions.inWorldRenderingConfig.fov
+    const mult = this.playerStateReactive.fovMultiplier
+    const targetFov = baseFov * (Number.isFinite(mult) ? mult : 1)
+
+    const now = performance.now()
+    if (this.animatedFov === 0) {
+      this.animatedFov = targetFov
+    }
+
+    if (Math.abs(this.animatedFov - targetFov) >= 0.01) {
+      const elapsed = now - this.lastFovAnimTime
+      const progress = Math.min(elapsed / WorldRendererThree.FOV_TRANSITION_MS, 1)
+      const easeOutCubic = (t: number) => 1 - (1 - t) ** 3
+      this.animatedFov += (targetFov - this.animatedFov) * easeOutCubic(progress)
+      if (Math.abs(this.animatedFov - targetFov) < 0.01) {
+        this.animatedFov = targetFov
+      }
+    } else {
+      this.animatedFov = targetFov
+    }
+    this.lastFovAnimTime = now
+
+    if (this.camera.fov !== this.animatedFov) {
+      this.camera.fov = this.animatedFov
+      this.camera.updateProjectionMatrix()
+    }
+  }
+
   updateCamera(pos: Vec3 | null, yaw: number, pitch: number): void {
     // Skip position/rotation updates if cinematic script is running
     if (this.cinimaticScript.running) {
@@ -1200,11 +1235,10 @@ export class WorldRendererThree extends WorldRendererCommon {
     const cameraPos = this.getCameraPosition()
     this.skyboxRenderer.update(cameraPos, this.viewDistance)
 
-    const sizeOrFovChanged = sizeChanged || this.displayOptions.inWorldRenderingConfig.fov !== this.camera.fov
-    if (sizeOrFovChanged) {
+    this.updateSmoothFov()
+    if (sizeChanged) {
       const size = this.renderer.getSize(new THREE.Vector2())
       this.camera.aspect = size.width / size.height
-      this.camera.fov = this.displayOptions.inWorldRenderingConfig.fov
       this.camera.updateProjectionMatrix()
     }