diff --git a/.gitignore b/.gitignore
index ae9e23ecc0..d458fc1282 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,7 @@
 /bin/plovr*.jar
 /build/gh-pages
 /build/check-requires-timestamp
+/build/glsl-unit
 /build/jsdoc-*-timestamp
 /build/lint-timestamp
 /build/ol.css
diff --git a/.travis.yml b/.travis.yml
index fcb325ca2c..12b0ddc923 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,10 +1,12 @@
 before_install:
   - "sudo pip install http://closure-linter.googlecode.com/files/closure_linter-latest.tar.gz"
   - "git clone https://github.com/jsdoc3/jsdoc && (cd jsdoc && git checkout master)"
+  - "git clone https://code.google.com/p/glsl-unit/ build/glsl-unit"
 
 before_script:
   - "./build.py plovr"
   - "./build.py serve-integration-test &"
+  - "rm src/ol/renderer/webgl/*shader.js"
   - "sleep 3"
 
 script: "./build.py JSDOC=jsdoc/jsdoc integration-test"
diff --git a/build.py b/build.py
index 0e582118eb..bed89464e3 100755
--- a/build.py
+++ b/build.py
@@ -21,6 +21,7 @@ if sys.platform == 'win32':
     variables.JAVA = os.path.join(
         ProgramFiles, 'Java', 'jre7', 'bin', 'java.exe')
     variables.JSDOC = 'jsdoc'  # FIXME
+    variables.NODE = 'node'
     variables.PYTHON = os.path.join(Python27, 'python.exe')
     PHANTOMJS_WINDOWS_ZIP = 'build/phantomjs-1.8.1-windows.zip'
     # FIXME we should not need both a pake variable and a Python constant here
@@ -34,9 +35,12 @@ else:
     variables.JAVA = 'java'
     variables.JAR = 'jar'
     variables.JSDOC = 'jsdoc'
+    variables.NODE = 'node'
     variables.PYTHON = 'python'
     variables.PHANTOMJS = 'phantomjs'
 
+TEMPLATE_GLSL_COMPILER_JS = 'build/glsl-unit/bin/template_glsl_compiler.js'
+
 variables.BRANCH = output(
     '%(GIT)s', 'rev-parse', '--abbrev-ref', 'HEAD').strip()
 
@@ -73,13 +77,21 @@ INTERNAL_SRC = [
     'build/src/internal/src/requireall.js',
     'build/src/internal/src/types.js']
 
+GLSL_SRC = [path
+            for path in ifind('src')
+            if path.endswith('.glsl')]
+
+SHADER_SRC = [path.replace('.glsl', 'shader.js')
+              for path in GLSL_SRC]
+
 SPEC = [path
         for path in ifind('test/spec')
         if path.endswith('.js')]
 
 SRC = [path
        for path in ifind('src/ol')
-       if path.endswith('.js')]
+       if path.endswith('.js')
+       if path not in SHADER_SRC]
 
 PLOVR_JAR = 'bin/plovr-eba786b34df9.jar'
 PLOVR_JAR_MD5 = '20eac8ccc4578676511cf7ccbfc65100'
@@ -121,22 +133,22 @@ def build_ol_css(t):
     t.touch()
 
 
-@target('build/ol.js', PLOVR_JAR, SRC, EXTERNAL_SRC, 'base.json',
-        'build/ol.json')
+@target('build/ol.js', PLOVR_JAR, SRC, EXTERNAL_SRC, SHADER_SRC,
+        'base.json', 'build/ol.json')
 def build_ol_js(t):
     t.output('%(JAVA)s', '-jar', PLOVR_JAR, 'build', 'build/ol.json')
     report_sizes(t)
 
 
-@target('build/ol-simple.js', PLOVR_JAR, SRC, INTERNAL_SRC, 'base.json',
-        'build/ol.json', 'build/ol-simple.json')
+@target('build/ol-simple.js', PLOVR_JAR, SRC, INTERNAL_SRC, SHADER_SRC,
+        'base.json', 'build/ol.json', 'build/ol-simple.json')
 def build_ol_simple_js(t):
     t.output('%(JAVA)s', '-jar', PLOVR_JAR, 'build', 'build/ol-simple.json')
     report_sizes(t)
 
 
-@target('build/ol-whitespace.js', PLOVR_JAR, SRC, INTERNAL_SRC, 'base.json',
-        'build/ol.json', 'build/ol-whitespace.json')
+@target('build/ol-whitespace.js', PLOVR_JAR, SRC, INTERNAL_SRC, SHADER_SRC,
+        'base.json', 'build/ol.json', 'build/ol-whitespace.json')
 def build_ol_whitespace_js(t):
     t.output('%(JAVA)s', '-jar', PLOVR_JAR,
              'build', 'build/ol-whitespace.json')
@@ -146,8 +158,8 @@ def build_ol_whitespace_js(t):
 virtual('build-all', 'build/ol-all.js')
 
 
-@target('build/ol-all.js', PLOVR_JAR, SRC, INTERNAL_SRC, 'base.json',
-        'build/ol-all.json')
+@target('build/ol-all.js', PLOVR_JAR, SRC, INTERNAL_SRC, SHADER_SRC,
+        'base.json', 'build/ol-all.json')
 def build_ol_all_js(t):
     t.output('%(JAVA)s', '-jar', PLOVR_JAR, 'build', 'build/ol-all.json')
 
