facility for css shader transitions, add css shader based tile-transition

css/reveal.css

@@ -317,6 +317,7 @@ body {
 		        transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 	}
 
+
 /*********************************************
  * ROLLING LINKS
  *********************************************/
@@ -571,8 +572,9 @@ body {
 	        transform: translate(0, 150%);
 }
 
+
 /*********************************************
- * BOX TRANSITION
+ * CUBE TRANSITION
  *********************************************/
 
 .reveal.cube .slides {
@@ -808,6 +810,56 @@ body {
 }
 
 
+/*********************************************
+ * TILE-FLIP TRANSITION
+ *********************************************/
+
+.reveal.tileflip .slides section.present {
+	-webkit-transform: none;
+	-webkit-transition-duration: 800ms;
+
+	-webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), 
+		amount 0, randomness 0, flipAxis 0 1 0, tileOutline 1
+	);
+}
+
+.reveal.tileflip .slides section.past {
+	-webkit-transform: none;
+	-webkit-transition-duration: 800ms;
+	
+	-webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), 
+		amount 1, randomness 0, flipAxis 0 1 0, tileOutline 1
+	);
+}
+
+.reveal.tileflip .slides section.future {
+	-webkit-transform: none;
+	-webkit-transition-duration: 800ms;
+
+	-webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), 
+		amount 1, randomness 0, flipAxis 0 1 0, tileOutline 1
+	);
+}
+
+.reveal.tileflip .slides>section>section.present {	
+	-webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), 
+		amount 0, randomness 2, flipAxis 1 0 0, tileOutline 1
+	);
+}
+
+.reveal.tileflip .slides>section>section.past {	
+	-webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), 
+		amount 1, randomness 2, flipAxis 1 0 0, tileOutline 1
+	);
+}
+
+.reveal.tileflip .slides>section>section.future {	
+	-webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), 
+		amount 1, randomness 2, flipAxis 1 0 0, tileOutline 1
+	);
+}
+
+
 /*********************************************
  * OVERVIEW
  *********************************************/
@@ -910,3 +962,4 @@ body {
 	display: none;
 }
 
+

css/shaders/tile-flip.fs

