feat(inspectorEngine): show sphere and camera

Wonder-Technology · Mar 29, 2019 · 938daed · 938daed
1 parent f98b88f
commit 938daed
Show file tree

Hide file tree

Showing 8 changed files with 168 additions and 39 deletions.
diff --git a/public/css/index.css b/public/css/index.css
@@ -1253,11 +1253,6 @@ html, body {
           .wonder-app-component .wonder-mainEditor-component .right-component .inspector-parent .wonder-inspector-component .wonder-three-float-input .inspector-item .component-label {
             margin-left: 0 !important;
             justify-content: center; }
-        .wonder-app-component .wonder-mainEditor-component .right-component .inspector-parent .wonder-inspector-component canvas {
-          margin-top: 50px;
-          width: 100%;
-          height: 200px;
-          border: 1px solid red; }
         .wonder-app-component .wonder-mainEditor-component .right-component .inspector-parent .wonder-inspector-component .wonder-inspector-sceneTree {
           padding-top: 5px; }
           .wonder-app-component .wonder-mainEditor-component .right-component .inspector-parent .wonder-inspector-component .wonder-inspector-sceneTree .sceneTree-name h1 {
@@ -2747,6 +2742,19 @@ html, body {
               margin-left: 15px;
               align-items: center;
               justify-content: center; }
+      .wonder-app-component .wonder-mainEditor-component .right-component .inspector-canvas-parent {
+        width: 100%;
+        height: 200px;
+        position: relative;
+        border: 1px solid red;
+        margin-bottom: 50px; }
+        .wonder-app-component .wonder-mainEditor-component .right-component .inspector-canvas-parent canvas {
+          position: absolute;
+          top: 0px;
+          left: 0px;
+          width: 100%;
+          height: 100%;
+          z-index: 10; }
   .wonder-app-component .wonder-app-shell {
     width: 100%;
     height: 100%; }

diff --git a/public/sass/components/mainEditor/component/_rightComponent.scss b/public/sass/components/mainEditor/component/_rightComponent.scss
@@ -12,4 +12,18 @@
         @import "../../../utils/_scrollBarUtils.scss";
         @import "component/inspector/inspector";
     }
+    .inspector-canvas-parent{
+        width:100%;
+        height:200px;
+        position: relative;
+        margin-bottom:50px;
+        canvas{
+            position: absolute;
+            top: 0px;
+            left: 0px;
+            width: 100%;
+            height: 100%;
+            z-index: 10;
+        }
+    }
 }
diff --git a/public/sass/components/mainEditor/component/component/inspector/_inspector.scss b/public/sass/components/mainEditor/component/component/inspector/_inspector.scss
@@ -2,12 +2,6 @@
 .wonder-inspector-component {
     @import "../../../../ui/floatInput";
     @import "../../../../ui/threeFloatInput";
-    canvas{
-        margin-top:50px;
-        width:100%;
-        height:200px;
-        border:1px solid red;
-    }
     .wonder-inspector-sceneTree {
         padding-top: 5px;
         @include inspectorItem("sceneTree-name");

diff --git a/.../composable_component/mainEditor/composable_component/inspector/ui/MainEditorInspector.re b/.../composable_component/mainEditor/composable_component/inspector/ui/MainEditorInspector.re
@@ -52,7 +52,6 @@ let render = ((uiState, dispatchFunc), addableComponentConfig, _self) => {
         ),
       )
     }
-    <canvas id="inspector-canvas" key="inspectorCanvas" />
   </article>;
 };
 

diff --git a/src/core/composable_component/mainEditor/ui/MainEditor.re b/src/core/composable_component/mainEditor/ui/MainEditor.re
@@ -40,9 +40,12 @@ let _buildElementBeforeInitEngine = (uiState, dispatchFunc) =>
     </div>
     <div key="rightComponent" className="right-component">
       <div className="inline-component inspector-parent">
-        <article key="inspector" className="wonder-inspector-component">
+        <div
+          id="inspectorCanvasParent"
+          key="inspectorCanvasParent"
+          className="inspector-parent">
           <canvas id="inspector-canvas" key="inspectorCanvas" />
-        </article>
+        </div>
       </div>
     </div>
   </article>;
@@ -68,6 +71,12 @@ let _buildElementAfterInitEngine = (uiState, dispatchFunc) =>
     </div>
     <div key="rightComponent" className="right-component">
       <div className="inline-component inspector-parent">
+        <div
+          id="inspectorCanvasParent"
+          key="inspectorCanvasParent"
+          className="inspector-canvas-parent">
+          <canvas id="inspector-canvas" key="inspectorCanvas" />
+        </div>
         <MainEditorInspector
           uiState
           dispatchFunc