@@ -173,6 +185,18 @@ def build_src_external_src_types_js(t):
              '--typedef', 'src/objectliterals.exports')
 
 
+for glsl_src in GLSL_SRC:
+    def shader_src_helper(glsl_src):
+        @target(glsl_src.replace('.glsl', 'shader.js'), glsl_src,
+                'src/ol/webgl/shader.mustache')
+        def shader_src(t):
+            t.run('%(NODE)s', TEMPLATE_GLSL_COMPILER_JS,
+                  '--input', glsl_src,
+                  '--template', 'src/ol/webgl/shader.mustache',
+                  '--output', t.name)
+    shader_src_helper(glsl_src)
+
+
 def _build_require_list(dependencies, output_file_name):
     requires = set()
     for dependency in dependencies:
@@ -185,7 +209,7 @@ def _build_require_list(dependencies, output_file_name):
             f.write('goog.require(\'%s\');\n' % (require,))
 
 
-@target('build/src/internal/src/requireall.js', SRC)
+@target('build/src/internal/src/requireall.js', SRC, SHADER_SRC)
 def build_src_internal_src_requireall_js(t):
     _build_require_list(t.dependencies, t.name)
 
@@ -252,7 +276,7 @@ def examples_star_combined_js(name, match):
         t.output('%(JAVA)s', '-jar', PLOVR_JAR, 'build',
                  'examples/%(id)s.json' % match.groupdict())
         report_sizes(t)
-    dependencies = [PLOVR_JAR, SRC, INTERNAL_SRC, 'base.json',
+    dependencies = [PLOVR_JAR, SRC, INTERNAL_SRC, SHADER_SRC, 'base.json',
                     'examples/%(id)s.js' % match.groupdict(),
                     'examples/%(id)s.json' % match.groupdict()]
     return Target(name, action=action, dependencies=dependencies)
@@ -309,7 +333,7 @@ def _strip_comments(lines):
 
 
 @target('build/check-requires-timestamp', SRC, INTERNAL_SRC, EXTERNAL_SRC,
-        EXAMPLES_SRC, SPEC)
+        EXAMPLES_SRC, SHADER_SRC, SPEC)
 def build_check_requires_timestamp(t):
     unused_count = 0
     all_provides = set()
@@ -408,7 +432,7 @@ def gh_pages(t):
 virtual('doc', 'build/jsdoc-%(BRANCH)s-timestamp' % vars(variables))
 
 
