removing code

guiEditor/src/components/preview/previewAreaComponent.tsx

@@ -1,114 +0,0 @@
-
-import * as React from "react";
-import { GlobalState } from '../../globalState';
-import { DataStorage } from 'babylonjs/Misc/dataStorage';
-import { Observer } from 'babylonjs/Misc/observable';
-import { Nullable } from 'babylonjs/types';
-import { NodeMaterialModes } from 'babylonjs/Materials/Node/Enums/nodeMaterialModes';
-
-const doubleSided: string = require("./svgs/doubleSided.svg");
-const depthPass: string = require("./svgs/depthPass.svg");
-const omni: string = require("./svgs/omni.svg");
-const directionalRight: string = require("./svgs/directionalRight.svg");
-const directionalLeft: string = require("./svgs/directionalLeft.svg");
-
-interface IPreviewAreaComponentProps {
-    globalState: GlobalState;
-    width: number;
-}
-
-export class PreviewAreaComponent extends React.Component<IPreviewAreaComponentProps, {isLoading: boolean}> {
-    private _onIsLoadingChangedObserver: Nullable<Observer<boolean>>;
-    private _onResetRequiredObserver: Nullable<Observer<void>>;
-
-    constructor(props: IPreviewAreaComponentProps) {
-        super(props);
-        this.state = {isLoading: true};
-
-        this._onIsLoadingChangedObserver = this.props.globalState.onIsLoadingChanged.add((state) => this.setState({isLoading: state}));
-
-        this._onResetRequiredObserver = this.props.globalState.onResetRequiredObservable.add(() => {
-            this.forceUpdate();
-        });
-    }
-
-    componentWillUnmount() {
-        this.props.globalState.onIsLoadingChanged.remove(this._onIsLoadingChangedObserver);
-        this.props.globalState.onResetRequiredObservable.remove(this._onResetRequiredObserver);
-    }
-
-    changeBackFaceCulling(value: boolean) {
-        this.props.globalState.backFaceCulling = value;
-        DataStorage.WriteBoolean("BackFaceCulling", value);
-        this.props.globalState.onBackFaceCullingChanged.notifyObservers();
-        this.forceUpdate();
-    }
-
-    changeDepthPrePass(value: boolean) {
-        this.props.globalState.depthPrePass = value;
-        DataStorage.WriteBoolean("DepthPrePass", value);
-        this.props.globalState.onDepthPrePassChanged.notifyObservers();
-        this.forceUpdate();
-    }
-
-    render() {
-        return (
-            <>
-                <div id="preview" style={{height: this.props.width + "px"}}>
-                    <canvas id="preview-canvas"/>
-                    {
-                        <div className={"waitPanel" + (this.state.isLoading ? "" : " hidden")}>
-                            Please wait, loading...
-                        </div>
-                    }
-                </div>
-                { this.props.globalState.mode === NodeMaterialModes.Material && <>
-                    <div id="preview-config-bar">
-                        <div
-                            title="Render without back face culling"
-                            onClick={() => this.changeBackFaceCulling(!this.props.globalState.backFaceCulling)} className={"button back-face" + (!this.props.globalState.backFaceCulling ? " selected" : "")}>
-                            <img src={doubleSided} alt=""/>
-                        </div>
-                        <div
-                            title="Render with depth pre-pass"
-                            onClick={() => this.changeDepthPrePass(!this.props.globalState.depthPrePass)} className={"button depth-pass" + (this.props.globalState.depthPrePass ? " selected" : "")}>
-                                <img src={depthPass} alt=""/>
-                        </div>
-                        <div
-                            title="Turn on/off hemispheric light"
-                            onClick={() => {
-                                this.props.globalState.hemisphericLight = !this.props.globalState.hemisphericLight;
-                                DataStorage.WriteBoolean("HemisphericLight", this.props.globalState.hemisphericLight);
-                                this.props.globalState.onLightUpdated.notifyObservers();
-                                this.forceUpdate();
-                            }} className={"button hemispheric-light" + (this.props.globalState.hemisphericLight ? " selected" : "")}>
-                            <img src={omni} alt=""/>
-                        </div>
-                        <div
-                            title="Turn on/off direction light #1"
-                            onClick={() => {
-                                this.props.globalState.directionalLight1 = !this.props.globalState.directionalLight1;
-                                DataStorage.WriteBoolean("DirectionalLight1", this.props.globalState.directionalLight1);
-                                this.props.globalState.onLightUpdated.notifyObservers();
-                                this.forceUpdate();
-                            }} className={"button direction-light-1" + (this.props.globalState.directionalLight1 ? " selected" : "")}>
-                            <img src={directionalRight} alt=""/>
-
-                        </div>
-                        <div
-                            title="Turn on/off direction light #0"
-                            onClick={() => {
-                                this.props.globalState.directionalLight0 = !this.props.globalState.directionalLight0;
-                                DataStorage.WriteBoolean("DirectionalLight0", this.props.globalState.directionalLight0);
-                                this.props.globalState.onLightUpdated.notifyObservers();
-                                this.forceUpdate();
-                            }} className={"button direction-light-0" + (this.props.globalState.directionalLight0 ? " selected" : "")}>
-                            <img src={directionalLeft} alt=""/>
-                        </div>
-                    </div>
-                </> }
-            </>
-        );
-
-    }
-}

guiEditor/src/components/preview/previewManager.ts

