|
@@ -25,7 +25,7 @@ import { NodeMaterialModes } from 'babylonjs/Materials/Node/Enums/nodeMaterialMo
|
|
|
|
|
|
export class PreviewManager {
|
|
export class PreviewManager {
|
|
private _nodeMaterial: NodeMaterial;
|
|
private _nodeMaterial: NodeMaterial;
|
|
- private _onBuildObserver: Nullable<Observer<NodeMaterial>>;
|
|
|
|
|
|
+ private _onBuildObserver: Nullable<Observer<NodeMaterial>>;
|
|
private _onPreviewCommandActivatedObserver: Nullable<Observer<boolean>>;
|
|
private _onPreviewCommandActivatedObserver: Nullable<Observer<boolean>>;
|
|
private _onAnimationCommandActivatedObserver: Nullable<Observer<void>>;
|
|
private _onAnimationCommandActivatedObserver: Nullable<Observer<void>>;
|
|
private _onUpdateRequiredObserver: Nullable<Observer<void>>;
|
|
private _onUpdateRequiredObserver: Nullable<Observer<void>>;
|
|
@@ -38,8 +38,8 @@ export class PreviewManager {
|
|
private _meshes: AbstractMesh[];
|
|
private _meshes: AbstractMesh[];
|
|
private _camera: ArcRotateCamera;
|
|
private _camera: ArcRotateCamera;
|
|
private _material: NodeMaterial;
|
|
private _material: NodeMaterial;
|
|
- private _globalState: GlobalState;
|
|
|
|
- private _currentType: number;
|
|
|
|
|
|
+ private _globalState: GlobalState;
|
|
|
|
+ private _currentType: number;
|
|
private _lightParent: TransformNode;
|
|
private _lightParent: TransformNode;
|
|
private _postprocess: Nullable<PostProcess>;
|
|
private _postprocess: Nullable<PostProcess>;
|
|
|
|
|
|
@@ -61,7 +61,7 @@ export class PreviewManager {
|
|
|
|
|
|
this._onLightUpdatedObserver = globalState.onLightUpdated.add(() => {
|
|
this._onLightUpdatedObserver = globalState.onLightUpdated.add(() => {
|
|
this._prepareLights();
|
|
this._prepareLights();
|
|
- });
|
|
|
|
|
|
+ });
|
|
|
|
|
|
this._onUpdateRequiredObserver = globalState.onUpdateRequiredObservable.add(() => {
|
|
this._onUpdateRequiredObserver = globalState.onUpdateRequiredObservable.add(() => {
|
|
let serializationObject = this._nodeMaterial.serialize();
|
|
let serializationObject = this._nodeMaterial.serialize();
|
|
@@ -69,7 +69,7 @@ export class PreviewManager {
|
|
});
|
|
});
|
|
|
|
|
|
this._onPreviewBackgroundChangedObserver = globalState.onPreviewBackgroundChanged.add(() => {
|
|
this._onPreviewBackgroundChangedObserver = globalState.onPreviewBackgroundChanged.add(() => {
|
|
- this._scene.clearColor = this._globalState.backgroundColor;
|
|
|
|
|
|
+ this._scene.clearColor = this._globalState.backgroundColor;
|
|
});
|
|
});
|
|
|
|
|
|
this._onAnimationCommandActivatedObserver = globalState.onAnimationCommandActivated.add(() => {
|
|
this._onAnimationCommandActivatedObserver = globalState.onAnimationCommandActivated.add(() => {
|
|
@@ -82,7 +82,7 @@ export class PreviewManager {
|
|
|
|
|
|
this._onDepthPrePassChangedObserver = globalState.onDepthPrePassChanged.add(() => {
|
|
this._onDepthPrePassChangedObserver = globalState.onDepthPrePassChanged.add(() => {
|
|
this._material.needDepthPrePass = this._globalState.depthPrePass;
|
|
this._material.needDepthPrePass = this._globalState.depthPrePass;
|
|
- });
|
|
|
|
|
|
+ });
|
|
|
|
|
|
this._engine = new Engine(targetCanvas, true);
|
|
this._engine = new Engine(targetCanvas, true);
|
|
this._scene = new Scene(this._engine);
|
|
this._scene = new Scene(this._engine);
|
|
@@ -105,11 +105,11 @@ export class PreviewManager {
|
|
});
|
|
});
|
|
|
|
|
|
// let cameraLastRotation = 0;
|
|
// let cameraLastRotation = 0;
|
|
- let lastOffsetX:number | undefined = undefined;
|
|
|
|
- // const lightRotationParallaxSpeed = 0.5;
|
|
|
|
- const lightRotationSpeed = 0.01;
|
|
|
|
|
|
+ let lastOffsetX: number | undefined = undefined;
|
|
|
|
+ // const lightRotationParallaxSpeed = 0.5;
|
|
|
|
+ const lightRotationSpeed = 0.01;
|
|
|
|
|
|
- this._scene.onPointerObservable.add(evt => {
|
|
|
|
|
|
+ this._scene.onPointerObservable.add((evt) => {
|
|
if (this._globalState.controlCamera) {
|
|
if (this._globalState.controlCamera) {
|
|
return;
|
|
return;
|
|
}
|
|
}
|
|
@@ -127,7 +127,7 @@ export class PreviewManager {
|
|
lastOffsetX = evt.event.offsetX;
|
|
lastOffsetX = evt.event.offsetX;
|
|
}
|
|
}
|
|
|
|
|
|
- var rotateLighting = (lastOffsetX - evt.event.offsetX) * lightRotationSpeed;
|
|
|
|
|
|
+ var rotateLighting = (lastOffsetX - evt.event.offsetX) * lightRotationSpeed;
|
|
this._lightParent.rotation.y += rotateLighting;
|
|
this._lightParent.rotation.y += rotateLighting;
|
|
lastOffsetX = evt.event.offsetX;
|
|
lastOffsetX = evt.event.offsetX;
|
|
});
|
|
});
|
|
@@ -139,7 +139,7 @@ export class PreviewManager {
|
|
// if (!this._globalState.controlCamera) {
|
|
// if (!this._globalState.controlCamera) {
|
|
// return;
|
|
// return;
|
|
// }
|
|
// }
|
|
- // var rotateLighting = (this._camera.alpha - cameraLastRotation) * lightRotationParallaxSpeed;
|
|
|
|
|
|
+ // var rotateLighting = (this._camera.alpha - cameraLastRotation) * lightRotationParallaxSpeed;
|
|
// this._lightParent.rotate(Vector3.Up(), rotateLighting);
|
|
// this._lightParent.rotate(Vector3.Up(), rotateLighting);
|
|
// cameraLastRotation = this._camera.alpha;
|
|
// cameraLastRotation = this._camera.alpha;
|
|
// });
|
|
// });
|
|
@@ -147,7 +147,7 @@ export class PreviewManager {
|
|
|
|
|
|
private _handleAnimations() {
|
|
private _handleAnimations() {
|
|
this._scene.stopAllAnimations();
|
|
this._scene.stopAllAnimations();
|
|
-
|
|
|
|
|
|
+
|
|
if (this._globalState.rotatePreview) {
|
|
if (this._globalState.rotatePreview) {
|
|
for (var root of this._scene.rootNodes) {
|
|
for (var root of this._scene.rootNodes) {
|
|
let transformNode = root as TransformNode;
|
|
let transformNode = root as TransformNode;
|
|
@@ -173,14 +173,14 @@ export class PreviewManager {
|
|
|
|
|
|
// Create new lights based on settings
|
|
// Create new lights based on settings
|
|
if (this._globalState.hemisphericLight) {
|
|
if (this._globalState.hemisphericLight) {
|
|
- new HemisphericLight("Hemispheric light", new Vector3(0, 1, 0), this._scene);
|
|
|
|
|
|
+ new HemisphericLight("Hemispheric light", new Vector3(0, 1, 0), this._scene);
|
|
}
|
|
}
|
|
|
|
|
|
if (this._globalState.directionalLight0) {
|
|
if (this._globalState.directionalLight0) {
|
|
let dir0 = new DirectionalLight("Directional light #0", new Vector3(0.841626576496605, -0.2193391004130599, -0.49351298337996535), this._scene);
|
|
let dir0 = new DirectionalLight("Directional light #0", new Vector3(0.841626576496605, -0.2193391004130599, -0.49351298337996535), this._scene);
|
|
dir0.intensity = 0.9;
|
|
dir0.intensity = 0.9;
|
|
dir0.diffuse = new Color3(0.9294117647058824, 0.9725490196078431, 0.996078431372549);
|
|
dir0.diffuse = new Color3(0.9294117647058824, 0.9725490196078431, 0.996078431372549);
|
|
- dir0.specular = new Color3(0.9294117647058824, 0.9725490196078431, 0.996078431372549);
|
|
|
|
|
|
+ dir0.specular = new Color3(0.9294117647058824, 0.9725490196078431, 0.996078431372549);
|
|
dir0.parent = this._lightParent;
|
|
dir0.parent = this._lightParent;
|
|
}
|
|
}
|
|
|
|
|
|
@@ -188,8 +188,8 @@ export class PreviewManager {
|
|
let dir1 = new DirectionalLight("Directional light #1", new Vector3(-0.9519937437504213, -0.24389315636999764, -0.1849974057546125), this._scene);
|
|
let dir1 = new DirectionalLight("Directional light #1", new Vector3(-0.9519937437504213, -0.24389315636999764, -0.1849974057546125), this._scene);
|
|
dir1.intensity = 1.2;
|
|
dir1.intensity = 1.2;
|
|
dir1.specular = new Color3(0.9803921568627451, 0.9529411764705882, 0.7725490196078432);
|
|
dir1.specular = new Color3(0.9803921568627451, 0.9529411764705882, 0.7725490196078432);
|
|
- dir1.diffuse = new Color3(0.9803921568627451, 0.9529411764705882, 0.7725490196078432);
|
|
|
|
- dir1.parent = this._lightParent;
|
|
|
|
|
|
+ dir1.diffuse = new Color3(0.9803921568627451, 0.9529411764705882, 0.7725490196078432);
|
|
|
|
+ dir1.parent = this._lightParent;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@@ -205,16 +205,16 @@ export class PreviewManager {
|
|
setTimeout(() => { // Let the behavior activate first
|
|
setTimeout(() => { // Let the behavior activate first
|
|
framingBehavior.framingTime = 0;
|
|
framingBehavior.framingTime = 0;
|
|
framingBehavior.elevationReturnTime = -1;
|
|
framingBehavior.elevationReturnTime = -1;
|
|
-
|
|
|
|
|
|
+
|
|
if (this._scene.meshes.length) {
|
|
if (this._scene.meshes.length) {
|
|
var worldExtends = this._scene.getWorldExtends();
|
|
var worldExtends = this._scene.getWorldExtends();
|
|
this._camera.lowerRadiusLimit = null;
|
|
this._camera.lowerRadiusLimit = null;
|
|
this._camera.upperRadiusLimit = null;
|
|
this._camera.upperRadiusLimit = null;
|
|
framingBehavior.zoomOnBoundingInfo(worldExtends.min, worldExtends.max);
|
|
framingBehavior.zoomOnBoundingInfo(worldExtends.min, worldExtends.max);
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+
|
|
this._camera.pinchPrecision = 200 / this._camera.radius;
|
|
this._camera.pinchPrecision = 200 / this._camera.radius;
|
|
- this._camera.upperRadiusLimit = 5 * this._camera.radius;
|
|
|
|
|
|
+ this._camera.upperRadiusLimit = 5 * this._camera.radius;
|
|
});
|
|
});
|
|
|
|
|
|
this._camera.wheelDeltaPercentage = 0.01;
|
|
this._camera.wheelDeltaPercentage = 0.01;
|
|
@@ -224,12 +224,12 @@ export class PreviewManager {
|
|
this._handleAnimations();
|
|
this._handleAnimations();
|
|
}
|
|
}
|
|
|
|
|
|
- // Material
|
|
|
|
|
|
+ // Material
|
|
let serializationObject = this._nodeMaterial.serialize();
|
|
let serializationObject = this._nodeMaterial.serialize();
|
|
this._updatePreview(serializationObject);
|
|
this._updatePreview(serializationObject);
|
|
}
|
|
}
|
|
|
|
|
|
- private _refreshPreviewMesh() {
|
|
|
|
|
|
+ private _refreshPreviewMesh() {
|
|
|
|
|
|
if (this._currentType !== this._globalState.previewMeshType || this._currentType === PreviewMeshType.Custom) {
|
|
if (this._currentType !== this._globalState.previewMeshType || this._currentType === PreviewMeshType.Custom) {
|
|
this._currentType = this._globalState.previewMeshType;
|
|
this._currentType = this._globalState.previewMeshType;
|
|
@@ -254,10 +254,10 @@ export class PreviewManager {
|
|
if (this._globalState.mode !== NodeMaterialModes.PostProcess) {
|
|
if (this._globalState.mode !== NodeMaterialModes.PostProcess) {
|
|
switch (this._globalState.previewMeshType) {
|
|
switch (this._globalState.previewMeshType) {
|
|
case PreviewMeshType.Box:
|
|
case PreviewMeshType.Box:
|
|
- SceneLoader.AppendAsync("https://models.babylonjs.com/", "roundedCube.glb", this._scene).then(() => {
|
|
|
|
|
|
+ SceneLoader.AppendAsync("https://models.babylonjs.com/", "roundedCube.glb", this._scene).then(() => {
|
|
this._meshes.push(...this._scene.meshes);
|
|
this._meshes.push(...this._scene.meshes);
|
|
this._prepareMeshes();
|
|
this._prepareMeshes();
|
|
- });
|
|
|
|
|
|
+ });
|
|
return;
|
|
return;
|
|
case PreviewMeshType.Sphere:
|
|
case PreviewMeshType.Sphere:
|
|
this._meshes.push(Mesh.CreateSphere("dummy-sphere", 32, 2, this._scene));
|
|
this._meshes.push(Mesh.CreateSphere("dummy-sphere", 32, 2, this._scene));
|
|
@@ -266,29 +266,29 @@ export class PreviewManager {
|
|
this._meshes.push(Mesh.CreateTorus("dummy-torus", 2, 0.5, 32, this._scene));
|
|
this._meshes.push(Mesh.CreateTorus("dummy-torus", 2, 0.5, 32, this._scene));
|
|
break;
|
|
break;
|
|
case PreviewMeshType.Cylinder:
|
|
case PreviewMeshType.Cylinder:
|
|
- SceneLoader.AppendAsync("https://models.babylonjs.com/", "roundedCylinder.glb", this._scene).then(() => {
|
|
|
|
|
|
+ SceneLoader.AppendAsync("https://models.babylonjs.com/", "roundedCylinder.glb", this._scene).then(() => {
|
|
this._meshes.push(...this._scene.meshes);
|
|
this._meshes.push(...this._scene.meshes);
|
|
this._prepareMeshes();
|
|
this._prepareMeshes();
|
|
- });
|
|
|
|
- return;
|
|
|
|
|
|
+ });
|
|
|
|
+ return;
|
|
case PreviewMeshType.Plane:
|
|
case PreviewMeshType.Plane:
|
|
let plane = Mesh.CreateGround("dummy-plane", 2, 2, 128, this._scene);
|
|
let plane = Mesh.CreateGround("dummy-plane", 2, 2, 128, this._scene);
|
|
plane.scaling.y = -1;
|
|
plane.scaling.y = -1;
|
|
plane.rotation.x = Math.PI;
|
|
plane.rotation.x = Math.PI;
|
|
this._meshes.push(plane);
|
|
this._meshes.push(plane);
|
|
- break;
|
|
|
|
|
|
+ break;
|
|
case PreviewMeshType.ShaderBall:
|
|
case PreviewMeshType.ShaderBall:
|
|
- SceneLoader.AppendAsync("https://models.babylonjs.com/", "shaderBall.glb", this._scene).then(() => {
|
|
|
|
|
|
+ SceneLoader.AppendAsync("https://models.babylonjs.com/", "shaderBall.glb", this._scene).then(() => {
|
|
this._meshes.push(...this._scene.meshes);
|
|
this._meshes.push(...this._scene.meshes);
|
|
this._prepareMeshes();
|
|
this._prepareMeshes();
|
|
});
|
|
});
|
|
- return;
|
|
|
|
|
|
+ return;
|
|
case PreviewMeshType.Custom:
|
|
case PreviewMeshType.Custom:
|
|
- SceneLoader.AppendAsync("file:", this._globalState.previewMeshFile, this._scene).then(() => {
|
|
|
|
|
|
+ SceneLoader.AppendAsync("file:", this._globalState.previewMeshFile, this._scene).then(() => {
|
|
this._meshes.push(...this._scene.meshes);
|
|
this._meshes.push(...this._scene.meshes);
|
|
this._prepareMeshes();
|
|
this._prepareMeshes();
|
|
});
|
|
});
|
|
- return;
|
|
|
|
|
|
+ return;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@@ -329,7 +329,7 @@ export class PreviewManager {
|
|
}
|
|
}
|
|
this._material = tempMaterial;
|
|
this._material = tempMaterial;
|
|
} else if (this._meshes.length) {
|
|
} else if (this._meshes.length) {
|
|
- let tasks = this._meshes.map(m => this._forceCompilationAsync(tempMaterial, m));
|
|
|
|
|
|
+ let tasks = this._meshes.map((m) => this._forceCompilationAsync(tempMaterial, m));
|
|
|
|
|
|
Promise.all(tasks).then(() => {
|
|
Promise.all(tasks).then(() => {
|
|
for (var mesh of this._meshes) {
|
|
for (var mesh of this._meshes) {
|
|
@@ -338,18 +338,18 @@ export class PreviewManager {
|
|
|
|
|
|
if (this._material) {
|
|
if (this._material) {
|
|
this._material.dispose();
|
|
this._material.dispose();
|
|
- }
|
|
|
|
-
|
|
|
|
- this._material = tempMaterial;
|
|
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ this._material = tempMaterial;
|
|
this._globalState.onIsLoadingChanged.notifyObservers(false);
|
|
this._globalState.onIsLoadingChanged.notifyObservers(false);
|
|
- }).catch(reason => {
|
|
|
|
|
|
+ }).catch((reason) => {
|
|
this._globalState.onLogRequiredObservable.notifyObservers(new LogEntry("Shader compilation error:\r\n" + reason, true));
|
|
this._globalState.onLogRequiredObservable.notifyObservers(new LogEntry("Shader compilation error:\r\n" + reason, true));
|
|
this._globalState.onIsLoadingChanged.notifyObservers(false);
|
|
this._globalState.onIsLoadingChanged.notifyObservers(false);
|
|
});
|
|
});
|
|
} else {
|
|
} else {
|
|
- this._material = tempMaterial;
|
|
|
|
|
|
+ this._material = tempMaterial;
|
|
}
|
|
}
|
|
- } catch(err) {
|
|
|
|
|
|
+ } catch (err) {
|
|
// Ignore the error
|
|
// Ignore the error
|
|
this._globalState.onIsLoadingChanged.notifyObservers(false);
|
|
this._globalState.onIsLoadingChanged.notifyObservers(false);
|
|
}
|
|
}
|