Merge pull request #2146 from julien-moreau/master

Motion blur post-process adding motionStrength property

Playground/debug.html

@@ -34,6 +34,7 @@
     <script src="https://preview.babylonjs.com/materialsLibrary/babylon.gridMaterial.min.js"></script>
     <script src="https://preview.babylonjs.com/materialsLibrary/babylon.shadowOnlyMaterial.min.js"></script>
     <script src="https://preview.babylonjs.com/materialsLibrary/babylon.customMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.cellMaterial.min.js"></script>
 
     <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.brickProceduralTexture.min.js"></script>
     <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.cloudProceduralTexture.min.js"></script>

Playground/frame.html

@@ -23,6 +23,7 @@
     <script src="https://preview.babylonjs.com/materialsLibrary/babylon.gridMaterial.min.js"></script>
     <script src="https://preview.babylonjs.com/materialsLibrary/babylon.shadowOnlyMaterial.min.js"></script>
     <script src="https://preview.babylonjs.com/materialsLibrary/babylon.customMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.cellMaterial.min.js"></script>
 
     <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.brickProceduralTexture.min.js"></script>
     <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.cloudProceduralTexture.min.js"></script>

Playground/index.html

@@ -34,6 +34,7 @@
     <script src="https://preview.babylonjs.com/materialsLibrary/babylon.gridMaterial.min.js"></script>
     <script src="https://preview.babylonjs.com/materialsLibrary/babylon.shadowOnlyMaterial.min.js"></script>
     <script src="https://preview.babylonjs.com/materialsLibrary/babylon.customMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.cellMaterial.min.js"></script>
 
     <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.brickProceduralTexture.min.js"></script>
     <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.cloudProceduralTexture.min.js"></script>

materialsLibrary/index.html

@@ -49,6 +49,7 @@
 	<script src="test/addsky.js"></script>
 	<script src="test/addgrid.js"></script>
     <script src="test/addpbr.js"></script>
