split up renderers into different classes

src/js/net/minecraft/client/GameWindow.js

@@ -3,7 +3,6 @@ window.GameWindow = class {
     constructor(minecraft, canvasWrapperId) {
         this.minecraft = minecraft;
         this.canvasWrapperId = canvasWrapperId;
-        this.renderer = null;
 
         this.mouseMotionX = 0;
         this.mouseMotionY = 0;
@@ -21,17 +20,26 @@ window.GameWindow = class {
         this.canvas2d = document.createElement('canvas');
         this.wrapper.appendChild(this.canvas2d);
 
+        // Create screen item renderer
+        this.canvasItems = document.createElement('canvas');
+        this.wrapper.appendChild(this.canvasItems);
+
         // Stats
         this.stats = new Stats()
         this.stats.showPanel(0);
         this.wrapper.appendChild(this.stats.dom);
 
-        // Initialize window size
-        this.updateWindowSize();
-
         // On resize
         let scope = this;
-        window.addEventListener('resize', _ => scope.onResize(), false);
+
+        // Request focus
+        document.onclick = function () {
+            if (scope.minecraft.currentScreen === null) {
+                scope.requestFocus();
+            }
+        }
+
+        window.addEventListener('resize', _ => scope.updateWindowSize(), false);
 
         // Focus listener
         document.addEventListener('pointerlockchange', _ => this.onFocusChanged(), false);
@@ -97,22 +105,33 @@ window.GameWindow = class {
         document.body.style.cursor = 'default';
     }
 
-    loadRenderer(renderer) {
+    updateWindowSize() {
-        this.renderer = renderer;
+        this.updateScaleFactor();
 
-        // Initialize window size
+        let wrapperWidth = this.width * this.scaleFactor;
-        this.onResize();
+        let wrapperHeight = this.height * this.scaleFactor;
 
-        // Request focus
+        let worldRenderer = this.minecraft.worldRenderer;
-        let scope = this;
+
-        document.onclick = function () {
+        // Update world renderer size and camera
-            if (scope.minecraft.currentScreen === null) {
+        worldRenderer.camera.aspect = this.width / this.height;
-                scope.requestFocus();
+        worldRenderer.camera.updateProjectionMatrix();
-            }
+        worldRenderer.webRenderer.setSize(wrapperWidth, wrapperHeight);
+
+        // Update canvas 2d size
+        this.canvas2d.style.width = wrapperWidth + "px";
+        this.canvas2d.style.height = wrapperHeight + "px";
+
+        // Reinitialize gui
+        this.minecraft.screenRenderer.initialize();
+
+        // Reinitialize current screen
+        if (!(this.minecraft.currentScreen === null)) {
+            this.minecraft.currentScreen.setup(this.minecraft, this.width, this.height);
         }
     }
 
-    updateWindowSize() {
+    updateScaleFactor() {
         let wrapperWidth = this.wrapper.offsetWidth;
         let wrapperHeight = this.wrapper.offsetHeight;
 
@@ -126,30 +145,6 @@ window.GameWindow = class {
         this.height = wrapperHeight / scale;
     }
 
-    onResize() {
-        this.updateWindowSize();
-
-        let wrapperWidth = this.width * this.scaleFactor;
-        let wrapperHeight = this.height * this.scaleFactor;
-
-        // Update world renderer size and camera
-        this.renderer.camera.aspect = this.width / this.height;
-        this.renderer.camera.updateProjectionMatrix();
-        this.renderer.webRenderer.setSize(wrapperWidth, wrapperHeight);
-
-        // Update canvas 2d size
-        this.canvas2d.style.width = wrapperWidth + "px";
-        this.canvas2d.style.height = wrapperHeight + "px";
-
-        // Reinitialize gui
-        this.renderer.initializeGui();
-
-        // Reinitialize current screen
-        if (!(this.minecraft.currentScreen === null)) {
-            this.minecraft.currentScreen.setup(this.minecraft, this.width, this.height);
-        }
-    }
-
     onFocusChanged() {
         this.actualMouseLocked = document.pointerLockElement === this.canvas;
     }

src/js/net/minecraft/client/Minecraft.js

@@ -12,9 +12,15 @@ window.Minecraft = class {
         this.worldRenderer = new WorldRenderer(this, this.window);
         this.timer = new Timer(20);
 
+        // Create screen renderer
+        this.screenRenderer = new ScreenRenderer(this, this.window);
+
         // Create current screen and overlay
         this.ingameOverlay = new IngameOverlay(this, this.window);
 
+        // Update window size
+        this.window.updateWindowSize();
+
         // Display loading screen
         this.loadingScreen = new GuiLoadingScreen();
         this.loadingScreen.setTitle("Building terrain...");
@@ -106,6 +112,7 @@ window.Minecraft = class {
 
         // Render the game
         this.worldRenderer.render(partialTicks);
+        this.screenRenderer.render(partialTicks);
     }
 
     displayScreen(screen) {

src/js/net/minecraft/client/gui/IngameOverlay.js

@@ -50,7 +50,7 @@ window.IngameOverlay = class extends Gui {
                 let minU = (textureIndex % 16) / 16.0;
                 let minV = Math.floor(textureIndex / 16) / 16.0;
 
-                this.drawSprite(stack, this.textureTerrain, minU * 256, minV, 16, 16, x + 3, y + 3, 16, 16)
+                this.drawSprite(stack, this.textureTerrain, minU * 256, minV, 16, 16, x + 3 + i * 20, y + 3, 16, 16)
             }
         }
     }

src/js/net/minecraft/client/render/WorldRenderer.js

@@ -15,15 +15,6 @@ window.WorldRenderer = class {
         // Block Renderer
         this.blockRenderer = new BlockRenderer(this);
 
-        // Initialize renderers
-        this.initializeRenderer();
-        this.initializeGui();
-
-        // Load renderer into window
-        this.window.loadRenderer(this);
-    }
-
-    initializeRenderer() {
         // Create world camera
         this.camera = new THREE.PerspectiveCamera(0, 1, 0.001, 1000);
         this.camera.rotation.order = 'ZYX';
@@ -52,47 +43,6 @@ window.WorldRenderer = class {
         this.webRenderer.clear();
     }
 
-    initializeGui() {
-        // Update camera size
-        this.window.canvas2d.width = this.window.width;
-        this.window.canvas2d.height = this.window.height;
-
-        // Get context stack of 2d canvas
-        this.stack2d = this.window.canvas2d.getContext('2d');
-        this.stack2d.webkitImageSmoothingEnabled = false;
-        this.stack2d.mozImageSmoothingEnabled = false;
-        this.stack2d.imageSmoothingEnabled = false;
-
-        // Create texture from rendered graphics.
-        //this.frameBuffer = new THREE.Texture(this.canvas2d)
-        //this.frameBuffer.needsUpdate = true;
-        //this.frameBuffer.minFilter = THREE.LinearFilter;
-        //this.frameBuffer.maxFilter = THREE.LinearFilter;
-
-        // Create HUD material.
-        //let material = new THREE.MeshBasicMaterial({
-        //    map: this.frameBuffer,
-        //    transparent: true
-        //});
-
-        // Create plane to render the HUD. This plane fill the whole screen.
-        //let geometry = new THREE.PlaneGeometry(this.canvas2d.width, this.canvas2d.height);
-        //let plane = new THREE.Mesh(geometry, material);
-
-        // Create also a custom scene for HUD.
-        //this.scene2d = new THREE.Scene();
-        //this.scene2d.add(plane);
-
-        // Create 2D camera
-        /*this.camera2d = new THREE.OrthographicCamera(0, 0, 0, 0, 0, 30);
-        this.camera2d.aspect = this.window.width / this.window.height;
-        this.camera2d.left = -this.window.width / 2;
-        this.camera2d.right = this.window.width / 2;
-        this.camera2d.top = this.window.height / 2;
-        this.camera2d.bottom = -this.window.height / 2;
-        this.camera2d.updateProjectionMatrix();*/
-    }
-
     render(partialTicks) {
         // Setup camera
         this.orientCamera(partialTicks);
@@ -103,19 +53,6 @@ window.WorldRenderer = class {
         let cameraChunkZ = Math.floor(player.z >> 4);
         this.renderChunks(cameraChunkX, cameraChunkZ);
 
-        // Reset 2d canvas
-        this.stack2d.clearRect(0, 0, this.window.width, this.window.height);
-
-        // Render in-game overlay
-        let mouseX = this.minecraft.window.mouseX;
-        let mouseY = this.minecraft.window.mouseY;
-        this.minecraft.ingameOverlay.render(this.stack2d, mouseX, mouseY, partialTicks);
-
-        // Render current screen
-        if (!(this.minecraft.currentScreen === null)) {
-            this.minecraft.currentScreen.drawScreen(this.stack2d, mouseX, mouseY, partialTicks);
-        }
-
         // Render actual scene and hud
         this.webRenderer.render(this.scene, this.camera);
     }

src/js/net/minecraft/client/render/gui/ScreenRenderer.js

@@ -0,0 +1,36 @@
+window.ScreenRenderer = class {
+
+    constructor(minecraft, window) {
+        this.minecraft = minecraft;
+        this.window = window;
+    }
+
+    initialize() {
+        // Update camera size
+        this.window.canvas2d.width = this.window.width;
+        this.window.canvas2d.height = this.window.height;
+
+        // Get context stack of 2d canvas
+        this.stack2d = this.window.canvas2d.getContext('2d');
+        this.stack2d.webkitImageSmoothingEnabled = false;
+        this.stack2d.mozImageSmoothingEnabled = false;
+        this.stack2d.imageSmoothingEnabled = false;
+    }
+
+    render(partialTicks) {
+        let mouseX = this.minecraft.window.mouseX;
+        let mouseY = this.minecraft.window.mouseY;
+
+        // Reset 2d canvas
+        this.stack2d.clearRect(0, 0, this.window.width, this.window.height);
+
+        // Render in-game overlay
+        this.minecraft.ingameOverlay.render(this.stack2d, mouseX, mouseY, partialTicks);
+
+        // Render current screen
+        if (!(this.minecraft.currentScreen === null)) {
+            this.minecraft.currentScreen.drawScreen(this.stack2d, mouseX, mouseY, partialTicks);
+        }
+    }
+
+}

src/start.js

@@ -89,7 +89,8 @@ loadScripts([
     "src/js/net/minecraft/client/render/isometric/Point.js",
     "src/js/net/minecraft/client/render/isometric/TextCoord.js",
     "src/js/net/minecraft/client/render/isometric/Triangle.js",
-    "src/js/net/minecraft/client/render/FontRenderer.js",
+    "src/js/net/minecraft/client/render/gui/FontRenderer.js",
+    "src/js/net/minecraft/client/render/gui/ScreenRenderer.js",
     "src/js/net/minecraft/client/render/Tessellator.js",
     "src/js/net/minecraft/client/render/WorldRenderer.js",
     "src/js/net/minecraft/client/render/BlockRenderer.js"