Associated with #6012

nodeEditor/src/globalState.ts

@@ -5,7 +5,7 @@ import { DefaultNodeModel } from './components/diagram/defaultNodeModel';
 import { LogEntry } from './components/log/logComponent';
 
 export class GlobalState {
-    nodeMaterial?: NodeMaterial;
+    nodeMaterial: NodeMaterial;
     hostElement: HTMLElement;
     hostDocument: HTMLDocument;
     onSelectionChangedObservable = new Observable<Nullable<DefaultNodeModel>>();

nodeEditor/src/graphEditor.tsx

@@ -37,6 +37,7 @@ import { RemapNodeFactory } from './components/diagram/remap/remapNodeFactory';
 import { RemapNodeModel } from './components/diagram/remap/remapNodeModel';
 import { RemapBlock } from 'babylonjs/Materials/Node/Blocks/remapBlock';
 import { GraphHelper } from './graphHelper';
+import { PreviewManager } from './previewManager';
 
 require("storm-react-diagrams/dist/style.min.css");
 require("./main.scss");
@@ -66,6 +67,8 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
     private _nodes = new Array<DefaultNodeModel>();
     private _blocks = new Array<NodeMaterialBlock>();
 
+    private _previewManager: PreviewManager;
+
     /** @hidden */
     public _toAdd: LinkModel[] | null = [];
 
@@ -127,6 +130,8 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
             var widget = (this.refs["test"] as DiagramWidget);
             widget.setState({ document: this.props.globalState.hostDocument })
             this.props.globalState.hostDocument!.addEventListener("keyup", widget.onKeyUpPointer as any, false);
+
+            this._previewManager = new PreviewManager(this.props.globalState.hostDocument.getElementById("preview-canvas") as HTMLCanvasElement, this.props.globalState);
         }
     }
 
@@ -135,6 +140,8 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
             var widget = (this.refs["test"] as DiagramWidget);
             this.props.globalState.hostDocument!.removeEventListener("keyup", widget.onKeyUpPointer as any, false);
         }
+
+        this._previewManager.dispose();
     }
 
     constructor(props: IGraphEditorProps) {
@@ -472,7 +479,12 @@ export class GraphEditor extends React.Component<IGraphEditorProps> {
                     ></div>
 
                     {/* Property tab */}
-                    <PropertyTabComponent globalState={this.props.globalState} />
+                    <div className="right-panel">
+                        <PropertyTabComponent globalState={this.props.globalState} />
+                        <div id="preview">
+                            <canvas id="preview-canvas"/>
+                        </div>
+                    </div>
 
                     <LogComponent globalState={this.props.globalState} />
                 </div>                

nodeEditor/src/main.scss

@@ -37,9 +37,30 @@
     }
 }
 
-#propertyTab {
+.right-panel {
     grid-row: 1 / span 2;
     grid-column: 5;
+    display: grid;
+    grid-template-rows: 1fr auto;
+    grid-template-columns: 100%;
+
+    #propertyTab {
+        grid-row: 1;
+        grid-column: 1;
+    }
+
+    #preview-canvas {
+        border-top: 1px solid rgb(85, 85, 85);
+        grid-row: 2;
+        grid-column: 1;
+        width: 100%;
+        padding-top: 100%;
+        
+        #preview-canvas {
+            width: 100%;
+            height: 100%;
+        }
+    }
 }
 
 #log-console {

nodeEditor/src/previewManager.ts

@@ -0,0 +1,53 @@
+import { GlobalState } from './globalState';
+import { NodeMaterial } from 'babylonjs/Materials/Node/nodeMaterial';
+import { Nullable } from 'babylonjs/types';
+import { Observer } from 'babylonjs/Misc/index';
+import { Engine } from 'babylonjs/Engines/engine';
+import { Scene } from 'babylonjs/scene';
+import { Mesh } from 'babylonjs/Meshes/mesh';
+import { Vector3 } from 'babylonjs/Maths/math.vector';
+import { HemisphericLight } from 'babylonjs/Lights/hemisphericLight';
+import { MeshBuilder } from 'babylonjs/Meshes/meshBuilder';
+import { ArcRotateCamera } from 'babylonjs/Cameras/arcRotateCamera';
+
+export class PreviewManager {
+    private _nodeMaterial: NodeMaterial;
+    private _onBuildObserver: Nullable<Observer<NodeMaterial>>;
+    private _engine: Engine;
+    private _scene: Scene;
+    private _light: HemisphericLight;
+    private _dummySphere: Mesh;
+    private _camera: ArcRotateCamera;
+
+    public constructor(targetCanvas: HTMLCanvasElement, globalState: GlobalState) {
+        this._nodeMaterial = globalState.nodeMaterial;
+
+        this._onBuildObserver = this._nodeMaterial.onBuildObservable.add(() => {
+            this._updatePreview();
+        });
+
+        this._engine = new Engine(targetCanvas, true);
+        this._scene = new Scene(this._engine);
+        this._camera = new ArcRotateCamera("Camera", 0, 0.8, 100, Vector3.Zero(), this._scene);
+        this._light = new HemisphericLight("light", new Vector3(0, 1, 0), this._scene);
+
+        this._dummySphere = MeshBuilder.CreateSphere("sphere", {diameter: 2, segments: 32}, this._scene);
+
+        this._camera.attachControl(targetCanvas, false);
+
+        this._engine.runRenderLoop(() => {
+            this._scene.render();
+        })
+    }
+
+    private _updatePreview() {
+        
+    }
+
+    public dispose() {
+        this._nodeMaterial.onBuildObservable.remove(this._onBuildObserver);
+
+        this._light.dispose();
+        this._engine.dispose();
+    }
+}

sandbox/debug.html

@@ -2,8 +2,8 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
 
 <head>
-    <title>BabylonJS Sandbox - View glTF, glb, obj and babylon files</title>
-    <meta name="description" content="Viewer for glTF, glb, obj and babylon files powered by BabylonJS" />
+    <title>Babylon.js Sandbox - View glTF, glb, obj and babylon files</title>
+    <meta name="description" content="Viewer for glTF, glb, obj and babylon files powered by Babylon.js" />
     <meta name="keywords"
         content="Babylon.js, Babylon, BabylonJS, glTF, glb, obj, viewer, online viewer, 3D model viewer, 3D, webgl" />
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
@@ -84,7 +84,9 @@
         <div id="logo">
         </div>
         <div id="errorZone"></div>
-    </div>
+    </div>    
+    <script src="environment.js"></script>
+    <script src="animation.js"></script>
     <script src="index.js"></script>
 </body>
 

sandbox/index.html

@@ -2,8 +2,8 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
 
 <head>
-    <title>BabylonJS Sandbox - View glTF, glb, obj and babylon files</title>
-    <meta name="description" content="Viewer for glTF, glb, obj and babylon files powered by BabylonJS" />
+    <title>Babylon.js Sandbox - View glTF, glb, obj and babylon files</title>
+    <meta name="description" content="Viewer for glTF, glb, obj and babylon files powered by Babylon.js" />
     <meta name="keywords"
         content="Babylon.js, Babylon, BabylonJS, glTF, glb, obj, viewer, online viewer, 3D model viewer, 3D, webgl" />
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">