Porting CCGLProgramState to cocos2d-html5. This will now give the user the ability to bind multiple texture uniforms to a single shader program. It will also allow users to have late-bound uniforms via a callback.

David DeSimone · David DeSimone · commit 4ed7dc52a22e · 2016-12-13T14:30:06.000-08:00
diff --git a/cocos2d/core/CCDrawingPrimitivesWebGL.js b/cocos2d/core/CCDrawingPrimitivesWebGL.js
@@ -81,7 +81,7 @@ cc.DrawingPrimitiveWebGL = cc.Class.extend(/** @lends cc.DrawingPrimitiveWebGL#
         this.lazy_init();
 
         var glContext = this._renderContext;
-        this._shader.use();
+        this._glProgramState.apply();
         this._shader.setUniformForModelViewAndProjectionMatrixWithMat4();
         glContext.enableVertexAttribArray(cc.VERTEX_ATTRIB_POSITION);
         this._shader.setUniformLocationWith4fv(this._colorLocation, this._colorArray);
@@ -110,7 +110,7 @@ cc.DrawingPrimitiveWebGL = cc.Class.extend(/** @lends cc.DrawingPrimitiveWebGL#
         this.lazy_init();
 
         var glContext = this._renderContext;
-        this._shader.use();
+        this._glProgramState.apply();
         this._shader.setUniformForModelViewAndProjectionMatrixWithMat4();
         glContext.enableVertexAttribArray(cc.VERTEX_ATTRIB_POSITION);
         this._shader.setUniformLocationWith4fv(this._colorLocation, this._colorArray);
@@ -145,7 +145,7 @@ cc.DrawingPrimitiveWebGL = cc.Class.extend(/** @lends cc.DrawingPrimitiveWebGL#
         this.lazy_init();
 
         var glContext = this._renderContext;
-        this._shader.use();
+        this._glProgramState.apply();
         this._shader.setUniformForModelViewAndProjectionMatrixWithMat4();
         glContext.enableVertexAttribArray(cc.VERTEX_ATTRIB_POSITION);
         this._shader.setUniformLocationWith4fv(this._colorLocation, this._colorArray);
@@ -200,7 +200,7 @@ cc.DrawingPrimitiveWebGL = cc.Class.extend(/** @lends cc.DrawingPrimitiveWebGL#
         this.lazy_init();
 
         var glContext = this._renderContext;
-        this._shader.use();
+        this._glProgramState.apply();
         this._shader.setUniformForModelViewAndProjectionMatrixWithMat4();
         glContext.enableVertexAttribArray(cc.VERTEX_ATTRIB_POSITION);
         this._shader.setUniformLocationWith4fv(this._colorLocation, this._colorArray);
@@ -231,7 +231,7 @@ cc.DrawingPrimitiveWebGL = cc.Class.extend(/** @lends cc.DrawingPrimitiveWebGL#
             this.setDrawColor(color.r, color.g, color.b, color.a);
 
         var glContext = this._renderContext;
-        this._shader.use();
+        this._glProgramState.apply();
         this._shader.setUniformForModelViewAndProjectionMatrixWithMat4();
         glContext.enableVertexAttribArray(cc.VERTEX_ATTRIB_POSITION);
         this._shader.setUniformLocationWith4fv(this._colorLocation, this._colorArray);
@@ -279,7 +279,7 @@ cc.DrawingPrimitiveWebGL = cc.Class.extend(/** @lends cc.DrawingPrimitiveWebGL#
         vertices[(segments + 1) * 2 + 1] = center.y;
 
         var glContext = this._renderContext;
-        this._shader.use();
+        this._glProgramState.apply();
         this._shader.setUniformForModelViewAndProjectionMatrixWithMat4();
         glContext.enableVertexAttribArray(cc.VERTEX_ATTRIB_POSITION);
         this._shader.setUniformLocationWith4fv(this._colorLocation, this._colorArray);
@@ -317,7 +317,7 @@ cc.DrawingPrimitiveWebGL = cc.Class.extend(/** @lends cc.DrawingPrimitiveWebGL#
         vertices[segments * 2 + 1] = destination.y;
 
         var glContext = this._renderContext;
-        this._shader.use();
+        this._glProgramState.apply();
         this._shader.setUniformForModelViewAndProjectionMatrixWithMat4();
         glContext.enableVertexAttribArray(cc.VERTEX_ATTRIB_POSITION);
         this._shader.setUniformLocationWith4fv(this._colorLocation, this._colorArray);
@@ -356,7 +356,7 @@ cc.DrawingPrimitiveWebGL = cc.Class.extend(/** @lends cc.DrawingPrimitiveWebGL#
         vertices[segments * 2 + 1] = destination.y;
 
         var glContext = this._renderContext;
-        this._shader.use();
+        this._glProgramState.apply();
         this._shader.setUniformForModelViewAndProjectionMatrixWithMat4();
         glContext.enableVertexAttribArray(cc.VERTEX_ATTRIB_POSITION);
         this._shader.setUniformLocationWith4fv(this._colorLocation, this._colorArray);
@@ -416,7 +416,7 @@ cc.DrawingPrimitiveWebGL = cc.Class.extend(/** @lends cc.DrawingPrimitiveWebGL#
         }
 
         var glContext = this._renderContext;
-        this._shader.use();
+        this._glProgramState.apply();
         this._shader.setUniformForModelViewAndProjectionMatrixWithMat4();
         glContext.enableVertexAttribArray(cc.VERTEX_ATTRIB_POSITION);
         this._shader.setUniformLocationWith4fv(this._colorLocation, this._colorArray);
diff --git a/cocos2d/core/base-nodes/CCAtlasNodeWebGLRenderCmd.js b/cocos2d/core/base-nodes/CCAtlasNodeWebGLRenderCmd.js
@@ -68,8 +68,7 @@
         this._matrix.mat[5] = wt.d;
         this._matrix.mat[13] = wt.ty;
 
-        this._shaderProgram.use();
-        this._shaderProgram._setUniformForMVPMatrixWithMat4(this._matrix);
+        this._glProgramState.apply(this._matrix);
 
         cc.glBlendFunc(node._blendFunc.src, node._blendFunc.dst);
         if (this._uniformColor && this._colorF32Array) {
diff --git a/cocos2d/core/base-nodes/CCNode.js b/cocos2d/core/base-nodes/CCNode.js
@@ -2228,6 +2228,14 @@ cc.Node = cc.Class.extend(/** @lends cc.Node# */{
         this._renderCmd.setShaderProgram(newShaderProgram);
     },
 
+    setGLProgramState: function (glProgramState) {
+        this._renderCmd.setGLProgramState(glProgramState);
+    },
+
+    getGLProgramState: function () {
+        return this._renderCmd.getGLProgramState();
+    },
+
     /**
      * Returns the state of OpenGL server side.
      * @function
diff --git a/cocos2d/core/base-nodes/CCNodeCanvasRenderCmd.js b/cocos2d/core/base-nodes/CCNodeCanvasRenderCmd.js
@@ -513,7 +513,23 @@ cc.Node.RenderCmd.prototype = {
 
         if (locFlag & dirtyFlags.orderDirty)
             this._dirtyFlag &= ~dirtyFlags.orderDirty;
-    }
+    },
+
+    setShaderProgram: function (shaderProgram) {
+        //do nothing.
+    },
+
+    getShaderProgram: function () {
+        return null;
+    },
+
+    getGLProgramState: function () {
+        return null;
+    },
+
+    setGLProgramState: function (glProgramState) {
+        // do nothing
+    },
 };
 
 cc.Node.RenderCmd.prototype.originTransform = cc.Node.RenderCmd.prototype.transform;
@@ -607,14 +623,6 @@ cc.Node.RenderCmd.prototype._originSyncStatus = cc.Node.RenderCmd.prototype._syn
         }
     };
 
-    proto.setShaderProgram = function (shaderProgram) {
-        //do nothing.
-    };
-
-    proto.getShaderProgram = function () {
-        return null;
-    };
-
     //util functions
     cc.Node.CanvasRenderCmd._getCompositeOperationByBlendFunc = function (blendFunc) {
         if (!blendFunc)
diff --git a/cocos2d/core/base-nodes/CCNodeWebGLRenderCmd.js b/cocos2d/core/base-nodes/CCNodeWebGLRenderCmd.js
@@ -27,7 +27,7 @@
         this._node = renderable;
         this._anchorPointInPoints = {x: 0, y: 0};
         this._displayedColor = cc.color(255, 255, 255, 255);
-        this._shaderProgram = null;
+        this._glProgramState = null;
     };
 
     var proto = cc.Node.WebGLRenderCmd.prototype = Object.create(cc.Node.RenderCmd.prototype);
@@ -38,10 +38,26 @@
     };
 
     proto.setShaderProgram = function (shaderProgram) {
-        this._shaderProgram = shaderProgram;
+        this._glProgramState = cc.GLProgramState.getOrCreateWithGLProgram(shaderProgram);
     };
 
     proto.getShaderProgram = function () {
-        return this._shaderProgram;
+        return this._glProgramState ? this._glProgramState.getGLProgram() : null;
     };
+
+    proto.getGLProgramState = function () {
+        return this._glProgramState;
+    };
+
+    proto.setGLProgramState = function (glProgramState) {
+        this._glProgramState = glProgramState;
+    };
+
+    // Use a property getter/setter for backwards compatability, and
+    // to ease the transition from using glPrograms directly, to 
+    // using glProgramStates. 
+    Object.defineProperty(proto, '_shaderProgram', {
+        set: function () { this.setShaderProgram.apply(this, arguments); },
+        get: function () { return this.getShaderProgram(); }
+    });
 })();
diff --git a/cocos2d/core/layers/CCLayerWebGLRenderCmd.js b/cocos2d/core/layers/CCLayerWebGLRenderCmd.js
@@ -97,8 +97,7 @@
         this._matrix.mat[5] = wt.d;
         this._matrix.mat[13] = wt.ty;
 
-        this._shaderProgram.use();
-        this._shaderProgram._setUniformForMVPMatrixWithMat4(this._matrix);
+        this._glProgramState.apply(this._matrix);
         context.enableVertexAttribArray(cc.VERTEX_ATTRIB_POSITION);
         context.enableVertexAttribArray(cc.VERTEX_ATTRIB_COLOR);
         cc.glBlendFunc(node._blendFunc.src, node._blendFunc.dst);
@@ -311,8 +310,7 @@
         this._matrix.mat[13] = wt.ty;
 
         //draw gradient layer
-        this._shaderProgram.use();
-        this._shaderProgram._setUniformForMVPMatrixWithMat4(this._matrix);
+        this._glProgramState.apply(this._matrix);
         context.enableVertexAttribArray(cc.VERTEX_ATTRIB_POSITION);
         context.enableVertexAttribArray(cc.VERTEX_ATTRIB_COLOR);
         cc.glBlendFunc(node._blendFunc.src, node._blendFunc.dst);
diff --git a/cocos2d/core/platform/CCMacro.js b/cocos2d/core/platform/CCMacro.js
@@ -175,7 +175,7 @@ cc.nodeDrawSetup = function (node) {
     //cc.glEnable(node._glServerState);
     if (node._shaderProgram) {
         //cc._renderContext.useProgram(node._shaderProgram._programObj);
-        node._shaderProgram.use();
+        node._glProgramState.apply();
         node._shaderProgram.setUniformForModelViewAndProjectionMatrixWithMat4();
     }
 };
diff --git a/cocos2d/core/renderer/RendererWebGL.js b/cocos2d/core/renderer/RendererWebGL.js
@@ -33,8 +33,8 @@ var _batchedInfo = {
         blendSrc: null,
         // The batched blend destination, all batching element should have the same blend destination
         blendDst: null,
-        // The batched shader, all batching element should have the same shader
-        shader: null
+        // The batched glProgramState, all batching element should have the same glProgramState
+        glProgramState: null
     },
 
     _quadIndexBuffer = null,
@@ -280,18 +280,18 @@ return {
         }
         var blendSrc = node._blendFunc.src;
         var blendDst = node._blendFunc.dst;
-        var shader = cmd._shaderProgram;
+        var glProgramState = cmd._glProgramState;
         if (_batchedInfo.texture !== texture ||
             _batchedInfo.blendSrc !== blendSrc ||
             _batchedInfo.blendDst !== blendDst ||
-            _batchedInfo.shader !== shader) {
+            _batchedInfo.glProgramState !== glProgramState) {
             // Draw batched elements
             this._batchRendering();
             // Update _batchedInfo
             _batchedInfo.texture = texture;
             _batchedInfo.blendSrc = blendSrc;
             _batchedInfo.blendDst = blendDst;
-            _batchedInfo.shader = shader;
+            _batchedInfo.glProgramState = glProgramState;
         }
 
         // Upload vertex data
@@ -308,12 +308,12 @@ return {
 
         var gl = cc._renderContext;
         var texture = _batchedInfo.texture;
-        var shader = _batchedInfo.shader;
+        var glProgramState = _batchedInfo.glProgramState;
         var count = _batchingSize / 4;
 
-        if (shader) {
-            shader.use();
-            shader._updateProjectionUniform();
+        if (glProgramState) {
+            glProgramState.apply();
+            glProgramState.getGLProgram()._updateProjectionUniform();
         }
 
         cc.glBlendFunc(_batchedInfo.blendSrc, _batchedInfo.blendDst);
diff --git a/cocos2d/core/textures/TexturesWebGL.js b/cocos2d/core/textures/TexturesWebGL.js
@@ -339,8 +339,7 @@ cc._tmp.WebGLTexture2D = function () {
                 point.x, height + point.y, 0.0,
                 width + point.x, height + point.y, 0.0];
 
-            self._shaderProgram.use();
-            self._shaderProgram.setUniformsForBuiltins();
+            self._glProgramState.apply();
 
             cc.glBindTexture2D(self);
 
@@ -369,8 +368,7 @@ cc._tmp.WebGLTexture2D = function () {
                 rect.x, rect.y + rect.height, /*0.0,*/
                 rect.x + rect.width, rect.y + rect.height        /*0.0*/];
 