@@ -1,558 +0,0 @@
-import { GlobalState } from "../../globalState";
-import { NodeMaterial } from "babylonjs/Materials/Node/nodeMaterial";
-import { Nullable } from "babylonjs/types";
-import { Observer } from "babylonjs/Misc/observable";
-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 { ArcRotateCamera } from "babylonjs/Cameras/arcRotateCamera";
-import { PreviewType } from "./previewType";
-import { Animation } from "babylonjs/Animations/animation";
-import { SceneLoader } from "babylonjs/Loading/sceneLoader";
-import { TransformNode } from "babylonjs/Meshes/transformNode";
-import { AbstractMesh } from "babylonjs/Meshes/abstractMesh";
-import { FramingBehavior } from "babylonjs/Behaviors/Cameras/framingBehavior";
-import { DirectionalLight } from "babylonjs/Lights/directionalLight";
-import { LogEntry } from "../log/logComponent";
-import { PointerEventTypes } from "babylonjs/Events/pointerEvents";
-import { Color3, Color4 } from "babylonjs/Maths/math.color";
-import { PostProcess } from "babylonjs/PostProcesses/postProcess";
-import { Constants } from "babylonjs/Engines/constants";
-import { CurrentScreenBlock } from "babylonjs/Materials/Node/Blocks/Dual/currentScreenBlock";
-import { NodeMaterialModes } from "babylonjs/Materials/Node/Enums/nodeMaterialModes";
-import { ParticleSystem } from "babylonjs/Particles/particleSystem";
-import { IParticleSystem } from "babylonjs/Particles/IParticleSystem";
-import { ParticleHelper } from "babylonjs/Particles/particleHelper";
-import { Texture } from "babylonjs/Materials/Textures/texture";
-import { ParticleTextureBlock } from "babylonjs/Materials/Node/Blocks/Particle/particleTextureBlock";
-import { FileTools } from "babylonjs/Misc/fileTools";
-import { ProceduralTexture } from "babylonjs/Materials/Textures/Procedurals/proceduralTexture";
-import { StandardMaterial } from "babylonjs/Materials/standardMaterial";
-import { Layer } from "babylonjs/Layers/layer";
-
-export class PreviewManager {
-    private _nodeMaterial: NodeMaterial;
-    private _onBuildObserver: Nullable<Observer<NodeMaterial>>;
-    private _onPreviewCommandActivatedObserver: Nullable<Observer<boolean>>;
-    private _onAnimationCommandActivatedObserver: Nullable<Observer<void>>;
-    private _onUpdateRequiredObserver: Nullable<Observer<void>>;
-    private _onPreviewBackgroundChangedObserver: Nullable<Observer<void>>;
-    private _onBackFaceCullingChangedObserver: Nullable<Observer<void>>;
-    private _onDepthPrePassChangedObserver: Nullable<Observer<void>>;
-    private _onLightUpdatedObserver: Nullable<Observer<void>>;
-    private _engine: Engine;
-    private _scene: Scene;
-    private _meshes: AbstractMesh[];
-    private _camera: ArcRotateCamera;
-    private _material: NodeMaterial | StandardMaterial;
-    private _globalState: GlobalState;
-    private _currentType: number;
-    private _lightParent: TransformNode;
-    private _postprocess: Nullable<PostProcess>;
-    private _proceduralTexture: Nullable<ProceduralTexture>;
-    private _particleSystem: Nullable<IParticleSystem>;
-    private _layer: Nullable<Layer>;
-
-    public constructor(targetCanvas: HTMLCanvasElement, globalState: GlobalState) {
-        this._nodeMaterial = globalState.nodeMaterial;
-        this._globalState = globalState;
-
-        this._onBuildObserver = this._nodeMaterial.onBuildObservable.add((nodeMaterial) => {
-            let serializationObject = nodeMaterial.serialize();
-            this._updatePreview(serializationObject);
-        });
-
-        this._onPreviewCommandActivatedObserver = globalState.onPreviewCommandActivated.add((forceRefresh: boolean) => {
-            if (forceRefresh) {
-                this._currentType = -1;
-            }
-            this._refreshPreviewMesh();
-        });
-
-        this._onLightUpdatedObserver = globalState.onLightUpdated.add(() => {
-            this._prepareLights();
-        });
-
-        this._onUpdateRequiredObserver = globalState.onUpdateRequiredObservable.add(() => {
-            let serializationObject = this._nodeMaterial.serialize();
-            this._updatePreview(serializationObject);
-        });
-
-        this._onPreviewBackgroundChangedObserver = globalState.onPreviewBackgroundChanged.add(() => {
-            this._scene.clearColor = this._globalState.backgroundColor;
-        });
-
-        this._onAnimationCommandActivatedObserver = globalState.onAnimationCommandActivated.add(() => {
-            this._handleAnimations();
-        });
-
-        this._onBackFaceCullingChangedObserver = globalState.onBackFaceCullingChanged.add(() => {
-            this._material.backFaceCulling = this._globalState.backFaceCulling;
-        });
-
-        this._onDepthPrePassChangedObserver = globalState.onDepthPrePassChanged.add(() => {
-            this._material.needDepthPrePass = this._globalState.depthPrePass;
-        });
-
-        this._engine = new Engine(targetCanvas, true);
-        this._scene = new Scene(this._engine);
-        this._scene.clearColor = this._globalState.backgroundColor;
-        this._camera = new ArcRotateCamera("Camera", 0, 0.8, 4, Vector3.Zero(), this._scene);
-
-        this._camera.lowerRadiusLimit = 3;
-        this._camera.upperRadiusLimit = 10;
-        this._camera.wheelPrecision = 20;
-        this._camera.minZ = 0.1;
-        this._camera.attachControl(false);
-
-        this._lightParent = new TransformNode("LightParent", this._scene);
-
-        this._refreshPreviewMesh();
-
-        this._engine.runRenderLoop(() => {
-            this._engine.resize();
-            this._scene.render();
-        });
-
-        let lastOffsetX: number | undefined = undefined;
-        const lightRotationSpeed = 0.01;
-
-        this._scene.onPointerObservable.add((evt) => {
-            if (this._globalState.controlCamera) {
-                return;
-            }
-
-            if (evt.type === PointerEventTypes.POINTERUP) {
-                lastOffsetX = undefined;
-                return;
-            }
-
-            if (evt.event.buttons !== 1) {
-                return;
-            }
-
-            if (lastOffsetX === undefined) {
-                lastOffsetX = evt.event.offsetX;
-            }
-
-            var rotateLighting = (lastOffsetX - evt.event.offsetX) * lightRotationSpeed;
-            this._lightParent.rotation.y += rotateLighting;
-            lastOffsetX = evt.event.offsetX;
-        });
-
-        // this._scene.registerBeforeRender(() => {
-        //     if (this._camera.alpha === cameraLastRotation) {
-        //         return;
-        //     }
-        //     if (!this._globalState.controlCamera) {
-        //         return;
-        //     }
-        //     var rotateLighting = (this._camera.alpha - cameraLastRotation) * lightRotationParallaxSpeed;
-        //     this._lightParent.rotate(Vector3.Up(), rotateLighting);
-        //     cameraLastRotation = this._camera.alpha;
-        // });
-    }
-
-    private _handleAnimations() {
-        this._scene.stopAllAnimations();
-
-        if (this._globalState.rotatePreview) {
-            for (var root of this._scene.rootNodes) {
-                let transformNode = root as TransformNode;
-
-                if (transformNode.getClassName() === "TransformNode" || transformNode.getClassName() === "Mesh" || transformNode.getClassName() === "GroundMesh") {
-                    if (transformNode.rotationQuaternion) {
-                        transformNode.rotation = transformNode.rotationQuaternion.toEulerAngles();
-                        transformNode.rotationQuaternion = null;
-                    }
-                    Animation.CreateAndStartAnimation("turnTable", root, "rotation.y", 60, 1200, transformNode.rotation.y, transformNode.rotation.y + 2 * Math.PI, 1);
-                }
-            }
-        }
-    }
-
-    private _prepareLights() {
-        // Remove current lights
-        let currentLights = this._scene.lights.slice(0);
-
-        for (var light of currentLights) {
-            light.dispose();
-        }
-
-        // Create new lights based on settings
-        if (this._globalState.hemisphericLight) {
-            new HemisphericLight("Hemispheric light", new Vector3(0, 1, 0), this._scene);
-        }
-
-        if (this._globalState.directionalLight0) {
-            let dir0 = new DirectionalLight("Directional light #0", new Vector3(0.841626576496605, -0.2193391004130599, -0.49351298337996535), this._scene);
-            dir0.intensity = 0.9;
-            dir0.diffuse = new Color3(0.9294117647058824, 0.9725490196078431, 0.996078431372549);
-            dir0.specular = new Color3(0.9294117647058824, 0.9725490196078431, 0.996078431372549);
-            dir0.parent = this._lightParent;
-        }
-
-        if (this._globalState.directionalLight1) {
-            let dir1 = new DirectionalLight("Directional light #1", new Vector3(-0.9519937437504213, -0.24389315636999764, -0.1849974057546125), this._scene);
-            dir1.intensity = 1.2;
-            dir1.specular = new Color3(0.9803921568627451, 0.9529411764705882, 0.7725490196078432);
-            dir1.diffuse = new Color3(0.9803921568627451, 0.9529411764705882, 0.7725490196078432);
-            dir1.parent = this._lightParent;
-        }
-    }
-
-    private _prepareScene() {
-        this._camera.useFramingBehavior = this._globalState.mode === NodeMaterialModes.Material;
-
-        switch (this._globalState.mode) {
-            case NodeMaterialModes.Material: {
-                this._prepareLights();
-
-                var framingBehavior = this._camera.getBehaviorByName("Framing") as FramingBehavior;
-
-                setTimeout(() => {
-                    // Let the behavior activate first
-                    framingBehavior.framingTime = 0;
-                    framingBehavior.elevationReturnTime = -1;
-
-                    if (this._scene.meshes.length) {
-                        var worldExtends = this._scene.getWorldExtends();
-                        this._camera.lowerRadiusLimit = null;
-                        this._camera.upperRadiusLimit = null;
-                        framingBehavior.zoomOnBoundingInfo(worldExtends.min, worldExtends.max);
-                    }
-
-                    this._camera.pinchPrecision = 200 / this._camera.radius;
-                    this._camera.upperRadiusLimit = 5 * this._camera.radius;
-                });
-
-                this._camera.wheelDeltaPercentage = 0.01;
-                this._camera.pinchDeltaPercentage = 0.01;
-
-                // Animations
-                this._handleAnimations();
-                break;
-            }
-            case NodeMaterialModes.PostProcess:
-            case NodeMaterialModes.ProceduralTexture: {
-                this._camera.radius = 4;
-                this._camera.upperRadiusLimit = 10;
-                break;
-            }
-            case NodeMaterialModes.Particle: {
-                this._camera.radius = this._globalState.previewType === PreviewType.Explosion ? 50 : this._globalState.previewType === PreviewType.DefaultParticleSystem ? 6 : 20;
-                this._camera.upperRadiusLimit = 5000;
-                break;
-            }
-        }
-
-        // Material
-        let serializationObject = this._nodeMaterial.serialize();
-        this._updatePreview(serializationObject);
-    }
-
-    private _refreshPreviewMesh() {
-        if (this._currentType !== this._globalState.previewType || this._currentType === PreviewType.Custom) {
-            this._currentType = this._globalState.previewType;
-            if (this._meshes && this._meshes.length) {
-                for (var mesh of this._meshes) {
-                    mesh.dispose();
-                }
-            }
-            this._meshes = [];
-
-            if (this._layer) {
-                this._layer.dispose();
-                this._layer = null;
-            }
-
-            let lights = this._scene.lights.slice(0);
-            for (var light of lights) {
-                light.dispose();
-            }
-
-            this._engine.releaseEffects();
-
-            if (this._particleSystem) {
-                this._particleSystem.onBeforeDrawParticlesObservable.clear();
-                this._particleSystem.onDisposeObservable.clear();
-                this._particleSystem.stop();
-                this._particleSystem.dispose();
-                this._particleSystem = null;
-            }
-
-            SceneLoader.ShowLoadingScreen = false;
-
-            this._globalState.onIsLoadingChanged.notifyObservers(true);
-
-            if (this._globalState.mode === NodeMaterialModes.Material) {
-                switch (this._globalState.previewType) {
-                    case PreviewType.Box:
-                        SceneLoader.AppendAsync("https://models.babylonjs.com/", "roundedCube.glb", this._scene).then(() => {
-                            this._meshes.push(...this._scene.meshes);
-                            this._prepareScene();
-                        });
-                        return;
-                    case PreviewType.Sphere:
-                        this._meshes.push(Mesh.CreateSphere("dummy-sphere", 32, 2, this._scene));
-                        break;
-                    case PreviewType.Torus:
-                        this._meshes.push(Mesh.CreateTorus("dummy-torus", 2, 0.5, 32, this._scene));
-                        break;
-                    case PreviewType.Cylinder:
-                        SceneLoader.AppendAsync("https://models.babylonjs.com/", "roundedCylinder.glb", this._scene).then(() => {
-                            this._meshes.push(...this._scene.meshes);
-                            this._prepareScene();
-                        });
-                        return;
-                    case PreviewType.Plane:
-                        let plane = Mesh.CreateGround("dummy-plane", 2, 2, 128, this._scene);
-                        plane.scaling.y = -1;
-                        plane.rotation.x = Math.PI;
-                        this._meshes.push(plane);
-                        break;
-                    case PreviewType.ShaderBall:
-                        SceneLoader.AppendAsync("https://models.babylonjs.com/", "shaderBall.glb", this._scene).then(() => {
-                            this._meshes.push(...this._scene.meshes);
-                            this._prepareScene();
-                        });
-                        return;
-                    case PreviewType.Custom:
-                        SceneLoader.AppendAsync("file:", this._globalState.previewFile, this._scene).then(() => {
-                            this._meshes.push(...this._scene.meshes);
-                            this._prepareScene();
-                        });
-                        return;
-                }
-            } else if (this._globalState.mode === NodeMaterialModes.ProceduralTexture) {
-                this._layer = new Layer("proceduralLayer", null, this._scene);
-            } else if (this._globalState.mode === NodeMaterialModes.Particle) {
-                switch (this._globalState.previewType) {
-                    case PreviewType.DefaultParticleSystem:
-                        this._particleSystem = ParticleHelper.CreateDefault(new Vector3(0, 0, 0), 500, this._scene);
-                        this._particleSystem.start();
-                        break;
-                    case PreviewType.Bubbles:
-                        this._particleSystem = new ParticleSystem("particles", 4000, this._scene);
-                        this._particleSystem.particleTexture = new Texture("https://assets.babylonjs.com/particles/textures/explosion/Flare.png", this._scene);
-                        this._particleSystem.minSize = 0.1;
-                        this._particleSystem.maxSize = 1.0;
-                        this._particleSystem.minLifeTime = 0.5;
-                        this._particleSystem.maxLifeTime = 5.0;
-                        this._particleSystem.minEmitPower = 0.5;
-                        this._particleSystem.maxEmitPower = 3.0;
-                        this._particleSystem.createBoxEmitter(new Vector3(-1, 1, -1), new Vector3(1, 1, 1), new Vector3(-0.1, -0.1, -0.1), new Vector3(0.1, 0.1, 0.1));
-                        this._particleSystem.emitRate = 100;
-                        this._particleSystem.blendMode = ParticleSystem.BLENDMODE_ONEONE;
-                        this._particleSystem.color1 = new Color4(1, 1, 0, 1);
-                        this._particleSystem.color2 = new Color4(1, 0.5, 0, 1);
-                        this._particleSystem.gravity = new Vector3(0, -1.0, 0);
-                        this._particleSystem.start();
-                        break;
-                    case PreviewType.Explosion:
-                        this._loadParticleSystem(this._globalState.previewType, 1);
-                        return;
-                    case PreviewType.Fire:
-                    case PreviewType.Rain:
-                    case PreviewType.Smoke:
-                        this._loadParticleSystem(this._globalState.previewType);
-                        return;
-                    case PreviewType.Custom:
-                        FileTools.ReadFile(
-                            this._globalState.previewFile,
-                            (json) => {
-                                this._particleSystem = ParticleSystem.Parse(JSON.parse(json), this._scene, "");
-                                this._particleSystem.start();
-                                this._prepareScene();
-                            },
-                            undefined,
-                            false,
-                            (error) => {
-                                console.log(error);
-                            }
-                        );
-                        return;
-                }
-            }
-
-            this._prepareScene();
-        }
-    }
-
-    private _loadParticleSystem(particleNumber: number, systemIndex = 0, prepareScene = true) {
-        let name = "";
-
-        switch (particleNumber) {
-            case PreviewType.Explosion:
-                name = "explosion";
-                break;
-            case PreviewType.Fire:
-                name = "fire";
-                break;
-            case PreviewType.Rain:
-                name = "rain";
-                break;
-            case PreviewType.Smoke:
-                name = "smoke";
-                break;
-        }
-
-        ParticleHelper.CreateAsync(name, this._scene).then((set) => {
-            for (let i = 0; i < set.systems.length; ++i) {
-                if (i == systemIndex) {
-                    this._particleSystem = set.systems[i];
-                    this._particleSystem.disposeOnStop = true;
-                    this._particleSystem.onDisposeObservable.add(() => {
-                        this._loadParticleSystem(particleNumber, systemIndex, false);
-                    });
-                    this._particleSystem.start();
-                } else {
-                    set.systems[i].dispose();
-                }
-            }
-            if (prepareScene) {
-                this._prepareScene();
-            } else {
-                let serializationObject = this._nodeMaterial.serialize();
-                this._updatePreview(serializationObject);
-            }
-        });
-    }
-
-    private _forceCompilationAsync(material: NodeMaterial, mesh: AbstractMesh): Promise<void> {
-        return material.forceCompilationAsync(mesh);
-    }
-
-    private _updatePreview(serializationObject: any) {
-        try {
-            let store = NodeMaterial.IgnoreTexturesAtLoadTime;
-            NodeMaterial.IgnoreTexturesAtLoadTime = false;
-            let tempMaterial = NodeMaterial.Parse(serializationObject, this._scene);
-            NodeMaterial.IgnoreTexturesAtLoadTime = store;
-
-            tempMaterial.backFaceCulling = this._globalState.backFaceCulling;
-            tempMaterial.needDepthPrePass = this._globalState.depthPrePass;
-
-            if (this._postprocess) {
-                this._postprocess.dispose(this._camera);
-                this._postprocess = null;
-            }
-
-            if (this._proceduralTexture) {
-                this._proceduralTexture.dispose();
-                this._proceduralTexture = null;
-            }
-
-            switch (this._globalState.mode) {
-                case NodeMaterialModes.PostProcess: {
-                    this._globalState.onIsLoadingChanged.notifyObservers(false);
-
-                    this._postprocess = tempMaterial.createPostProcess(this._camera, 1.0, Constants.TEXTURE_NEAREST_SAMPLINGMODE, this._engine);
-
-                    const currentScreen = tempMaterial.getBlockByPredicate((block) => block instanceof CurrentScreenBlock);
-                    if (currentScreen && this._postprocess) {
-                        this._postprocess.onApplyObservable.add((effect) => {
-                            effect.setTexture("textureSampler", (currentScreen as CurrentScreenBlock).texture);
-                        });
-                    }
-
-                    if (this._material) {
-                        this._material.dispose();
-                    }
-                    this._material = tempMaterial;
-                    break;
-                }
-                case NodeMaterialModes.ProceduralTexture: {
-                    this._globalState.onIsLoadingChanged.notifyObservers(false);
-
-                    this._proceduralTexture = tempMaterial.createProceduralTexture(512, this._scene);
-
-                    if (this._material) {
-                        this._material.dispose();
-                    }
-
-                    if (this._layer) {
-                        this._layer.texture = this._proceduralTexture;
-                    }
-
-                    break;
-                }
-
-                case NodeMaterialModes.Particle: {
-                    this._globalState.onIsLoadingChanged.notifyObservers(false);
-
-                    this._particleSystem!.onBeforeDrawParticlesObservable.clear();
-
-                    this._particleSystem!.onBeforeDrawParticlesObservable.add((effect) => {
-                        const textureBlock = tempMaterial.getBlockByPredicate((block) => block instanceof ParticleTextureBlock);
-                        if (textureBlock && (textureBlock as ParticleTextureBlock).texture && effect) {
-                            effect.setTexture("diffuseSampler", (textureBlock as ParticleTextureBlock).texture);
-                        }
-                    });
-                    tempMaterial.createEffectForParticles(this._particleSystem!);
-
-                    if (this._material) {
-                        this._material.dispose();
-                    }
-                    this._material = tempMaterial;
-                    break;
-                }
-
-                default: {
-                    if (this._meshes.length) {
-                        let tasks = this._meshes.map((m) => this._forceCompilationAsync(tempMaterial, m));
-
-                        Promise.all(tasks)
-                            .then(() => {
-                                for (var mesh of this._meshes) {
-                                    mesh.material = tempMaterial;
-                                }
-
-                                if (this._material) {
-                                    this._material.dispose();
-                                }
-
-                                this._material = tempMaterial;
-                                this._globalState.onIsLoadingChanged.notifyObservers(false);
-                            })
-                            .catch((reason) => {
-                                this._globalState.onLogRequiredObservable.notifyObservers(new LogEntry("Shader compilation error:\r\n" + reason, true));
-                                this._globalState.onIsLoadingChanged.notifyObservers(false);
-                            });
-                    } else {
-                        this._material = tempMaterial;
-                    }
-                    break;
-                }
-            }
-        } catch (err) {
-            // Ignore the error
-            this._globalState.onIsLoadingChanged.notifyObservers(false);
-        }
-    }
-
-    public dispose() {
-        this._nodeMaterial.onBuildObservable.remove(this._onBuildObserver);
-        this._globalState.onPreviewCommandActivated.remove(this._onPreviewCommandActivatedObserver);
-        this._globalState.onUpdateRequiredObservable.remove(this._onUpdateRequiredObserver);
-        this._globalState.onAnimationCommandActivated.remove(this._onAnimationCommandActivatedObserver);
-        this._globalState.onPreviewBackgroundChanged.remove(this._onPreviewBackgroundChangedObserver);
-        this._globalState.onBackFaceCullingChanged.remove(this._onBackFaceCullingChangedObserver);
-        this._globalState.onDepthPrePassChanged.remove(this._onDepthPrePassChangedObserver);
-        this._globalState.onLightUpdated.remove(this._onLightUpdatedObserver);
-
-        if (this._material) {
-            this._material.dispose();
-        }
-
-        this._camera.dispose();
-        for (var mesh of this._meshes) {
-            mesh.dispose();
-        }
-
-        this._scene.dispose();
-        this._engine.dispose();
-    }
-}

