minecraft-renderer 0.1.0

package/dist/static/js/lib-react.5c9129e0.js.LICENSE.txt

@@ -0,0 +1,39 @@
+/**
+ * @license React
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

package/package.json

@@ -0,0 +1,104 @@
+{
+  "name": "minecraft-renderer",
+  "version": "0.1.0",
+  "description": "The most Modular Minecraft world renderer with Three.js WebGL backend",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "keywords": [
+    "minecraft",
+    "renderer",
+    "threejs",
+    "webgl",
+    "prismarine"
+  ],
+  "release": {
+    "initialVersion": {
+      "version": "0.1.0"
+    }
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@tweenjs/tween.js": "^20.0.3",
+    "@types/events": "^3.0.3",
+    "@xmcl/text-component": "^2.1.3",
+    "deepslate": "^0.24.0",
+    "events": "^3.3.0",
+    "mc-bridge": "^0.1.3",
+    "mineflayer-mouse": "^0.1.24",
+    "prismarine-chat": "^1.10.0",
+    "prismarine-nbt": "^2.5.0",
+    "skinview-utils": "^0.7.1",
+    "skinview3d": "^3.4.1",
+    "stats-gl": "^1.0.5",
+    "stats.js": "^0.17.0",
+    "three": "0.154.0",
+    "three-stdlib": "^2.36.1",
+    "type-fest": "^5.3.0",
+    "typed-emitter": "^2.1.0",
+    "valtio": "^1.11.1",
+    "vec3": "^0.1.10"
+  },
+  "devDependencies": {
+    "@emotion/css": "^11.13.5",
+    "@rsbuild/core": "1.3.5",
+    "@rsbuild/plugin-node-polyfill": "1.3.0",
+    "@rsbuild/plugin-react": "1.2.0",
+    "@types/react": "^19.2.7",
+    "@types/stats.js": "^0.17.1",
+    "@types/three": "0.154.0",
+    "@zardoy/react-util": "^0.2.7",
+    "@zardoy/tsconfig": "^1.5.1",
+    "esbuild": "^0.19.3",
+    "esbuild-plugin-polyfill-node": "^0.3.0",
+    "fs-extra": "^11.0.0",
+    "lil-gui": "^0.18.2",
+    "lodash": "^4.17.21",
+    "mc-assets": "^0.2.72",
+    "minecraft-data": "3.98.0",
+    "mineflayer": "^4.33.0",
+    "npm-run-all": "^4.1.5",
+    "prismarine-block": "github:zardoy/prismarine-block#next-era",
+    "prismarine-chunk": "github:zardoy/prismarine-chunk#master",
+    "prismarine-world": "github:zardoy/prismarine-world#next-era",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.14"
+  },
+  "peerDependencies": {
+    "mc-assets": ">=0.2.0",
+    "minecraft-data": ">=3.0.0",
+    "three": ">=0.150.0"
+  },
+  "peerDependenciesMeta": {
+    "mc-assets": {
+      "optional": true
+    },
+    "minecraft-data": {
+      "optional": true
+    }
+  },
+  "repository": "https://github.com/zardoy/minecraft-renderer",
+  "engines": {
+    "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+  },
+  "scripts": {
+    "build": "pnpm build:all",
+    "build:all": "run-s build:lib build-mesher build:playground",
+    "build:lib": "node scripts/buildLib.mjs",
+    "build:lib:minify": "node scripts/buildLib.mjs --minify",
+    "watch:lib": "node scripts/buildLib.mjs -w",
+    "build-mesher": "node scripts/buildMesherWorker.mjs",
+    "watch-mesher": "pnpm build-mesher -w",
+    "build:playground": "rsbuild build --config rsbuild.config.ts",
+    "dev": "run-p watch-mesher dev:playground",
+    "dev:playground": "rsbuild dev --config rsbuild.config.ts",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/examples/README.md

@@ -0,0 +1,146 @@
+# Examples
+
+This directory contains examples showing how to use the `@minecraft-renderer` library.
+
+## AppViewerExample
+
+**File**: `appViewerExample.ts`
+
+A comprehensive example showing how to:
+- Initialize the AppViewer
+- Load a graphics backend
+- Set up a world with blocks
+- Handle player state
+- Switch between panorama and world modes
+
+### Usage
+
+```typescript
+import { AppViewerExample, runExample } from 'minecraft-renderer'
+
+// Run the complete example
+await runExample()
+
+// Or use the class directly
+const example = new AppViewerExample()
+await example.init()
+await example.startWorld()
+```
+
+## Initial Menu Start
+
+**File**: `initialMenuStart.ts`
+
+A recreation of the original app viewer functionality, showing how to:
+- Create a global app viewer instance
+- Handle demo mode vs panorama mode
+- Load Minecraft data
+- Set up a simple world with water blocks
+- Position the camera
+
+This example closely mirrors your original implementation and can be used as a reference for migrating existing code.
+
+### Usage
+
+```typescript
+import { appViewer, initialize, initialMenuStart } from 'minecraft-renderer'
+
+// Initialize everything
+await initialize()
+
+// Or just start the menu
+await initialMenuStart()
+
+// Access the global app viewer
+appViewer.startPanorama()
+```
+
+## Building the Library
+
+To build the library for distribution:
+
+```bash
+# Build TypeScript declarations
+npm run build
+
+# Build the bundled library
+npm run build:lib
+
+# Build minified version
+npm run build:lib:minify
+
+# Watch mode for development
+npm run watch:lib
+
+# Build everything
+npm run build:all
+```
+
+## Integration Guide
+
+### 1. Basic Setup
+
+```typescript
+import { AppViewer, createGraphicsBackend } from 'minecraft-renderer'
+
+const viewer = new AppViewer({
+  config: {
+    fpsLimit: 60,
+    powerPreference: 'high-performance'
+  }
+})
+
+// Set up resource manager
+viewer.resourcesManager = new ResourcesManager()
+
+// Load backend
+await viewer.loadBackend(createGraphicsBackend)
+```
+
+### 2. Starting a World
+
+```typescript
+// Create your world provider
+const world = {
+  getColumnAt: (pos) => ({ /* chunk data */ }),
+  setBlockStateId: (pos, stateId) => { /* set block */ }
+}
+
+// Start the world
+await viewer.startWorld(world, renderDistance)
+
+// Initialize world view
+await viewer.worldView?.init(startPosition)
+```
+
+### 3. Camera Control
+
+```typescript
+viewer.updateCamera(
+  new Vec3(x, y, z), // position
+  yaw,               // rotation Y
+  pitch              // rotation X
+)
+```
+
+### 4. Player State
+
+```typescript
+// Update player state
+Object.assign(viewer.playerState.reactive, {
+  username: 'Player',
+  gameMode: 'creative'
+})
+```
+
+## Migration from Original Code
+
+If you're migrating from the original implementation:
+
+1. **Replace imports**: Update import paths to use the new module structure
+2. **Use AppViewer**: Replace direct backend usage with AppViewer
+3. **Update WorldView**: Use the new WorldView class instead of WorldDataEmitter
+4. **Resource Manager**: Set up ResourcesManager on the AppViewer instance
+5. **Player State**: Use the new player state structure
+
+See `initialMenuStart.ts` for a direct migration example.

package/src/examples/appViewerExample.ts

@@ -0,0 +1,205 @@
+/**
+ * AppViewer Example - Shows how to use the AppViewer class
+ *
+ * This example demonstrates:
+ * - Loading a graphics backend
+ * - Setting up a world
+ * - Managing player state
+ * - Handling panorama mode
+ */
+
+import { Vec3 } from 'vec3'
+import { AppViewer } from '../graphicsBackend/appViewer'
+import { ResourcesManager } from '../resourcesManager/resourcesManager'
+import { WorldView } from '../worldView'
+import { getInitialPlayerState } from '../graphicsBackend/playerState'
+
+// Example world provider implementation
+class ExampleWorldProvider {
+  private blocks = new Map<string, number>()
+
+  getColumnAt(pos: Vec3) {
+    // Return a simple column with some blocks
+    return {
+      toJson: () => new Uint8Array([1, 2, 3]), // Simple chunk data
+      minY: 0,
+      worldHeight: 256,
+      blockEntities: {}
+    }
+  }
+
+  setBlockStateId(pos: Vec3, stateId: number) {
+    this.blocks.set(`${pos.x},${pos.y},${pos.z}`, stateId)
+  }
+
+  getBiome(pos: Vec3) {
+    return 1 // Plains biome
+  }
+}
+
+// Example usage class
+export class AppViewerExample {
+  private appViewer: AppViewer
+  private resourcesManager: ResourcesManager
+
+  constructor() {
+    // Create resource manager
+    this.resourcesManager = new ResourcesManager()
+
+    // Create app viewer with custom config
+    this.appViewer = new AppViewer({
+      config: {
+        fpsLimit: 60,
+        powerPreference: 'high-performance',
+        sceneBackground: '#87CEEB', // Sky blue
+        statsVisible: 1
+      },
+      rendererConfig: {
+        renderEntities: true,
+        smoothLighting: true,
+        fov: 75,
+        renderDistance: 10
+      }
+    })
+
+    // Set the resource manager
+    this.appViewer.resourcesManager = this.resourcesManager
+  }
+
+  /**
+   * Initialize and load the graphics backend
+   */
+  async init() {
+    try {
+      // Load minecraft data for version 1.16.4
+      const version = '1.16.4'
+      await this.resourcesManager.loadSourceData(version)
+      this.resourcesManager.currentConfig = { version }
+
+      // Load graphics backend (Three.js)
+      const { createGraphicsBackend } = await import('../three/graphicsBackend')
+      await this.appViewer.loadBackend(createGraphicsBackend)
+
+      console.log('AppViewer initialized successfully')
+    } catch (error) {
+      console.error('Failed to initialize AppViewer:', error)
+      throw error
+    }
+  }
+
+  /**
+   * Start panorama mode (menu background)
+   */
+  startPanorama() {
+    this.appViewer.startPanorama()
+    console.log('Panorama started')
+  }
+
+  /**
+   * Start world rendering
+   */
+  async startWorld() {
+    try {
+      // Create a simple world
+      const world = new ExampleWorldProvider()
+
+      // Set some blocks
+      world.setBlockStateId(new Vec3(0, 64, 0), 1) // Stone
+      world.setBlockStateId(new Vec3(1, 64, 0), 2) // Grass
+      world.setBlockStateId(new Vec3(0, 64, 1), 3) // Dirt
+
+      // Start the world with render distance 5
+      const renderDistance = 5
+      const startPosition = new Vec3(0, 65, 0)
+
+      await this.appViewer.startWorld(world, renderDistance, undefined, startPosition)
+
+      // Initialize world view
+      if (this.appViewer.worldView) {
+        await this.appViewer.worldView.init(startPosition)
+      }
+
+      // Set camera position
+      this.appViewer.updateCamera(
+        new Vec3(0, 66, 5), // Position
+        0,                  // Yaw
+        -Math.PI / 6        // Pitch (looking down slightly)
+      )
+
+      console.log('World started successfully')
+    } catch (error) {
+      console.error('Failed to start world:', error)
+      throw error
+    }
+  }
+
+  /**
+   * Update player state
+   */
+  updatePlayerState(updates: Partial<any>) {
+    Object.assign(this.appViewer.playerState.reactive, updates)
+  }
+
+  /**
+   * Get current renderer state
+   */
+  getRendererState() {
+    return {
+      reactive: this.appViewer.rendererState,
+      nonReactive: this.appViewer.nonReactiveState
+    }
+  }
+
+  /**
+   * Wait for world to be ready
+   */
+  async waitForWorldReady() {
+    await this.appViewer.worldReady
+    console.log('World is ready')
+  }
+
+  /**
+   * Cleanup resources
+   */
+  destroy() {
+    this.appViewer.destroyAll()
+    console.log('AppViewer destroyed')
+  }
+}
+
+// Usage example
+export async function runExample() {
+  const example = new AppViewerExample()
+
+  try {
+    // Initialize
+    await example.init()
+
+    // Start with panorama
+    example.startPanorama()
+
+    // Wait a bit, then switch to world
+    setTimeout(async () => {
+      await example.startWorld()
+      await example.waitForWorldReady()
+
+      // Update player state
+      example.updatePlayerState({
+        username: 'ExamplePlayer',
+        gameMode: 'creative'
+      })
+
+      console.log('Example completed successfully')
+    }, 2000)
+
+  } catch (error) {
+    console.error('Example failed:', error)
+    example.destroy()
+  }
+}
+
+// For browser usage
+if (typeof window !== 'undefined') {
+  (window as any).AppViewerExample = AppViewerExample
+    ; (window as any).runAppViewerExample = runExample
+}

package/src/examples/initialMenuStart.ts

@@ -0,0 +1,161 @@
+/**
+ * Initial Menu Start Example - Similar to your original implementation
+ *
+ * This demonstrates how to recreate the functionality from your original appViewer code.
+ */
+
+import { Vec3 } from 'vec3'
+import { AppViewer } from '../graphicsBackend/appViewer'
+import { ResourcesManager } from '../resourcesManager/resourcesManager'
+import { WorldView } from '../worldView'
+import { getInitialPlayerState } from '../graphicsBackend/playerState'
+
+// Global app viewer instance (similar to your original)
+export const appViewer = new AppViewer({
+  config: {
+    fpsLimit: undefined,
+    powerPreference: 'high-performance', // You can change this based on options
+    sceneBackground: 'lightblue',
+    timeoutRendering: false
+  }
+})
+
+// Set up resource manager
+appViewer.resourcesManager = new ResourcesManager()
+
+// Make it globally available (similar to your original)
+if (typeof window !== 'undefined') {
+  ; (window as any).appViewer = appViewer
+}
+
+/**
+ * Load Minecraft data for a specific version
+ */
+async function loadMinecraftData(version: string) {
+  if (!appViewer.resourcesManager) {
+    throw new Error('Resource manager not initialized')
+  }
+
+  await appViewer.resourcesManager.loadSourceData(version)
+  appViewer.resourcesManager.currentConfig = { version }
+  await appViewer.resourcesManager.updateAssetsData?.({})
+}
+
+/**
+ * Get sync world (placeholder - you'll need to implement this based on your needs)
+ */
+function getSyncWorld(version: string) {
+  // This is a placeholder - you'll need to implement this based on your world provider
+  return {
+    setBlockStateId: (pos: Vec3, stateId: number) => {
+      console.log(`Setting block at ${pos.x},${pos.y},${pos.z} to state ${stateId}`)
+    },
+    getColumnAt: (pos: Vec3) => ({
+      toJson: () => new Uint8Array([1, 2, 3]),
+      minY: 0,
+      worldHeight: 256,
+      blockEntities: {}
+    })
+  }
+}
+
+/**
+ * Initial menu start function - similar to your original
+ */
+export const initialMenuStart = async () => {
+  try {
+    if (appViewer.currentDisplay === 'world') {
+      appViewer.resetBackend(true)
+    }
+
+    // Check for demo mode
+    const demo = new URLSearchParams(window.location.search).get('demo')
+    if (!demo) {
+      appViewer.startPanorama()
+      return
+    }
+
+    // Demo mode - create a simple world
+    const version = '1.16.4' // You can change this
+
+    // Load minecraft data
+    await loadMinecraftData(version)
+
+    // Get world
+    const world = getSyncWorld(version)
+
+    // Set some example blocks (you'll need to get proper state IDs)
+    const waterStateId = 1 // Placeholder - get from mcData.blocksByName.water.defaultState
+    world.setBlockStateId(new Vec3(0, 64, 0), waterStateId)
+    world.setBlockStateId(new Vec3(1, 64, 0), waterStateId)
+    world.setBlockStateId(new Vec3(1, 64, 1), waterStateId)
+    world.setBlockStateId(new Vec3(0, 64, 1), waterStateId)
+    world.setBlockStateId(new Vec3(-1, 64, -1), waterStateId)
+    world.setBlockStateId(new Vec3(-1, 64, 0), waterStateId)
+    world.setBlockStateId(new Vec3(0, 64, -1), waterStateId)
+
+    // Set initial player state
+    appViewer.playerState.reactive = getInitialPlayerState()
+
+    // Start world
+    await appViewer.startWorld(world, 3)
+
+    // Update camera to look down at the water
+    appViewer.backend?.updateCamera(
+      new Vec3(0, 65.7, 0), // Position
+      0,                    // Yaw
+      -Math.PI / 2          // Pitch (looking down)
+    )
+
+    // Initialize world view
+    if (appViewer.worldView) {
+      await appViewer.worldView.init(new Vec3(0, 64, 0))
+    }
+
+    console.log('Demo world started successfully')
+  } catch (error) {
+    console.error('Failed to start demo:', error)
+  }
+}
+
+/**
+ * Initialize the graphics backend
+ */
+export async function initializeGraphicsBackend() {
+  try {
+    // Load the Three.js backend
+    const { createGraphicsBackend } = await import('../three/graphicsBackend')
+    await appViewer.loadBackend(createGraphicsBackend)
+    console.log('Graphics backend loaded successfully')
+  } catch (error) {
+    console.error('Failed to load graphics backend:', error)
+    throw error
+  }
+}
+
+/**
+ * Complete initialization function
+ */
+export async function initialize() {
+  await initializeGraphicsBackend()
+  await initialMenuStart()
+}
+
+// Make functions globally available for browser usage
+if (typeof window !== 'undefined') {
+  ; (window as any).initialMenuStart = initialMenuStart
+    ; (window as any).initializeGraphicsBackend = initializeGraphicsBackend
+    ; (window as any).initialize = initialize
+}
+
+// Auto-initialize if in browser and not in a module context
+if (typeof window !== 'undefined' && !window.location.search.includes('manual')) {
+  // Auto-initialize after DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => {
+      void initialize()
+    })
+  } else {
+    void initialize()
+  }
+}