Beginning default rendering pipeline integration

BabylonJS · Aug 27, 2018 · ed0f79a · ed0f79a
1 parent 9abccb0
commit ed0f79a
Show file tree

Hide file tree

Showing 4 changed files with 115 additions and 9 deletions.
diff --git a/babylonjs-editor.d.ts b/babylonjs-editor.d.ts
@@ -1224,12 +1224,13 @@ declare module 'babylonjs-editor/editor/typings/project' {
 }
 
 declare module 'babylonjs-editor/editor/scene/scene-manager' {
-    import { Scene, ActionManager, StandardRenderingPipeline, SSAORenderingPipeline, SSAO2RenderingPipeline, IAnimatable, GlowLayer, HighlightLayer, EnvironmentHelper } from 'babylonjs';
+    import { Scene, ActionManager, StandardRenderingPipeline, SSAORenderingPipeline, SSAO2RenderingPipeline, DefaultRenderingPipeline, IAnimatable, GlowLayer, HighlightLayer, EnvironmentHelper } from 'babylonjs';
     import { IStringDictionary } from 'babylonjs-editor/editor/typings/typings';
     import PostProcessesExtension from 'babylonjs-editor/extensions/post-process/post-processes';
     export default class SceneManager {
             static ActionManagers: IStringDictionary<ActionManager>;
             static StandardRenderingPipeline: StandardRenderingPipeline;
+            static DefaultRenderingPipeline: DefaultRenderingPipeline;
             static SSAORenderingPipeline: SSAORenderingPipeline;
             static SSAO2RenderingPipeline: SSAO2RenderingPipeline;
             static GlowLayer: GlowLayer;
@@ -1929,14 +1930,16 @@ declare module 'babylonjs-editor/editor/scene/scene-icons' {
 }
 
 declare module 'babylonjs-editor/extensions/post-process/post-processes' {
-    import { Scene, StandardRenderingPipeline, SSAO2RenderingPipeline } from 'babylonjs';
+    import { Scene, StandardRenderingPipeline, SSAO2RenderingPipeline, DefaultRenderingPipeline } from 'babylonjs';
     import Extension from 'babylonjs-editor/extensions/extension';
     export interface PostProcessMetadata {
             standard?: any;
+            default?: any;
             ssao2?: any;
     }
     export default class PostProcessesExtension extends Extension<PostProcessMetadata> {
             standard: StandardRenderingPipeline;
+            default: DefaultRenderingPipeline;
             ssao2: SSAO2RenderingPipeline;
             /**
                 * Constructor

diff --git a/src/editor/edition-tools/post-processes/post-processes-tool.ts b/src/editor/edition-tools/post-processes/post-processes-tool.ts
@@ -21,6 +21,7 @@ export default class PostProcessesTool extends AbstractEditionTool<Scene> {
 
     // Private members
     private _standardEnabled: boolean = false;
+    private _defaultEnabled: boolean = false;
     private _ssaoEnabled: boolean = false;
     private _ssao2Enabled: boolean = false;
 
@@ -39,7 +40,7 @@ export default class PostProcessesTool extends AbstractEditionTool<Scene> {
     public update(scene: Scene): void {
         super.update(scene);
 
-        // Default
+        // Standard
         const standardPipeline = this.tool.addFolder('Standard');
         standardPipeline.open();
 
@@ -150,6 +151,96 @@ export default class PostProcessesTool extends AbstractEditionTool<Scene> {
             }
         }
 
+        // Default
+        const def = this.tool.addFolder('Default');
+        def.open();
+
+        this._defaultEnabled = SceneManager.DefaultRenderingPipeline !== null;
+        def.add(this, '_defaultEnabled').name('Enable').onChange(r => {
+            if (!r) {
+                SceneManager.DefaultRenderingPipeline.dispose();
+                SceneManager.DefaultRenderingPipeline = null;
+            }
+            else {
+                SceneManager.DefaultRenderingPipeline = new BABYLON.DefaultRenderingPipeline('Default', true, scene, scene.cameras, true);
+                var curve = new BABYLON.ColorCurves();
+                curve.globalHue = 200;
+                curve.globalDensity = 80;
+                curve.globalSaturation = 80;
+                curve.highlightsHue = 20;
+                curve.highlightsDensity = 80;
+                curve.highlightsSaturation = -80;
+                curve.shadowsHue = 2;
+                curve.shadowsDensity = 80;
+                curve.shadowsSaturation = 40;
+                SceneManager.DefaultRenderingPipeline.imageProcessing.colorCurves = curve;
+                SceneManager.DefaultRenderingPipeline.depthOfField.focalLength = 150;
+                SceneManager.DefaultRenderingPipeline.chromaticAberration.direction.x = Math.PI * 2;
+                SceneManager.DefaultRenderingPipeline.chromaticAberration.direction.y = Math.PI * 2;
+            }
+
+            // Update tool
+            this.update(scene);
+
+            // Check if extension is created
+            this._checkExtension();
+        });
+
+        if (this._defaultEnabled) {
+            // Anti aliasing
+            const antialiasing = def.addFolder('Anti Aliasing');
+            antialiasing.open();
+
+            antialiasing.add(SceneManager.DefaultRenderingPipeline, 'samples').min(1).max(32).name('Multisample Anti-Aliasing');
+            antialiasing.add(SceneManager.DefaultRenderingPipeline, 'fxaaEnabled').name('Fast Approximate Anti-Aliasing');
+
+            // Image processing
+            const imageProcessing = def.addFolder('Image Processing');
+            imageProcessing.open();
+
+            imageProcessing.add(SceneManager.DefaultRenderingPipeline.imageProcessing, 'toneMappingEnabled').name('Tone Mapping');
+            imageProcessing.add(SceneManager.DefaultRenderingPipeline.imageProcessing, 'contrast').min(0).max(4).name('Contrast');
+            imageProcessing.add(SceneManager.DefaultRenderingPipeline.imageProcessing, 'exposure').min(0).max(10).name('Exposure');
+
+            // Bloom
+            const bloom = def.addFolder('Bloom');
+            bloom.open();
+
+            bloom.add(SceneManager.DefaultRenderingPipeline, 'bloomEnabled').name('Enable Bloom');
+            bloom.add(SceneManager.DefaultRenderingPipeline, 'bloomKernel').min(0).max(500).name('Kernel');
+            bloom.add(SceneManager.DefaultRenderingPipeline, 'bloomWeight').min(0).max(10).name('Weight');
+            bloom.add(SceneManager.DefaultRenderingPipeline, 'bloomThreshold').min(0).max(10).name('Threshold');
+            bloom.add(SceneManager.DefaultRenderingPipeline, 'bloomScale').min(0).max(10).name('Scale');
+
+            // Chromatic aberration
+            const chromatic = def.addFolder('Chromatic Aberration');
+            chromatic.open();
+
+            chromatic.add(SceneManager.DefaultRenderingPipeline, 'chromaticAberrationEnabled').name('Enable Chromatic Aberration');
+            chromatic.add(SceneManager.DefaultRenderingPipeline.chromaticAberration, 'aberrationAmount').min(-1000).max(1000).name('Amount');
+            chromatic.add(SceneManager.DefaultRenderingPipeline.chromaticAberration, 'radialIntensity').min(0.1).max(15).step(0.01).name('Radial Intensity');
+            chromatic.add(SceneManager.DefaultRenderingPipeline.chromaticAberration.direction, 'x').min(0).max(Math.PI * 2).step(0.01).name('Direction').onChange(r => {
+                SceneManager.DefaultRenderingPipeline.chromaticAberration.direction.x = Math.sin(r);
+                SceneManager.DefaultRenderingPipeline.chromaticAberration.direction.y = Math.cos(r);
+            });
+
+            // Sharpen
+            const sharpen = def.addFolder('Sharpen');
+            sharpen.open();
+
+            sharpen.add(SceneManager.DefaultRenderingPipeline, 'sharpenEnabled').name('Enable Sharpen');
+            sharpen.add(SceneManager.DefaultRenderingPipeline.sharpen, 'edgeAmount').min(0).max(4).step(0.01).name('Edge Amount');
+            sharpen.add(SceneManager.DefaultRenderingPipeline.sharpen, 'colorAmount').min(0).max(2).step(0.01).name('Color Amount');
+
+            // Grain
+            const grain = def.addFolder('Grain');
+            grain.open();
+
+            grain.add(SceneManager.DefaultRenderingPipeline, 'grainEnabled').name('Enable Grain');
+            grain.add(SceneManager.DefaultRenderingPipeline.grain, 'intensity').min(0).max(100).step(0.1).name('Intensity');
+            grain.add(SceneManager.DefaultRenderingPipeline.grain, 'animated').name('Animated');
+        }
+
         // SSAO
         const ssao = this.tool.addFolder('SSAO');
         ssao.open();

diff --git a/src/editor/scene/scene-manager.ts b/src/editor/scene/scene-manager.ts
@@ -1,7 +1,7 @@
 import {
     Scene, Material, StandardMaterial, BaseTexture, RenderTargetTexture,
     ActionManager,
-    StandardRenderingPipeline, SSAORenderingPipeline, SSAO2RenderingPipeline,
+    StandardRenderingPipeline, SSAORenderingPipeline, SSAO2RenderingPipeline, DefaultRenderingPipeline,
     IAnimatable,
     ParticleSystem,
     GlowLayer,
@@ -17,6 +17,7 @@ export default class SceneManager {
     // Public members
     public static ActionManagers: IStringDictionary<ActionManager> = { };
     public static StandardRenderingPipeline: StandardRenderingPipeline = null;
+    public static DefaultRenderingPipeline: DefaultRenderingPipeline = null;
     public static SSAORenderingPipeline: SSAORenderingPipeline = null;
     public static SSAO2RenderingPipeline: SSAO2RenderingPipeline = null;
 
@@ -39,6 +40,7 @@ export default class SceneManager {
         this.HighLightLayer = null;
 
         this.StandardRenderingPipeline = null;
+        this.DefaultRenderingPipeline = null;
         this.SSAO2RenderingPipeline = null;
         this.SSAORenderingPipeline = null;
 

diff --git a/src/extensions/post-process/post-processes.ts b/src/extensions/post-process/post-processes.ts
@@ -1,4 +1,4 @@
-import { Scene, PostProcessRenderPipeline, StandardRenderingPipeline, SSAO2RenderingPipeline } from 'babylonjs';
+import { Scene, PostProcessRenderPipeline, StandardRenderingPipeline, SSAO2RenderingPipeline, DefaultRenderingPipeline } from 'babylonjs';
 
 import Extension from '../extension';
 import Extensions from '../extensions';
@@ -7,12 +7,14 @@ import { IStringDictionary } from '../typings/typings';
 
 export interface PostProcessMetadata {
     standard?: any;
+    default?: any;
     ssao2?: any;
 }
 
 export default class PostProcessesExtension extends Extension<PostProcessMetadata> {
     // Public members
     public standard: StandardRenderingPipeline = null;
+    public default: DefaultRenderingPipeline = null;
     public ssao2: SSAO2RenderingPipeline = null;
 
     /**
@@ -46,6 +48,9 @@ export default class PostProcessesExtension extends Extension<PostProcessMetadat
         if (pipelines.SSAO2)
             data.ssao2 = pipelines.SSAO2['serialize']();
 
+        if (pipelines.Default)
+            data.default = pipelines.Default['serialize']();
+
         return data;
     }
 
@@ -59,15 +64,20 @@ export default class PostProcessesExtension extends Extension<PostProcessMetadat
 
     // Applies the post-processes on the scene
     private _applyPostProcesses (data: PostProcessMetadata, rootUrl?: string): void {
+        if (data.ssao2) {
+            // TODO: PR to babylonjs to serialize / parse SSAO2 rendering pipleine
+            this.ssao2 = SSAO2RenderingPipeline['Parse'](data.ssao2, this.scene, rootUrl);
+            this.ssao2._attachCameras(this.scene.cameras, true);
+        }
+
         if (data.standard) {
             this.standard = StandardRenderingPipeline.Parse(data.standard, this.scene, rootUrl);
             this.standard._attachCameras(this.scene.cameras, true);
         }
 
-        if (data.ssao2) {
-            // TODO: PR to babylonjs to serialize / parse SSAO2 rendering pipleine
-            this.ssao2 = SSAO2RenderingPipeline['Parse'](data.ssao2, this.scene, rootUrl);
-            this.ssao2._attachCameras(this.scene.cameras, true);
+        if (data.default) {
+            this.default = DefaultRenderingPipeline.Parse(data.default, this.scene, rootUrl);
+            this.default._attachCameras(this.scene.cameras, true);
         }
     }
 }