dash

src/lib/GameEngine.js

@@ -16,6 +16,7 @@ import { XRButton } from 'three/addons/webxr/XRButton.js';
 import { XRControllerModelFactory } from 'three/addons/webxr/XRControllerModelFactory.js';
 import { Physics } from './Physics.js';
 import { Clickable } from './Clickable.js';
+import { DashBoard } from './Dashboard.js';
 
 class GameEngine extends THREE.EventDispatcher{
     async init(domNode, opts = {}) {
@@ -74,7 +75,7 @@ class GameEngine extends THREE.EventDispatcher{
 
         const renderer = new THREE.WebGLRenderer({
             antialias: true,
-            // alpha: true,
+            alpha: false,
             preserveDrawingBuffer: true, //this is important for screenshots capturing
             powerPreference: "high-performance",
         });
@@ -90,6 +91,7 @@ class GameEngine extends THREE.EventDispatcher{
         renderer.setSize(this.w, this.h);
         renderer.setViewport(0, 0, this.w, this.h);
         renderer.autoClear = true;
+        renderer.alpha = true
 
         this.anaglyph = new AnaglyphEffect(renderer);
         this.anaglyph.setSize(this.w, this.h);
@@ -97,6 +99,9 @@ class GameEngine extends THREE.EventDispatcher{
         this.stereo = new StereoEffect(renderer);
         this.stereo.setSize(this.w, this.h);
 
+        const dashboard = new DashBoard(renderer, this.w, this.h);
+        this.dashboard = dashboard;
+
         this.activeObjects = new THREE.Group();
         scene.add(this.activeObjects);
 
@@ -131,6 +136,9 @@ class GameEngine extends THREE.EventDispatcher{
             if (!renderer.xr.isPresenting) {
                 gameEngine.gizmo?.render();
             }
+            renderer.autoClear = false;
+            dashboard.render();
+            renderer.autoClear = true;
         }
         renderer.setAnimationLoop(animate);