first working draft of uniform buffer objects

index.html

@@ -58,6 +58,8 @@
 
 					// Move the sphere upward 1/2 its height
 					sphere.position.y = 1;
+					sphere.material = new BABYLON.StandardMaterial("test");
+					sphere.material.diffuseColor = new BABYLON.Color3(1, 0, 0);
 
 					// Let's try our built-in 'ground' shape.  Params: name, width, depth, subdivisions, scene
 					var ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene);

src/Materials/babylon.effect.ts

@@ -82,6 +82,7 @@
         private static _uniqueIdSeed = 0;
         private _engine: Engine;
         private _uniformsNames: string[];
+        private _uniformBuffer: WebGLBuffer;
         private _samplers: string[];
         private _isReady = false;
         private _compilationError = "";
@@ -410,8 +411,10 @@
                 var engine = this._engine;
 
                 this._program = engine.createShaderProgram(vertexSourceCode, fragmentSourceCode, defines);
+                this.bindUniformBlock();
 
                 this._uniforms = engine.getUniforms(this._program, this._uniformsNames);
+                this._uniformBuffer = engine.createUniformBuffer(this.formatUniforms());
                 this._attributes = engine.getAttributes(this._program, attributesNames);
 
                 var index: number;
@@ -576,6 +579,25 @@
             return changed;
         }
 
+
+        public formatUniforms(): Float32Array {
+            return new Float32Array(4);
+        };
+
+        public setUniformBuffer(materialFormatted: Float32Array): Effect {
+            this._engine.setUniformBuffer(this._uniformBuffer, materialFormatted);
+
+            return this;
+        };
+
+        public bindUniformBuffer(): void {
+            this._engine.bindUniformBufferBase(this._uniformBuffer, 0);
+        }
+
+        public bindUniformBlock(): void {
+            this._engine.bindUniformBlock(this._program);
+        }
+
         public setIntArray(uniformName: string, array: Int32Array): Effect {
             this._valueCache[uniformName] = null;
             this._engine.setIntArray(this.getUniform(uniformName), array);

src/Materials/babylon.standardMaterial.ts

@@ -873,6 +873,11 @@
                 // Diffuse
                 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();
+
                 // Lights
                 if (scene.lightsEnabled && !this.disableLighting) {
                     MaterialHelper.BindLights(scene, mesh, this._effect, this._defines, this.maxSimultaneousLights);

src/Shaders/default.fragment.fx

@@ -1,4 +1,14 @@
-#ifdef BUMP
+struct Material
+{
+  	vec4 diffuse;
+};
+
+uniform PerPass {
+	Material material;
+}  u_PerPass;
+
+
+#ifdef BUMP
 #extension GL_OES_standard_derivatives : enable
 #endif
 
@@ -164,10 +174,10 @@ void main(void) {
 
 	// Base color
 	vec4 baseColor = vec4(1., 1., 1., 1.);
-	vec3 diffuseColor = vDiffuseColor.rgb;
+	vec3 diffuseColor = u_PerPass.material.diffuse.rgb;
 
 	// Alpha
-	float alpha = vDiffuseColor.a;
+	float alpha = u_PerPass.material.diffuse.a;
 
 	// Bump
 #ifdef NORMAL

src/babylon.engine.ts

@@ -1292,6 +1292,22 @@
             this.wipeCaches();
         }
 
+        // UBOs
+        public createUniformBuffer(formattedUniforms: number[] | Float32Array): WebGLBuffer {
+            var ubo = this._gl.createBuffer();
+            this.bindUniformBuffer(ubo);
+
+            if (formattedUniforms instanceof Float32Array) {
+                this._gl.bufferData(this._gl.UNIFORM_BUFFER, <Float32Array>formattedUniforms, this._gl.STATIC_DRAW);
+            } else {
+                this._gl.bufferData(this._gl.UNIFORM_BUFFER, new Float32Array(<number[]>formattedUniforms), this._gl.STATIC_DRAW);
+            }
+
+            this.bindUniformBuffer(null);
+            ubo.references = 1;
+            return ubo;
+        }
+
         // VBOs
         private _resetVertexBufferBinding(): void {
             this.bindArrayBuffer(null);
@@ -1403,6 +1419,14 @@
             this.bindBuffer(buffer, this._gl.ARRAY_BUFFER);
         }
 
+        public bindUniformBuffer(buffer?: WebGLBuffer): void {
+            this._gl.bindBuffer(this._gl.UNIFORM_BUFFER, buffer);
+        }
+
+        public bindUniformBufferBase(buffer: WebGLBuffer, location: number): void {
+            this._gl.bindBufferBase(this._gl.UNIFORM_BUFFER, location, buffer);
+        }
+
         private bindIndexBuffer(buffer: WebGLBuffer): void {
             if (!this._vaoRecordInProgress) {
                 this._unBindVertexArrayObject();
@@ -1786,6 +1810,12 @@
             return results;
         }
 
+        public bindUniformBlock(shaderProgram: WebGLProgram): void {
+            var uniformPerPassLocation = this._gl.getUniformBlockIndex(shaderProgram, 'PerPass');
+            this._gl.uniformBlockBinding(shaderProgram, uniformPerPassLocation, 0);
+
+        };
+
         public getAttributes(shaderProgram: WebGLProgram, attributesNames: string[]): number[] {
             var results = [];
 
@@ -1811,6 +1841,15 @@
             }
         }
 
+        public setUniformBuffer(ubo: WebGLBuffer, array: Float32Array): void {
+            this.bindUniformBuffer(ubo);
+
+            this._gl.bufferData(this._gl.UNIFORM_BUFFER, array, this._gl.STATIC_DRAW);
+            this._gl.bufferSubData(this._gl.UNIFORM_BUFFER, 0, array);
+
+            this.bindUniformBuffer(null);
+        }
+
         public setIntArray(uniform: WebGLUniformLocation, array: Int32Array): void {
             if (!uniform)
                 return;