Adding fresnel support for Refraction channel

dist/preview release/what's new.md

@@ -1,6 +1,6 @@
 - 2.4.0:
   - **Major updates**
-    - New refraction channel for Standardd material. [See demo here](NEED FEATURE DEMO) ([deltakosh](https://github.com/deltakosh))
+    - New refraction channel for Standardd material (including fresnel support). [See demo here](NEED FEATURE DEMO) ([deltakosh](https://github.com/deltakosh))
   - **Updates**
     - New OnPickTrigger support for spritesManager ([deltakosh](https://github.com/deltakosh))
   - **Bug fixes**

src/Materials/babylon.standardMaterial.js

@@ -95,6 +95,7 @@ var BABYLON;
             this.DIFFUSEFRESNEL = false;
             this.OPACITYFRESNEL = false;
             this.REFLECTIONFRESNEL = false;
+            this.REFRACTIONFRESNEL = false;
             this.EMISSIVEFRESNEL = false;
             this.FRESNEL = false;
             this.NORMAL = false;
@@ -505,6 +506,7 @@ var BABYLON;
                 if (this.diffuseFresnelParameters && this.diffuseFresnelParameters.isEnabled ||
                     this.opacityFresnelParameters && this.opacityFresnelParameters.isEnabled ||
                     this.emissiveFresnelParameters && this.emissiveFresnelParameters.isEnabled ||
+                    this.refractionFresnelParameters && this.refractionFresnelParameters.isEnabled ||
                     this.reflectionFresnelParameters && this.reflectionFresnelParameters.isEnabled) {
                     if (this.diffuseFresnelParameters && this.diffuseFresnelParameters.isEnabled) {
                         this._defines.DIFFUSEFRESNEL = true;
@@ -515,6 +517,9 @@ var BABYLON;
                     if (this.reflectionFresnelParameters && this.reflectionFresnelParameters.isEnabled) {
                         this._defines.REFLECTIONFRESNEL = true;
                     }
+                    if (this.refractionFresnelParameters && this.refractionFresnelParameters.isEnabled) {
+                        this._defines.REFRACTIONFRESNEL = true;
+                    }
                     if (this.emissiveFresnelParameters && this.emissiveFresnelParameters.isEnabled) {
                         this._defines.EMISSIVEFRESNEL = true;
                     }
@@ -662,7 +667,7 @@ var BABYLON;
                     "mBones",
                     "vClipPlane", "diffuseMatrix", "ambientMatrix", "opacityMatrix", "reflectionMatrix", "emissiveMatrix", "specularMatrix", "bumpMatrix", "lightmapMatrix",
                     "shadowsInfo0", "shadowsInfo1", "shadowsInfo2", "shadowsInfo3", "depthValues",
-                    "diffuseLeftColor", "diffuseRightColor", "opacityParts", "reflectionLeftColor", "reflectionRightColor", "emissiveLeftColor", "emissiveRightColor",
+                    "diffuseLeftColor", "diffuseRightColor", "opacityParts", "reflectionLeftColor", "reflectionRightColor", "emissiveLeftColor", "emissiveRightColor", "refractionLeftColor", "refractionRightColor",
                     "logarithmicDepthConstant"
                 ], ["diffuseSampler", "ambientSampler", "opacitySampler", "reflectionCubeSampler", "reflection2DSampler", "emissiveSampler", "specularSampler", "bumpSampler", "lightmapSampler", "refractionSampler",
                     "shadowSampler0", "shadowSampler1", "shadowSampler2", "shadowSampler3"
@@ -713,6 +718,10 @@ var BABYLON;
                         this._effect.setColor4("reflectionLeftColor", this.reflectionFresnelParameters.leftColor, this.reflectionFresnelParameters.power);
                         this._effect.setColor4("reflectionRightColor", this.reflectionFresnelParameters.rightColor, this.reflectionFresnelParameters.bias);
                     }
+                    if (this.refractionFresnelParameters && this.refractionFresnelParameters.isEnabled) {
+                        this._effect.setColor4("refractionLeftColor", this.refractionFresnelParameters.leftColor, this.refractionFresnelParameters.power);
+                        this._effect.setColor4("refractionRightColor", this.refractionFresnelParameters.rightColor, this.refractionFresnelParameters.bias);
+                    }
                     if (this.emissiveFresnelParameters && this.emissiveFresnelParameters.isEnabled) {
                         this._effect.setColor4("emissiveLeftColor", this.emissiveFresnelParameters.leftColor, this.emissiveFresnelParameters.power);
                         this._effect.setColor4("emissiveRightColor", this.emissiveFresnelParameters.rightColor, this.emissiveFresnelParameters.bias);
@@ -925,6 +934,9 @@ var BABYLON;
             if (this.reflectionFresnelParameters && this.reflectionFresnelParameters.clone) {
                 newStandardMaterial.reflectionFresnelParameters = this.reflectionFresnelParameters.clone();
             }
+            if (this.refractionFresnelParameters && this.refractionFresnelParameters.clone) {
+                newStandardMaterial.refractionFresnelParameters = this.refractionFresnelParameters.clone();
+            }
             if (this.opacityFresnelParameters && this.opacityFresnelParameters.clone) {
                 newStandardMaterial.opacityFresnelParameters = this.opacityFresnelParameters.clone();
             }
@@ -960,6 +972,9 @@ var BABYLON;
             if (this.reflectionFresnelParameters) {
                 serializationObject.reflectionFresnelParameters = this.reflectionFresnelParameters.serialize();
             }
+            if (this.refractionFresnelParameters) {
+                serializationObject.refractionFresnelParameters = this.refractionFresnelParameters.serialize();
+            }
             if (this.emissiveTexture) {
                 serializationObject.emissiveTexture = this.emissiveTexture.serialize();
             }
@@ -1019,6 +1034,9 @@ var BABYLON;
             if (source.reflectionFresnelParameters) {
                 material.reflectionFresnelParameters = FresnelParameters.Parse(source.reflectionFresnelParameters);
             }
+            if (source.refractionFresnelParameters) {
+                material.refractionFresnelParameters = FresnelParameters.Parse(source.refractionFresnelParameters);
+            }
             if (source.emissiveTexture) {
                 material.emissiveTexture = BABYLON.Texture.Parse(source.emissiveTexture, scene, rootUrl);
             }

src/Materials/babylon.standardMaterial.ts

@@ -93,6 +93,7 @@
         public DIFFUSEFRESNEL = false;
         public OPACITYFRESNEL = false;
         public REFLECTIONFRESNEL = false;
+        public REFRACTIONFRESNEL = false;
         public EMISSIVEFRESNEL = false;
         public FRESNEL = false;
         public NORMAL = false;
@@ -161,6 +162,7 @@
         public diffuseFresnelParameters: FresnelParameters;
         public opacityFresnelParameters: FresnelParameters;
         public reflectionFresnelParameters: FresnelParameters;
+        public refractionFresnelParameters: FresnelParameters;
         public emissiveFresnelParameters: FresnelParameters;
 
         public useGlossinessFromSpecularMapAlpha = false;
@@ -582,6 +584,7 @@
                 if (this.diffuseFresnelParameters && this.diffuseFresnelParameters.isEnabled ||
                     this.opacityFresnelParameters && this.opacityFresnelParameters.isEnabled ||
                     this.emissiveFresnelParameters && this.emissiveFresnelParameters.isEnabled ||
+                    this.refractionFresnelParameters && this.refractionFresnelParameters.isEnabled ||
                     this.reflectionFresnelParameters && this.reflectionFresnelParameters.isEnabled) {
 
                     if (this.diffuseFresnelParameters && this.diffuseFresnelParameters.isEnabled) {
@@ -596,6 +599,10 @@
                         this._defines.REFLECTIONFRESNEL = true;
                     }
 
+                    if (this.refractionFresnelParameters && this.refractionFresnelParameters.isEnabled) {
+                        this._defines.REFRACTIONFRESNEL = true;
+                    }
+
                     if (this.emissiveFresnelParameters && this.emissiveFresnelParameters.isEnabled) {
                         this._defines.EMISSIVEFRESNEL = true;
                     }
@@ -779,7 +786,7 @@
                         "mBones",
                         "vClipPlane", "diffuseMatrix", "ambientMatrix", "opacityMatrix", "reflectionMatrix", "emissiveMatrix", "specularMatrix", "bumpMatrix", "lightmapMatrix",
                         "shadowsInfo0", "shadowsInfo1", "shadowsInfo2", "shadowsInfo3", "depthValues",
-                        "diffuseLeftColor", "diffuseRightColor", "opacityParts", "reflectionLeftColor", "reflectionRightColor", "emissiveLeftColor", "emissiveRightColor",
+                        "diffuseLeftColor", "diffuseRightColor", "opacityParts", "reflectionLeftColor", "reflectionRightColor", "emissiveLeftColor", "emissiveRightColor", "refractionLeftColor", "refractionRightColor",
                         "logarithmicDepthConstant"
                     ],
                     ["diffuseSampler", "ambientSampler", "opacitySampler", "reflectionCubeSampler", "reflection2DSampler", "emissiveSampler", "specularSampler", "bumpSampler", "lightmapSampler", "refractionSampler",
@@ -848,6 +855,11 @@
                         this._effect.setColor4("reflectionRightColor", this.reflectionFresnelParameters.rightColor, this.reflectionFresnelParameters.bias);
                     }
 
+                    if (this.refractionFresnelParameters && this.refractionFresnelParameters.isEnabled) {
+                        this._effect.setColor4("refractionLeftColor", this.refractionFresnelParameters.leftColor, this.refractionFresnelParameters.power);
+                        this._effect.setColor4("refractionRightColor", this.refractionFresnelParameters.rightColor, this.refractionFresnelParameters.bias);
+                    }
+
                     if (this.emissiveFresnelParameters && this.emissiveFresnelParameters.isEnabled) {
                         this._effect.setColor4("emissiveLeftColor", this.emissiveFresnelParameters.leftColor, this.emissiveFresnelParameters.power);
                         this._effect.setColor4("emissiveRightColor", this.emissiveFresnelParameters.rightColor, this.emissiveFresnelParameters.bias);
@@ -1114,6 +1126,9 @@
             if (this.reflectionFresnelParameters && this.reflectionFresnelParameters.clone) {
                 newStandardMaterial.reflectionFresnelParameters = this.reflectionFresnelParameters.clone();
             }
+            if (this.refractionFresnelParameters && this.refractionFresnelParameters.clone) {
+                newStandardMaterial.refractionFresnelParameters = this.refractionFresnelParameters.clone();
+            }
             if (this.opacityFresnelParameters && this.opacityFresnelParameters.clone) {
                 newStandardMaterial.opacityFresnelParameters = this.opacityFresnelParameters.clone();
             }
@@ -1160,6 +1175,10 @@
                 serializationObject.reflectionFresnelParameters = this.reflectionFresnelParameters.serialize();
             }
 
+            if (this.refractionFresnelParameters) {
+                serializationObject.refractionFresnelParameters = this.refractionFresnelParameters.serialize();
+            }
+
             if (this.emissiveTexture) {
                 serializationObject.emissiveTexture = this.emissiveTexture.serialize();
             }
@@ -1252,6 +1271,10 @@
                 material.reflectionFresnelParameters = FresnelParameters.Parse(source.reflectionFresnelParameters);
             }
 
+            if (source.refractionFresnelParameters) {
+                material.refractionFresnelParameters = FresnelParameters.Parse(source.refractionFresnelParameters);
+            }
+
             if (source.emissiveTexture) {
                 material.emissiveTexture = Texture.Parse(source.emissiveTexture, scene, rootUrl);
             }

src/Particles/babylon.solidParticleSystem.js

@@ -115,6 +115,86 @@ var BABYLON;
             }
             return mesh;
         };
+        /**
+        * Digests the mesh and generates as many solid particles in the system as wanted.
+        * These particles will have the same geometry than the mesh parts and will be positioned at the same localisation than the mesh original places.
+        * Thus the particles generated from digest() have their property "positiion" yet set.
+        * @param mesh the mesh to be digested
+        * @param facetNb the number of mesh facets per particle (optional, default 1), this parameter is overriden by the parameter "number" if any
+        * @param number the wanted number of particles : each particle is built with mesh_total_facets / number facets (optional)
+        */
+        SolidParticleSystem.prototype.digest = function (mesh, options) {
+            var size = (options && options.facetNb) || 1;
+            var number = (options && options.number);
+            var meshPos = mesh.getVerticesData(BABYLON.VertexBuffer.PositionKind);
+            var meshInd = mesh.getIndices();
+            var meshUV = mesh.getVerticesData(BABYLON.VertexBuffer.UVKind);
+            var meshCol = mesh.getVerticesData(BABYLON.VertexBuffer.ColorKind);
+            var f = 0; // facet counter
+            var totalFacets = meshInd.length / 3; // a facet is a triangle, so 3 indices
+            // compute size from number
+            if (number) {
+                number = (number > totalFacets) ? totalFacets : number;
+                size = Math.round(totalFacets / number);
+            }
+            else {
+                size = (size > totalFacets) ? totalFacets : size;
+            }
+            var facetPos = []; // submesh positions
+            var facetInd = []; // submesh indices
+            var facetUV = []; // submesh UV
+            var facetCol = []; // submesh colors
+            var barycenter = BABYLON.Tmp.Vector3[0];
+            while (f < totalFacets) {
+                if (f > totalFacets - size) {
+                    size = totalFacets - f;
+                }
+                // reset temp arrays
+                facetPos.length = 0;
+                facetInd.length = 0;
+                facetUV.length = 0;
+                facetCol.length = 0;
+                // iterate over "size" facets
+                var fi = 0;
+                for (var j = f * 3; j < (f + size) * 3; j++) {
+                    facetInd.push(fi);
+                    var i = meshInd[j];
+                    facetPos.push(meshPos[i * 3], meshPos[i * 3 + 1], meshPos[i * 3 + 2]);
+                    if (meshUV) {
+                        facetUV.push(meshUV[i * 2], meshUV[i * 2 + 1]);
+                    }
+                    if (meshCol) {
+                        facetCol.push(meshCol[i * 4], meshCol[i * 4 + 1], meshCol[i * 4 + 2], meshCol[i * 4 + 3]);
+                    }
+                    fi++;
+                }
+                // create a model shape for each single particle
+                var idx = this.nbParticles;
+                var shape = this._posToShape(facetPos);
+                var shapeUV = this._uvsToShapeUV(facetUV);
+                // compute the barycenter of the shape
+                var v;
+                for (v = 0; v < shape.length; v++) {
+                    barycenter.addInPlace(shape[v]);
+                }
+                barycenter.scaleInPlace(1 / shape.length);
+                // shift the shape from its barycenter to the origin
+                for (v = 0; v < shape.length; v++) {
+                    shape[v].subtractInPlace(barycenter);
+                }
+                var modelShape = new BABYLON.ModelShape(this._shapeCounter, shape, shapeUV, null, null);
+                // add the particle in the SPS
+                this._meshBuilder(this._index, shape, this._positions, facetInd, this._indices, facetUV, this._uvs, facetCol, this._colors, idx, 0, null);
+                this._addParticle(idx, this._positions.length, modelShape, this._shapeCounter, 0);
+                // initialize the particle position
+                this.particles[this.nbParticles].position.addInPlace(barycenter);
+                this._index += shape.length;
+                idx++;
+                this.nbParticles++;
+                this._shapeCounter++;
+                f += size;
+            }
+        };
         //reset copy
         SolidParticleSystem.prototype._resetCopy = function () {
             this._copy.position.x = 0;

src/Particles/babylon.solidParticleSystem.ts

@@ -143,7 +143,7 @@ module BABYLON {
         * @param facetNb the number of mesh facets per particle (optional, default 1), this parameter is overriden by the parameter "number" if any
         * @param number the wanted number of particles : each particle is built with mesh_total_facets / number facets (optional)
         */
-        public digest(mesh: Mesh, options?: {facetNb?: number; number?: number}): void {
+        public digest(mesh: Mesh, options?: { facetNb?: number; number?: number }): void {
             var size: number = (options && options.facetNb) || 1;
             var number: number = (options && options.number);
             var meshPos = mesh.getVerticesData(VertexBuffer.PositionKind);
@@ -835,3 +835,4 @@ module BABYLON {
         }
     }
 }
+

src/Shaders/default.fragment.fx

@@ -157,6 +157,11 @@ uniform sampler2D lightmapSampler;
 #ifdef REFRACTION
 uniform vec2 vRefractionInfos;
 uniform samplerCube refractionSampler;
+
+#ifdef REFRACTIONFRESNEL
+uniform vec4 refractionLeftColor;
+uniform vec4 refractionRightColor;
+#endif
 #endif
 
 #if defined(SPECULAR) && defined(SPECULARTERM)
@@ -916,6 +921,12 @@ void main(void) {
 #endif
 #endif
 
+#ifdef REFRACTIONFRESNEL
+	float refractionFresnelTerm = computeFresnelTerm(viewDirectionW, normalW, refractionRightColor.a, refractionLeftColor.a);
+
+	refractionColor *= refractionLeftColor.rgb * (1.0 - refractionFresnelTerm) + refractionFresnelTerm * refractionRightColor.rgb;
+#endif
+
 #ifdef OPACITY
 	vec4 opacityMap = texture2D(opacitySampler, vOpacityUV);