working example with uniformBuffer class

index.html

@@ -58,10 +58,11 @@
 						var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);
 
 						// Move the sphere upward 1/2 its height
-						sphere.position.y = 1 + i / 250;
+						sphere.position.y = 1+i / 500;
 						sphere.material = new BABYLON.StandardMaterial("test");
 						sphere.material.diffuseColor = new BABYLON.Color3(Math.random(), Math.random(), Math.random());
-						// sphere.material.diffuseTexture = new BABYLON.Texture("test.jpeg", scene);
+						window.sphere = sphere;
+						sphere.material.diffuseTexture = new BABYLON.Texture("test.jpeg", scene);
 						// sphere.material.freeze();
 						var t = 0;/*
 						scene.registerAfterRender(function() {
@@ -72,7 +73,6 @@
 					}
 
 					// Let's try our built-in 'ground' shape.  Params: name, width, depth, subdivisions, scene
-					var ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene);
 
 					// Leave this function
 					return scene;

src/Materials/babylon.effect.ts

@@ -82,11 +82,6 @@
         private static _uniqueIdSeed = 0;
         private _engine: Engine;
         private _uniformsNames: string[];
-        private _uniformBuffer: WebGLBuffer;
-        private _uniformBufferCache: Float32Array;
-        private _uniformBufferNames: string[] = [];
-        private _uniformBufferLocations: number[] = [];
-        private _uniformCurrentPointer: number = 0;
         private _uniformOrder: string[];
         private _samplers: string[];
         private _isReady = false;
@@ -192,17 +187,6 @@
             return this._uniforms[this._uniformsNames.indexOf(uniformName)];
         }
 
-        public getUniformWithinUbo(uniformName: string): number {
-            var index;
-            var location;
-            if ((index = this._uniformBufferNames.indexOf(uniformName)) !== -1) {
-                location = this._uniformBufferLocations[index]
-                return location;
-            } else {
-                return -1;
-            }
-        }
-
         public getSamplers(): string[] {
             return this._samplers;
         }
@@ -421,9 +405,6 @@
 
             return source;
         }
-        public buildUniformlayout(): void {
-            this._uniformBuffer = this._engine.createUniformBuffer(this._uniformCurrentPointer);
-        }
 
         private _prepareEffect(vertexSourceCode: string, fragmentSourceCode: string, attributesNames: string[], defines: string, fallbacks?: EffectFallbacks): void {
             try {
@@ -598,28 +579,8 @@
             return changed;
         }
 
-        public addUniform(name: string, size: number): void {
-            var uniformNames, uniformLocations, index;
-            uniformNames = this._uniformBufferNames;
-            uniformLocations = this._uniformBufferLocations;                
-            index = this._uniformCurrentPointer;
-
-            uniformNames.push(name);
-            uniformLocations.push(index);
-
-            // std140 layout forces uniform to be multiple of 16 bytes (4 floats)
-            var correctedSize = Math.ceil(size / 4) * 4;
-
-            this._uniformCurrentPointer += correctedSize;
-            this._uniformBufferCache = new Float32Array(this._uniformCurrentPointer); 
-        };
-
-        public updateUniformBuffer(): void {
-            this._engine.updateUniformBuffer(this._uniformBuffer, this._uniformBufferCache);
-        }
-
-        public bindUniformBuffer(): void {
-            this._engine.bindUniformBufferBase(this._uniformBuffer, 0);
+        public bindUniformBuffer(buffer: WebGLBuffer): void {
+            this._engine.bindUniformBufferBase(buffer, 0);
         }
 
         public bindUniformBlock(): void {
@@ -719,12 +680,7 @@
 
         public setMatrix(uniformName: string, matrix: Matrix): Effect {
             if (this._cacheMatrix(uniformName, matrix)) {
-                var location = this.getUniformWithinUbo(uniformName);
-                if (location !== -1) {
-                    this._uniformBufferCache.set(matrix.toArray(), location);
-                } else {
-                    this._engine.setMatrix(this.getUniform(uniformName), matrix);
-                }
+                this._engine.setMatrix(this.getUniform(uniformName), matrix);
             }
             return this;
         }
@@ -769,72 +725,42 @@
 
         public setVector2(uniformName: string, vector2: Vector2): Effect {
             if (this._cacheFloat2(uniformName, vector2.x, vector2.y)) {
-                var location = this.getUniformWithinUbo(uniformName);
-                if (location !== -1) {
-                    vector2.toArray(this._uniformBufferCache, location);
-                } else {
                     this._engine.setFloat2(this.getUniform(uniformName), vector2.x, vector2.y);
-                }
             }
             return this;
         }
 
         public setFloat2(uniformName: string, x: number, y: number): Effect {
             if (this._cacheFloat2(uniformName, x, y)) {
-                var location = this.getUniformWithinUbo(uniformName);
-                if (location !== -1) {
-                    this._uniformBufferCache.set([x, y], location);
-                } else {
-                    this._engine.setFloat2(this.getUniform(uniformName), x, y);
-                }
+                this._engine.setFloat2(this.getUniform(uniformName), x, y);
             }
             return this;
         }
 
         public setVector3(uniformName: string, vector3: Vector3): Effect {
             if (this._cacheFloat3(uniformName, vector3.x, vector3.y, vector3.z)) {
-                var location = this.getUniformWithinUbo(uniformName);
-                if (location !== -1) {
-                    vector3.toArray(this._uniformBufferCache, location);
-                } else {
-                    this._engine.setFloat3(this.getUniform(uniformName), vector3.x, vector3.y, vector3.z);
-                }
+                this._engine.setFloat3(this.getUniform(uniformName), vector3.x, vector3.y, vector3.z);
             }
             return this;
         }
 
         public setFloat3(uniformName: string, x: number, y: number, z: number): Effect {
             if (this._cacheFloat3(uniformName, x, y, z)) {
-                var location = this.getUniformWithinUbo(uniformName);
-                if (location !== -1) {
-                    this._uniformBufferCache.set([x, y, z], location);
-                } else {
-                    this._engine.setFloat3(this.getUniform(uniformName), x, y, z);
-                }
+                this._engine.setFloat3(this.getUniform(uniformName), x, y, z);
             }
             return this;
         }
 
         public setVector4(uniformName: string, vector4: Vector4): Effect {
             if (this._cacheFloat4(uniformName, vector4.x, vector4.y, vector4.z, vector4.w)) {
-                var location = this.getUniformWithinUbo(uniformName);
-                if (location !== -1) {
-                    vector4.toArray(this._uniformBufferCache, location);
-                } else {
-                    this._engine.setFloat4(this.getUniform(uniformName), vector4.x, vector4.y, vector4.z, vector4.w);
-                }
+                this._engine.setFloat4(this.getUniform(uniformName), vector4.x, vector4.y, vector4.z, vector4.w);
             }
             return this;
         }
 
         public setFloat4(uniformName: string, x: number, y: number, z: number, w: number): Effect {
             if (this._cacheFloat4(uniformName, x, y, z, w)) {
-                var location = this.getUniformWithinUbo(uniformName);
-                if (location !== -1) {
-                    this._uniformBufferCache.set([x, y, z, w], location);
-                } else {
-                    this._engine.setFloat4(this.getUniform(uniformName), x, y, z, w);
-                }
+                this._engine.setFloat4(this.getUniform(uniformName), x, y, z, w);
             }
             return this;
         }
@@ -842,25 +768,14 @@
         public setColor3(uniformName: string, color3: Color3): Effect {
 
             if (this._cacheFloat3(uniformName, color3.r, color3.g, color3.b)) {
-                var location = this.getUniformWithinUbo(uniformName);
-                if (location !== -1) {
-                    color3.toArray(this._uniformBufferCache, location);
-                } else {
-                    this._engine.setColor3(this.getUniform(uniformName), color3);
-                }
+                this._engine.setColor3(this.getUniform(uniformName), color3);
             }
             return this;
         }
 
         public setColor4(uniformName: string, color3: Color3, alpha: number): Effect {
             if (this._cacheFloat4(uniformName, color3.r, color3.g, color3.b, alpha)) {
-                var location = this.getUniformWithinUbo(uniformName);
-                if (location !== -1) {
-                    color3.toArray(this._uniformBufferCache, location);
-                    this._uniformBufferCache[location + 3] = alpha;
-                } else {
-                    this._engine.setColor4(this.getUniform(uniformName), color3, alpha);
-                }
+                this._engine.setColor4(this.getUniform(uniformName), color3, alpha);
             }
             return this;
         }

src/Materials/babylon.material.ts

@@ -208,6 +208,7 @@
         private _fillMode = Material.TriangleFillMode;
         private _cachedDepthWriteState: boolean;
 
+        protected _uniformBuffer: UniformBuffer;
 
         constructor(name: string, scene: Scene, doNotAdd?: boolean) {
             this.name = name;
@@ -221,6 +222,8 @@
                 this.sideOrientation = Material.CounterClockWiseSideOrientation;
             }
 
+            this._uniformBuffer = new UniformBuffer(this._scene.getEngine());
+
             if (!doNotAdd) {
                 this._scene.materials.push(this);
             }

src/Materials/babylon.standardMaterial.ts

@@ -704,17 +704,11 @@ module BABYLON {
                 }
                 MaterialHelper.PrepareUniformsAndSamplersList(uniforms, samplers, this._defines, this.maxSimultaneousLights);
 
-                var onCompiled = function(effect) {
-                    if (this.onCompiled) {
-                        this.onCompiled(effect);
-                    }
-                    
-                    this.buildUniformLayout();
-                }.bind(this);
-
                 this._effect = scene.getEngine().createEffect(shaderName,
                     attribs, uniforms, samplers,
-                    join, fallbacks, onCompiled, this.onError, { maxSimultaneousLights: this.maxSimultaneousLights - 1 });
+                    join, fallbacks, this.onCompiled, this.onError, { maxSimultaneousLights: this.maxSimultaneousLights - 1 });
+
+                this.buildUniformLayout();
 
             }
             if (!this._effect.isReady()) {
@@ -737,23 +731,19 @@ module BABYLON {
 
         public buildUniformLayout(): void {
             // Order is important !
-            this._effect.addUniform("vDiffuseColor", 4);
+            this._uniformBuffer.addUniform("vDiffuseColor", 4);
 
-            if (this._defines.DIFFUSE) {
-                this._effect.addUniform("vDiffuseInfos", 2);
-                this._effect.addUniform("diffuseMatrix", 16);
-            }
+            this._uniformBuffer.addUniform("vDiffuseInfos", 2);
+            this._uniformBuffer.addUniform("diffuseMatrix", 16);
 
-            this._effect.addUniform("vAmbientColor", 3);
+            this._uniformBuffer.addUniform("vAmbientColor", 3);
 
 
-            if (this._defines.SPECULARTERM) {
-                this._effect.addUniform("vSpecularColor", 3);
-            }
+            this._uniformBuffer.addUniform("vSpecularColor", 3);
 
-            this._effect.addUniform("vEmissiveColor", 3);
+            this._uniformBuffer.addUniform("vEmissiveColor", 3);
 
-            this._effect.buildUniformlayout();
+            this._uniformBuffer.create();
         }
 
         public unbind(): void {
@@ -782,7 +772,7 @@ module BABYLON {
             MaterialHelper.BindBonesParameters(mesh, this._effect);
 
             if (scene.getCachedMaterial() !== this) {
-                this._effect.bindUniformBuffer();
+                this._effect.bindUniformBuffer(this._uniformBuffer.getBuffer());
 
                 this._effect.setMatrix("viewProjection", scene.getTransformMatrix());
 
@@ -818,8 +808,10 @@ module BABYLON {
                     if (this.diffuseTexture && StandardMaterial.DiffuseTextureEnabled) {
                         this._effect.setTexture("diffuseSampler", this.diffuseTexture);
 
-                        this._effect.setFloat2("vDiffuseInfos", this.diffuseTexture.coordinatesIndex, this.diffuseTexture.level);
-                        this._effect.setMatrix("diffuseMatrix", this.diffuseTexture.getTextureMatrix());
+                        // this._effect.setFloat2("vDiffuseInfos", this.diffuseTexture.coordinatesIndex, this.diffuseTexture.level);
+                        this._uniformBuffer.updateFloat2("vDiffuseInfos", this.diffuseTexture.coordinatesIndex, this.diffuseTexture.level);
+                        // this._effect.setMatrix("diffuseMatrix", this.diffuseTexture.getTextureMatrix());
+                        this._uniformBuffer.updateMatrix("diffuseMatrix", this.diffuseTexture.getTextureMatrix());
                     }
 
                     if (this.ambientTexture && StandardMaterial.AmbientTextureEnabled) {
@@ -907,18 +899,22 @@ module BABYLON {
                 scene.ambientColor.multiplyToRef(this.ambientColor, this._globalAmbientColor);
 
                 this._effect.setVector3("vEyePosition", scene._mirroredCameraPosition ? scene._mirroredCameraPosition : scene.activeCamera.position);
-                this._effect.setColor3("vAmbientColor", this._globalAmbientColor);
+                // this._effect.setColor3("vAmbientColor", this._globalAmbientColor);
+                this._uniformBuffer.updateColor3("vAmbientColor", this._globalAmbientColor);
 
                 if (this._defines.SPECULARTERM) {
-                    this._effect.setColor4("vSpecularColor", this.specularColor, this.specularPower);
+                    // this._effect.setColor4("vSpecularColor", this.specularColor, this.specularPower);
+                    this._uniformBuffer.updateColor4("vSpecularColor", this.specularColor, this.specularPower);
                 }
-                this._effect.setColor3("vEmissiveColor", this.emissiveColor);
+                // this._effect.setColor3("vEmissiveColor", this.emissiveColor);
+                this._uniformBuffer.updateColor3("vEmissiveColor", this.emissiveColor);
 
             }
 
             if (scene.getCachedMaterial() !== this || !this.isFrozen) {
                 // Diffuse
-                this._effect.setColor4("vDiffuseColor", this.diffuseColor, this.alpha * mesh.visibility);
+                // this._effect.setColor4("vDiffuseColor", this.diffuseColor, this.alpha * mesh.visibility);
+                this._uniformBuffer.updateColor4("vDiffuseColor", this.diffuseColor, this.alpha * mesh.visibility);
 
                 // Lights
                 if (scene.lightsEnabled && !this.disableLighting) {
@@ -942,7 +938,7 @@ module BABYLON {
                 }
             }
 
-            this._effect.updateUniformBuffer();
+            this._uniformBuffer.update();
             super.bind(world, mesh);
         }
 

src/Materials/babylon.uniformBuffer.ts

@@ -39,10 +39,15 @@ module BABYLON {
 
         // Methods
         private _adaptSizeToLayout(size: number): number {
+            // In std140 layout, uniform size must be multiple of 4 floats
             return Math.ceil(size / 4) * 4;
         }
 
         public addUniform(name: string, size: number | number[]) {
+            if (this._uniformNames.indexOf(name) !== -1) {
+                // Already existing uniform
+                return;
+            }
             // This function must be called in the order of the shader layout !
 
             // size can be the size of the uniform, or data directly
@@ -51,7 +56,6 @@ module BABYLON {
                 data = size;
                 size = this._adaptSizeToLayout(data.length);
             } else {
-                // In std140 layout, uniform size must be multiple of 4 floats
                 size = this._adaptSizeToLayout(<number>size);
                 data = [];
 
@@ -61,10 +65,6 @@ module BABYLON {
                 }
             }
 
-            if (this._uniformNames.indexOf(name) !== -1) {
-                // Already existing uniform
-                return;
-            }
 
             this._uniformNames.push(name);
             this._uniformSizes.push(size);
@@ -79,20 +79,20 @@ module BABYLON {
         }
 
         public addColor3(name: string, color: Color3) {
-            var temp = []
+            var temp = [];
             color.toArray(temp);
             this.addUniform(name, temp);
         }
 
         public addColor4(name: string, color: Color3, alpha: number) {
-            var temp = []
+            var temp = [];
             color.toArray(temp);
             temp.push(alpha);
             this.addUniform(name, temp);
         }
 
         public addVector3(name: string, vector: Vector3) {
-            var temp = []
+            var temp = [];
             vector.toArray(temp);
             this.addUniform(name, temp);
         }
@@ -109,9 +109,10 @@ module BABYLON {
             } else {
                 this._buffer = this._engine.createUniformBuffer(data);
             }
-
+            console.log("ubo creation");
+            
             this._needSync = false;
-        }
+        } 
 
         public update(): void {
             if (!this._buffer) {
@@ -119,12 +120,18 @@ module BABYLON {
                 return;
             }
 
+            if (!this._needSync) {
+                return;
+            }
+
+            console.log("Effective Update");
+
             this._engine.updateUniformBuffer(this._buffer, this._data);
 
             this._needSync = false;
         }
 
-        public updateUniform(uniformName: string, data: number[]) {
+        public updateUniform(uniformName: string, data: number[] | Float32Array) {
             var index = this._uniformNames.indexOf(uniformName);
 
             if (index === -1) {
@@ -146,7 +153,7 @@ module BABYLON {
             var changed = false;
             for (var i = 0; i < data.length; i++) {
                 if (this._data[location + i] !== data[i]) {
-                    changed = true;
+                   changed = true;
                     this._data[location + i] = data[i];
                 }
             }
@@ -154,6 +161,33 @@ module BABYLON {
             this._needSync = this._needSync || changed;
         }
 
+        public updateFloat2(name: string, x: number, y: number) {
+            var temp = [x, y];
+            this.updateUniform(name, temp);
+        }
+        public updateMatrix(name: string, mat: Matrix) {
+            this.updateUniform(name, mat.toArray());
+        }
+
+        public updateVector3(name: string, vector: Vector3) {
+            var temp = [];
+            vector.toArray(temp);
+            this.updateUniform(name, temp);
+        }
+
+        public updateColor3(name: string, color: Color3) {
+            var temp = [];
+            color.toArray(temp);
+            this.updateUniform(name, temp);
+        }
+
+        public updateColor4(name: string, color: Color3, alpha: number) {
+            var temp = [];
+            color.toArray(temp);
+            temp.push(alpha);
+            this.updateUniform(name, temp);
+        }
+
         public updateUniformDirectly(uniformName: string, data: number[]) {
             this.updateUniform(uniformName, data);
 

src/Shaders/default.fragment.fx

@@ -8,16 +8,12 @@ uniform Material
 {
 	vec4 vDiffuseColor;
 
-  	#ifdef DIFFUSE
   	vec2 vDiffuseInfos;
   	mat4 diffuseMatrix;
-  	#endif
 
   	vec3 vAmbientColor;
 
-  	#ifdef SPECULARTERM
   	vec4 vSpecularColor;
-  	#endif
 
   	vec3 vEmissiveColor;
 

src/Shaders/default.vertex.fx

@@ -7,18 +7,10 @@ struct Camera {
 uniform Material
 {
 	vec4 vDiffuseColor;
-
-  	#ifdef DIFFUSE
   	vec2 vDiffuseInfos;
   	mat4 diffuseMatrix;
-  	#endif
-
   	vec3 vAmbientColor;
-
-  	#ifdef SPECULARTERM
-  	vec4 vSpecularColor;
-  	#endif
-  	
+  	vec4 vSpecularColor;  	
   	vec3 vEmissiveColor;
 
 } uMaterial;