optimisation + adding transformMatrix as uniform buffer

index.html

@@ -59,7 +59,7 @@
 					for (var i = 0; i < squareSize; i++) {
 						for (var j = 0; j < squareSize; j++) {
 							for (var k = 0; k < 5; k++) {
-								var sphere = BABYLON.Mesh.CreateSphere("sphere", 16, 0.5, scene);
+								var sphere = BABYLON.Mesh.CreateSphere("sphere", 4, 0.5, scene);
 
 								// Move the sphere upward 1/2 its height
 								sphere.position.z = - squareSize / 4 + j / 2;
@@ -67,8 +67,8 @@
 								sphere.position.y = - squareSize / 4 + k / 2;
 								if (j === 0) {
 									sphere.material = new BABYLON.StandardMaterial("test");
-									sphere.material.diffuseTexture = new BABYLON.Texture("test.jpeg", scene);
-									sphere.material.bumpTexture = new BABYLON.Texture("test.jpeg", scene);
+									// sphere.material.diffuseTexture = new BABYLON.Texture("test.jpeg", scene);
+									// sphere.material.bumpTexture = new BABYLON.Texture("test.jpeg", scene);
 									sphere.material.diffuseColor = new BABYLON.Color3(Math.random(), Math.random(), Math.random());
 									sphere.material.specularColor = new BABYLON.Color3(Math.random() < 0.8 ? 0 : 1, Math.random() < 0.8 ? 0 : 1, Math.random() < 0.8 ? 0 : 1);
 									sphere.material.emissiveColor = new BABYLON.Color3(0, 0, 0);

src/Lights/babylon.hemisphericLight.ts

@@ -23,7 +23,7 @@
             this._uniformBuffer.addUniform("vLightData", 4);
             this._uniformBuffer.addUniform("vLightDiffuse", 4);
             this._uniformBuffer.addUniform("vLightSpecular", 3);
-            this._uniformBuffer.addUniform("vLightDirection", 4);
+            this._uniformBuffer.addUniform("vLightGround", 3);
             this._uniformBuffer.addUniform("shadowsInfo", 3);
         }
 

src/Lights/babylon.spotLight.ts

@@ -47,7 +47,7 @@
             this._uniformBuffer.addUniform("vLightData", 4);
             this._uniformBuffer.addUniform("vLightDiffuse", 4);
             this._uniformBuffer.addUniform("vLightSpecular", 3);
-            this._uniformBuffer.addUniform("vLightGround", 3);
+            this._uniformBuffer.addUniform("vLightDirection", 3);
             this._uniformBuffer.addUniform("shadowsInfo", 3);
         }
         

src/Materials/babylon.effect.ts

@@ -101,7 +101,7 @@
             this.name = baseName;
             this.defines = defines;
             // TODO
-            this._uniformBuffersNames = ["Material", "Light0"];
+            this._uniformBuffersNames = ["Material", "Light0", "Scene"];
 
             this._uniformsNames = uniformsNames.concat(samplers);
             this._samplers = samplers;

src/Materials/babylon.pushMaterial.ts

@@ -24,7 +24,10 @@
             return this.isReadyForSubMesh(mesh, mesh.subMeshes[0], useInstances);
         }
 
-        
+        public bindTransformMatrix(effect: Effect, transformMatrixBuffer: UniformBuffer): void {
+            effect.bindUniformBuffer(transformMatrixBuffer.getBuffer(), "Scene");
+        }
+
         public bindOnlyWorldMatrix(world: Matrix): void {
             this._activeEffect.setMatrix("world", world);
         }

src/Materials/babylon.standardMaterial.ts

@@ -715,12 +715,21 @@ module BABYLON {
                 }
                 MaterialHelper.PrepareUniformsAndSamplersList(uniforms, samplers, defines, this._maxSimultaneousLights);
 
+                var onCompiled = function(effect) {
+                    if (this.onCompiled) {
+                        this.onCompiled(effect);
+                    }
+
+                    this.bindTransformMatrix(effect, scene.getTransformMatrixBuffer());
+                }.bind(this);
+
                 subMesh.setEffect(scene.getEngine().createEffect(shaderName,
                     attribs, uniforms, samplers,
-                    join, fallbacks, this.onCompiled, this.onError, { maxSimultaneousLights: this._maxSimultaneousLights - 1 }), defines);
+                    join, fallbacks, onCompiled, this.onError, { maxSimultaneousLights: this._maxSimultaneousLights - 1 }), defines);
 
                 this.buildUniformLayout();
 