-@target('build/jsdoc-%(BRANCH)s-timestamp' % vars(variables), SRC,
+@target('build/jsdoc-%(BRANCH)s-timestamp' % vars(variables), SRC, SHADER_SRC,
         ifind('doc/template'))
 def jsdoc_BRANCH_timestamp(t):
     t.run('%(JSDOC)s', '-t', 'doc/template', '-r',
diff --git a/src/ol/renderer/webgl/shader.js b/src/ol/renderer/webgl/shader.js
deleted file mode 100644
index e425155641..0000000000
--- a/src/ol/renderer/webgl/shader.js
+++ /dev/null
@@ -1,81 +0,0 @@
-goog.provide('ol.renderer.webgl.FragmentShader');
-goog.provide('ol.renderer.webgl.VertexShader');
-
-goog.require('goog.functions');
-goog.require('goog.webgl');
-
-
-
-/**
- * @constructor
- * @param {string} source Source.
- */
-ol.renderer.webgl.Shader = function(source) {
-
-  /**
-   * @private
-   * @type {string}
-   */
-  this.source_ = source;
-
-};
-
-
-/**
- * @return {number} Type.
- */
-ol.renderer.webgl.Shader.prototype.getType = goog.abstractMethod;
-
-
-/**
- * @return {string} Source.
- */
-ol.renderer.webgl.Shader.prototype.getSource = function() {
-  return this.source_;
-};
-
-
-/**
- * @return {boolean} Is animated?
- */
-ol.renderer.webgl.Shader.prototype.isAnimated = goog.functions.FALSE;
-
-
-
-/**
- * @constructor
- * @extends {ol.renderer.webgl.Shader}
- * @param {string} source Source.
- */
-ol.renderer.webgl.FragmentShader = function(source) {
-  goog.base(this, source);
-};
-goog.inherits(ol.renderer.webgl.FragmentShader, ol.renderer.webgl.Shader);
-
-
-/**
- * @inheritDoc
- */
-ol.renderer.webgl.FragmentShader.prototype.getType = function() {
-  return goog.webgl.FRAGMENT_SHADER;
-};
-
-
-
-/**
- * @constructor
- * @extends {ol.renderer.webgl.Shader}
- * @param {string} source Source.
- */
-ol.renderer.webgl.VertexShader = function(source) {
-  goog.base(this, source);
-};
-goog.inherits(ol.renderer.webgl.VertexShader, ol.renderer.webgl.Shader);
-
-
-/**
- * @inheritDoc
- */
-ol.renderer.webgl.VertexShader.prototype.getType = function() {
-  return goog.webgl.VERTEX_SHADER;
-};
diff --git a/src/ol/renderer/webgl/webglmap.glsl b/src/ol/renderer/webgl/webglmap.glsl
new file mode 100644
index 0000000000..3c1304efd6
--- /dev/null
+++ b/src/ol/renderer/webgl/webglmap.glsl
@@ -0,0 +1,31 @@
+//! NAMESPACE=ol.renderer.webgl.map
+
+
+//! COMMON
+varying vec2 v_texCoord;
+
+
+//! VERTEX
+attribute vec2 a_position;
+attribute vec2 a_texCoord;
+
+uniform mat4 u_texCoordMatrix;
+uniform mat4 u_projectionMatrix;
+
+void main(void) {
+  gl_Position = u_projectionMatrix * vec4(a_position, 0., 1.);
+  v_texCoord = (u_texCoordMatrix * vec4(a_texCoord, 0., 1.)).st;
+}
+
+
+//! FRAGMENT
+// @see https://svn.webkit.org/repository/webkit/trunk/Source/WebCore/platform/graphics/filters/skia/SkiaImageFilterBuilder.cpp
+uniform mat4 u_colorMatrix;
+uniform float u_opacity;
+uniform sampler2D u_texture;
+
+void main(void) {
+  vec4 texColor = texture2D(u_texture, v_texCoord);
+  gl_FragColor.rgb = (u_colorMatrix * vec4(texColor.rgb, 1.)).rgb;
+  gl_FragColor.a = texColor.a * u_opacity;
+}
diff --git a/src/ol/renderer/webgl/webglmaprenderer.js b/src/ol/renderer/webgl/webglmaprenderer.js
index 11ff3b5a08..655350d6f9 100644
--- a/src/ol/renderer/webgl/webglmaprenderer.js
+++ b/src/ol/renderer/webgl/webglmaprenderer.js
@@ -1,7 +1,6 @@
 // FIXME check against gl.getParameter(webgl.MAX_TEXTURE_SIZE)
 
 goog.provide('ol.renderer.webgl.Map');
-goog.provide('ol.renderer.webgl.map.shader');
 
 goog.require('goog.array');
 goog.require('goog.debug.Logger');
@@ -18,15 +17,15 @@ goog.require('ol.Tile');
 goog.require('ol.layer.ImageLayer');
 goog.require('ol.layer.TileLayer');
 goog.require('ol.renderer.Map');
-goog.require('ol.renderer.webgl.FragmentShader');
 goog.require('ol.renderer.webgl.ImageLayer');
 goog.require('ol.renderer.webgl.TileLayer');
-goog.require('ol.renderer.webgl.VertexShader');
+goog.require('ol.renderer.webgl.map.shader');
 goog.require('ol.structs.Buffer');
 goog.require('ol.structs.IntegerSet');
 goog.require('ol.structs.LRUCache');
 goog.require('ol.webgl');
 goog.require('ol.webgl.WebGLContextEventType');
+goog.require('ol.webgl.shader');
 
 
 /**
@@ -50,64 +49,6 @@ ol.renderer.webgl.TextureCacheEntry;
 
 
 
-/**
- * @constructor
- * @extends {ol.renderer.webgl.FragmentShader}
- * @see https://svn.webkit.org/repository/webkit/trunk/Source/WebCore/platform/graphics/filters/skia/SkiaImageFilterBuilder.cpp
- */
-ol.renderer.webgl.map.shader.Fragment = function() {
-  goog.base(this, [
-    'precision mediump float;',
-    '',
-    'uniform mat4 u_colorMatrix;',
-    'uniform float u_opacity;',
-    'uniform sampler2D u_texture;',
-    '',
-    'varying vec2 v_texCoord;',
-    '',
-    'void main(void) {',
-    '',
-    '  vec4 texColor = texture2D(u_texture, v_texCoord);',
-    '  vec4 color = u_colorMatrix * vec4(texColor.rgb, 1.);',
-    '  color.a = texColor.a * u_opacity;',
-    '',
-    '  gl_FragColor = color;',
-    '',
-    '}'
-  ].join('\n'));
-};
-goog.inherits(
-    ol.renderer.webgl.map.shader.Fragment, ol.renderer.webgl.FragmentShader);
-goog.addSingletonGetter(ol.renderer.webgl.map.shader.Fragment);
-
-
-
-/**
- * @constructor
- * @extends {ol.renderer.webgl.VertexShader}
- */
-ol.renderer.webgl.map.shader.Vertex = function() {
-  goog.base(this, [
-    'attribute vec2 a_position;',
-    'attribute vec2 a_texCoord;',
-    '',
-    'uniform mat4 u_texCoordMatrix;',
-    'uniform mat4 u_projectionMatrix;',
-    '',
-    'varying vec2 v_texCoord;',
-    '',
-    'void main(void) {',
-    '  gl_Position = u_projectionMatrix * vec4(a_position, 0., 1.);',
-    '  v_texCoord = (u_texCoordMatrix * vec4(a_texCoord, 0., 1.)).st;',
-    '}'
-  ].join('\n'));
-};
-goog.inherits(
-    ol.renderer.webgl.map.shader.Vertex, ol.renderer.webgl.VertexShader);
-goog.addSingletonGetter(ol.renderer.webgl.map.shader.Vertex);
-
-
-
 /**
  * @constructor
  * @extends {ol.renderer.Map}
@@ -221,13 +162,13 @@ ol.renderer.webgl.Map = function(container, map) {
 
   /**
    * @private
-   * @type {ol.renderer.webgl.FragmentShader}
+   * @type {ol.webgl.shader.Fragment}
    */
   this.fragmentShader_ = ol.renderer.webgl.map.shader.Fragment.getInstance();
 
   /**
    * @private
-   * @type {ol.renderer.webgl.VertexShader}
+   * @type {ol.webgl.shader.Vertex}
    */
   this.vertexShader_ = ol.renderer.webgl.map.shader.Vertex.getInstance();
 
@@ -426,9 +367,8 @@ ol.renderer.webgl.Map.prototype.getGL = function() {
 
 
 /**
- * @param {ol.renderer.webgl.FragmentShader} fragmentShaderObject
- *     Fragment shader.
- * @param {ol.renderer.webgl.VertexShader} vertexShaderObject Vertex shader.
+ * @param {ol.webgl.shader.Fragment} fragmentShaderObject Fragment shader.
+ * @param {ol.webgl.shader.Vertex} vertexShaderObject Vertex shader.
  * @return {WebGLProgram} Program.
  */
 ol.renderer.webgl.Map.prototype.getProgram = function(
@@ -458,7 +398,7 @@ ol.renderer.webgl.Map.prototype.getProgram = function(
 
 
 /**
- * @param {ol.renderer.webgl.Shader} shaderObject Shader object.
+ * @param {ol.webgl.Shader} shaderObject Shader object.
  * @return {WebGLShader} Shader.
  */
 ol.renderer.webgl.Map.prototype.getShader = function(shaderObject) {
@@ -586,13 +526,20 @@ ol.renderer.webgl.Map.prototype.renderFrame = function(frameState) {
   gl.useProgram(program);
   if (goog.isNull(this.locations_)) {
     this.locations_ = {
-      a_position: gl.getAttribLocation(program, 'a_position'),
-      a_texCoord: gl.getAttribLocation(program, 'a_texCoord'),
-      u_colorMatrix: gl.getUniformLocation(program, 'u_colorMatrix'),
-      u_texCoordMatrix: gl.getUniformLocation(program, 'u_texCoordMatrix'),
-      u_projectionMatrix: gl.getUniformLocation(program, 'u_projectionMatrix'),
-      u_opacity: gl.getUniformLocation(program, 'u_opacity'),
-      u_texture: gl.getUniformLocation(program, 'u_texture')
+      a_position: gl.getAttribLocation(
+          program, ol.renderer.webgl.map.shader.attribute.a_position),
+      a_texCoord: gl.getAttribLocation(
+          program, ol.renderer.webgl.map.shader.attribute.a_texCoord),
+      u_colorMatrix: gl.getUniformLocation(
+          program, ol.renderer.webgl.map.shader.uniform.u_colorMatrix),
+      u_texCoordMatrix: gl.getUniformLocation(
+          program, ol.renderer.webgl.map.shader.uniform.u_texCoordMatrix),
+      u_projectionMatrix: gl.getUniformLocation(
+          program, ol.renderer.webgl.map.shader.uniform.u_projectionMatrix),
+      u_opacity: gl.getUniformLocation(
+          program, ol.renderer.webgl.map.shader.uniform.u_opacity),
+      u_texture: gl.getUniformLocation(
+          program, ol.renderer.webgl.map.shader.uniform.u_texture)
     };
   }
 
diff --git a/src/ol/renderer/webgl/webglmapshader.js b/src/ol/renderer/webgl/webglmapshader.js
new file mode 100644
index 0000000000..ff19c00ae5
--- /dev/null
+++ b/src/ol/renderer/webgl/webglmapshader.js
@@ -0,0 +1,105 @@
+// This file is automatically generated, do not edit
+goog.provide('ol.renderer.webgl.map.shader');
+goog.require('ol.webgl.shader');
+/**
+ * @constructor
+ * @extends {ol.webgl.shader.Fragment}
+ */
+ol.renderer.webgl.map.shader.Fragment = function() {
+  goog.base(this, ol.renderer.webgl.map.shader.Fragment.SOURCE);
+};
+goog.inherits(ol.renderer.webgl.map.shader.Fragment, ol.webgl.shader.Fragment);
+goog.addSingletonGetter(ol.renderer.webgl.map.shader.Fragment);
+/**
+ * @const
+ * @type {string}
+ */
+ol.renderer.webgl.map.shader.Fragment.DEBUG_SOURCE = 'precision mediump float;\n//! NAMESPACE=ol.renderer.webgl.map\n\n\n//! COMMON\nvarying vec2 v_texCoord;\n\n\n//! FRAGMENT\n// @see https://svn.webkit.org/repository/webkit/trunk/Source/WebCore/platform/graphics/filters/skia/SkiaImageFilterBuilder.cpp\nuniform mat4 u_colorMatrix;\nuniform float u_opacity;\nuniform sampler2D u_texture;\n\nvoid main(void) {\n  vec4 texColor = texture2D(u_texture, v_texCoord);\n  gl_FragColor.rgb = (u_colorMatrix * vec4(texColor.rgb, 1.)).rgb;\n  gl_FragColor.a = texColor.a * u_opacity;\n}\n\n';
+/**
+ * @const
+ * @type {string}
+ */
+ol.renderer.webgl.map.shader.Fragment.OPTIMIZED_SOURCE = 'precision mediump float;varying vec2 a;uniform mat4 d;uniform float e;uniform sampler2D f;void main(){vec4 g=texture2D(f,a);gl_FragColor.rgb=(d*vec4(g.rgb,1)).rgb;gl_FragColor.a=g.a*e;}';
+/**
+ * @const
+ * @type {string}
+ */
+ol.renderer.webgl.map.shader.Fragment.SOURCE = goog.DEBUG ?
+    ol.renderer.webgl.map.shader.Fragment.DEBUG_SOURCE :
+    ol.renderer.webgl.map.shader.Fragment.OPTIMIZED_SOURCE;
+/**
+ * @constructor
+ * @extends {ol.webgl.shader.Vertex}
+ */
+ol.renderer.webgl.map.shader.Vertex = function() {
+  goog.base(this, ol.renderer.webgl.map.shader.Vertex.SOURCE);
+};
+goog.inherits(ol.renderer.webgl.map.shader.Vertex, ol.webgl.shader.Vertex);
+goog.addSingletonGetter(ol.renderer.webgl.map.shader.Vertex);
+/**
+ * @const
+ * @type {string}
+ */
+ol.renderer.webgl.map.shader.Vertex.DEBUG_SOURCE = '//! NAMESPACE=ol.renderer.webgl.map\n\n\n//! COMMON\nvarying vec2 v_texCoord;\n\n\n//! VERTEX\nattribute vec2 a_position;\nattribute vec2 a_texCoord;\n\nuniform mat4 u_texCoordMatrix;\nuniform mat4 u_projectionMatrix;\n\nvoid main(void) {\n  gl_Position = u_projectionMatrix * vec4(a_position, 0., 1.);\n  v_texCoord = (u_texCoordMatrix * vec4(a_texCoord, 0., 1.)).st;\n}\n\n\n';
+/**
+ * @const
+ * @type {string}
+ */
+ol.renderer.webgl.map.shader.Vertex.OPTIMIZED_SOURCE = 'varying vec2 a;attribute vec2 d,e;uniform mat4 b,c;void main(){gl_Position=c*vec4(d,0,1);a=(b*vec4(e,0,1)).st;}';
+/**
+ * @const
+ * @type {string}
+ */
+ol.renderer.webgl.map.shader.Vertex.SOURCE = goog.DEBUG ?
+    ol.renderer.webgl.map.shader.Vertex.DEBUG_SOURCE :
+    ol.renderer.webgl.map.shader.Vertex.OPTIMIZED_SOURCE;
+/**
+ * @constructor
+ */
+ol.renderer.webgl.map.shader.uniform = function() {};
+/**
+ * @const
+ * @type {string}
+ */
+ol.renderer.webgl.map.shader.uniform.u_texCoordMatrix =
+    goog.DEBUG ? 'u_texCoordMatrix' : 'b';
+/**
+ * @const
+ * @type {string}
+ */
+ol.renderer.webgl.map.shader.uniform.u_projectionMatrix =
+    goog.DEBUG ? 'u_projectionMatrix' : 'c';
+/**
+ * @const
+ * @type {string}
+ */
+ol.renderer.webgl.map.shader.uniform.u_colorMatrix =
+    goog.DEBUG ? 'u_colorMatrix' : 'd';
+/**
+ * @const
+ * @type {string}
+ */
+ol.renderer.webgl.map.shader.uniform.u_opacity =
+    goog.DEBUG ? 'u_opacity' : 'e';
+/**
+ * @const
+ * @type {string}
+ */
+ol.renderer.webgl.map.shader.uniform.u_texture =
+    goog.DEBUG ? 'u_texture' : 'f';
+/**
+ * @constructor
+ */
+ol.renderer.webgl.map.shader.attribute = function() {};
+/**
+ * @const
+ * @type {string}
+ */
+ol.renderer.webgl.map.shader.attribute.a_position =
+    goog.DEBUG ? 'a_position' : 'd';
+/**
+ * @const
+ * @type {string}
+ */
+ol.renderer.webgl.map.shader.attribute.a_texCoord =
+    goog.DEBUG ? 'a_texCoord' : 'e';
diff --git a/src/ol/renderer/webgl/webgltilelayer.glsl b/src/ol/renderer/webgl/webgltilelayer.glsl
new file mode 100644
index 0000000000..4424dd2085
--- /dev/null
+++ b/src/ol/renderer/webgl/webgltilelayer.glsl
@@ -0,0 +1,24 @@
+//! NAMESPACE=ol.renderer.webgl.tilelayer
+
+
+//! COMMON
+varying vec2 v_texCoord;
+
+
+//! VERTEX
+attribute vec2 a_position;
+attribute vec2 a_texCoord;
+uniform vec4 u_tileOffset;
+
+void main(void) {
+  gl_Position = vec4(a_position * u_tileOffset.xy + u_tileOffset.zw, 0., 1.);
+  v_texCoord = a_texCoord;
+}
+
+
+//! FRAGMENT
+uniform sampler2D u_texture;
+
+void main(void) {
+  gl_FragColor = texture2D(u_texture, v_texCoord);
+}
diff --git a/src/ol/renderer/webgl/webgltilelayerrenderer.js b/src/ol/renderer/webgl/webgltilelayerrenderer.js
index c9b0f69bfb..2ed3e595cd 100644
--- a/src/ol/renderer/webgl/webgltilelayerrenderer.js
+++ b/src/ol/renderer/webgl/webgltilelayerrenderer.js
@@ -2,7 +2,6 @@
 // FIXME animated shaders! check in redraw
 
 goog.provide('ol.renderer.webgl.TileLayer');
-goog.provide('ol.renderer.webgl.tilelayer.shader');
 
 goog.require('goog.array');
 goog.require('goog.object');
@@ -18,65 +17,12 @@ goog.require('ol.TileRange');
 goog.require('ol.TileState');
 goog.require('ol.layer.TileLayer');
 goog.require('ol.math');
-goog.require('ol.renderer.webgl.FragmentShader');
 goog.require('ol.renderer.webgl.Layer');
-goog.require('ol.renderer.webgl.VertexShader');
+goog.require('ol.renderer.webgl.tilelayer.shader');
 goog.require('ol.structs.Buffer');
 
 
 
-/**
- * @constructor
- * @extends {ol.renderer.webgl.FragmentShader}
- */
-ol.renderer.webgl.tilelayer.shader.Fragment = function() {
-  goog.base(this, [
-    'precision mediump float;',
-    '',
-    'uniform sampler2D u_texture;',
-    '',
-    'varying vec2 v_texCoord;',
-    '',
-    'void main(void) {',
-    ' gl_FragColor = texture2D(u_texture, v_texCoord);',
-    '}'
-  ].join('\n'));
-};
-goog.inherits(
-    ol.renderer.webgl.tilelayer.shader.Fragment,
-    ol.renderer.webgl.FragmentShader);
-goog.addSingletonGetter(ol.renderer.webgl.tilelayer.shader.Fragment);
-
-
-
-/**
- * @constructor
- * @extends {ol.renderer.webgl.VertexShader}
- */
-ol.renderer.webgl.tilelayer.shader.Vertex = function() {
-  goog.base(this, [
-    'attribute vec2 a_position;',
-    'attribute vec2 a_texCoord;',
-    '',
-    'varying vec2 v_texCoord;',
-    '',
-    'uniform vec4 u_tileOffset;',
-    '',
-    'void main(void) {',
-    '  gl_Position.xy = a_position * u_tileOffset.xy + u_tileOffset.zw;',
-    '  gl_Position.z = 0.;',
-    '  gl_Position.w = 1.;',
-    '  v_texCoord = a_texCoord;',
-    '}'
-  ].join('\n'));
-};
-goog.inherits(
-    ol.renderer.webgl.tilelayer.shader.Vertex,
-    ol.renderer.webgl.VertexShader);
-goog.addSingletonGetter(ol.renderer.webgl.tilelayer.shader.Vertex);
-
-
-
 /**
  * @constructor
  * @extends {ol.renderer.webgl.Layer}
@@ -89,14 +35,14 @@ ol.renderer.webgl.TileLayer = function(mapRenderer, tileLayer) {
 
   /**
    * @private
-   * @type {ol.renderer.webgl.FragmentShader}
+   * @type {ol.webgl.shader.Fragment}
    */
   this.fragmentShader_ =
       ol.renderer.webgl.tilelayer.shader.Fragment.getInstance();
 
   /**
    * @private
-   * @type {ol.renderer.webgl.VertexShader}
+   * @type {ol.webgl.shader.Vertex}
    */
   this.vertexShader_ = ol.renderer.webgl.tilelayer.shader.Vertex.getInstance();
 
@@ -232,10 +178,14 @@ ol.renderer.webgl.TileLayer.prototype.renderFrame =
     gl.useProgram(program);
     if (goog.isNull(this.locations_)) {
       this.locations_ = {
-        a_position: gl.getAttribLocation(program, 'a_position'),
-        a_texCoord: gl.getAttribLocation(program, 'a_texCoord'),
-        u_tileOffset: gl.getUniformLocation(program, 'u_tileOffset'),
-        u_texture: gl.getUniformLocation(program, 'u_texture')
+        a_position: gl.getAttribLocation(
+            program, ol.renderer.webgl.tilelayer.shader.attribute.a_position),
+        a_texCoord: gl.getAttribLocation(
+            program, ol.renderer.webgl.tilelayer.shader.attribute.a_texCoord),
+        u_tileOffset: gl.getUniformLocation(
+            program, ol.renderer.webgl.tilelayer.shader.uniform.u_tileOffset),
+        u_texture: gl.getUniformLocation(
+            program, ol.renderer.webgl.tilelayer.shader.uniform.u_texture)
       };
     }
 
diff --git a/src/ol/renderer/webgl/webgltilelayershader.js b/src/ol/renderer/webgl/webgltilelayershader.js
new file mode 100644
index 0000000000..3b577cd491
--- /dev/null
+++ b/src/ol/renderer/webgl/webgltilelayershader.js
@@ -0,0 +1,87 @@
+// This file is automatically generated, do not edit
+goog.provide('ol.renderer.webgl.tilelayer.shader');
+goog.require('ol.webgl.shader');
+/**
+ * @constructor
+ * @extends {ol.webgl.shader.Fragment}
+ */
+ol.renderer.webgl.tilelayer.shader.Fragment = function() {
+  goog.base(this, ol.renderer.webgl.tilelayer.shader.Fragment.SOURCE);
+};
+goog.inherits(ol.renderer.webgl.tilelayer.shader.Fragment, ol.webgl.shader.Fragment);
+goog.addSingletonGetter(ol.renderer.webgl.tilelayer.shader.Fragment);
+/**
+ * @const
+ * @type {string}
+ */
+ol.renderer.webgl.tilelayer.shader.Fragment.DEBUG_SOURCE = 'precision mediump float;\n//! NAMESPACE=ol.renderer.webgl.tilelayer\n\n\n//! COMMON\nvarying vec2 v_texCoord;\n\n\n//! FRAGMENT\nuniform sampler2D u_texture;\n\nvoid main(void) {\n  gl_FragColor = texture2D(u_texture, v_texCoord);\n}\n\n';
+/**
+ * @const
+ * @type {string}
+ */
+ol.renderer.webgl.tilelayer.shader.Fragment.OPTIMIZED_SOURCE = 'precision mediump float;varying vec2 a;uniform sampler2D c;void main(){gl_FragColor=texture2D(c,a);}';
+/**
+ * @const
+ * @type {string}
+ */
+ol.renderer.webgl.tilelayer.shader.Fragment.SOURCE = goog.DEBUG ?
+    ol.renderer.webgl.tilelayer.shader.Fragment.DEBUG_SOURCE :
+    ol.renderer.webgl.tilelayer.shader.Fragment.OPTIMIZED_SOURCE;
+/**
+ * @constructor
+ * @extends {ol.webgl.shader.Vertex}
+ */
+ol.renderer.webgl.tilelayer.shader.Vertex = function() {
+  goog.base(this, ol.renderer.webgl.tilelayer.shader.Vertex.SOURCE);
+};
+goog.inherits(ol.renderer.webgl.tilelayer.shader.Vertex, ol.webgl.shader.Vertex);
+goog.addSingletonGetter(ol.renderer.webgl.tilelayer.shader.Vertex);
+/**
+ * @const
+ * @type {string}
+ */
+ol.renderer.webgl.tilelayer.shader.Vertex.DEBUG_SOURCE = '//! NAMESPACE=ol.renderer.webgl.tilelayer\n\n\n//! COMMON\nvarying vec2 v_texCoord;\n\n\n//! VERTEX\nattribute vec2 a_position;\nattribute vec2 a_texCoord;\nuniform vec4 u_tileOffset;\n\nvoid main(void) {\n  gl_Position = vec4(a_position * u_tileOffset.xy + u_tileOffset.zw, 0., 1.);\n  v_texCoord = a_texCoord;\n}\n\n\n';
+/**
+ * @const
+ * @type {string}
+ */
+ol.renderer.webgl.tilelayer.shader.Vertex.OPTIMIZED_SOURCE = 'varying vec2 a;attribute vec2 c,d;uniform vec4 b;void main(){gl_Position=vec4(c*b.xy+b.zw,0,1);a=d;}';
+/**
+ * @const
+ * @type {string}
+ */
+ol.renderer.webgl.tilelayer.shader.Vertex.SOURCE = goog.DEBUG ?
+    ol.renderer.webgl.tilelayer.shader.Vertex.DEBUG_SOURCE :
+    ol.renderer.webgl.tilelayer.shader.Vertex.OPTIMIZED_SOURCE;
+/**
+ * @constructor
+ */
+ol.renderer.webgl.tilelayer.shader.uniform = function() {};
+/**
+ * @const
+ * @type {string}
+ */
+ol.renderer.webgl.tilelayer.shader.uniform.u_tileOffset =
+    goog.DEBUG ? 'u_tileOffset' : 'b';
+/**
+ * @const
+ * @type {string}
+ */
+ol.renderer.webgl.tilelayer.shader.uniform.u_texture =
+    goog.DEBUG ? 'u_texture' : 'c';
+/**
+ * @constructor
+ */
+ol.renderer.webgl.tilelayer.shader.attribute = function() {};
+/**
+ * @const
+ * @type {string}
+ */
+ol.renderer.webgl.tilelayer.shader.attribute.a_position =
+    goog.DEBUG ? 'a_position' : 'c';
+/**
+ * @const
+ * @type {string}
+ */
+ol.renderer.webgl.tilelayer.shader.attribute.a_texCoord =
+    goog.DEBUG ? 'a_texCoord' : 'd';
diff --git a/src/ol/webgl/shader.js b/src/ol/webgl/shader.js
new file mode 100644
index 0000000000..a06fd5c401
--- /dev/null
+++ b/src/ol/webgl/shader.js
@@ -0,0 +1,81 @@
+goog.provide('ol.webgl.shader');
+
+goog.require('goog.functions');
+goog.require('goog.webgl');
+goog.require('ol.webgl');
+
+
+
+/**
+ * @constructor
+ * @param {string} source Source.
+ */
+ol.webgl.Shader = function(source) {
+
+  /**
+   * @private
+   * @type {string}
+   */
+  this.source_ = source;
+
+};
+
+
+/**
+ * @return {number} Type.
+ */
+ol.webgl.Shader.prototype.getType = goog.abstractMethod;
+
+
+/**
+ * @return {string} Source.
+ */
+ol.webgl.Shader.prototype.getSource = function() {
+  return this.source_;
+};
+
+
+/**
+ * @return {boolean} Is animated?
+ */
+ol.webgl.Shader.prototype.isAnimated = goog.functions.FALSE;
+
+
+
+/**
+ * @constructor
+ * @extends {ol.webgl.Shader}
+ * @param {string} source Source.
+ */
+ol.webgl.shader.Fragment = function(source) {
+  goog.base(this, source);
+};
+goog.inherits(ol.webgl.shader.Fragment, ol.webgl.Shader);
+
+
+/**
+ * @inheritDoc
+ */
+ol.webgl.shader.Fragment.prototype.getType = function() {
+  return goog.webgl.FRAGMENT_SHADER;
+};
+
+
+
+/**
+ * @constructor
+ * @extends {ol.webgl.Shader}
+ * @param {string} source Source.
+ */
+ol.webgl.shader.Vertex = function(source) {
+  goog.base(this, source);
+};
+goog.inherits(ol.webgl.shader.Vertex, ol.webgl.Shader);
+
+
+/**
+ * @inheritDoc
+ */
+ol.webgl.shader.Vertex.prototype.getType = function() {
+  return goog.webgl.VERTEX_SHADER;
+};
diff --git a/src/ol/webgl/shader.mustache b/src/ol/webgl/shader.mustache
new file mode 100644
index 0000000000..d2ad5ff367
--- /dev/null
+++ b/src/ol/webgl/shader.mustache
@@ -0,0 +1,106 @@
+// This file is automatically generated, do not edit
+goog.provide('{{namespace}}.shader');
+
+goog.require('ol.webgl.shader');
+
+
+
+/**
+ * @constructor
+ * @extends {ol.webgl.shader.Fragment}
+ */
+{{namespace}}.shader.Fragment = function() {
+  goog.base(this, {{namespace}}.shader.Fragment.SOURCE);
+};
+goog.inherits({{namespace}}.shader.Fragment, ol.webgl.shader.Fragment);
+goog.addSingletonGetter({{namespace}}.shader.Fragment);
+
+
+/**
+ * @const
+ * @type {string}
+ */
+{{namespace}}.shader.Fragment.DEBUG_SOURCE = 'precision mediump float;\n{{getOriginalFragmentSource}}';
+
+
+/**
+ * @const
+ * @type {string}
+ */
+{{namespace}}.shader.Fragment.OPTIMIZED_SOURCE = 'precision mediump float;{{getFragmentSource}}';
+
+
+/**
+ * @const
+ * @type {string}
+ */
+{{namespace}}.shader.Fragment.SOURCE = goog.DEBUG ?
+    {{namespace}}.shader.Fragment.DEBUG_SOURCE :
+    {{namespace}}.shader.Fragment.OPTIMIZED_SOURCE;
+
+
+
+/**
+ * @constructor
+ * @extends {ol.webgl.shader.Vertex}
+ */
+{{namespace}}.shader.Vertex = function() {
+  goog.base(this, {{namespace}}.shader.Vertex.SOURCE);
+};
+goog.inherits({{namespace}}.shader.Vertex, ol.webgl.shader.Vertex);
+goog.addSingletonGetter({{namespace}}.shader.Vertex);
+
+
+/**
+ * @const
+ * @type {string}
+ */
+{{namespace}}.shader.Vertex.DEBUG_SOURCE = '{{getOriginalVertexSource}}';
+
+
+/**
+ * @const
+ * @type {string}
+ */
+{{namespace}}.shader.Vertex.OPTIMIZED_SOURCE = '{{getVertexSource}}';
+
+
+/**
+ * @const
+ * @type {string}
+ */
+{{namespace}}.shader.Vertex.SOURCE = goog.DEBUG ?
+    {{namespace}}.shader.Vertex.DEBUG_SOURCE :
+    {{namespace}}.shader.Vertex.OPTIMIZED_SOURCE;
+
+
+/**
+ * @constructor
+ */
+{{namespace}}.shader.uniform = function() {};
+{{#getUniforms}}
+
+
+/**
+ * @const
+ * @type {string}
+ */
+{{namespace}}.shader.uniform.{{originalName}} =
+    goog.DEBUG ? '{{originalName}}' : '{{shortName}}';
+{{/getUniforms}}
+
+
+/**
+ * @constructor
+ */
+{{namespace}}.shader.attribute = function() {};
+{{#getAttributes}}
+
+
+/**
+ * @const
+ * @type {string}
+ */
+{{namespace}}.shader.attribute.{{originalName}} =
+    goog.DEBUG ? '{{originalName}}' : '{{shortName}}';
+{{/getAttributes}}
diff --git a/test/spec/ol/map.test.js b/test/spec/ol/map.test.js
index e1d4ab9b90..e982c3390a 100644
--- a/test/spec/ol/map.test.js
+++ b/test/spec/ol/map.test.js
@@ -214,7 +214,7 @@ describe('ol.Map', function() {
         expect(loc.x).to.eql(destination.x);
         expect(loc.y).to.eql(destination.y);
         done();
-      }, duration + goog.async.AnimationDelay.TIMEOUT);
+      }, duration + 2 * goog.async.AnimationDelay.TIMEOUT);
 
     });