-            self._shaderProgram.use();
-            self._shaderProgram.setUniformsForBuiltins();
+            self._glProgramState.apply();
 
             cc.glBindTexture2D(self);
 
diff --git a/cocos2d/effects/CCGrid.js b/cocos2d/effects/CCGrid.js
@@ -443,9 +443,7 @@ cc.Grid3D = cc.GridBase.extend(/** @lends cc.Grid3D# */{
         this._matrix.mat[5] = wt.d;
         this._matrix.mat[13] = wt.ty;
 
-        this._shaderProgram.use();
-        //this._shaderProgram.setUniformsForBuiltins();
-        this._shaderProgram._setUniformForMVPMatrixWithMat4(this._matrix);
+        this._glProgramState.apply(this._matrix);
 
         var gl = cc._renderContext, locDirty = this._dirty;
 
@@ -714,9 +712,7 @@ cc.TiledGrid3D = cc.GridBase.extend(/** @lends cc.TiledGrid3D# */{
         this._matrix.mat[5] = wt.d;
         this._matrix.mat[13] = wt.ty;
 
-        this._shaderProgram.use();
-        this._shaderProgram._setUniformForMVPMatrixWithMat4(this._matrix);
-        //this._shaderProgram.setUniformsForBuiltins();
+        this._glProgramState.apply(this._matrix);
 
         //
         // Attributes
diff --git a/cocos2d/motion-streak/CCMotionStreakWebGLRenderCmd.js b/cocos2d/motion-streak/CCMotionStreakWebGLRenderCmd.js
@@ -49,8 +49,7 @@ cc.MotionStreak.WebGLRenderCmd.prototype.rendering = function (ctx) {
         this._matrix.mat[5] = wt.d;
         this._matrix.mat[13] = wt.ty;
 
-        this._shaderProgram.use();
-        this._shaderProgram._setUniformForMVPMatrixWithMat4(this._matrix);
+        this._glProgramState.apply(this._matrix);
         cc.glBlendFunc(node._blendFunc.src, node._blendFunc.dst);
 
         cc.glBindTexture2D(node.texture);
diff --git a/cocos2d/particle/CCParticleBatchNodeWebGLRenderCmd.js b/cocos2d/particle/CCParticleBatchNodeWebGLRenderCmd.js
@@ -49,8 +49,7 @@
         this._matrix.mat[5] = wt.d;
         this._matrix.mat[13] = wt.ty;
 
-        this._shaderProgram.use();
-        this._shaderProgram._setUniformForMVPMatrixWithMat4(this._matrix);
+        this._glProgramState.apply(this._matrix);
         cc.glBlendFuncForParticle(_t._blendFunc.src, _t._blendFunc.dst);
         _t.textureAtlas.drawQuads();
     };
diff --git a/cocos2d/particle/CCParticleSystemWebGLRenderCmd.js b/cocos2d/particle/CCParticleSystemWebGLRenderCmd.js
@@ -204,8 +204,7 @@
         this._matrix.mat[5] = wt.d;
         this._matrix.mat[13] = wt.ty;
 
-        this._shaderProgram.use();
-        this._shaderProgram._setUniformForMVPMatrixWithMat4(this._matrix);     //;
+        this._glProgramState.apply(this._matrix);
 
         cc.glBindTexture2D(node._texture);
         cc.glBlendFuncForParticle(node._blendFunc.src, node._blendFunc.dst);
diff --git a/cocos2d/physics/CCPhysicsDebugNodeWebGLRenderCmd.js b/cocos2d/physics/CCPhysicsDebugNodeWebGLRenderCmd.js
@@ -54,8 +54,7 @@
 
         //cc.DrawNode.prototype.draw.call(node);
         cc.glBlendFunc(node._blendFunc.src, node._blendFunc.dst);
-        this._shaderProgram.use();
-        this._shaderProgram._setUniformForMVPMatrixWithMat4(this._matrix);
+        this._glProgramState.apply(this._matrix);
         node._render();
 
         node.clear();
diff --git a/cocos2d/progress-timer/CCProgressTimerWebGLRenderCmd.js b/cocos2d/progress-timer/CCProgressTimerWebGLRenderCmd.js
@@ -64,7 +64,7 @@
         if (this._vertexDataCount === 0 || !node._sprite)
             return;
 
-        this._shaderProgram.use();
+        this._glProgramState.apply();
         this._shaderProgram._updateProjectionUniform();
 
         var blendFunc = node._sprite._blendFunc;
diff --git a/cocos2d/shaders/CCGLProgram.js b/cocos2d/shaders/CCGLProgram.js
@@ -116,6 +116,7 @@ cc.GLProgram = cc.Class.extend(/** @lends cc.GLProgram# */{
     ctor: function (vShaderFileName, fShaderFileName, glContext) {
         this._uniforms = {};
         this._hashForUniforms = {};
+        this._userUniforms = {};
         this._glContext = glContext || cc._renderContext;
 
         vShaderFileName && fShaderFileName && this.init(vShaderFileName, fShaderFileName);
@@ -231,7 +232,8 @@ cc.GLProgram = cc.Class.extend(/** @lends cc.GLProgram# */{
         }
 
         this._glContext.linkProgram(this._programObj);
-
+        this._parseUniforms();
+	
         if (this._vertShader)
             this._glContext.deleteShader(this._vertShader);
         if (this._fragShader)
@@ -253,6 +255,18 @@ cc.GLProgram = cc.Class.extend(/** @lends cc.GLProgram# */{
         return true;
     },
 
+    _parseUniforms: function _parseUniforms() {
+        var activeUniforms = this._glContext.getProgramParameter(this._programObj, this._glContext.ACTIVE_UNIFORMS);
+        for (var i = 0; i < activeUniforms; ++i) {
+            var uniform = this._glContext.getActiveUniform(this._programObj, i);
+            uniform.location = this._glContext.getUniformLocation(this._programObj, uniform.name);
+            if (uniform.name.indexOf("CC_") !== 0) {
+                uniform.location = this._glContext.getUniformLocation(this._programObj, uniform.name);
+                uniform.name = uniform.name.replace("[]", "");
+                this._userUniforms[uniform.name] = uniform;
+            }
+        }
+    },
     /**
      * it will call glUseProgram()
      */
diff --git a/cocos2d/shaders/CCGLProgramState.js b/cocos2d/shaders/CCGLProgramState.js
diff --git a/cocos2d/shape-nodes/CCDrawNodeWebGLRenderCmd.js b/cocos2d/shape-nodes/CCDrawNodeWebGLRenderCmd.js
diff --git a/moduleConfig.json b/moduleConfig.json

Original file line number	Diff line number	Diff line change
`@@ -175,7 +175,7 @@ cc.nodeDrawSetup = function (node) {`
`175`	`175`	`//cc.glEnable(node._glServerState);`
`176`	`176`	`if (node._shaderProgram) {`
`177`	`177`	`//cc._renderContext.useProgram(node._shaderProgram._programObj);`
`178`		`- node._shaderProgram.use();`
	`178`	`+ node._glProgramState.apply();`
`179`	`179`	`node._shaderProgram.setUniformForModelViewAndProjectionMatrixWithMat4();`
`180`	`180`	`}`
`181`	`181`	`};`