CVAT-3D-M3

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - CVAT-3D: Load all frames corresponding to the job instance
   (<https://github.com/openvinotoolkit/cvat/pull/2645>)
 - Intelligent scissors with OpenCV javascript (<https://github.com/openvinotoolkit/cvat/pull/2689>)
+- CVAT-3D: Visualize 3D point cloud spaces in 3D View, Top View Side View and Front View (<https://github.com/openvinotoolkit/cvat/pull/2768>)
 - [Inside Outside Guidence](https://github.com/shiyinzhang/Inside-Outside-Guidance) serverless
   function for interative segmentation
 - Pre-built [cvat_server](https://hub.docker.com/r/openvino/cvat_server) and

components/analytics/docker-compose.analytics.yml

@@ -70,9 +70,9 @@ services:
         http_proxy: ${http_proxy}
         https_proxy: ${https_proxy}
     environment:
-        LOGSTASH_OUTPUT_HOST: elasticsearch:9200
-        LOGSTASH_OUTPUT_USER:
-        LOGSTASH_OUTPUT_PASS:
+      LOGSTASH_OUTPUT_HOST: elasticsearch:9200
+      LOGSTASH_OUTPUT_USER:
+      LOGSTASH_OUTPUT_PASS:
     depends_on: ['cvat_elasticsearch']
     restart: always
 

cvat-canvas3d/README.md

@@ -28,7 +28,6 @@ npm run build -- --mode=development     # without a minification
 interface Canvas3d {
   html(): HTMLDivElement;
   setup(frameData: any): void;
-  fitCanvas(): void;
   mode(): Mode;
   isAbleToChangeFrame(): boolean;
   render(): void;
@@ -46,5 +45,4 @@ console.log('Current mode is ', window.canvas.mode());
 
 // Put canvas to a html container
 htmlContainer.appendChild(canvas.html());
-canvas.fitCanvas();
 ```

cvat-canvas3d/package.json

@@ -38,6 +38,7 @@
     "webpack-dev-server": "^3.11.0"
   },
   "dependencies": {
-    "three": "^0.125.0"
+    "three": "^0.125.0",
+    "camera-controls": "^1.25.3"
   }
 }

cvat-canvas3d/src/typescript/canvas3d.ts

@@ -5,18 +5,18 @@
 import pjson from '../../package.json';
 import { Canvas3dController, Canvas3dControllerImpl } from './canvas3dController';
 import { Canvas3dModel, Canvas3dModelImpl, Mode } from './canvas3dModel';
-import { Canvas3dView, Canvas3dViewImpl } from './canvas3dView';
+import { Canvas3dView, Canvas3dViewImpl, ViewsDOM } from './canvas3dView';
 import { Master } from './master';
 
 const Canvas3dVersion = pjson.version;
 
 interface Canvas3d {
-    html(): any;
+    html(): ViewsDOM;
     setup(frameData: any): void;
     isAbleToChangeFrame(): boolean;
-    fitCanvas(): void;
     mode(): Mode;
     render(): void;
+    keyControls(keys: KeyboardEvent): void;
 }
 
 class Canvas3dImpl implements Canvas3d {
@@ -30,10 +30,14 @@ class Canvas3dImpl implements Canvas3d {
         this.view = new Canvas3dViewImpl(this.model, this.controller);
     }
 
-    public html(): any {
+    public html(): ViewsDOM {
         return this.view.html();
     }
 
+    public keyControls(keys: KeyboardEvent): void {
+        this.view.keyControls(keys);
+    }
+
     public render(): void {
         this.view.render();
     }
@@ -49,10 +53,6 @@ class Canvas3dImpl implements Canvas3d {
     public isAbleToChangeFrame(): boolean {
         return this.model.isAbleToChangeFrame();
     }
-
-    public fitCanvas(): void {
-        this.model.fitCanvas(this.view.html().clientWidth, this.view.html().clientHeight);
-    }
 }
 
 export { Canvas3dImpl as Canvas3d, Canvas3dVersion };

cvat-canvas3d/src/typescript/canvas3dModel.ts

@@ -45,27 +45,26 @@ export enum Mode {
     INTERACT = 'interact',
 }
 
-export interface Canvas3dModel {
+export interface Canvas3dDataModel {
+    canvasSize: Size;
+    image: Image | null;
+    imageID: number | null;
+    imageOffset: number;
+    imageSize: Size;
+    drawData: DrawData;
     mode: Mode;
+    exception: Error | null;
+}
 
+export interface Canvas3dModel {
+    mode: Mode;
+    data: Canvas3dDataModel;
     setup(frameData: any): void;
-
     isAbleToChangeFrame(): boolean;
-
-    fitCanvas(width: number, height: number): void;
 }
 
 export class Canvas3dModelImpl extends MasterImpl implements Canvas3dModel {
-    private data: {
-        canvasSize: Size;
-        image: Image | null;
-        imageID: number | null;
-        imageOffset: number;
-        imageSize: Size;
-        drawData: DrawData;
-        mode: Mode;
-        exception: Error | null;
-    };
+    public data: Canvas3dDataModel;
 
     public constructor() {
         super();
@@ -92,36 +91,32 @@ export class Canvas3dModelImpl extends MasterImpl implements Canvas3dModel {
 
     public setup(frameData: any): void {
         if (this.data.imageID !== frameData.number) {
-            if ([Mode.EDIT, Mode.DRAG, Mode.RESIZE].includes(this.data.mode)) {
-                throw Error(`Canvas is busy. Action: ${this.data.mode}`);
-            }
+            this.data.imageID = frameData.number;
+            frameData
+                .data((): void => {
+                    this.data.image = null;
+                    this.notify(UpdateReasons.IMAGE_CHANGED);
+                })
+                .then((data: Image): void => {
+                    if (frameData.number !== this.data.imageID) {
+                        // already another image
+                        return;
+                    }
+
+                    this.data.imageSize = {
+                        height: frameData.height as number,
+                        width: frameData.width as number,
+                    };
+
+                    this.data.image = data;
+                    this.notify(UpdateReasons.IMAGE_CHANGED);
+                })
+                .catch((exception: any): void => {
+                    this.data.exception = exception;
+                    this.notify(UpdateReasons.DATA_FAILED);
+                    throw exception;
+                });
         }
-
-        this.data.imageID = frameData.number;
-        frameData
-            .data((): void => {
-                this.data.image = null;
-                this.notify(UpdateReasons.IMAGE_CHANGED);
-            })
-            .then((data: Image): void => {
-                if (frameData.number !== this.data.imageID) {
-                    // already another image
-                    return;
-                }
-
-                this.data.imageSize = {
-                    height: frameData.height as number,
-                    width: frameData.width as number,
-                };
-
-                this.data.image = data;
-                this.notify(UpdateReasons.IMAGE_CHANGED);
-            })
-            .catch((exception: any): void => {
-                this.data.exception = exception;
-                this.notify(UpdateReasons.DATA_FAILED);
-                throw exception;
-            });
     }
 
     public set mode(value: Mode) {
@@ -138,16 +133,4 @@ export class Canvas3dModelImpl extends MasterImpl implements Canvas3dModel {
 
         return !isUnable;
     }
-
-    public fitCanvas(width: number, height: number): void {
-        this.data.canvasSize.height = height;
-        this.data.canvasSize.width = width;
-
-        this.data.imageOffset = Math.floor(
-            Math.max(this.data.canvasSize.height / FrameZoom.MIN, this.data.canvasSize.width / FrameZoom.MIN),
-        );
-
-        this.notify(UpdateReasons.FITTED_CANVAS);
-        this.notify(UpdateReasons.OBJECTS_UPDATED);
-    }
 }