+	<script src="test/addCell.js"></script>
 	
 	<script>
 	BABYLONDEVTOOLS.Loader.load(function() {
@@ -202,13 +203,15 @@
                 var grid = prepareGrid();
 
 				var shadowOnly = new BABYLON.ShadowOnlyMaterial();
+
+				var cell = prepareCell();
 				
 				// Default to std
 				var currentMaterial = std;
 				sphere.material = std;				
 				sphere.receiveShadows = true;
 
-				gui.add(options, 'material', ['standard', 'simple', 'water', 'fire', 'lava', 'normal', 'terrain', 'pbr', 'fur', 'triPlanar', 'gradient', 'sky', 'grid', 'shadowOnly']).onFinishChange(function () {
+				gui.add(options, 'material', ['standard', 'simple', 'water', 'fire', 'lava', 'normal', 'terrain', 'pbr', 'fur', 'triPlanar', 'gradient', 'sky', 'grid', 'shadowOnly', 'cell']).onFinishChange(function () {
 					water.enableRenderTargets(false);
 					skybox.material = skyboxMaterial;
 					currentMesh.isVisible = true;
@@ -258,6 +261,9 @@
                         case "grid":
                             currentMaterial = grid;
                             break;
+						case "cell":
+							currentMaterial = cell;
+							break;
 						default:
 							currentMaterial = std;
 							break;

materialsLibrary/test/addCell.js

@@ -0,0 +1,22 @@
+window.prepareCell = function() {
+    var cell = new BABYLON.CellMaterial("cell", scene);
+	cell.diffuseTexture = new BABYLON.Texture("../assets/textures//amiga.jpg", scene);
+	cell.diffuseTexture.uScale = cell.diffuseTexture.vScale = 3;
+	cell.computeHighLevel = true;
+
+    registerRangeUI("cell", "Hight Level Cell", false, true, function(value) {
+        cell.computeHighLevel = value;
+    }, function() {
+        return cell.computeHighLevel;
+    });
+
+    registerColorPicker("cell", "Diffuse Color", "#FFFFFF", function(value) {		
+		cell.diffuseColor.r = value.r/255;
+		cell.diffuseColor.g = value.g/255;
+		cell.diffuseColor.b = value.b/255;
+	}, function() {
+		return cell.diffuseColor;
+	});
+
+    return cell;
+};

src/PostProcess/babylon.standardRenderingPipeline.ts

@@ -76,6 +76,9 @@ module BABYLON {
         @serialize()
         public depthOfFieldBlurWidth: number = 2.0;
 
+        @serialize()
+        public motionStrength: number = 1.0;
+
         // IAnimatable
         public animations: Animation[] = [];
 
@@ -216,9 +219,12 @@ module BABYLON {
             // Initialize
             this._scene = scene;
 
-            // Create pass post-processe
+            // Misc
+            var floatTextureType = scene.getEngine().getCaps().textureFloatRender ? Engine.TEXTURETYPE_FLOAT : Engine.TEXTURETYPE_HALF_FLOAT;
+
+            // Create pass post-process
             if (!originalPostProcess) {
-                this.originalPostProcess = new PostProcess("HDRPass", "standard", [], [], ratio, null, Texture.BILINEAR_SAMPLINGMODE, scene.getEngine(), false, "#define PASS_POST_PROCESS", Engine.TEXTURETYPE_FLOAT);
+                this.originalPostProcess = new PostProcess("HDRPass", "standard", [], [], ratio, null, Texture.BILINEAR_SAMPLINGMODE, scene.getEngine(), false, "#define PASS_POST_PROCESS", floatTextureType);
             }
             else {
                 this.originalPostProcess = originalPostProcess;
@@ -253,7 +259,7 @@ module BABYLON {
             this.addEffect(new PostProcessRenderEffect(scene.getEngine(), "HDRPostLensFlareDepthOfFieldSource", () => { return this.lensFlareFinalPostProcess; }, true));
 
             // Create luminance
-            this._createLuminancePostProcesses(scene);
+            this._createLuminancePostProcesses(scene, floatTextureType);
 
             // Create HDR
             this._createHdrPostProcess(scene, ratio);
@@ -409,10 +415,10 @@ module BABYLON {
         }
 
         // Create luminance
-        private _createLuminancePostProcesses(scene: Scene): void {
+        private _createLuminancePostProcesses(scene: Scene, textureType: number): void {
             // Create luminance
             var size = Math.pow(3, StandardRenderingPipeline.LuminanceSteps);
-            this.luminancePostProcess = new PostProcess("HDRLuminance", "standard", ["lumOffsets"], [], { width: size, height: size }, null, Texture.BILINEAR_SAMPLINGMODE, scene.getEngine(), false, "#define LUMINANCE", Engine.TEXTURETYPE_FLOAT);
+            this.luminancePostProcess = new PostProcess("HDRLuminance", "standard", ["lumOffsets"], [], { width: size, height: size }, null, Texture.BILINEAR_SAMPLINGMODE, scene.getEngine(), false, "#define LUMINANCE", textureType);
 
             var offsets: number[] = [];
             this.luminancePostProcess.onApply = (effect: Effect) => {
@@ -443,7 +449,7 @@ module BABYLON {
                     defines += "#define FINAL_DOWN_SAMPLER";
                 }
 
-                var postProcess = new PostProcess("HDRLuminanceDownSample" + i, "standard", ["dsOffsets", "halfDestPixelSize"], [], { width: size, height: size }, null, Texture.BILINEAR_SAMPLINGMODE, scene.getEngine(), false, defines, Engine.TEXTURETYPE_FLOAT);
+                var postProcess = new PostProcess("HDRLuminanceDownSample" + i, "standard", ["dsOffsets", "halfDestPixelSize"], [], { width: size, height: size }, null, Texture.BILINEAR_SAMPLINGMODE, scene.getEngine(), false, defines, textureType);
                 this.luminanceDownSamplePostProcesses.push(postProcess);
             }
 
@@ -613,7 +619,7 @@ module BABYLON {
         // Create motion blur post-process
         private _createMotionBlurPostProcess(scene: Scene, ratio: number): void {
             this.motionBlurPostProcess = new PostProcess("HDRMotionBlur", "standard",
-                ["inverseViewProjection", "prevViewProjection", "screenSize", "motionScale"],
+                ["inverseViewProjection", "prevViewProjection", "screenSize", "motionScale", "motionStrength"],
                 ["depthSampler"],
                 ratio, null, Texture.BILINEAR_SAMPLINGMODE, scene.getEngine(), false, "#define MOTION_BLUR\n#define MAX_MOTION_SAMPLES " + this.motionBlurSamples.toFixed(1), Engine.TEXTURETYPE_UNSIGNED_INT);
 
@@ -638,6 +644,7 @@ module BABYLON {
 
                 motionScale = scene.getEngine().getFps() / 60.0;
                 effect.setFloat("motionScale", motionScale);
+                effect.setFloat("motionStrength", this.motionStrength);
 
                 effect.setTexture("depthSampler", this._depthRenderer.getDepthMap());
             };

src/Shaders/standard.fragment.fx

@@ -365,6 +365,7 @@ uniform mat4 prevViewProjection;
 uniform vec2 screenSize;
 
 uniform float motionScale;
+uniform float motionStrength;
 
 uniform sampler2D depthSampler;
 
@@ -380,7 +381,7 @@ void main(void)
 	ppos.xyz /= ppos.w;
 	ppos.xy = ppos.xy * 0.5 + 0.5;
 
-	vec2 velocity = (ppos.xy - vUV) * motionScale;
+	vec2 velocity = (ppos.xy - vUV) * motionScale * motionStrength;
 	float speed = length(velocity / texelSize);
 	int nSamples = int(clamp(speed, 1.0, MAX_MOTION_SAMPLES));