+
             }
 
             if (!subMesh.effect.isReady()) {
@@ -800,9 +809,9 @@ module BABYLON {
             // Bones
             MaterialHelper.BindBonesParameters(mesh, effect);
             if (this._mustRebind(scene, effect)) {
-                effect.setMatrix("viewProjection", scene.getTransformMatrix());
-
                 if (!this.isFrozen || !this._uniformBuffer.isSync) {
+                    effect.setMatrix("viewProjection", scene.getTransformMatrix());
+
                     if (StandardMaterial.FresnelEnabled && defines.FRESNEL) {
                         // Fresnel
                         if (this.diffuseFresnelParameters && this.diffuseFresnelParameters.isEnabled) {

src/Materials/babylon.uniformBuffer.ts

@@ -3,6 +3,7 @@ module BABYLON {
         private _engine: Engine;
         private _buffer: WebGLBuffer;
         private _data: number[];
+        private _bufferData: Float32Array;
         private _dynamic: boolean;
         private _uniformName: string;
         private _uniformLocations: { [key:string]:number; };
@@ -35,8 +36,8 @@ module BABYLON {
             return this._dynamic;
         }
 
-        public getData(): number[] {
-            return this._data;
+        public getData(): Float32Array {
+            return this._bufferData;
         }
 
         public getBuffer(): WebGLBuffer {
@@ -141,12 +142,12 @@ module BABYLON {
                 return; // nothing to do
             }
 
-            var data = this._data;
+            this._bufferData = new Float32Array(this._data);
 
             if (this._dynamic) {
-                this._buffer = this._engine.createDynamicUniformBuffer(data);
+                this._buffer = this._engine.createDynamicUniformBuffer(this._bufferData);
             } else {
-                this._buffer = this._engine.createUniformBuffer(data);
+                this._buffer = this._engine.createUniformBuffer(this._bufferData);
             }
 
             this._needSync = false;
@@ -158,11 +159,11 @@ module BABYLON {
                 return;
             }
 
-            if (!this._needSync) {
+            if (!this._dynamic && !this._needSync) {
                 return;
             }
 
-            this._engine.updateUniformBuffer(this._buffer, this._data);
+            this._engine.updateUniformBuffer(this._buffer, this._bufferData);
 
             this._needSync = false;
         }
@@ -171,22 +172,36 @@ module BABYLON {
 
             var location = this._uniformLocations[uniformName];
             if (location === undefined) {
-                return;
+                if (this._buffer) {
+                    // Cannot add an uniform if the buffer is already created
+                    Tools.Error("Uniform buffer overflow.");
+                    return;
+                }
+                this.addUniform(uniformName, size);
+                location = this._uniformLocations[uniformName];
             }
 
             if (!this._buffer) {
                 this.create();
             }
 
-            var changed = false;
-            for (var i = 0; i < size; i++) {
-                if (this._data[location + i] !== data[i]) {
-                   changed = true;
-                    this._data[location + i] = data[i];
+            if (!this._dynamic) {
+                // Cache for static uniform buffers
+                var changed = false;
+                for (var i = 0; i < size; i++) {
+                    if (this._bufferData[location + i] !== data[i]) {
+                       changed = true;
+                        this._bufferData[location + i] = data[i];
+                    }
                 }
-            }
 
-            this._needSync = this._needSync || changed;
+                this._needSync = this._needSync || changed;
+            } else {
+                // No cache for dynamic
+                for (var i = 0; i < size; i++) {
+                    this._bufferData[location + i] = data[i];
+                }
+            }
         }
 
         public updateFloat(name: string, x: number) {

src/Shaders/default.vertex.fx

@@ -36,6 +36,11 @@ uniform Material
 	float pointSize;
 } uMaterial;
 
+uniform mat4 viewProjection;
+uniform Scene {
+	mat4 viewProjection;
+} uScene;
+
 // Attributes
 attribute vec3 position;
 #ifdef NORMAL
@@ -60,7 +65,6 @@ attribute vec4 color;
 #include<instancesDeclaration>
 
 uniform mat4 view;
-uniform mat4 viewProjection;
 
 #ifdef DIFFUSE
 varying vec2 vDiffuseUV;
@@ -127,7 +131,7 @@ void main(void) {
 #include<instancesVertex>
 #include<bonesVertex>
 
-	gl_Position = viewProjection * finalWorld * vec4(position, 1.0);
+	gl_Position = uScene.viewProjection * finalWorld * vec4(position, 1.0);
 
 	vec4 worldPos = finalWorld * vec4(position, 1.0);
 	vPositionW = vec3(worldPos);

src/babylon.scene.ts

@@ -669,6 +669,8 @@
         public _activeAnimatables = new Array<Animatable>();
 
         private _transformMatrix = Matrix.Zero();
+        private _transformMatrixBuffer: UniformBuffer;
+
         private _pickWithRayInverseMatrix: Matrix;
 
         private _edgesRenderers = new SmartArray<EdgesRenderer>(16);
@@ -737,6 +739,9 @@
 
             //collision coordinator initialization. For now legacy per default.
             this.workerCollisions = false;//(!!Worker && (!!BABYLON.CollisionWorker || BABYLON.WorkerIncluded));
+
+            // Transform Buffer
+            this._transformMatrixBuffer = new UniformBuffer(this._engine, null, true);
         }
 
         // Properties
@@ -1666,6 +1671,12 @@
             } else {
                 Frustum.GetPlanesToRef(this._transformMatrix, this._frustumPlanes);
             }
+            this._transformMatrixBuffer.updateMatrix("viewProjection", this._transformMatrix);
+            this._transformMatrixBuffer.update();
+        }
+
+        public getTransformMatrixBuffer(): UniformBuffer {
+            return this._transformMatrixBuffer;
         }
 
         // Methods