@@ -0,0 +1,64 @@
+/*
+ * Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved.
+ * Copyright (c) 2012 Branislav Ulicny
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+precision mediump float;
+
+// Uniform values from CSS
+
+uniform float amount;
+uniform float tileOutline;
+
+// Built-in uniforms
+
+uniform vec2 u_meshSize;
+uniform vec2 u_textureSize;
+
+// Varyings passed in from vertex shader
+
+varying float v_depth;
+varying vec2 v_uv;
+
+// Main
+
+void main()
+{
+	// FIXME: Must swap x and y as a workaround for: 
+	// https://bugs.webkit.org/show_bug.cgi?id=96285
+	vec2 u_meshSize = u_meshSize.yx;
+
+	vec4 c = vec4(1.0);
+
+	// Fade out.
+	c.a = 1.0 - v_depth;
+
+	// Show grid outline.
+	if (tileOutline >= 0.5) {
+		float cell_width = u_textureSize.x / u_meshSize.y;
+		float cell_height = u_textureSize.y / u_meshSize.x;
+		float dd = 1.0;
+
+		if (mod(v_uv.x * u_textureSize.x + dd, cell_width) < 2.0
+			|| mod(v_uv.y * u_textureSize.y + dd, cell_height) < 2.0) {
+			if (amount > 0.0)
+				c.rgb = vec3(1.0 - sqrt(amount));
+		}
+	}
+	css_ColorMatrix = mat4(c.r, 0.0, 0.0, 0.0,
+							0.0, c.g, 0.0, 0.0,
+							0.0, 0.0, c.b, 0.0,
+							0.0, 0.0, 0.0, c.a);
+}

css/shaders/tile-flip.vs

@@ -0,0 +1,141 @@
+/*
+ * Copyright (c)2012 Adobe Systems Incorporated. All rights reserved.
+ * Copyright (c)2012 Branislav Ulicny
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+precision mediump float;
+
+// Built-in attributes
+
+attribute vec4 a_position;
+attribute vec2 a_texCoord;
+attribute vec3 a_triangleCoord;
+
+// Built-in uniforms
+
+uniform mat4 u_projectionMatrix;
+uniform vec2 u_meshSize;
+uniform vec2 u_textureSize;
+
+// Uniform passed in from CSS
+
+uniform mat4 transform;
+uniform float amount;
+uniform float randomness;
+uniform vec3 flipAxis;
+
+// Varyings
+
+varying float v_depth;
+varying vec2 v_uv;
+
+// Constants
+
+const float PI2 = 1.5707963267948966;
+
+// Create perspective matrix
+
+mat4 perspectiveMatrix(float p)
+{
+    float perspective = - 1.0 / p;
+    return mat4(
+		1.0, 0.0, 0.0, 0.0,
+		0.0, 1.0, 0.0, 0.0,
+		0.0, 0.0, 1.0, perspective,
+		0.0, 0.0, 0.0, 1.0
+	);
+}
+
+// Rotate vector
+
+vec3 rotateVectorByQuaternion(vec3 v, vec4 q)
+{
+	vec3 dest = vec3(0.0);
+
+	float x = v.x, y  = v.y, z  = v.z;
+	float qx = q.x, qy = q.y, qz = q.z, qw = q.w;
+
+	// Calculate quaternion * vector.
+
+	float ix =  qw * x + qy * z - qz * y,
+		  iy =  qw * y + qz * x - qx * z,
+		  iz =  qw * z + qx * y - qy * x,
+		  iw = -qx * x - qy * y - qz * z;
+
+	// Calculate result * inverse quaternion.
+
+	dest.x = ix * qw + iw * -qx + iy * -qz - iz * -qy;
+	dest.y = iy * qw + iw * -qy + iz * -qx - ix * -qz;
+	dest.z = iz * qw + iw * -qz + ix * -qy - iy * -qx;
+
+	return dest;
+}
+
+// Convert rotation.
+
+vec4 axisAngleToQuaternion(vec3 axis, float angle)
+{
+	vec4 dest = vec4(0.0);
+
+	float halfAngle = angle / 2.0;
+	float s = sin(halfAngle);
+
+	dest.x = axis.x * s;
+	dest.y = axis.y * s;
+	dest.z = axis.z * s;
+	dest.w = cos(halfAngle);
+
+	return dest;
+}
+
+// Random function based on the tile coordinate.
+// This will return the same value for all the vertices in the same tile (i.e. two triangles).
+
+float random(vec2 scale)
+{
+    // Use the fragment position as a different seed per-pixel.
+    return fract(sin(dot(vec2(a_triangleCoord.x, a_triangleCoord.y), scale)) * 4000.0);
+}
+
+// Main
+
+void main()
+{
+	// FIXME: We must swap x and y as a workaround for: 
+	// https://bugs.webkit.org/show_bug.cgi?id=96285
+	vec2 u_meshSize = u_meshSize.yx;
+
+  	vec4 pos = a_position;
+	float aspect = u_textureSize.x / u_textureSize.y;
+
+	float cx = a_triangleCoord.x / u_meshSize.y - 0.5 + 0.5 / u_meshSize.y;
+	float cy = a_triangleCoord.y / u_meshSize.x - 0.5 + 0.5 / u_meshSize.x;
+
+	vec3 centroid = vec3(cx, cy, 0.0);
+	float r = random(vec2(10.0, 80.0));
+	float rr = mix(0.0, PI2, amount * (1.0 + randomness * r));
+
+	vec4 rotation = vec4(flipAxis, rr);
+	vec4 qRotation = axisAngleToQuaternion(normalize(rotation.xyz), rotation.w);
+
+	vec3 newPosition = rotateVectorByQuaternion((pos.xyz - centroid)* vec3(aspect, 1., 1.0), qRotation) * vec3(1.0 / aspect, 1.0, 1.0) + centroid;
+	pos.xyz = newPosition;
+
+	gl_Position = u_projectionMatrix * transform * pos;
+
+	// Pass varyings to the fragment shader.
+	v_depth = abs(rr)/ PI2;
+	v_uv = a_texCoord;
+}

js/reveal.js

@@ -1,5 +1,5 @@
 /*!
- * reveal.js 2.1 r25
+ * reveal.js 2.1 r26
  * http://lab.hakim.se/reveal-js
  * MIT licensed
  * 

js/reveal.min.js

@@ -1,5 +1,5 @@
 /*!
- * reveal.js 2.1 r25
+ * reveal.js 2.1 r26
  * http://lab.hakim.se/reveal-js
  * MIT licensed
  *