Added option to toggle axes rendering

res/static/axes.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-axis-x" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#00abfb" fill="none" stroke-linecap="round" stroke-linejoin="round" id="axes-svg">
+  <path d="M17 20l3 -3l-3 -3" />
+  <path d="M4 17h16" />
+  <path d="M4 7l3 -3l3 3" />
+  <path d="M7 20v-16" />
+</svg>

src/app_context.ts

@@ -84,6 +84,7 @@ export class AppContext {
         this._ui.disable(EAction.Simplify);
 
         Renderer.Get.toggleIsGridEnabled();
+        Renderer.Get.toggleIsAxesEnabled();
     }
 
     public do(action: EAction) {

src/event.ts

@@ -5,6 +5,7 @@ export enum EAppEvent {
     onModelActiveChanged,
     onModelAvailableChanged,
     onGridEnabledChanged,
+    onAxesEnabledChanged,
     onWireframeEnabledChanged,
     onNormalsEnabledChanged,
     onDevViewEnabledChanged,

src/renderer.ts

@@ -36,7 +36,6 @@ export class Renderer {
 
     private _backgroundColour = new RGB(0.125, 0.125, 0.125);
     private _atlasTexture?: WebGLTexture;
-    private _occlusionNeighboursIndices!: Array<Array<Array<number>>>; // Ew
 
     private _meshToUse: MeshType = MeshType.None;
     private _voxelSize: number = 1.0;
@@ -55,6 +54,7 @@ export class Renderer {
     private _axisBuffer: RenderBuffer;
 
     private _isGridComponentEnabled: { [bufferComponent: string]: boolean };
+    private _axesEnabled: boolean;
 
     private static _instance: Renderer;
     public static get Get() {
@@ -79,6 +79,7 @@ export class Renderer {
 
         this._isGridComponentEnabled = {};
         this._isGridComponentEnabled[EDebugBufferComponents.Grid] = false;
+        this._axesEnabled = false;
 
         this._axisBuffer = new RenderBuffer([
             { name: 'position', numComponents: 3 },
@@ -119,6 +120,11 @@ export class Renderer {
         EventManager.Get.broadcast(EAppEvent.onGridEnabledChanged, isEnabled);
     }
 
+    public toggleIsAxesEnabled() {
+        this._axesEnabled = !this._axesEnabled;
+        EventManager.Get.broadcast(EAppEvent.onAxesEnabledChanged, this._axesEnabled);
+    }
+
     public toggleIsWireframeEnabled() {
         const isEnabled = !this._isGridComponentEnabled[EDebugBufferComponents.Wireframe];
         this._isGridComponentEnabled[EDebugBufferComponents.Wireframe] = isEnabled;
@@ -260,11 +266,13 @@ export class Renderer {
             }
         }
         // Draw axis
-        this._gl.disable(this._gl.DEPTH_TEST);
-        this._drawBuffer(this._gl.LINES, this._axisBuffer.getWebGLBuffer(), ShaderManager.Get.debugProgram, {
-            u_worldViewProjection: ArcballCamera.Get.getWorldViewProjection(),
-        });
-        this._gl.enable(this._gl.DEPTH_TEST);
+        if (this._axesEnabled) {
+            this._gl.disable(this._gl.DEPTH_TEST);
+            this._drawBuffer(this._gl.LINES, this._axisBuffer.getWebGLBuffer(), ShaderManager.Get.debugProgram, {
+                u_worldViewProjection: ArcballCamera.Get.getWorldViewProjection(),
+            });
+            this._gl.enable(this._gl.DEPTH_TEST);
+        }
     }
 
     private _drawMesh() {

src/ui/layout.ts

@@ -180,8 +180,14 @@ export class UI {
                         const isEnabled = args[0][0][0] as boolean;
                         return isEnabled;
                     }),
+                    'axes': new ToolbarItemElement('axes', () => {
+                        Renderer.Get.toggleIsAxesEnabled();
+                    }, EAppEvent.onAxesEnabledChanged, (...args: any[]) => {
+                        const isEnabled = args[0][0][0] as boolean;
+                        return isEnabled;
+                    }),
                 },
-                elementsOrder: ['grid'],
+                elementsOrder: ['grid', 'axes'],
             },
         },
         groupsOrder: ['viewmode', 'zoom', 'debug'],