[IMPORTANT] NEW opt-in Introduce VANILLA world shading! (#534)

by @anodic01

Author: anodic01

renderer/viewer/lib/basePlayerState.ts

@@ -18,6 +18,7 @@ export const getInitialPlayerState = () => proxy({
   backgroundColor: [0, 0, 0] as [number, number, number],
   ambientLight: 0,
   directionalLight: 0,
+  cardinalLight: 'default',
   eyeHeight: 0,
   gameMode: undefined as GameMode | undefined,
   lookingAtBlock: undefined as {

renderer/viewer/lib/mesher/models.ts

@@ -387,7 +387,16 @@ function renderElement (world: World, cursor: Vec3, element: BlockElement, doAO:
     const aos: number[] = []
     const neighborPos = position.plus(new Vec3(...dir))
     // 10%
-    const baseLight = world.getLight(neighborPos, undefined, undefined, block.name) / 15
+    const { smoothLighting, shadingTheme, cardinalLight } = world.config
+    const faceLight = world.getLight(neighborPos, undefined, undefined, block.name)
+    const sideShading = (shadingTheme === 'high-contrast') ?
+      (0.8 + 0.5 * Math.max(0, 0.66 * dir[0] + 0.66 * dir[1] + 0.33 * dir[2])) : //old directional light behavior
+      (
+        cardinalLight === 'nether' ?
+          (0.5 + Math.abs(0.1 * dir[0] + 0.4 * dir[1] + 0.3 * dir[2])) :
+          (0.75 + 0.25 * dir[1] + 0.05 * (Math.abs(dir[2]) - 3 * Math.abs(dir[0])))
+      )
+    const baseLight = sideShading * faceLight / 15
     for (const pos of corners) {
       let vertex = [
         (pos[0] ? maxx : minx),
@@ -414,7 +423,7 @@ function renderElement (world: World, cursor: Vec3, element: BlockElement, doAO:
       }
 
       let light = 1
-      const { smoothLighting } = world.config
+
       // const smoothLighting = true
       if (doAO) {
         const dx = pos[0] * 2 - 1
@@ -427,7 +436,7 @@ function renderElement (world: World, cursor: Vec3, element: BlockElement, doAO:
         const side2 = world.getBlock(cursor.offset(...side2Dir))
         const corner = world.getBlock(cursor.offset(...cornerDir))
 
-        let cornerLightResult = baseLight * 15
+        let cornerLightResult = faceLight
 
         if (smoothLighting) {
           const dirVec = new Vec3(...dir)
@@ -444,7 +453,7 @@ function renderElement (world: World, cursor: Vec3, element: BlockElement, doAO:
           const cornerLightDir = getVec(new Vec3(...cornerDir))
           const cornerLight = world.getLight(cursor.plus(cornerLightDir))
           // interpolate
-          const lights = [side1Light, side2Light, cornerLight, baseLight * 15]
+          const lights = [side1Light, side2Light, cornerLight, faceLight]
           cornerLightResult = lights.reduce((acc, cur) => acc + cur, 0) / lights.length
         }
 
@@ -455,8 +464,11 @@ function renderElement (world: World, cursor: Vec3, element: BlockElement, doAO:
         // TODO: correctly interpolate ao light based on pos (evaluate once for each corner of the block)
 
         const ao = (side1Block && side2Block) ? 0 : (3 - (side1Block + side2Block + cornerBlock))
+        const ao_bias = (shadingTheme === 'high-contrast') ? 0.25 : 0.4
+        const ao_scale = (shadingTheme === 'high-contrast') ? 0.25 : 0.2
+
         // todo light should go upper on lower blocks
-        light = (ao + 1) / 4 * (cornerLightResult / 15)
+        light = sideShading * (ao * ao_scale + ao_bias) * (cornerLightResult / 15)
         aos.push(ao)
       }
 

renderer/viewer/lib/mesher/shared.ts

@@ -8,6 +8,8 @@ export const defaultMesherConfig = {
   enableLighting: true,
   skyLight: 15,
   smoothLighting: true,
+  shadingTheme: 'high-contrast',
+  cardinalLight: 'default',
   outputFormat: 'threeJs' as 'threeJs' | 'webgpu',
   // textureSize: 1024, // for testing
   debugModelVariant: undefined as undefined | number[],

renderer/viewer/lib/worldrendererCommon.ts

@@ -47,6 +47,8 @@ export const defaultWorldRendererConfig = {
   // Rendering engine settings
   dayCycle: true,
   smoothLighting: true,
+  shadingTheme: 'high-contrast',
+  cardinalLight: 'default',
   enableLighting: true,
   starfield: true,
   defaultSkybox: true,
@@ -171,6 +173,7 @@ export abstract class WorldRendererCommon<WorkerSend = any, WorkerReceive = any>
   soundSystem: SoundSystem | undefined
 
   abstract changeBackgroundColor (color: [number, number, number]): void
+  abstract changeCardinalLight (string): void
 
   worldRendererConfig: WorldRendererConfig
   playerStateReactive: PlayerStateReactive
@@ -344,6 +347,9 @@ export abstract class WorldRendererCommon<WorkerSend = any, WorkerReceive = any>
     this.onReactivePlayerStateUpdated('backgroundColor', (value) => {
       this.changeBackgroundColor(value)
     })
+    this.onReactivePlayerStateUpdated('cardinalLight', (value) => {
+      this.changeCardinalLight(value)
+    })
   }
 
   watchReactiveConfig () {
@@ -572,6 +578,8 @@ export abstract class WorldRendererCommon<WorkerSend = any, WorkerReceive = any>
       enableLighting: this.worldRendererConfig.enableLighting,
       skyLight,
       smoothLighting: this.worldRendererConfig.smoothLighting,
+      shadingTheme: this.worldRendererConfig.shadingTheme,
+      cardinalLight: this.worldRendererConfig.cardinalLight,
       outputFormat: this.outputFormat,
       // textureSize: this.resourcesManager.currentResources!.blocksAtlasParser.atlas.latest.width,
       debugModelVariant: this.worldRendererConfig.debugModelVariant,

renderer/viewer/three/worldrendererThree.ts

@@ -46,7 +46,7 @@ export class WorldRendererThree extends WorldRendererCommon {
   directionalLight = new THREE.DirectionalLight(0xff_ff_ff, 0.5)
   entities = new Entities(this)
   cameraGroupVr?: THREE.Object3D
-  material = new THREE.MeshLambertMaterial({ vertexColors: true, transparent: true, alphaTest: 0.1 })
+  material = new THREE.MeshBasicMaterial({ vertexColors: true, transparent: true, alphaTest: 0.1 })
   itemsTexture: THREE.Texture
   cursorBlock: CursorBlock
   onRender: Array<() => void> = []
@@ -272,6 +272,9 @@ export class WorldRendererThree extends WorldRendererCommon {
   changeBackgroundColor (color: [number, number, number]): void {
     this.scene.background = new THREE.Color(color[0], color[1], color[2])
   }
+  changeCardinalLight (cardinalLight: string): void {
+    this.worldRendererConfig.cardinalLight = cardinalLight
+  }
 
   timeUpdated (newTime: number): void {
     const nightTime = 13_500

src/controls.ts

@@ -78,6 +78,7 @@ export const contro = new ControMax({
       zoom: ['KeyC'],
       viewerConsole: ['Backquote'],
       togglePerspective: ['F5', 'Up'],
+      takeScreenshot: ['F2'],
     },
     ui: {
       toggleFullscreen: ['F11'],
@@ -146,6 +147,22 @@ const isSpectatingEntity = () => {
   return appViewer.playerState.utils.isSpectatingEntity()
 }
 
+let lastScreenshotAt = 0
+const screenshotRepeatCooldownMs = 500
+
+export const takeScreenshotAction = () => {
+  const now = Date.now()
+  if (now - lastScreenshotAt < screenshotRepeatCooldownMs) return
+  lastScreenshotAt = now
+  const canvas = document.getElementById('viewer-canvas') as HTMLCanvasElement | null
+  if (!canvas) return
+  const link = document.createElement('a')
+  link.href = canvas.toDataURL('image/png')
+  const date = new Date()
+  link.download = `screenshot ${date.toLocaleString().replaceAll('.', '-').replace(',', '')}.png`
+  link.click()
+}
+
 contro.on('movementUpdate', ({ vector, soleVector, gamepadIndex }) => {
   miscUiState.usingGamepadInput = gamepadIndex !== undefined
   if (!bot || !isGameActive(false) || isSpectatingEntity()) return
@@ -489,6 +506,13 @@ const isCommandAvailableAfterDisconnect = (command: Command) => {
 contro.on('trigger', ({ command }) => {
   if (isCommandDisabled(command)) return
 
+  if (command === 'general.takeScreenshot') {
+    if (isGameActive(true)) {
+      takeScreenshotAction()
+    }
+    return
+  }
+
   const willContinue = !isGameActive(true)
   alwaysPressedHandledCommand(command)
   if (willContinue && !isCommandAvailableAfterDisconnect(command)) return
@@ -869,18 +893,6 @@ window.addEventListener('keydown', (e) => {
   }
 })
 
-window.addEventListener('keydown', (e) => {
-  if (e.code !== 'F2' || e.repeat || !isGameActive(true)) return
-  e.preventDefault()
-  const canvas = document.getElementById('viewer-canvas') as HTMLCanvasElement
-  if (!canvas) return
-  const link = document.createElement('a')
-  link.href = canvas.toDataURL('image/png')
-  const date = new Date()
-  link.download = `screenshot ${date.toLocaleString().replaceAll('.', '-').replace(',', '')}.png`
-  link.click()
-})
-
 window.addEventListener('keydown', (e) => {
   if (e.code !== 'F1' || e.repeat || !isGameActive(true)) return
   e.preventDefault()

src/defaultOptions.ts

@@ -100,6 +100,7 @@ export const defaultOptions = {
   showCursorBlockInSpectator: false,
   renderEntities: true,
   smoothLighting: true,
+  vanillaLook: false,
   newVersionsLighting: false,
   chatSelect: true,
   autoJump: 'auto' as 'auto' | 'always' | 'never',

src/mineflayer/playerState.ts

@@ -53,6 +53,14 @@ export class PlayerStateControllerMain {
         hasSkyLight = data.dimension.value.has_skylight.value
       } catch {}
       this.reactive.lightingDisabled = bot.game.dimension === 'the_nether' || bot.game.dimension === 'the_end' || !hasSkyLight
+      let cardinalLight = 'default'
+      try {
+        cardinalLight = data.dimension.value.effects.value === 'minecraft:the_nether' ? 'nether' : 'default'
+      } catch {}
+      try {
+        cardinalLight = data.dimension.value.cardinal_light.value //servers after 1.21.11, untested
+      } catch {}
+      this.reactive.cardinalLight = cardinalLight
     }
 
     bot._client.on('login', (packet) => {

src/optionsGuiScheme.tsx

@@ -68,6 +68,9 @@ export const guiOptionsScheme: {
       activeRenderer: {
         text: 'Renderer',
       },
+      vanillaLook: {
+        tooltip: 'On: Minecraft-style face shading. Off: client’s higher-contrast shading (default).',
+      },
     },
     {
       custom () {

src/react/OptionsItems.tsx

@@ -156,8 +156,11 @@ export const OptionButton = ({ item, onClick, valueText, cacheKey }: {
               : (currentIndex + 1) % possibleValues.length
             options[item.id] = getOptionValue(possibleValues[nextIndex])
           }
+        } else if (possibleValues && possibleValues.length === 1) {
+          // Only one choice: keep it (do not use boolean ! which breaks string/enum values)
+          options[item.id] = getOptionValue(possibleValues[0])
         } else {
-          // Boolean toggle or single value
+          // Boolean toggle
           options[item.id] = !options[item.id]
         }
       }