Nightly

dist/preview release/viewer/babylon.viewer.d.ts

@@ -1203,6 +1203,13 @@ declare module BabylonViewer {
     }
 }
 declare module BabylonViewer {
+    export class ConfigurationContainer {
+        configuration: ViewerConfiguration;
+        viewerId: string;
+        mainColor: BABYLON.Color3;
+        reflectionColor: BABYLON.Color3;
+        scene?: BABYLON.Scene;
+    }
 }
 declare module BabylonViewer {
     /**

dist/preview release/viewer/babylon.viewer.module.d.ts

@@ -1283,7 +1283,15 @@ declare module 'babylonjs-viewer/templating/templateManager' {
 }
 
 declare module 'babylonjs-viewer/configuration/configurationContainer' {
-    
+    import { ViewerConfiguration } from 'babylonjs-viewer/configuration/configuration';
+    import { Color3, Scene } from 'babylonjs';
+    export class ConfigurationContainer {
+        configuration: ViewerConfiguration;
+        viewerId: string;
+        mainColor: Color3;
+        reflectionColor: Color3;
+        scene?: Scene;
+    }
 }
 
 declare module 'babylonjs-viewer/configuration/loader' {

src/Particles/babylon.gpuParticleSystem.ts

@@ -697,6 +697,9 @@
                 offset += 4;
             }
             
+            if (this.billboardMode === ParticleSystem.BILLBOARDMODE_STRETCHED) {
+                renderVertexBuffers["direction"] = source.createVertexBuffer("direction", offset, 3, this._attributesStrideSize, true);
+            }
             offset += 3; // Direction
 
             if (!this._isBillboardBased) {
@@ -960,10 +963,13 @@
                 defines += "\n#define BILLBOARD";
 
                 switch (this.billboardMode) {
-                    case AbstractMesh.BILLBOARDMODE_Y:
+                    case ParticleSystem.BILLBOARDMODE_Y:
                         defines += "\n#define BILLBOARDY";
                         break;
-                    case AbstractMesh.BILLBOARDMODE_ALL:
+                    case ParticleSystem.BILLBOARDMODE_STRETCHED:
+                        defines += "\n#define BILLBOARDSTRETCHED";
+                        break;                          
+                    case ParticleSystem.BILLBOARDMODE_ALL:
                     default:
                         break;
                 }                
@@ -995,7 +1001,7 @@
             }
 
             this._renderEffect = new Effect("gpuRenderParticles", 
-                                            ["position", "age", "life", "size", "color", "offset", "uv", "initialDirection", "angle", "cellIndex"], 
+                                            ["position", "age", "life", "size", "color", "offset", "uv", "direction", "initialDirection", "angle", "cellIndex"], 
                                             uniforms, 
                                             samplers, this._scene.getEngine(), defines);
         }        

src/Particles/babylon.particleSystem.ts

@@ -6,6 +6,20 @@
      * @example https://doc.babylonjs.com/babylon101/particles
      */
     export class ParticleSystem extends BaseParticleSystem implements IDisposable, IAnimatable, IParticleSystem {
+
+        /**
+         * Billboard mode will only apply to Y axis
+         */
+        public static readonly BILLBOARDMODE_Y = 2;
+        /**
+         * Billboard mode will apply to all axes
+         */
+        public static readonly BILLBOARDMODE_ALL = 7;
+        /**
+         * Special billboard mode where the particle will be biilboard to the camera but rotated to align with direction
+         */
+        public static readonly BILLBOARDMODE_STRETCHED = 8;
+
         /**
          * This function can be defined to provide custom update for active particles.
          * This function will be called instead of regular update (age, position, color, etc.).
@@ -865,7 +879,7 @@
                 this._vertexBufferSize += 1;
             }
 
-            if (!this._isBillboardBased) {
+            if (!this._isBillboardBased || this.billboardMode === ParticleSystem.BILLBOARDMODE_STRETCHED) {
                 this._vertexBufferSize += 3;
             }
 
@@ -900,7 +914,7 @@
                 dataOffset += 1;
             }
 
-            if (!this._isBillboardBased) {
+            if (!this._isBillboardBased || this.billboardMode === ParticleSystem.BILLBOARDMODE_STRETCHED) {
                 var directionBuffer = this._vertexBuffer.createVertexBuffer("direction", dataOffset, 3, this._vertexBufferSize, this._useInstancing);
                 this._vertexBuffers["direction"] = directionBuffer;
                 dataOffset += 3;
@@ -1086,6 +1100,10 @@
                     this._vertexData[offset++] = particle.direction.y;
                     this._vertexData[offset++] = particle.direction.z;
                 }
+            } else if (this.billboardMode === ParticleSystem.BILLBOARDMODE_STRETCHED) {
+                this._vertexData[offset++] = particle.direction.x;
+                this._vertexData[offset++] = particle.direction.y;
+                this._vertexData[offset++] = particle.direction.z;
             }
 
             if (this._useRampGradients) {
@@ -1464,10 +1482,13 @@
                 defines.push("#define BILLBOARD");
 
                 switch (this.billboardMode) {
-                    case AbstractMesh.BILLBOARDMODE_Y:
+                    case ParticleSystem.BILLBOARDMODE_Y:
                         defines.push("#define BILLBOARDY");
                         break;
-                    case AbstractMesh.BILLBOARDMODE_ALL:
+                    case ParticleSystem.BILLBOARDMODE_STRETCHED:
+                        defines.push("#define BILLBOARDSTRETCHED");
+                        break;                        
+                    case ParticleSystem.BILLBOARDMODE_ALL:
                     default:
                         break;
                 }
@@ -1483,7 +1504,7 @@
             if (this._cachedDefines !== join) {
                 this._cachedDefines = join;
 
-                var attributesNamesOrOptions = ParticleSystem._GetAttributeNamesOrOptions(this._isAnimationSheetEnabled, this._isBillboardBased, this._useRampGradients);
+                var attributesNamesOrOptions = ParticleSystem._GetAttributeNamesOrOptions(this._isAnimationSheetEnabled, this._isBillboardBased && this.billboardMode !== ParticleSystem.BILLBOARDMODE_STRETCHED, this._useRampGradients);
                 var effectCreationOption = ParticleSystem._GetEffectCreationOptions(this._isAnimationSheetEnabled);
 
                 var samplers = ["diffuseSampler", "rampSampler"];

src/Shaders/gpuRenderParticles.vertex.fx

@@ -13,6 +13,9 @@ in vec3 size;
 #ifndef BILLBOARD
 in vec3 initialDirection;
 #endif
+#ifdef BILLBOARDSTRETCHED
+in vec3 direction;
+#endif
 in float angle;
 #ifdef ANIMATESHEET
 in float cellIndex;
@@ -44,6 +47,7 @@ uniform vec3 sheetInfos;
 	uniform vec3 eyePosition;	
 #endif
 	
+#ifdef BILLBOARDY		
 vec3 rotate(vec3 yaxis, vec3 rotatedCorner) {
 	vec3 xaxis = normalize(cross(vec3(0., 1.0, 0.), yaxis));
 	vec3 zaxis = normalize(cross(yaxis, xaxis));
@@ -58,6 +62,24 @@ vec3 rotate(vec3 yaxis, vec3 rotatedCorner) {
 
 	return position + alignedCorner;
 }
+#endif
+
+#ifdef BILLBOARDSTRETCHED
+vec3 rotateAlign(vec3 toCamera, vec3 rotatedCorner) {
+	vec3 normalizedToCamera = normalize(toCamera);
+	vec3 normalizedCrossDirToCamera = normalize(cross(normalize(direction), normalizedToCamera));
+	vec3 crossProduct = normalize(cross(normalizedToCamera, normalizedCrossDirToCamera));
+
+	vec3 row0 = vec3(normalizedCrossDirToCamera.x, normalizedCrossDirToCamera.y, normalizedCrossDirToCamera.z);
+	vec3 row1 = vec3(crossProduct.x, crossProduct.y, crossProduct.z);
+	vec3 row2 = vec3(normalizedToCamera.x, normalizedToCamera.y, normalizedToCamera.z);
+
+	mat3 rotMatrix =  mat3(row0, row1, row2);
+
+	vec3 alignedCorner = rotMatrix * rotatedCorner;
+	return position + alignedCorner; 
+}
+#endif
 
 void main() {
 
@@ -94,6 +116,15 @@ void main() {
 		vec3 worldPos = rotate(normalize(yaxis), rotatedCorner.xyz);
 
 		vec4 viewPosition = (view * vec4(worldPos, 1.0)); 
+	#elif defined(BILLBOARDSTRETCHED)
+		rotatedCorner.x = cornerPos.x * cos(angle) - cornerPos.y * sin(angle);
+		rotatedCorner.y = cornerPos.x * sin(angle) + cornerPos.y * cos(angle);
+		rotatedCorner.z = 0.;
+
+		vec3 toCamera = position - eyePosition;	
+		vec3 worldPos = rotateAlign(toCamera, rotatedCorner.xyz);
+		
+		vec4 viewPosition = (view * vec4(worldPos, 1.0)); 	
 	#else
 		// Rotate
 		rotatedCorner.x = cornerPos.x * cos(angle) - cornerPos.y * sin(angle);

src/Shaders/particles.vertex.fx

@@ -9,6 +9,9 @@ attribute float cellIndex;
 #ifndef BILLBOARD	
 attribute vec3 direction;
 #endif
+#ifdef BILLBOARDSTRETCHED
+attribute vec3 direction; 
+#endif
 #ifdef RAMPGRADIENT
 attribute vec4 remapData;
 #endif
@@ -40,6 +43,7 @@ uniform mat4 invView;
 	uniform vec3 eyePosition;	
 #endif
 
+#ifdef BILLBOARDY	
 vec3 rotate(vec3 yaxis, vec3 rotatedCorner) {
 	vec3 xaxis = normalize(cross(vec3(0., 1.0, 0.), yaxis));
 	vec3 zaxis = normalize(cross(yaxis, xaxis));
@@ -53,6 +57,24 @@ vec3 rotate(vec3 yaxis, vec3 rotatedCorner) {
 	vec3 alignedCorner = rotMatrix * rotatedCorner;
 	return position + alignedCorner; 
 }
+#endif
+
+#ifdef BILLBOARDSTRETCHED
+vec3 rotateAlign(vec3 toCamera, vec3 rotatedCorner) {
+	vec3 normalizedToCamera = normalize(toCamera);
+	vec3 normalizedCrossDirToCamera = normalize(cross(normalize(direction), normalizedToCamera));
+	vec3 crossProduct = normalize(cross(normalizedToCamera, normalizedCrossDirToCamera));
+
+	vec3 row0 = vec3(normalizedCrossDirToCamera.x, normalizedCrossDirToCamera.y, normalizedCrossDirToCamera.z);
+	vec3 row1 = vec3(crossProduct.x, crossProduct.y, crossProduct.z);
+	vec3 row2 = vec3(normalizedToCamera.x, normalizedToCamera.y, normalizedToCamera.z);
+
+	mat3 rotMatrix =  mat3(row0, row1, row2);
+
+	vec3 alignedCorner = rotMatrix * rotatedCorner;
+	return position + alignedCorner; 
+}
+#endif
 
 void main(void) {	
 	vec2 cornerPos;
@@ -74,6 +96,15 @@ void main(void) {
 	vec3 worldPos = rotate(normalize(yaxis), rotatedCorner);
 	
 	vec3 viewPos = (view * vec4(worldPos, 1.0)).xyz; 
+#elif defined(BILLBOARDSTRETCHED)
+	rotatedCorner.x = cornerPos.x * cos(angle) - cornerPos.y * sin(angle);
+	rotatedCorner.y = cornerPos.x * sin(angle) + cornerPos.y * cos(angle);
+	rotatedCorner.z = 0.;
+
+	vec3 toCamera = position - eyePosition;	
+	vec3 worldPos = rotateAlign(toCamera, rotatedCorner);
+	
+	vec3 viewPos = (view * vec4(worldPos, 1.0)).xyz; 
 #else
 	rotatedCorner.x = cornerPos.x * cos(angle) - cornerPos.y * sin(angle);
 	rotatedCorner.y = cornerPos.x * sin(angle) + cornerPos.y * cos(angle);