diff --git a/src/core/job/init/InitInspectorEngineJob.re b/src/core/job/init/InitInspectorEngineJob.re
@@ -0,0 +1,98 @@
+open Wonderjs;
+open CameraGroupType;
+
+let _prepareCamera = inspectorEngineState => {
+  let (inspectorEngineState, camera) =
+    GameObjectEngineService.create(inspectorEngineState);
+  let (
+    inspectorEngineState,
+    {cameraView, cameraProjection} as cameraComponentRecord,
+  ) =
+    CameraEngineService.createCameraGroup(inspectorEngineState);
+
+  let inspectorEngineState =
+    inspectorEngineState
+    |> CameraGroupEngineService.addCameraGroupComponents(
+         camera,
+         cameraComponentRecord,
+         (
+           GameObjectComponentEngineService.addBasicCameraViewComponent,
+           GameObjectComponentEngineService.addPerspectiveCameraProjectionComponent,
+         ),
+       );
+
+  let (inspectorEngineState, arcballCameraController) =
+    ArcballCameraEngineService.create(inspectorEngineState);
+
+  let inspectorEngineState =
+    inspectorEngineState
+    |> ArcballCameraEngineService.setArcballCameraControllerDistance(
+         2.,
+         arcballCameraController,
+       )
+    |> ArcballCameraEngineService.setArcballCameraControllerWheelSpeed(
+         arcballCameraController,
+         0.5,
+       )
+    |> ArcballCameraEngineService.setArcballCameraControllerMoveSpeedX(
+         arcballCameraController,
+         1.,
+       )
+    |> ArcballCameraEngineService.setArcballCameraControllerMoveSpeedY(
+         arcballCameraController,
+         1.,
+       )
+    |> ArcballCameraEngineService.setArcballCameraControllerTheta(
+         arcballCameraController,
+         Js.Math._PI /. 5.,
+       )
+    |> BasicCameraViewEngineService.activeBasicCameraView(cameraView)
+    |> GameObjectComponentEngineService.addArcballCameraControllerComponent(
+         camera,
+         arcballCameraController,
+       );
+
+  (inspectorEngineState, camera);
+};
+
+let _createSphere = inspectorEngineState => {
+  let (inspectorEngineState, sphereGeometry) =
+    GeometryEngineService.createSphereGeometry(0.5, 28, inspectorEngineState);
+  let (engineState, lightMaterial) =
+    LightMaterialEngineService.create(inspectorEngineState);
+
+  let (inspectorEngineState, gameObject) =
+    GameObjectEngineService.create(inspectorEngineState);
+
+  let (inspectorEngineState, meshRenderer) =
+    MeshRendererEngineService.create(inspectorEngineState);
+  let renderGroup =
+    RenderGroupEngineService.buildRenderGroup(meshRenderer, lightMaterial);
+
+  inspectorEngineState
+  |> RenderGroupEngineService.addRenderGroupComponents(
+       gameObject,
+       renderGroup,
+       (
+         GameObjectAPI.addGameObjectMeshRendererComponent,
+         GameObjectAPI.addGameObjectLightMaterialComponent,
+       ),
+     )
+  |> GameObjectComponentEngineService.addGeometryComponent(
+       gameObject,
+       sphereGeometry,
+     );
+
+  (inspectorEngineState, gameObject);
+};
+
+let initInspectorEngineJob = (_, inspectorEngineState) => {
+  let (inspectorEngineState, camera) = _prepareCamera(inspectorEngineState);
+  let (inspectorEngineState, sphere) = _createSphere(inspectorEngineState);
+
+  inspectorEngineState
+  |> SceneEngineService.addSceneChild(camera)
+  |> SceneEngineService.addSceneChild(sphere);
+
+  inspectorEngineState;
+};
diff --git a/src/core/utils/engine/MainUtils.re b/src/core/utils/engine/MainUtils.re
@@ -1,6 +1,7 @@
 open Js.Promise;
 
 let _getLoadEngineData = () => {
+  Js.log("load engine");
   let engineConfigDir = "./config/engine/";
 
   AssetEngineService.loadConfig(
@@ -10,6 +11,7 @@ let _getLoadEngineData = () => {
 };
 
 let _getLoadInspectorEngineData = () => {
+  Js.log("load inspector enigne");
   let engineConfigDir = "./config/inspectorEngine/";
 
   AssetEngineService.loadConfig(
@@ -18,7 +20,7 @@ let _getLoadInspectorEngineData = () => {
   );
 };
 
-let _registerJob = engineState =>
+let _registerJobForEngine = engineState =>
   engineState
   |> JobEngineService.registerNoWorkerInitJob(
        "init_editor",
@@ -81,11 +83,11 @@ let _registerJob = engineState =>
        RestoreJob.restoreJob,
      );
 
-let _registerJobForInspector = engineState =>
+let _registerJobForInspectorEngine = engineState =>
   engineState
   |> JobEngineService.registerNoWorkerInitJob(
-       "init_camera_controller",
-       InitCameraControllerJob.initJob,
+       "init_inspector_engine",
+       InitInspectorEngineJob.initInspectorEngineJob
      )
   |> JobEngineService.registerNoWorkerLoopJob(
        "reallocate_cpu_memory",
@@ -95,21 +97,13 @@ let _registerJobForInspector = engineState =>
        "update_camera",
        UpdateCameraJob.updateJob,
      )
-  |> JobEngineService.registerNoWorkerLoopJob(
-       "prepare_render_scene_view",
-       PrepareRenderSceneViewJob.prepareRenderSceneViewJob,
-     )
-  |> JobEngineService.registerNoWorkerLoopJob(
-       "prepare_render_game_view",
-       PrepareRenderGameViewJob.prepareRenderGameViewJob,
-     )
   |> JobEngineService.registerNoWorkerLoopJob(
        "restore",
        RestoreJob.restoreJob,
      );
 
 let _handleEngineState = engineState => {
-  let engineState = _registerJob(engineState);
+  let engineState = _registerJobForEngine(engineState);
   let scene = engineState |> SceneEngineService.getSceneGameObject;
 
   engineState
@@ -122,7 +116,7 @@ let _handleEngineState = engineState => {
 };
 
 let _handleInspectorEngineState = inspectorEngineState => {
-  let inspectorEngineState = _registerJobForInspector(inspectorEngineState);
+  let inspectorEngineState = _registerJobForInspectorEngine(inspectorEngineState);
 
   inspectorEngineState
   |> DirectorEngineService.init
@@ -169,11 +163,11 @@ let initEngine = () =>
     |> WonderBsMost.Most.tap(engineState =>
          engineState |> _handleEngineState |> ignore
        )
-    |> WonderBsMost.Most.merge(
+    |> WonderBsMost.Most.flatMap(_ =>
          _getLoadInspectorEngineData()
          |> WonderBsMost.Most.tap(inspectorEngineState =>
               inspectorEngineState |> _handleInspectorEngineState |> ignore
-            ),
+            )
        )
     |> WonderBsMost.Most.drain
   );
diff --git a/src/core/utils/ui/ResizeUtils.re b/src/core/utils/ui/ResizeUtils.re
@@ -24,8 +24,8 @@ let _getCanvasParentSize = parent => (
   parent##offsetHeight,
 );
 
-let getCanvasParentSize = () =>
-  DomHelper.getElementById("canvasParent")
+let getCanvasParentSize = canvasParentDom =>
+  canvasParentDom
   |> DomHelperType.convertDomElementToJsObj
   |> _getCanvasParentSize;
 
@@ -37,8 +37,8 @@ let getCanvasSize = () => {
   (canvas##width, canvas##height);
 };
 
-let resizeCanvas = ((width, height)) =>
-  DomHelper.getElementById("canvas")
+let resizeCanvas = (canvasDom, (width, height)) =>
+  canvasDom
   |> DomHelperType.convertDomElementToJsObj
   |> ScreenEngineService.setScreenSize((width, height, width, height))
   |> ignore;
@@ -110,11 +110,18 @@ let isViewSizeChange =
        );
 
 let resizeScreen = () => {
-  let canvasParentSize = getCanvasParentSize();
   let engineState = StateEngineService.unsafeGetState();
-  /* let inspectorEngineState = StateInspectorEngineService.unsafeGetState(); */
+  let inspectorEngineState = StateInspectorEngineService.unsafeGetState();
 
-  resizeCanvas(canvasParentSize);
+  let canvasParentSize =
+    DomHelper.getElementById("canvasParent") |> getCanvasParentSize;
+  let inspectorCanvasParentSize =
+    DomHelper.getElementById("inspectorCanvasParent") |> getCanvasParentSize;
+
+  canvasParentSize |> resizeCanvas(DomHelper.getElementById("canvas"));
+
+  inspectorCanvasParentSize
+  |> resizeCanvas(DomHelper.getElementById("inspector-canvas"));
 
   engineState |> DeviceManagerEngineService.getGl |> Js.Option.isSome ?
     {
@@ -127,6 +134,12 @@ let resizeScreen = () => {
       |> ignore;
     } :
     ();
-  /* inspectorEngineState |> DeviceManagerEngineService.getGl |> Js.Option.isSome ?
-     inspectorEngineState |> StateLogicService.refreshEngineState |> ignore : (); */
+
+  inspectorEngineState |> DeviceManagerEngineService.getGl |> Js.Option.isSome ?
+    inspectorEngineState
+    |> resizeViewport(inspectorCanvasParentSize)
+    |> DirectorEngineService.loopBody(0.)
+    |> StateInspectorEngineService.setState
+    |> ignore :
+    ();
 };