Move to fullscreen and integrated UI

douze · douze · commit 2a6b17049bf2 · 2022-06-26T14:23:16.000+02:00
diff --git a/index.html b/index.html
@@ -10,8 +10,6 @@
 
 <body>
   <canvas id="renderCanvas"></canvas>
-  <canvas id="controlCanvas"></canvas>
-  <button id="addMarkerButton">+</button>
   <script type="module" src="/src/main.ts"></script>
 </body>
 
diff --git a/src/colorMap.ts b/src/colorMap.ts
@@ -30,14 +30,21 @@ export class ColorMap {
         // Canvas size is increased in order to encompass the markers
         this.positionOffset = 10;
         this.canvas = document.querySelector<HTMLCanvasElement>("#" + canvasId)!;
+        this.canvas = document.createElement("canvas");
+        this.canvas.setAttribute("id", "colorMap");
         this.canvas.setAttribute("width", String(width + this.positionOffset * 2));
         this.canvas.setAttribute("height", String(height + this.positionOffset * 2));
+        this.canvas.style.top = "20px";
+        this.canvas.style.right = "20px";
+        this.canvas.style.position = "absolute";
+        console.log(this.canvas.style);
         this.context = this.canvas.getContext("2d") as CanvasRenderingContext2D;
+        document.body.append(this.canvas);
 
         // Offscreen canvas is used for dynamic texture (full size, no markers)
         this.offscreenCanvas = document.createElement("canvas");
-        this.offscreenCanvas.setAttribute("width", this.canvas.width.toString());
-        this.offscreenCanvas.setAttribute("height", this.canvas.height.toString());
+        this.offscreenCanvas.style.width = this.canvas.width.toString();
+        this.offscreenCanvas.style.height = this.canvas.height.toString();
         this.offscreenContext = this.offscreenCanvas.getContext("2d") as CanvasRenderingContext2D;
         this.canvas.append(this.offscreenCanvas);
 
@@ -135,7 +142,6 @@ export class ColorMap {
         // Draw gradient to offscreen canvas
         this.offscreenContext.fillStyle = this.gradient;
         this.offscreenContext.fillRect(0, 0, this.offscreenCanvas.width, this.offscreenCanvas.height);
-        this.offscreenContext.strokeRect(0, 0, this.offscreenCanvas.width, this.offscreenCanvas.height);
 
         // Copy it to visible canvas
         this.context.drawImage(this.offscreenCanvas, this.positionOffset, this.positionOffset, this.width, this.height);
diff --git a/src/main.ts b/src/main.ts
@@ -1,33 +1,43 @@
-import { ArcRotateCamera, AxesViewer, DynamicTexture, Engine, HemisphericLight, Mesh, MeshBuilder, RawTexture3D, Scene, SceneLoader, ShaderMaterial, StandardMaterial, Vector2, Vector3, VertexData } from "@babylonjs/core";
+import { ArcRotateCamera, Color4, DynamicTexture, Engine, HemisphericLight, Mesh, RawTexture3D, Scene, SceneLoader, ShaderMaterial, Vector3, VertexData } from "@babylonjs/core";
 import "@babylonjs/inspector";
 import { ColorMap } from "./colorMap";
 import './shadersStore';
 import './style.css';
 import { VolumeRawSceneLoader } from "./volumeRawSceneLoader";
 
+/**
+ * Entry point of the main application.
+ */
 class App {
 
   private engine: Engine;
   private scene: Scene;
   private camera: ArcRotateCamera;
 
+  /**
+   * Create the whole rendering pipeline.
+   */
   constructor() {
     let canvas: HTMLCanvasElement = document.querySelector<HTMLCanvasElement>('#renderCanvas')!;
 
     this.engine = new Engine(canvas, true);
     this.scene = new Scene(this.engine);
-    this.scene.debugLayer.show();
+    this.scene.clearColor = new Color4(1.0, 1.0, 1.0, 1.0);
 
     SceneLoader.RegisterPlugin(new VolumeRawSceneLoader());
 
     this.camera = new ArcRotateCamera("camera", Math.PI / 2, Math.PI / 2, -2, new Vector3(0.5, 0.5, 0), this.scene);
     this.camera.attachControl(canvas, true);
     this.camera.wheelPrecision = 120;
+    this.camera.minZ = 0.1;
 
     const light: HemisphericLight = new HemisphericLight("light", new Vector3(0, 1, 0), this.scene);
     light.intensity = 0.7;
   }
 
+  /**
+   * Create a simple box without any custom attributes.
+   */
   private createSimpleBox(): Mesh {
     const box: Mesh = new Mesh("box", this.scene);
 
@@ -55,6 +65,11 @@ class App {
     return box;
   }
 
+  /**
+   * Create the material for the volume rendering.
+   * @param volumeTexture texture to gather volume data
+   * @param colorMapTexture texture for transfert function
+   */
   private createMaterial(volumeTexture: RawTexture3D, colorMapTexture: DynamicTexture): ShaderMaterial {
     const material: ShaderMaterial = new ShaderMaterial("volume", this.scene, { vertex: "volume", fragment: "volume", },
       {
@@ -69,6 +84,9 @@ class App {
     return material;
   }
 
+  /**
+   * Load the asset then create the full scene.
+   */
   public start() {
     const bonsaiFilename: string = "bonsai_256x256x256_uint8.raw";
     SceneLoader.LoadAssetContainer("./", bonsaiFilename, this.scene, (container) => {
@@ -92,7 +110,6 @@ class App {
 
       const material: ShaderMaterial = this.createMaterial(volumeTexture, colorMapTexture);
 
-      new AxesViewer(this.scene, 1.0);
       const box = this.createSimpleBox();
       box.material = material;
 
diff --git a/src/style.css b/src/style.css
@@ -1,9 +1,9 @@
+html,
+body,
 #renderCanvas {
-  margin-top: 60px;
+  margin: 0;
+  padding: 0;
   width: 100%;
-  height: 600px;
+  height: 100%;
+  font-size: 0;
 }
-
-
-canvas { border: 1px solid black; }
-    
diff --git a/src/volumeRawSceneLoader.ts b/src/volumeRawSceneLoader.ts
@@ -1,5 +1,8 @@
 import { ISceneLoaderPlugin, Scene, AbstractMesh, IParticleSystem, Skeleton, RawTexture3D, Engine, Texture, AssetContainer, ISceneLoaderPluginExtensions } from "@babylonjs/core";
 
+/**
+ * Scene loader for volume raw data.
+ */
 export class VolumeRawSceneLoader implements ISceneLoaderPlugin {
 
   public name = "Volume .raw scene loader";
@@ -20,6 +23,9 @@ export class VolumeRawSceneLoader implements ISceneLoaderPlugin {
     return container;
   }
 
+  /**
+   * Create a 3D texture from the loaded volume data.
+   */
   private createTexture3D(scene: Scene, data: ArrayBuffer): RawTexture3D {
     const volumeDimensions: number[] = [256, 256, 256];
 
