working example with 2 ubos

src/Materials/babylon.effect.ts

@@ -82,7 +82,8 @@
         private static _uniqueIdSeed = 0;
         private _engine: Engine;
         private _uniformsNames: string[];
-        private _uniformBuffer: WebGLBuffer;
+        private _uniformBufferPerPass: WebGLBuffer;
+        private _uniformBufferPerScene: WebGLBuffer;
         private _samplers: string[];
         private _isReady = false;
         private _compilationError = "";
@@ -414,7 +415,9 @@
                 this.bindUniformBlock();
 
                 this._uniforms = engine.getUniforms(this._program, this._uniformsNames);
-                this._uniformBuffer = engine.createUniformBuffer(this.formatUniforms());
+                this._uniformBufferPerPass = engine.createUniformBuffer(this.formatUniforms(8));
+                this._uniformBufferPerScene = engine.createUniformBuffer(this.formatUniforms(4));
+
                 this._attributes = engine.getAttributes(this._program, attributesNames);
 
                 var index: number;
@@ -580,18 +583,25 @@
         }
 
 
-        public formatUniforms(): Float32Array {
-            return new Float32Array(4);
+        public formatUniforms(length: number): Float32Array {
+            return new Float32Array(length);
         };
 
-        public setUniformBuffer(materialFormatted: Float32Array): Effect {
-            this._engine.setUniformBuffer(this._uniformBuffer, materialFormatted);
+        public setUniformBufferScene(cameraPositionFormatted: Float32Array): Effect {
+            this._engine.setUniformBuffer(this._uniformBufferPerScene, cameraPositionFormatted);
+
+            return this;
+        }
+
+        public setUniformBufferPass(materialFormatted: Float32Array): Effect {
+            this._engine.setUniformBuffer(this._uniformBufferPerPass, materialFormatted);
 
             return this;
         };
 
-        public bindUniformBuffer(): void {
-            this._engine.bindUniformBufferBase(this._uniformBuffer, 0);
+        public bindUniformBuffers(): void {
+            this._engine.bindUniformBufferBase(this._uniformBufferPerPass, 0);
+            this._engine.bindUniformBufferBase(this._uniformBufferPerScene, 1);
         }
 
         public bindUniformBlock(): void {

src/Materials/babylon.standardMaterial.ts

@@ -867,6 +867,15 @@
                     this._effect.setColor4("vSpecularColor", this.specularColor, this.specularPower);
                 }
                 this._effect.setColor3("vEmissiveColor", this.emissiveColor);
+
+                var cameraPos = [];
+                if (scene._mirroredCameraPosition) {
+                    scene._mirroredCameraPosition.toArray(cameraPos);
+                } else {
+                    scene.activeCamera.position.toArray(cameraPos);
+                }
+
+                this._effect.setUniformBufferScene(new Float32Array(cameraPos.concat(0.0)));
             }
 
             if (scene.getCachedMaterial() !== this || !this.isFrozen) {
@@ -874,9 +883,10 @@
                 this._effect.setColor4("vDiffuseColor", this.diffuseColor, this.alpha * mesh.visibility);
 
                 // ADDED
-                this._effect.setUniformBuffer(new Float32Array([this.diffuseColor.r, this.diffuseColor.g, this.diffuseColor
-                    .b].concat(this.alpha * mesh.visibility)));
-                this._effect.bindUniformBuffer();
+                this._effect.setUniformBufferPass(new Float32Array([
+                    this.diffuseColor.r, this.diffuseColor.g, this.diffuseColor.b, this.alpha * mesh.visibility,
+                    this._globalAmbientColor.r, this._globalAmbientColor.g, this._globalAmbientColor.b, 0.0]));
+                this._effect.bindUniformBuffers();
 
                 // Lights
                 if (scene.lightsEnabled && !this.disableLighting) {

src/Shaders/default.fragment.fx

@@ -1,12 +1,23 @@
-struct Material
+layout(std140, column_major) uniform;
+
+struct Camera {
+	vec3 vEyePosition;
+};
+
+struct Material
 {
-  	vec4 diffuse;
+  	vec4 vDiffuseColor;
+  	vec3 vAmbientColor;
 };
 
 uniform PerPass {
 	Material material;
 }  u_PerPass;
 
+uniform PerScene {
+	Camera camera;
+}  u_PerScene;
+
 
 #ifdef BUMP
 #extension GL_OES_standard_derivatives : enable
@@ -19,9 +30,6 @@ uniform PerPass {
 // Constants
 #define RECIPROCAL_PI2 0.15915494
 
-uniform vec3 vEyePosition;
-uniform vec3 vAmbientColor;
-uniform vec4 vDiffuseColor;
 #ifdef SPECULARTERM
 uniform vec4 vSpecularColor;
 #endif
@@ -170,14 +178,14 @@ uniform vec4 reflectionRightColor;
 void main(void) {
 #include<clipPlaneFragment>
 
-	vec3 viewDirectionW = normalize(vEyePosition - vPositionW);
+	vec3 viewDirectionW = normalize(u_PerScene.camera.vEyePosition - vPositionW);
 
 	// Base color
 	vec4 baseColor = vec4(1., 1., 1., 1.);
-	vec3 diffuseColor = u_PerPass.material.diffuse.rgb;
+	vec3 diffuseColor = u_PerPass.material.vDiffuseColor.rgb;
 
 	// Alpha
-	float alpha = u_PerPass.material.diffuse.a;
+	float alpha = u_PerPass.material.vDiffuseColor.a;
 
 	// Bump
 #ifdef NORMAL
@@ -367,12 +375,12 @@ void main(void) {
 
 	// Composition
 #ifdef EMISSIVEASILLUMINATION
-	vec3 finalDiffuse = clamp(diffuseBase * diffuseColor + vAmbientColor, 0.0, 1.0) * baseColor.rgb;
+	vec3 finalDiffuse = clamp(diffuseBase * diffuseColor + u_PerPass.material.vAmbientColor, 0.0, 1.0) * baseColor.rgb;
 #else
 #ifdef LINKEMISSIVEWITHDIFFUSE
-	vec3 finalDiffuse = clamp((diffuseBase + emissiveColor) * diffuseColor + vAmbientColor, 0.0, 1.0) * baseColor.rgb;
+	vec3 finalDiffuse = clamp((diffuseBase + emissiveColor) * diffuseColor + u_PerPass.material.vAmbientColor, 0.0, 1.0) * baseColor.rgb;
 #else
-	vec3 finalDiffuse = clamp(diffuseBase * diffuseColor + emissiveColor + vAmbientColor, 0.0, 1.0) * baseColor.rgb;
+	vec3 finalDiffuse = clamp(diffuseBase * diffuseColor + emissiveColor + u_PerPass.material.vAmbientColor, 0.0, 1.0) * baseColor.rgb;
 #endif
 #endif
 

src/babylon.engine.ts

@@ -1812,7 +1812,10 @@
 
         public bindUniformBlock(shaderProgram: WebGLProgram): void {
             var uniformPerPassLocation = this._gl.getUniformBlockIndex(shaderProgram, 'PerPass');
+            var uniformPerSceneLocation = this._gl.getUniformBlockIndex(shaderProgram, 'PerScene');
+            
             this._gl.uniformBlockBinding(shaderProgram, uniformPerPassLocation, 0);
+            this._gl.uniformBlockBinding(shaderProgram, uniformPerSceneLocation, 1);
 
         };