implement gui

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

@@ -47,13 +47,22 @@ window.GameWindow = class {
     onResize() {
         // Get canvas size
         let canvasElement = document.getElementById(this.canvasWrapperId);
-        this.canvasWidth = canvasElement.offsetWidth;
-        this.canvasHeight = canvasElement.offsetHeight;
+        this.width = canvasElement.offsetWidth;
+        this.height = canvasElement.offsetHeight;
 
         // Adjust camera
-        this.renderer.camera.aspect = this.canvasWidth / this.canvasHeight;
+        this.renderer.camera.aspect = this.width / this.height;
         this.renderer.camera.updateProjectionMatrix();
-        this.renderer.webRenderer.setSize(this.canvasWidth, this.canvasHeight);
+        this.renderer.webRenderer.setSize(this.width, this.height);
+
+        // Update HUD camera
+        this.renderer.camera2D.left = -this.width / 2;
+        this.renderer.camera2D.right = this.width / 2;
+        this.renderer.camera2D.top = this.height / 2;
+        this.renderer.camera2D.bottom = -this.height / 2;
+        this.renderer.camera2D.updateProjectionMatrix();
+
+        console.log("Resize");
     }
 
     onFocusChanged() {
@@ -63,5 +72,7 @@ window.GameWindow = class {
     onMouseMove(event) {
         this.mouseMotionX = event.movementX;
         this.mouseMotionY = -event.movementY;
+        this.mouseX = event.clientX;
+        this.mouseY = event.clientY;
     }
 }

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

@@ -4,7 +4,7 @@ window.Minecraft = class {
      * Create Minecraft instance and render it on a canvas
      */
     constructor(canvasWrapperId) {
-        this.worldRenderer = new WorldRenderer(this);
+        this.worldRenderer = new WorldRenderer(this, canvasWrapperId);
         this.window = new GameWindow(this, this.worldRenderer, canvasWrapperId);
         this.timer = new Timer(20);
 
@@ -22,6 +22,10 @@ window.Minecraft = class {
         this.player = new Player(this.world);
         this.pickedBlock = 1;
 
+        // Create current screen and overlay
+        this.ingameOverlay = new IngameOverlay();
+        this.currentScreen = null;
+
         // Initialize
         this.init();
     }

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

@@ -0,0 +1,10 @@
+window.Gui = class {
+
+    drawRect(stack, left, top, right, bottom, color, alpha = 1) {
+        stack.fillStyle = color;
+        stack.globalAlpha = alpha;
+        stack.fillRect(left, top, right - left, bottom - top);
+        stack.globalAlpha = alpha;
+    }
+
+}

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

@@ -0,0 +1,5 @@
+window.GuiScreen = class {
+
+
+
+}

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

@@ -0,0 +1,7 @@
+window.IngameOverlay = class extends Gui {
+
+    render(stack, mouseX, mouseY, partialTicks) {
+        this.drawRect(stack, 0, 0, 10, 10, '#0000FF');
+    }
+
+}

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

@@ -2,18 +2,28 @@ window.WorldRenderer = class {
 
     static RENDER_DISTANCE = 4;
 
-    constructor(minecraft) {
+    constructor(minecraft, canvasWrapperId) {
         this.minecraft = minecraft;
 
+        this.canvas2D = document.createElement('canvas');
+        // Get canvas size
+        let canvasElement = document.getElementById(canvasWrapperId);
+        this.canvasWidth = canvasElement.offsetWidth;
+        this.canvasHeight = canvasElement.offsetHeight;
+
+        this.stack2D = null;
+        this.hudTexture = null;
+
         this.supportWebGL = !!WebGLRenderingContext
             && (!!document.createElement('canvas').getContext('experimental-webgl')
                 || !!document.createElement('canvas').getContext('webgl'));
 
-        // Create cameras
+        // Create world camera
         this.camera = new THREE.PerspectiveCamera(0, 1, 0.001, 1000);
         this.camera.rotation.order = 'ZYX';
         this.camera.up = new THREE.Vector3(0, 0, 1);
 
+        // Frustum
         this.frustum = new THREE.Frustum();
 
         // Create scene
@@ -47,6 +57,33 @@ window.WorldRenderer = class {
         this.blockRenderer = new BlockRenderer(this);
 
         this.chunkSectionUpdateQueue = [];
+
+        this.initializeHud();
+    }
+
+    initializeHud() {
+
+        // Create canvas context for screen rendering
+        this.stack2D =   this.canvas2D.getContext('2d');
+        this.hudTexture = new THREE.Texture(this.stack2D);
+        this.hudTexture.needsUpdate = true;
+
+        // Create HUD material.
+        let material = new THREE.MeshBasicMaterial({map: this.hudTexture});
+        material.map.minFilter = THREE.LinearFilter;
+        material.transparent = true;
+
+        // Create plane to render the HUD. This plane fill the whole screen.
+        let planeGeometry = new THREE.PlaneGeometry(  this.canvas2D.width,   this.canvas2D.height);
+        let plane = new THREE.Mesh(planeGeometry, material);
+
+        // Create HUD
+        this.hud = new THREE.Scene();
+        // this.hud.matrixAutoUpdate = false;
+        this.hud.add(plane);
+
+        // Create camera for HUD
+        this.camera2D = new THREE.OrthographicCamera(0, 0, 0, 0, 0, 30);
     }
 
     render(partialTicks) {
@@ -59,8 +96,18 @@ window.WorldRenderer = class {
         let cameraChunkZ = Math.floor(player.z >> 4);
         this.renderChunks(cameraChunkX, cameraChunkZ);
 
-        // Render window
+        // 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 actual scene
         this.webRenderer.render(this.scene, this.camera);
+
+        // Render actual HUD
+        if (this.stack2D !== null && this.hudTexture !== null && this.hudTexture.image.naturalWidth !== 0) {
+            this.webRenderer.render(this.hud, this.camera2D);
+        }
     }
 
     orientCamera(partialTicks) {

src/start.js

@@ -59,6 +59,9 @@ loadScripts([
     "src/js/net/minecraft/util/MathHelper.js",
     "src/js/net/minecraft/util/BoundingBox.js",
     "src/js/net/minecraft/util/Keyboard.js",
+    "src/js/net/minecraft/client/gui/Gui.js",
+    "src/js/net/minecraft/client/gui/GuiScreen.js",
+    "src/js/net/minecraft/client/gui/IngameOverlay.js",
     "src/js/net/minecraft/client/GameWindow.js",
     "src/js/net/minecraft/client/world/block/Block.js",
     "src/js/net/minecraft/client/world/block/BlockStone.js",