guiEditor/src/components/preview/previewMeshControlComponent.tsx

@@ -1,173 +0,0 @@
-
-import * as React from "react";
-import { GlobalState } from '../../globalState';
-import { Color3, Color4 } from 'babylonjs/Maths/math.color';
-import { PreviewType } from './previewType';
-import { DataStorage } from 'babylonjs/Misc/dataStorage';
-import { OptionsLineComponent } from '../../sharedComponents/optionsLineComponent';
-import { Observer } from 'babylonjs/Misc/observable';
-import { Nullable } from 'babylonjs/types';
-import { NodeMaterialModes } from 'babylonjs/Materials/Node/Enums/nodeMaterialModes';
-
-const popUpIcon: string = require("./svgs/popOut.svg");
-const colorPicker: string = require("./svgs/colorPicker.svg");
-const pauseIcon: string = require("./svgs/pauseIcon.svg");
-const playIcon: string = require("./svgs/playIcon.svg");
-
-interface IPreviewMeshControlComponent {
-    globalState: GlobalState;
-    togglePreviewAreaComponent: () => void;
-}
-
-export class PreviewMeshControlComponent extends React.Component<IPreviewMeshControlComponent> {
-    private colorInputRef: React.RefObject<HTMLInputElement>;
-    private filePickerRef: React.RefObject<HTMLInputElement>;
-    private _onResetRequiredObserver: Nullable<Observer<void>>;
-
-    constructor(props: IPreviewMeshControlComponent) {
-        super(props);
-        this.colorInputRef = React.createRef();
-        this.filePickerRef = React.createRef();
-
-        this._onResetRequiredObserver = this.props.globalState.onResetRequiredObservable.add(() => {
-            this.forceUpdate();
-        });
-    }
-
-    componentWillUnmount() {
-        this.props.globalState.onResetRequiredObservable.remove(this._onResetRequiredObserver);
-    }
-
-    changeMeshType(newOne: PreviewType) {
-        if (this.props.globalState.previewType === newOne) {
-            return;
-        }
-
-        this.props.globalState.previewType = newOne;
-        this.props.globalState.onPreviewCommandActivated.notifyObservers(false);
-
-        DataStorage.WriteNumber("PreviewType", newOne);
-
-        this.forceUpdate();
-    }
-
-    useCustomMesh(evt: any) {
-        var files: File[] = evt.target.files;
-        if (files && files.length) {
-            let file = files[0];
-
-            this.props.globalState.previewFile = file;
-            this.props.globalState.previewType = PreviewType.Custom;
-            this.props.globalState.onPreviewCommandActivated.notifyObservers(false);
-            this.props.globalState.listOfCustomPreviewFiles = [file];
-            this.forceUpdate();
-        }
-        if (this.filePickerRef.current) {
-            this.filePickerRef.current.value = "";
-        }
-    }
-
-    onPopUp() {
-        this.props.togglePreviewAreaComponent();
-    }
-
-    changeAnimation() {
-        this.props.globalState.rotatePreview = !this.props.globalState.rotatePreview;
-        this.props.globalState.onAnimationCommandActivated.notifyObservers();
-        this.forceUpdate();
-    }
-
-    changeBackground(value: string) {
-        const newColor = Color3.FromHexString(value);
-
-        DataStorage.WriteNumber("BackgroundColorR", newColor.r);
-        DataStorage.WriteNumber("BackgroundColorG", newColor.g);
-        DataStorage.WriteNumber("BackgroundColorB", newColor.b);
-
-        const newBackgroundColor = Color4.FromColor3(newColor, 1.0);
-        this.props.globalState.backgroundColor = newBackgroundColor;
-        this.props.globalState.onPreviewBackgroundChanged.notifyObservers();
-    }
-
-    changeBackgroundClick() {
-        this.colorInputRef.current?.click();
-    }
-
-    render() {
-
-        var meshTypeOptions = [
-            { label: "Cube", value: PreviewType.Box },
-            { label: "Cylinder", value: PreviewType.Cylinder },
-            { label: "Plane", value: PreviewType.Plane },
-            { label: "Shader ball", value: PreviewType.ShaderBall },
-            { label: "Sphere", value: PreviewType.Sphere },
-            { label: "Load...", value: PreviewType.Custom + 1 }
-        ];
-
-        var particleTypeOptions = [
-            { label: "Default", value: PreviewType.DefaultParticleSystem },
-            { label: "Bubbles", value: PreviewType.Bubbles },
-            { label: "Explosion", value: PreviewType.Explosion },
-            { label: "Fire", value: PreviewType.Fire },
-            { label: "Rain", value: PreviewType.Rain },
-            { label: "Smoke", value: PreviewType.Smoke },
-            { label: "Load...", value: PreviewType.Custom + 1 }
-        ];
-
-        if (this.props.globalState.listOfCustomPreviewFiles.length > 0) {
-            meshTypeOptions.splice(0, 0, {
-                label: "Custom", value: PreviewType.Custom
-            });
-
-            particleTypeOptions.splice(0, 0, {
-                label: "Custom", value: PreviewType.Custom
-            });
-        }
-
-        var options = this.props.globalState.mode === NodeMaterialModes.Particle ? particleTypeOptions : meshTypeOptions;
-        var accept = this.props.globalState.mode === NodeMaterialModes.Particle ? ".json" : ".gltf, .glb, .babylon, .obj";
-
-        return (
-            <div id="preview-mesh-bar">
-                { (this.props.globalState.mode === NodeMaterialModes.Material || this.props.globalState.mode === NodeMaterialModes.Particle) && <>
-                    <OptionsLineComponent label="" options={options} target={this.props.globalState}
-                                propertyName="previewType"
-                                noDirectUpdate={true}
-                                onSelect={(value: any) => {
-                                    if (value !== PreviewType.Custom + 1) {
-                                        this.changeMeshType(value);
-                                    } else {
-                                        this.filePickerRef.current?.click();
-                                    }
-                                }} />
-                    <div style={{
-                        display: "none"
-                    }} title="Preview with a custom mesh" >
-                        <input ref={this.filePickerRef} id="file-picker" type="file" onChange={(evt) => this.useCustomMesh(evt)} accept={accept}/>
-                    </div>
-                </> }
-                { this.props.globalState.mode === NodeMaterialModes.Material && <>
-                    <div
-                        title="Turn-table animation"
-                        onClick={() => this.changeAnimation()} className="button" id="play-button">
-                        {this.props.globalState.rotatePreview ? <img src={pauseIcon} alt=""/> : <img src={playIcon} alt=""/>}
-                    </div>
-                    <div
-                    id="color-picker-button"
-                        title="Background color"
-                        className={"button align"}
-                        onClick={(_) => this.changeBackgroundClick()}
-                        >
-                        <img src={colorPicker} alt="" id="color-picker-image"/>
-                        <input ref={this.colorInputRef} id="color-picker" type="color" onChange={(evt) => this.changeBackground(evt.target.value)} />
-                    </div>
-                </> }
-                <div
-                    title="Open preview in new window" id="preview-new-window"
-                    onClick={() => this.onPopUp()} className="button">
-                    <img src={popUpIcon} alt=""/>
-                </div>
-            </div>
-        );
-    }
-}

