Updated vertex color example to use new shaders. Fixed rapid clicking issue. (#123)

Author: paweljarosz

material/vertexcolor/example/vertexcolor.fp

@@ -1,12 +1,15 @@
-varying mediump vec2 var_texcoord0;
-varying mediump vec4 var_mycolor;
+#version 140
 
-uniform lowp sampler2D texture_sampler;
-uniform lowp vec4 tint;
+in mediump vec2 var_texcoord0;
+in mediump vec4 var_mycolor; // 4. Add var_mycolor definition
+
+out vec4 out_fragColor;
+
+uniform mediump sampler2D texture_sampler;
 
 void main()
 {
-    // Pre-multiply alpha since all runtime textures already are
-    lowp vec4 tint_pm = vec4(tint.xyz * tint.w, tint.w);
-    gl_FragColor = texture2D(texture_sampler, var_texcoord0.xy) * tint_pm * var_mycolor;
-}
+    // Pre-multiply color to match premultiplied textures
+    mediump vec4 tint_pm = vec4(var_mycolor.rgb * var_mycolor.a, var_mycolor.a);
+    out_fragColor = texture(texture_sampler, var_texcoord0.xy) * tint_pm;
+}

material/vertexcolor/example/vertexcolor.material

@@ -2,37 +2,19 @@ name: "sprite"
 tags: "tile"
 vertex_program: "/example/vertexcolor.vp"
 fragment_program: "/example/vertexcolor.fp"
-vertex_space: VERTEX_SPACE_WORLD
 vertex_constants {
   name: "view_proj"
   type: CONSTANT_TYPE_VIEWPROJ
 }
-fragment_constants {
-  name: "tint"
-  type: CONSTANT_TYPE_USER
-  value {
-    x: 1.0
-    y: 1.0
-    z: 1.0
-    w: 1.0
-  }
-}
 samplers {
   name: "texture_sampler"
   wrap_u: WRAP_MODE_CLAMP_TO_EDGE
   wrap_v: WRAP_MODE_CLAMP_TO_EDGE
   filter_min: FILTER_MODE_MIN_DEFAULT
   filter_mag: FILTER_MODE_MAG_DEFAULT
-  max_anisotropy: 1.0
 }
-max_page_count: 0
 attributes {
   name: "mycolor"
-  semantic_type: SEMANTIC_TYPE_NONE
-  element_count: 4
-  normalize: false
-  data_type: TYPE_FLOAT
-  coordinate_space: COORDINATE_SPACE_LOCAL
   double_values {
     v: 1.0
     v: 1.0

material/vertexcolor/example/vertexcolor.script

@@ -11,28 +11,39 @@ function init(self)
 	local maxx = 4
 
 	self.urls = {}
+
+	-- 1. For all sprites in the example we set a slightly different `mycolor` vertex attribute:
 	for y = 0, maxy do
 		for x = 0, maxx do
 			local p = vmath.vector3(startx + x*spacingx, starty + y*spacingy, 0.5)
 			local id = factory.create("#factory", p, nil, nil, vmath.vector3(0.8, 0.8, 1))
 			local url = msg.url(nil, id, "sprite")
 			table.insert(self.urls, url)
-			
+
+			-- set vertex attribute:
 			go.set(url, "mycolor", vmath.vector4(x/maxx, y/maxy, 0, 1))
 		end
 	end
 
 	self.updated = false
+	self.animation_finished = true
 end
 
 function update(self, dt)
 	self.updated = true
 end
 
 function on_input(self, action_id, action)
-	if action_id == hash("touch") and action.pressed and self.updated then
+
+	-- 2. On click we animate the `mycolor` vertex attribute of each of the sprites to blue and back.
+	if action_id == hash("touch") and action.pressed and self.updated and self.animation_finished then
 		for _, url in ipairs(self.urls) do
-			go.animate(url, "mycolor", go.PLAYBACK_ONCE_PINGPONG, vmath.vector4(0, 0, 1, 1), go.EASING_LINEAR, .2)
+			self.animation_finished = false
+
+			-- animate vertex attribute:
+			go.animate(url, "mycolor", go.PLAYBACK_ONCE_PINGPONG, vmath.vector4(0, 0, 1, 1), go.EASING_LINEAR, 1, 0, function()
+				self.animation_finished = true
+			end)
 		end
 	end
 end

material/vertexcolor/example/vertexcolor.vp

@@ -1,16 +1,21 @@
-uniform highp mat4 view_proj;
+#version 140
 
 // positions are in world space
-attribute highp vec4 position;
-attribute mediump vec2 texcoord0;
-attribute mediump vec4 mycolor;
+in highp vec4 position;
+in mediump vec2 texcoord0;
+in mediump vec4 mycolor; // 1. Add attribute definition
 
-varying mediump vec2 var_texcoord0;
-varying mediump vec4 var_mycolor;
+out mediump vec2 var_texcoord0;
+out mediump vec4 var_mycolor; // 2. Add output variable to pass color to fp
+
+uniform vs_uniforms
+{
+    highp mat4 view_proj;
+};
 
 void main()
 {
     gl_Position = view_proj * vec4(position.xyz, 1.0);
     var_texcoord0 = texcoord0;
-    var_mycolor = mycolor;
-}
+    var_mycolor = mycolor; // 3. Pass mycolor attribute value to fp.
+}