Use glsl-unit in WebGL tile layer renderer

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);
+}

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}
@@ -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_position: gl.getAttribLocation(
-        a_texCoord: gl.getAttribLocation(program, 'a_texCoord'),
+            program, ol.renderer.webgl.tilelayer.shader.attribute.a_position),
-        u_tileOffset: gl.getUniformLocation(program, 'u_tileOffset'),
+        a_texCoord: gl.getAttribLocation(
-        u_texture: gl.getUniformLocation(program, 'u_texture')
+            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)
       };
     }
 

src/ol/renderer/webgl/webgltilelayershader.js

@@ -0,0 +1,87 @@
+goog.provide('ol.renderer.webgl.tilelayer.shader');
+goog.require('ol.renderer.webgl.FragmentShader');
+goog.require('ol.renderer.webgl.VertexShader');
+/**
+ * @constructor
+ * @extends {ol.renderer.webgl.FragmentShader}
+ */
+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.renderer.webgl.FragmentShader);
+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.renderer.webgl.VertexShader}
+ */
+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.renderer.webgl.VertexShader);
+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';