guiEditor/src/components/propertyTab/propertyTabComponent.tsx

@@ -4,7 +4,6 @@ import { GlobalState } from '../../globalState';
 import { Nullable } from 'babylonjs/types';
 import { ButtonLineComponent } from '../../sharedComponents/buttonLineComponent';
 import { LineContainerComponent } from '../../sharedComponents/lineContainerComponent';
-import { StringTools } from '../../stringTools';
 import { FileButtonLineComponent } from '../../sharedComponents/fileButtonLineComponent';
 import { Tools } from 'babylonjs/Misc/tools';
 import { SerializationTools } from '../../serializationTools';
@@ -25,11 +24,7 @@ import { Vector2LineComponent } from '../../sharedComponents/vector2LineComponen
 import { Vector3LineComponent } from '../../sharedComponents/vector3LineComponent';
 import { Vector4LineComponent } from '../../sharedComponents/vector4LineComponent';
 import { Observer } from 'babylonjs/Misc/observable';
-import { NodeMaterial } from 'babylonjs/Materials/Node/nodeMaterial';
-import { OptionsLineComponent } from '../../sharedComponents/optionsLineComponent';
-import { NodeMaterialModes } from 'babylonjs/Materials/Node/Enums/nodeMaterialModes';
-import { PreviewType } from '../preview/previewType';
-import { TextInputLineComponent } from '../../sharedComponents/textInputLineComponent';
+
 require("./propertyTab.scss");
 
 interface IPropertyTabComponentProps {
@@ -42,14 +37,11 @@ interface IPropertyTabComponentState {
 
 export class PropertyTabComponent extends React.Component<IPropertyTabComponentProps, IPropertyTabComponentState> {
     private _onBuiltObserver: Nullable<Observer<void>>;
-    private _modeSelect: React.RefObject<OptionsLineComponent>;
 
     constructor(props: IPropertyTabComponentProps) {
         super(props);
 
         this.state = { currentNode: null};
-
-        this._modeSelect = React.createRef();
     }
 
     componentDidMount() {
@@ -143,9 +135,7 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
             let decoder = new TextDecoder("utf-8");
             SerializationTools.Deserialize(JSON.parse(decoder.decode(data)), this.props.globalState);
 
-            if (!this.changeMode(this.props.globalState.nodeMaterial!.mode, true, false)) {
-                this.props.globalState.onResetRequiredObservable.notifyObservers();
-            }
+
             this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
         }, undefined, true);
     }
@@ -153,28 +143,28 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
     loadFrame(file: File) {
         Tools.ReadFile(file, (data) => {
             // get Frame Data from file
-            let decoder = new TextDecoder("utf-8");
-            const frameData = JSON.parse(decoder.decode(data));
-            SerializationTools.AddFrameToMaterial(frameData, this.props.globalState, this.props.globalState.nodeMaterial);
+            //let decoder = new TextDecoder("utf-8");
+           // const frameData = JSON.parse(decoder.decode(data));
+           // SerializationTools.AddFrameToMaterial(frameData, this.props.globalState, this.props.globalState.nodeMaterial);
         }, undefined, true);
     }
 
     save() {
-        let json = SerializationTools.Serialize(this.props.globalState.nodeMaterial, this.props.globalState);
-        StringTools.DownloadAsFile(this.props.globalState.hostDocument, json, "nodeMaterial.json");
+        //let json = SerializationTools.Serialize(this.props.globalState.nodeMaterial, this.props.globalState);
+        //StringTools.DownloadAsFile(this.props.globalState.hostDocument, json, "nodeMaterial.json");
     }
 
     customSave() {
-        this.props.globalState.onLogRequiredObservable.notifyObservers({message: "Saving your material to Babylon.js snippet server...", isError: false});
+        /*this.props.globalState.onLogRequiredObservable.notifyObservers({message: "Saving your material to Babylon.js snippet server...", isError: false});
         this.props.globalState.customSave!.action(SerializationTools.Serialize(this.props.globalState.nodeMaterial, this.props.globalState)).then(() => {
             this.props.globalState.onLogRequiredObservable.notifyObservers({message: "Material saved successfully", isError: false});
         }).catch((err) => {
             this.props.globalState.onLogRequiredObservable.notifyObservers({message: err, isError: true});
-        });
+        });*/
     }
 
     saveToSnippetServer() {
-        const material = this.props.globalState.nodeMaterial;
+        /*const material = this.props.globalState.nodeMaterial;
         const xmlHttp = new XMLHttpRequest();
 
         let json = SerializationTools.Serialize(material, this.props.globalState);
@@ -224,11 +214,11 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
             tags: ""
         };
 
-        xmlHttp.send(JSON.stringify(dataToSend));
+        xmlHttp.send(JSON.stringify(dataToSend));*/
     }
 
     loadFromSnippet() {
-        const material = this.props.globalState.nodeMaterial;
+        /*const material = this.props.globalState.nodeMaterial;
         const scene = material.getScene();
 
         let snippedID = window.prompt("Please enter the snippet ID to use");
@@ -246,60 +236,9 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
             }
         }).catch((err) => {
             this.props.globalState.hostDocument.defaultView!.alert("Unable to load your node material: " + err);
-        });
+        });*/
     }
 
-    changeMode(value: any, force = false, loadDefault = true): boolean {
-        if (this.props.globalState.mode === value) {
-            return false;
-        }
-
-        if (!force && !this.props.globalState.hostDocument.defaultView!.confirm('Are your sure? You will lose your current changes (if any) if they are not saved!')) {
-            this._modeSelect.current?.setValue(this.props.globalState.mode);
-            return false;
-        }
-
-        if (force) {
-            this._modeSelect.current?.setValue(value);
-        }
-
-        if (loadDefault) {
-            switch (value) {
-                case NodeMaterialModes.Material:
-                    this.props.globalState.nodeMaterial!.setToDefault();
-                    break;
-                case NodeMaterialModes.PostProcess:
-                    this.props.globalState.nodeMaterial!.setToDefaultPostProcess();
-                    break;
-                case NodeMaterialModes.Particle:
-                    this.props.globalState.nodeMaterial!.setToDefaultParticle();
-                    break;
-                case NodeMaterialModes.ProceduralTexture:
-                    this.props.globalState.nodeMaterial!.setToDefaultProceduralTexture();
-                    break;
-            }
-        }
-
-        switch (value) {
-            case NodeMaterialModes.Material:
-                this.props.globalState.previewType = PreviewType.Sphere;
-                break;
-            case NodeMaterialModes.Particle:
-                this.props.globalState.previewType = PreviewType.Bubbles;
-                break;
-        }
-
-        this.props.globalState.listOfCustomPreviewFiles = [];
-        (this.props.globalState.previewFile as any) = undefined;
-
-        DataStorage.WriteNumber("PreviewType", this.props.globalState.previewType);
-
-        this.props.globalState.mode = value as NodeMaterialModes;
-
-        this.props.globalState.onResetRequiredObservable.notifyObservers();
-
-        return true;
-    }
 
     render() {
         if (this.state.currentNode) {
@@ -318,13 +257,6 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
 
         let gridSize = DataStorage.ReadNumber("GridSize", 20);
 
-        const modeList = [
-            { label: "Material", value: NodeMaterialModes.Material },
-            { label: "Post Process", value: NodeMaterialModes.PostProcess },
-            { label: "Particle", value: NodeMaterialModes.Particle },
-            { label: "Procedural", value: NodeMaterialModes.ProceduralTexture },
-        ];
-
         return (
             <div id="propertyTab">
                 <div id="header">
@@ -335,25 +267,9 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
                 </div>
                 <div>
                     <LineContainerComponent title="GENERAL">
-                        <OptionsLineComponent ref={this._modeSelect} label="Mode" target={this} getSelection={(target) => this.props.globalState.mode} options={modeList} onSelect={(value) => this.changeMode(value)} />
                         <TextLineComponent label="Version" value={Engine.Version}/>
                         <TextLineComponent label="Help" value="doc.babylonjs.com" underline={true} onLink={() => window.open('https://doc.babylonjs.com/how_to/node_material', '_blank')}/>
-                        <TextInputLineComponent label="Comment" multilines={true} value={this.props.globalState.nodeMaterial!.comment} target={this.props.globalState.nodeMaterial} propertyName="comment" globalState={this.props.globalState}/>
                         <ButtonLineComponent label="Reset to default" onClick={() => {
-                            switch (this.props.globalState.mode) {
-                                case NodeMaterialModes.Material:
-                                    this.props.globalState.nodeMaterial!.setToDefault();
-                                    break;
-                                case NodeMaterialModes.PostProcess:
-                                    this.props.globalState.nodeMaterial!.setToDefaultPostProcess();
-                                    break;
-                                case NodeMaterialModes.Particle:
-                                    this.props.globalState.nodeMaterial!.setToDefaultParticle();
-                                    break;
-                                case NodeMaterialModes.ProceduralTexture:
-                                    this.props.globalState.nodeMaterial!.setToDefaultProceduralTexture();
-                                    break;
-                            }
                             this.props.globalState.onResetRequiredObservable.notifyObservers();
                         }} />
                     </LineContainerComponent>
@@ -394,12 +310,6 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
                         <ButtonLineComponent label="Save" onClick={() => {
                             this.save();
                         }} />
-                        <ButtonLineComponent label="Generate code" onClick={() => {
-                            StringTools.DownloadAsFile(this.props.globalState.hostDocument, this.props.globalState.nodeMaterial!.generateCode(), "code.txt");
-                        }} />
-                        <ButtonLineComponent label="Export shaders" onClick={() => {
-                            StringTools.DownloadAsFile(this.props.globalState.hostDocument, this.props.globalState.nodeMaterial!.compiledShaders, "shaders.txt");
-                        }} />
                         {
                             this.props.globalState.customSave &&
                             <ButtonLineComponent label={this.props.globalState.customSave!.label} onClick={() => {
@@ -411,26 +321,12 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
                     {
                         !this.props.globalState.customSave &&
                         <LineContainerComponent title="SNIPPET">
-                            {
-                                this.props.globalState.nodeMaterial!.snippetId &&
-                                <TextLineComponent label="Snippet ID" value={this.props.globalState.nodeMaterial!.snippetId} />
-                            }
                             <ButtonLineComponent label="Load from snippet server" onClick={() => this.loadFromSnippet()} />
                             <ButtonLineComponent label="Save to snippet server" onClick={() => {
                                 this.saveToSnippetServer();
                             }} />
                         </LineContainerComponent>
                     }
-                    <LineContainerComponent title="INPUTS">
-                    {
-                        this.props.globalState.nodeMaterial.getInputBlocks().map((ib) => {
-                            if (!ib.isUniform || ib.isSystemValue || !ib.name) {
-                                return null;
-                            }
-                            return this.renderInputBlock(ib);
-                        })
-                    }
-                    </LineContainerComponent>
                 </div>
             </div>
         );

guiEditor/src/diagram/frameNodePort.ts

@@ -1 +0,0 @@
-

guiEditor/src/diagram/propertyLedger.ts

@@ -7,15 +7,10 @@ import { CheckboxPropertyTabComponent } from './properties/checkboxGuiPropertyCo
 import { ShapePropertyTabComponent } from './properties/shapeGuiPropertyComponent';
 import { LinePropertyTabComponent } from './properties/lineGuiPropertyComponent';
 
-export class PropertyLedger {
-    public static RegisteredControls: {[key: string] : ComponentClass<IPropertyComponentProps>} = {};
-}
-
 export class PropertyGuiLedger {
     public static RegisteredControls: {[key: string] : ComponentClass<IPropertyComponentProps>} = {};
 }
 
-
 PropertyGuiLedger.RegisteredControls["Button"] = ButtonPropertyTabComponent;
 PropertyGuiLedger.RegisteredControls["Slider"] = SliderPropertyTabComponent;
 PropertyGuiLedger.RegisteredControls["Checkbox"] = CheckboxPropertyTabComponent;

guiEditor/src/diagram/workbench.tsx

@@ -55,7 +55,6 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
     public _frameIsMoving = false;
     public _isLoading = false;
     public isOverGUINode = false;
-    
 
     public get gridSize() {
         return this._gridSize;

guiEditor/src/globalState.ts

@@ -1,4 +1,3 @@
-import { NodeMaterial } from "babylonjs/Materials/Node/nodeMaterial";
 import { Nullable } from "babylonjs/types";
 import { Observable } from 'babylonjs/Misc/observable';
 import { LogEntry } from './components/log/logComponent';
@@ -9,10 +8,9 @@ import { Color4 } from 'babylonjs/Maths/math.color';
 import { GUINode } from './diagram/guiNode';
 import { Vector2 } from 'babylonjs/Maths/math.vector';
 import { FramePortData, WorkbenchComponent } from './diagram/workbench';
-import { NodeMaterialModes } from 'babylonjs/Materials/Node/Enums/nodeMaterialModes';
+
 
 export class GlobalState {
-    nodeMaterial: NodeMaterial;
     guiTexture: BABYLON.GUI.AdvancedDynamicTexture;
     hostElement: HTMLElement;
     hostDocument: HTMLDocument;
@@ -54,19 +52,6 @@ export class GlobalState {
     controlCamera: boolean;
     workbench: WorkbenchComponent;
     storeEditorData: (serializationObject: any, frame?: Nullable<null>) => void;
-    _mode: NodeMaterialModes;
-
-    /** Gets the mode */
-    public get mode(): NodeMaterialModes {
-        return this._mode;
-    }
-
-    /** Sets the mode */
-    public set mode(m: NodeMaterialModes) {
-        DataStorage.WriteNumber("Mode", m);
-        this._mode = m;
-        this.onPreviewCommandActivated.notifyObservers(true);
-    }
 
     customSave?: {label: string, action: (data: string) => Promise<void>};
 
@@ -78,7 +63,6 @@ export class GlobalState {
         this.directionalLight0 = DataStorage.ReadBoolean("DirectionalLight0", false);
         this.directionalLight1 = DataStorage.ReadBoolean("DirectionalLight1", false);
         this.controlCamera = DataStorage.ReadBoolean("ControlCamera", true);
-        this._mode = DataStorage.ReadNumber("Mode", NodeMaterialModes.Material);
 
         let r = DataStorage.ReadNumber("BackgroundColorR", 0.12549019607843137);
         let g = DataStorage.ReadNumber("BackgroundColorG", 0.09803921568627451);

guiEditor/src/guiEditor.ts

@@ -2,18 +2,13 @@ import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { GlobalState } from './globalState';
 import { WorkbenchEditor } from './workbenchEditor';
-import { NodeMaterial } from "babylonjs/Materials/Node/nodeMaterial"
-import { Popup } from "./sharedComponents/popup"
+import { Popup } from "./sharedComponents/popup";
 import { SerializationTools } from './serializationTools';
 import { Observable } from 'babylonjs/Misc/observable';
-import { PreviewType } from './components/preview/previewType';
-import { DataStorage } from 'babylonjs/Misc/dataStorage';
-import { NodeMaterialModes } from 'babylonjs/Materials/Node/Enums/nodeMaterialModes';
 /**
  * Interface used to specify creation options for the gui editor
  */
 export interface INodeEditorOptions {
-    nodeMaterial: NodeMaterial,
     hostElement?: HTMLElement,
     customSave?: {label: string, action: (data: string) => Promise<void>};
     customLoadObservable?: Observable<any>
@@ -44,8 +39,6 @@ export class GuiEditor {
         }
 
         let globalState = new GlobalState();
-        globalState.nodeMaterial = options.nodeMaterial;
-        globalState.mode = options.nodeMaterial.mode;
         globalState.hostElement = hostElement;
         globalState.hostDocument = hostElement.ownerDocument!;
         globalState.customSave = options.customSave;
@@ -65,7 +58,6 @@ export class GuiEditor {
         if (options.customLoadObservable) {
             options.customLoadObservable.add(data => {
                 SerializationTools.Deserialize(data, globalState);
-                globalState.mode = options.nodeMaterial.mode;
                 globalState.onResetRequiredObservable.notifyObservers();
                 globalState.onBuiltObservable.notifyObservers();
             })
@@ -75,12 +67,7 @@ export class GuiEditor {
 
         // Close the popup window when the page is refreshed or scene is disposed
         var popupWindow = (Popup as any)["gui-editor"];
-        if (globalState.nodeMaterial && popupWindow) {
-            globalState.nodeMaterial.getScene().onDisposeObservable.addOnce(() => {
-                if (popupWindow) {
-                    popupWindow.close();
-                }
-            })
+        if (popupWindow) {
             window.onbeforeunload = () => {
                 var popupWindow = (Popup as any)["gui-editor"];
                 if (popupWindow) {
@@ -90,9 +77,6 @@ export class GuiEditor {
             };
         }
         window.addEventListener('beforeunload', () => {
-            if(DataStorage.ReadNumber("PreviewType", PreviewType.Box) === PreviewType.Custom){
-                DataStorage.WriteNumber("PreviewType", globalState.mode === NodeMaterialModes.Material ? PreviewType.Box : PreviewType.Bubbles);
-            }
         });
     }
 }

guiEditor/src/serializationTools.ts

@@ -31,13 +31,12 @@ export class SerializationTools {
 
     public static Deserialize(serializationObject: any, globalState: GlobalState) {
         globalState.onIsLoadingChanged.notifyObservers(true);
-        globalState.nodeMaterial!.loadFromSerialization(serializationObject, "");
+
     }
 
     public static AddFrameToMaterial(serializationObject: any, globalState: GlobalState, currentMaterial: NodeMaterial) {
         globalState.onIsLoadingChanged.notifyObservers(true);
         this.UpdateLocations(currentMaterial, globalState);
-        globalState.nodeMaterial!.loadFromSerialization(serializationObject, "", true);
         globalState.onImportFrameObservable.notifyObservers(serializationObject);
     }
 }

guiEditor/src/workbenchEditor.tsx

@@ -8,14 +8,10 @@ import { DataStorage } from 'babylonjs/Misc/dataStorage';
 import { Nullable } from 'babylonjs/types';
 import { MessageDialogComponent } from './sharedComponents/messageDialog';
 import { BlockTools } from './blockTools';
-import { PreviewManager } from './components/preview/previewManager';
 import { IEditorData } from './nodeLocationInfo';
-import { PreviewMeshControlComponent } from './components/preview/previewMeshControlComponent';
-import { PreviewAreaComponent } from './components/preview/previewAreaComponent';
-import { SerializationTools } from './serializationTools';
+
 import { WorkbenchComponent } from './diagram/workbench';
 import { GUINode } from './diagram/guiNode';
-import * as ReactDOM from 'react-dom';
 import { IInspectorOptions } from "babylonjs/Debug/debugLayer";
 import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
@@ -48,7 +44,6 @@ export class WorkbenchEditor extends React.Component<IGraphEditorProps, IGraphEd
 
     private _blocks = new Array<BABYLON.GUI.Container | BABYLON.GUI.Control>();
 
-    private _previewManager: PreviewManager;
     private _onWidgetKeyUpPointer: any;
 
     private _previewHost: Nullable<HTMLElement>;
@@ -82,7 +77,7 @@ export class WorkbenchEditor extends React.Component<IGraphEditorProps, IGraphEd
             ((this.props.globalState.hostDocument || document).querySelector(".blocker") as HTMLElement).style.visibility = "visible";
         }
 
-        this.build();
+
     }
 
     componentWillUnmount() {
@@ -90,9 +85,6 @@ export class WorkbenchEditor extends React.Component<IGraphEditorProps, IGraphEd
             this.props.globalState.hostDocument!.removeEventListener("keyup", this._onWidgetKeyUpPointer, false);
         }
 
-        if (this._previewManager) {
-            this._previewManager.dispose();
-        }
     }
 
     constructor(props: IGraphEditorProps) {
@@ -103,16 +95,11 @@ export class WorkbenchEditor extends React.Component<IGraphEditorProps, IGraphEd
         };
 
         this.props.globalState.onRebuildRequiredObservable.add(() => {
-            if (this.props.globalState.nodeMaterial) {
-                this.buildMaterial();
-            }
+
         });
 
         this.props.globalState.onResetRequiredObservable.add(() => {
-            this.build();
-            if (this.props.globalState.nodeMaterial) {
-                this.buildMaterial();
-            }
+
         });
 
         this.props.globalState.onImportFrameObservable.add((source: any) => {
@@ -241,60 +228,11 @@ export class WorkbenchEditor extends React.Component<IGraphEditorProps, IGraphEd
     }
 
     buildMaterial() {
-        if (!this.props.globalState.nodeMaterial) {
-            return;
-        }
-
-        try {
-            this.props.globalState.nodeMaterial.options.emitComments = true;
-            this.props.globalState.nodeMaterial.build(true);
-            this.props.globalState.onLogRequiredObservable.notifyObservers(new LogEntry("Node material build successful", false));
-        }
-        catch (err) {
-            this.props.globalState.onLogRequiredObservable.notifyObservers(new LogEntry(err, true));
-        }
-
-        SerializationTools.UpdateLocations(this.props.globalState.nodeMaterial, this.props.globalState);
 
+        this.props.globalState.onLogRequiredObservable.notifyObservers(new LogEntry("Node material build successful", false));
         this.props.globalState.onBuiltObservable.notifyObservers();
     }
 
-    build() {        
-        let editorData = this.props.globalState.nodeMaterial.editorData;        
-        this._workbenchCanvas._isLoading = true; // Will help loading large graphes
-
-        if (editorData instanceof Array) {
-            editorData = {
-                locations: editorData
-            }
-        }
-
-        // setup the diagram model
-        this._blocks = [];
-        this._workbenchCanvas.reset();
-
-        // Load graph of nodes from the material
-        if (this.props.globalState.nodeMaterial) {
-            this.loadGraph()
-        }
-
-        this.reOrganize(editorData);
-    }
-
-    loadGraph() {
-        var material = this.props.globalState.nodeMaterial;
-        material._vertexOutputNodes.forEach((n: any) => {
-            this.createNodeFromObject(n, true);
-        });
-        material._fragmentOutputNodes.forEach((n: any) => {
-            this.createNodeFromObject(n, true);
-        });
-
-        material.attachedBlocks.forEach((n: any) => {
-            this.createNodeFromObject(n, true);
-        });
-          
-    }
 
     showWaitScreen() {
         this.props.globalState.hostDocument.querySelector(".wait-screen")?.classList.remove("hidden");
@@ -406,7 +344,7 @@ export class WorkbenchEditor extends React.Component<IGraphEditorProps, IGraphEd
     }
 
     handleClosingPopUp = () => {
-        this._previewManager.dispose();
+       
         this._popUpWindow.close();
         this.setState({
             showPreviewPopUp: false
@@ -415,7 +353,7 @@ export class WorkbenchEditor extends React.Component<IGraphEditorProps, IGraphEd
     }
 
     initiatePreviewArea = (canvas: HTMLCanvasElement = this.props.globalState.hostDocument.getElementById("preview-canvas") as HTMLCanvasElement) => {
-        this._previewManager =  new PreviewManager(canvas, this.props.globalState);
+        //this._previewManager =  new PreviewManager(canvas, this.props.globalState);
     }
 
     createPopUp = () => {
@@ -533,11 +471,11 @@ export class WorkbenchEditor extends React.Component<IGraphEditorProps, IGraphEd
             host.style.width = options.embedHostWidth || "auto";
 
             parentControl.appendChild(host);
-            const PreviewMeshControlComponentHost = React.createElement(PreviewMeshControlComponent, {
+            /*const PreviewMeshControlComponentHost = React.createElement(PreviewMeshControlComponent, {
                 globalState: this.props.globalState,
                 togglePreviewAreaComponent: this.handlePopUp
             });
-            ReactDOM.render(PreviewMeshControlComponentHost, host);
+            ReactDOM.render(PreviewMeshControlComponentHost, host);*/
         }
     }
 
@@ -561,13 +499,6 @@ export class WorkbenchEditor extends React.Component<IGraphEditorProps, IGraphEd
             }
         }
 
-        if (this._previewHost) {
-            const PreviewAreaComponentHost = React.createElement(PreviewAreaComponent, {
-                globalState: this.props.globalState,
-                width: 200
-            });
-            ReactDOM.render(PreviewAreaComponentHost, this._previewHost);
-        }
     }
 
     fixPopUpStyles = (document: Document) => {