diff --git a/Makefile b/Makefile
index 4b6a442712..6608d92031 100644
--- a/Makefile
+++ b/Makefile
@@ -1,6 +1,6 @@
 SRC_GLSL := $(shell find src -type f -name '*.glsl')
 SRC_SHADER_JS := $(patsubst %shader.glsl,%shader.js,$(SRC_GLSL))
-SRC_SHADERLOCATIONS_JS := $(patsubst %shader.glsl,%shader/locations.js,$(SRC_GLSL))
+SRC_SHADERLOCATIONS_JS := $(patsubst %shader.glsl,%shader/Locations.js,$(SRC_GLSL))
 
 .PHONY: shaders
 shaders: $(SRC_SHADER_JS) $(SRC_SHADERLOCATIONS_JS)
diff --git a/src/ol/render/webgl/CircleReplay.js b/src/ol/render/webgl/CircleReplay.js
index 9ef8ce8e98..3da343af9a 100644
--- a/src/ol/render/webgl/CircleReplay.js
+++ b/src/ol/render/webgl/CircleReplay.js
@@ -7,8 +7,8 @@ import {asArray} from '../../color.js';
 import {intersects} from '../../extent.js';
 import {isEmpty} from '../../obj.js';
 import _ol_geom_flat_transform_ from '../../geom/flat/transform.js';
-import _ol_render_webgl_circlereplay_defaultshader_ from '../webgl/circlereplay/defaultshader.js';
-import _ol_render_webgl_circlereplay_defaultshader_Locations_ from '../webgl/circlereplay/defaultshader/Locations.js';
+import {fragment, vertex} from '../webgl/circlereplay/defaultshader.js';
+import Locations from '../webgl/circlereplay/defaultshader/Locations.js';
 import WebGLReplay from '../webgl/Replay.js';
 import _ol_render_webgl_ from '../webgl.js';
 import _ol_webgl_ from '../../webgl.js';
@@ -196,14 +196,12 @@ WebGLCircleReplay.prototype.getDeleteResourcesFunction = function(context) {
  */
 WebGLCircleReplay.prototype.setUpProgram = function(gl, context, size, pixelRatio) {
   // get the program
-  const fragmentShader = _ol_render_webgl_circlereplay_defaultshader_.fragment;
-  const vertexShader = _ol_render_webgl_circlereplay_defaultshader_.vertex;
-  const program = context.getProgram(fragmentShader, vertexShader);
+  const program = context.getProgram(fragment, vertex);
 
   // get the locations
   let locations;
   if (!this.defaultLocations_) {
-    locations = new _ol_render_webgl_circlereplay_defaultshader_Locations_(gl, program);
+    locations = new Locations(gl, program);
     this.defaultLocations_ = locations;
   } else {
     locations = this.defaultLocations_;
diff --git a/src/ol/render/webgl/LineStringReplay.js b/src/ol/render/webgl/LineStringReplay.js
index 2c82962e2c..1e0eb18d7f 100644
--- a/src/ol/render/webgl/LineStringReplay.js
+++ b/src/ol/render/webgl/LineStringReplay.js
@@ -11,8 +11,8 @@ import {lineStringIsClosed} from '../../geom/flat/topology.js';
 import {isEmpty} from '../../obj.js';
 import _ol_render_webgl_ from '../webgl.js';
 import WebGLReplay from '../webgl/Replay.js';
-import _ol_render_webgl_linestringreplay_defaultshader_ from '../webgl/linestringreplay/defaultshader.js';
-import _ol_render_webgl_linestringreplay_defaultshader_Locations_ from '../webgl/linestringreplay/defaultshader/Locations.js';
+import {fragment, vertex} from '../webgl/linestringreplay/defaultshader.js';
+import Locations from '../webgl/linestringreplay/defaultshader/Locations.js';
 import _ol_webgl_ from '../../webgl.js';
 import WebGLBuffer from '../../webgl/Buffer.js';
 
@@ -439,14 +439,12 @@ WebGLLineStringReplay.prototype.getDeleteResourcesFunction = function(context) {
  */
 WebGLLineStringReplay.prototype.setUpProgram = function(gl, context, size, pixelRatio) {
   // get the program
-  const fragmentShader = _ol_render_webgl_linestringreplay_defaultshader_.fragment;
-  const vertexShader = _ol_render_webgl_linestringreplay_defaultshader_.vertex;
-  const program = context.getProgram(fragmentShader, vertexShader);
+  const program = context.getProgram(fragment, vertex);
 
   // get the locations
   let locations;
   if (!this.defaultLocations_) {
-    locations = new _ol_render_webgl_linestringreplay_defaultshader_Locations_(gl, program);
+    locations = new Locations(gl, program);
     this.defaultLocations_ = locations;
   } else {
     locations = this.defaultLocations_;
diff --git a/src/ol/render/webgl/PolygonReplay.js b/src/ol/render/webgl/PolygonReplay.js
index df776b8525..75b9fc747a 100644
--- a/src/ol/render/webgl/PolygonReplay.js
+++ b/src/ol/render/webgl/PolygonReplay.js
@@ -9,8 +9,8 @@ import {isEmpty} from '../../obj.js';
 import {linearRingContainsXY} from '../../geom/flat/contains.js';
 import _ol_geom_flat_orient_ from '../../geom/flat/orient.js';
 import _ol_geom_flat_transform_ from '../../geom/flat/transform.js';
-import _ol_render_webgl_polygonreplay_defaultshader_ from '../webgl/polygonreplay/defaultshader.js';
-import _ol_render_webgl_polygonreplay_defaultshader_Locations_ from '../webgl/polygonreplay/defaultshader/Locations.js';
+import {fragment, vertex} from '../webgl/polygonreplay/defaultshader.js';
+import Locations from '../webgl/polygonreplay/defaultshader/Locations.js';
 import WebGLLineStringReplay from '../webgl/LineStringReplay.js';
 import WebGLReplay from '../webgl/Replay.js';
 import _ol_render_webgl_ from '../webgl.js';
@@ -873,14 +873,12 @@ WebGLPolygonReplay.prototype.getDeleteResourcesFunction = function(context) {
  */
 WebGLPolygonReplay.prototype.setUpProgram = function(gl, context, size, pixelRatio) {
   // get the program
-  const fragmentShader = _ol_render_webgl_polygonreplay_defaultshader_.fragment;
-  const vertexShader = _ol_render_webgl_polygonreplay_defaultshader_.vertex;
-  const program = context.getProgram(fragmentShader, vertexShader);
+  const program = context.getProgram(fragment, vertex);
 
   // get the locations
   let locations;
   if (!this.defaultLocations_) {
-    locations = new _ol_render_webgl_polygonreplay_defaultshader_Locations_(gl, program);
+    locations = new Locations(gl, program);
     this.defaultLocations_ = locations;
   } else {
     locations = this.defaultLocations_;
diff --git a/src/ol/render/webgl/TextureReplay.js b/src/ol/render/webgl/TextureReplay.js
index c84d54b622..daa40fbe0c 100644
--- a/src/ol/render/webgl/TextureReplay.js
+++ b/src/ol/render/webgl/TextureReplay.js
@@ -4,8 +4,8 @@
 import {getUid, inherits} from '../../index.js';
 import {intersects} from '../../extent.js';
 import {isEmpty} from '../../obj.js';
-import _ol_render_webgl_texturereplay_defaultshader_ from '../webgl/texturereplay/defaultshader.js';
-import _ol_render_webgl_texturereplay_defaultshader_Locations_ from '../webgl/texturereplay/defaultshader/Locations.js';
+import {fragment, vertex} from '../webgl/texturereplay/defaultshader.js';
+import Locations from '../webgl/texturereplay/defaultshader/Locations.js';
 import WebGLReplay from '../webgl/Replay.js';
 import _ol_webgl_ from '../../webgl.js';
 import WebGLContext from '../../webgl/Context.js';
@@ -271,14 +271,12 @@ WebGLTextureReplay.prototype.createTextures = function(textures, images, texture
  */
 WebGLTextureReplay.prototype.setUpProgram = function(gl, context, size, pixelRatio) {
   // get the program
-  const fragmentShader = _ol_render_webgl_texturereplay_defaultshader_.fragment;
-  const vertexShader = _ol_render_webgl_texturereplay_defaultshader_.vertex;
-  const program = context.getProgram(fragmentShader, vertexShader);
+  const program = context.getProgram(fragment, vertex);
 
   // get the locations
   let locations;
   if (!this.defaultLocations) {
-    locations = new _ol_render_webgl_texturereplay_defaultshader_Locations_(gl, program);
+    locations = new Locations(gl, program);
     this.defaultLocations = locations;
   } else {
     locations = this.defaultLocations;
diff --git a/src/ol/render/webgl/circlereplay/defaultshader.glsl b/src/ol/render/webgl/circlereplay/defaultshader.glsl
index c68cceb08f..c8dc0a2aea 100644
--- a/src/ol/render/webgl/circlereplay/defaultshader.glsl
+++ b/src/ol/render/webgl/circlereplay/defaultshader.glsl
@@ -1,4 +1,4 @@
-//! NAMESPACE=_ol_render_webgl_circlereplay_defaultshader_
+//! MODULE=ol/render/webgl/circlereplay/defaultshader
 
 
 //! COMMON
diff --git a/src/ol/render/webgl/circlereplay/defaultshader.js b/src/ol/render/webgl/circlereplay/defaultshader.js
index 97962c7221..07395189e4 100644
--- a/src/ol/render/webgl/circlereplay/defaultshader.js
+++ b/src/ol/render/webgl/circlereplay/defaultshader.js
@@ -1,17 +1,17 @@
+/**
+ * @module ol/render/webgl/circlereplay/defaultshader
+ */
 // This file is automatically generated, do not edit.
 // Run `make shaders` to generate, and commit the result.
 
 import {DEBUG_WEBGL} from '../../../index.js';
-import _ol_webgl_Fragment_ from '../../../webgl/Fragment.js';
-import _ol_webgl_Vertex_ from '../../../webgl/Vertex.js';
-const _ol_render_webgl_circlereplay_defaultshader_ = {};
+import WebGLFragment from '../../../webgl/Fragment.js';
+import WebGLVertex from '../../../webgl/Vertex.js';
 
-_ol_render_webgl_circlereplay_defaultshader_.fragment = new _ol_webgl_Fragment_(DEBUG_WEBGL ?
+export const fragment = new WebGLFragment(DEBUG_WEBGL ?
   'precision mediump float;\nvarying vec2 v_center;\nvarying vec2 v_offset;\nvarying float v_halfWidth;\nvarying float v_pixelRatio;\n\n\n\nuniform float u_opacity;\nuniform vec4 u_fillColor;\nuniform vec4 u_strokeColor;\nuniform vec2 u_size;\n\nvoid main(void) {\n  vec2 windowCenter = vec2((v_center.x + 1.0) / 2.0 * u_size.x * v_pixelRatio,\n      (v_center.y + 1.0) / 2.0 * u_size.y * v_pixelRatio);\n  vec2 windowOffset = vec2((v_offset.x + 1.0) / 2.0 * u_size.x * v_pixelRatio,\n      (v_offset.y + 1.0) / 2.0 * u_size.y * v_pixelRatio);\n  float radius = length(windowCenter - windowOffset);\n  float dist = length(windowCenter - gl_FragCoord.xy);\n  if (dist > radius + v_halfWidth) {\n    if (u_strokeColor.a == 0.0) {\n      gl_FragColor = u_fillColor;\n    } else {\n      gl_FragColor = u_strokeColor;\n    }\n    gl_FragColor.a = gl_FragColor.a - (dist - (radius + v_halfWidth));\n  } else if (u_fillColor.a == 0.0) {\n    // Hooray, no fill, just stroke. We can use real antialiasing.\n    gl_FragColor = u_strokeColor;\n    if (dist < radius - v_halfWidth) {\n      gl_FragColor.a = gl_FragColor.a - (radius - v_halfWidth - dist);\n    }\n  } else {\n    gl_FragColor = u_fillColor;\n    float strokeDist = radius - v_halfWidth;\n    float antialias = 2.0 * v_pixelRatio;\n    if (dist > strokeDist) {\n      gl_FragColor = u_strokeColor;\n    } else if (dist >= strokeDist - antialias) {\n      float step = smoothstep(strokeDist - antialias, strokeDist, dist);\n      gl_FragColor = mix(u_fillColor, u_strokeColor, step);\n    }\n  }\n  gl_FragColor.a = gl_FragColor.a * u_opacity;\n  if (gl_FragColor.a <= 0.0) {\n    discard;\n  }\n}\n' :
   'precision mediump float;varying vec2 a;varying vec2 b;varying float c;varying float d;uniform float m;uniform vec4 n;uniform vec4 o;uniform vec2 p;void main(void){vec2 windowCenter=vec2((a.x+1.0)/2.0*p.x*d,(a.y+1.0)/2.0*p.y*d);vec2 windowOffset=vec2((b.x+1.0)/2.0*p.x*d,(b.y+1.0)/2.0*p.y*d);float radius=length(windowCenter-windowOffset);float dist=length(windowCenter-gl_FragCoord.xy);if(dist>radius+c){if(o.a==0.0){gl_FragColor=n;}else{gl_FragColor=o;}gl_FragColor.a=gl_FragColor.a-(dist-(radius+c));}else if(n.a==0.0){gl_FragColor=o;if(dist<radius-c){gl_FragColor.a=gl_FragColor.a-(radius-c-dist);}} else{gl_FragColor=n;float strokeDist=radius-c;float antialias=2.0*d;if(dist>strokeDist){gl_FragColor=o;}else if(dist>=strokeDist-antialias){float step=smoothstep(strokeDist-antialias,strokeDist,dist);gl_FragColor=mix(n,o,step);}} gl_FragColor.a=gl_FragColor.a*m;if(gl_FragColor.a<=0.0){discard;}}');
 
-_ol_render_webgl_circlereplay_defaultshader_.vertex = new _ol_webgl_Vertex_(DEBUG_WEBGL ?
+export const vertex = new WebGLVertex(DEBUG_WEBGL ?
   'varying vec2 v_center;\nvarying vec2 v_offset;\nvarying float v_halfWidth;\nvarying float v_pixelRatio;\n\n\nattribute vec2 a_position;\nattribute float a_instruction;\nattribute float a_radius;\n\nuniform mat4 u_projectionMatrix;\nuniform mat4 u_offsetScaleMatrix;\nuniform mat4 u_offsetRotateMatrix;\nuniform float u_lineWidth;\nuniform float u_pixelRatio;\n\nvoid main(void) {\n  mat4 offsetMatrix = u_offsetScaleMatrix * u_offsetRotateMatrix;\n  v_center = vec4(u_projectionMatrix * vec4(a_position, 0.0, 1.0)).xy;\n  v_pixelRatio = u_pixelRatio;\n  float lineWidth = u_lineWidth * u_pixelRatio;\n  v_halfWidth = lineWidth / 2.0;\n  if (lineWidth == 0.0) {\n    lineWidth = 2.0 * u_pixelRatio;\n  }\n  vec2 offset;\n  // Radius with anitaliasing (roughly).\n  float radius = a_radius + 3.0 * u_pixelRatio;\n  // Until we get gl_VertexID in WebGL, we store an instruction.\n  if (a_instruction == 0.0) {\n    // Offsetting the edges of the triangle by lineWidth / 2 is necessary, however\n    // we should also leave some space for the antialiasing, thus we offset by lineWidth.\n    offset = vec2(-1.0, 1.0);\n  } else if (a_instruction == 1.0) {\n    offset = vec2(-1.0, -1.0);\n  } else if (a_instruction == 2.0) {\n    offset = vec2(1.0, -1.0);\n  } else {\n    offset = vec2(1.0, 1.0);\n  }\n\n  gl_Position = u_projectionMatrix * vec4(a_position + offset * radius, 0.0, 1.0) +\n      offsetMatrix * vec4(offset * lineWidth, 0.0, 0.0);\n  v_offset = vec4(u_projectionMatrix * vec4(a_position.x + a_radius, a_position.y,\n      0.0, 1.0)).xy;\n\n  if (distance(v_center, v_offset) > 20000.0) {\n    gl_Position = vec4(v_center, 0.0, 1.0);\n  }\n}\n\n\n' :
   'varying vec2 a;varying vec2 b;varying float c;varying float d;attribute vec2 e;attribute float f;attribute float g;uniform mat4 h;uniform mat4 i;uniform mat4 j;uniform float k;uniform float l;void main(void){mat4 offsetMatrix=i*j;a=vec4(h*vec4(e,0.0,1.0)).xy;d=l;float lineWidth=k*l;c=lineWidth/2.0;if(lineWidth==0.0){lineWidth=2.0*l;}vec2 offset;float radius=g+3.0*l;//Until we get gl_VertexID in WebGL,we store an instruction.if(f==0.0){//Offsetting the edges of the triangle by lineWidth/2 is necessary,however//we should also leave some space for the antialiasing,thus we offset by lineWidth.offset=vec2(-1.0,1.0);}else if(f==1.0){offset=vec2(-1.0,-1.0);}else if(f==2.0){offset=vec2(1.0,-1.0);}else{offset=vec2(1.0,1.0);}gl_Position=h*vec4(e+offset*radius,0.0,1.0)+offsetMatrix*vec4(offset*lineWidth,0.0,0.0);b=vec4(h*vec4(e.x+g,e.y,0.0,1.0)).xy;if(distance(a,b)>20000.0){gl_Position=vec4(a,0.0,1.0);}}');
-
-export default _ol_render_webgl_circlereplay_defaultshader_;
diff --git a/src/ol/render/webgl/circlereplay/defaultshader/Locations.js b/src/ol/render/webgl/circlereplay/defaultshader/Locations.js
index 67f67f9a6c..3e1ee02d66 100644
--- a/src/ol/render/webgl/circlereplay/defaultshader/Locations.js
+++ b/src/ol/render/webgl/circlereplay/defaultshader/Locations.js
@@ -2,6 +2,8 @@
  * @module ol/render/webgl/circlereplay/defaultshader/Locations
  */
 // This file is automatically generated, do not edit
+// Run `make shaders` to generate, and commit the result.
+
 import {DEBUG_WEBGL} from '../../../../index.js';
 
 /**
@@ -10,7 +12,7 @@ import {DEBUG_WEBGL} from '../../../../index.js';
  * @param {WebGLProgram} program Program.
  * @struct
  */
-const _ol_render_webgl_circlereplay_defaultshader_Locations_ = function(gl, program) {
+const Locations = function(gl, program) {
 
   /**
    * @type {WebGLUniformLocation}
@@ -85,4 +87,4 @@ const _ol_render_webgl_circlereplay_defaultshader_Locations_ = function(gl, prog
     program, DEBUG_WEBGL ? 'a_radius' : 'g');
 };
 
-export default _ol_render_webgl_circlereplay_defaultshader_Locations_;
+export default Locations;
diff --git a/src/ol/render/webgl/linestringreplay/defaultshader.glsl b/src/ol/render/webgl/linestringreplay/defaultshader.glsl
index b04d05cdc3..99ec8c0b02 100644
--- a/src/ol/render/webgl/linestringreplay/defaultshader.glsl
+++ b/src/ol/render/webgl/linestringreplay/defaultshader.glsl
@@ -1,4 +1,4 @@
-//! NAMESPACE=_ol_render_webgl_linestringreplay_defaultshader_
+//! MODULE=ol/render/webgl/linestringreplay/defaultshader
 
 
 //! COMMON
diff --git a/src/ol/render/webgl/linestringreplay/defaultshader.js b/src/ol/render/webgl/linestringreplay/defaultshader.js
index bfd67e3b89..b0de052e5a 100644
--- a/src/ol/render/webgl/linestringreplay/defaultshader.js
+++ b/src/ol/render/webgl/linestringreplay/defaultshader.js
@@ -1,17 +1,17 @@
+/**
+ * @module ol/render/webgl/linestringreplay/defaultshader
+ */
 // This file is automatically generated, do not edit.
 // Run `make shaders` to generate, and commit the result.
 
 import {DEBUG_WEBGL} from '../../../index.js';
-import _ol_webgl_Fragment_ from '../../../webgl/Fragment.js';
-import _ol_webgl_Vertex_ from '../../../webgl/Vertex.js';
-const _ol_render_webgl_linestringreplay_defaultshader_ = {};
+import WebGLFragment from '../../../webgl/Fragment.js';
+import WebGLVertex from '../../../webgl/Vertex.js';
 
-_ol_render_webgl_linestringreplay_defaultshader_.fragment = new _ol_webgl_Fragment_(DEBUG_WEBGL ?
+export const fragment = new WebGLFragment(DEBUG_WEBGL ?
   'precision mediump float;\nvarying float v_round;\nvarying vec2 v_roundVertex;\nvarying float v_halfWidth;\n\n\n\nuniform float u_opacity;\nuniform vec4 u_color;\nuniform vec2 u_size;\nuniform float u_pixelRatio;\n\nvoid main(void) {\n  if (v_round > 0.0) {\n    vec2 windowCoords = vec2((v_roundVertex.x + 1.0) / 2.0 * u_size.x * u_pixelRatio,\n        (v_roundVertex.y + 1.0) / 2.0 * u_size.y * u_pixelRatio);\n    if (length(windowCoords - gl_FragCoord.xy) > v_halfWidth * u_pixelRatio) {\n      discard;\n    }\n  }\n  gl_FragColor = u_color;\n  float alpha = u_color.a * u_opacity;\n  if (alpha == 0.0) {\n    discard;\n  }\n  gl_FragColor.a = alpha;\n}\n' :
   'precision mediump float;varying float a;varying vec2 aVertex;varying float c;uniform float m;uniform vec4 n;uniform vec2 o;uniform float p;void main(void){if(a>0.0){vec2 windowCoords=vec2((aVertex.x+1.0)/2.0*o.x*p,(aVertex.y+1.0)/2.0*o.y*p);if(length(windowCoords-gl_FragCoord.xy)>c*p){discard;}} gl_FragColor=n;float alpha=n.a*m;if(alpha==0.0){discard;}gl_FragColor.a=alpha;}');
 
-_ol_render_webgl_linestringreplay_defaultshader_.vertex = new _ol_webgl_Vertex_(DEBUG_WEBGL ?
+export const vertex = new WebGLVertex(DEBUG_WEBGL ?
   'varying float v_round;\nvarying vec2 v_roundVertex;\nvarying float v_halfWidth;\n\n\nattribute vec2 a_lastPos;\nattribute vec2 a_position;\nattribute vec2 a_nextPos;\nattribute float a_direction;\n\nuniform mat4 u_projectionMatrix;\nuniform mat4 u_offsetScaleMatrix;\nuniform mat4 u_offsetRotateMatrix;\nuniform float u_lineWidth;\nuniform float u_miterLimit;\n\nbool nearlyEquals(in float value, in float ref) {\n  float epsilon = 0.000000000001;\n  return value >= ref - epsilon && value <= ref + epsilon;\n}\n\nvoid alongNormal(out vec2 offset, in vec2 nextP, in float turnDir, in float direction) {\n  vec2 dirVect = nextP - a_position;\n  vec2 normal = normalize(vec2(-turnDir * dirVect.y, turnDir * dirVect.x));\n  offset = u_lineWidth / 2.0 * normal * direction;\n}\n\nvoid miterUp(out vec2 offset, out float round, in bool isRound, in float direction) {\n  float halfWidth = u_lineWidth / 2.0;\n  vec2 tangent = normalize(normalize(a_nextPos - a_position) + normalize(a_position - a_lastPos));\n  vec2 normal = vec2(-tangent.y, tangent.x);\n  vec2 dirVect = a_nextPos - a_position;\n  vec2 tmpNormal = normalize(vec2(-dirVect.y, dirVect.x));\n  float miterLength = abs(halfWidth / dot(normal, tmpNormal));\n  offset = normal * direction * miterLength;\n  round = 0.0;\n  if (isRound) {\n    round = 1.0;\n  } else if (miterLength > u_miterLimit + u_lineWidth) {\n    offset = halfWidth * tmpNormal * direction;\n  }\n}\n\nbool miterDown(out vec2 offset, in vec4 projPos, in mat4 offsetMatrix, in float direction) {\n  bool degenerate = false;\n  vec2 tangent = normalize(normalize(a_nextPos - a_position) + normalize(a_position - a_lastPos));\n  vec2 normal = vec2(-tangent.y, tangent.x);\n  vec2 dirVect = a_lastPos - a_position;\n  vec2 tmpNormal = normalize(vec2(-dirVect.y, dirVect.x));\n  vec2 longOffset, shortOffset, longVertex;\n  vec4 shortProjVertex;\n  float halfWidth = u_lineWidth / 2.0;\n  if (length(a_nextPos - a_position) > length(a_lastPos - a_position)) {\n    longOffset = tmpNormal * direction * halfWidth;\n    shortOffset = normalize(vec2(dirVect.y, -dirVect.x)) * direction * halfWidth;\n    longVertex = a_nextPos;\n    shortProjVertex = u_projectionMatrix * vec4(a_lastPos, 0.0, 1.0);\n  } else {\n    shortOffset = tmpNormal * direction * halfWidth;\n    longOffset = normalize(vec2(dirVect.y, -dirVect.x)) * direction * halfWidth;\n    longVertex = a_lastPos;\n    shortProjVertex = u_projectionMatrix * vec4(a_nextPos, 0.0, 1.0);\n  }\n  //Intersection algorithm based on theory by Paul Bourke (http://paulbourke.net/geometry/pointlineplane/).\n  vec4 p1 = u_projectionMatrix * vec4(longVertex, 0.0, 1.0) + offsetMatrix * vec4(longOffset, 0.0, 0.0);\n  vec4 p2 = projPos + offsetMatrix * vec4(longOffset, 0.0, 0.0);\n  vec4 p3 = shortProjVertex + offsetMatrix * vec4(-shortOffset, 0.0, 0.0);\n  vec4 p4 = shortProjVertex + offsetMatrix * vec4(shortOffset, 0.0, 0.0);\n  float denom = (p4.y - p3.y) * (p2.x - p1.x) - (p4.x - p3.x) * (p2.y - p1.y);\n  float firstU = ((p4.x - p3.x) * (p1.y - p3.y) - (p4.y - p3.y) * (p1.x - p3.x)) / denom;\n  float secondU = ((p2.x - p1.x) * (p1.y - p3.y) - (p2.y - p1.y) * (p1.x - p3.x)) / denom;\n  float epsilon = 0.000000000001;\n  if (firstU > epsilon && firstU < 1.0 - epsilon && secondU > epsilon && secondU < 1.0 - epsilon) {\n    shortProjVertex.x = p1.x + firstU * (p2.x - p1.x);\n    shortProjVertex.y = p1.y + firstU * (p2.y - p1.y);\n    offset = shortProjVertex.xy;\n    degenerate = true;\n  } else {\n    float miterLength = abs(halfWidth / dot(normal, tmpNormal));\n    offset = normal * direction * miterLength;\n  }\n  return degenerate;\n}\n\nvoid squareCap(out vec2 offset, out float round, in bool isRound, in vec2 nextP,\n    in float turnDir, in float direction) {\n  round = 0.0;\n  vec2 dirVect = a_position - nextP;\n  vec2 firstNormal = normalize(dirVect);\n  vec2 secondNormal = vec2(turnDir * firstNormal.y * direction, -turnDir * firstNormal.x * direction);\n  vec2 hypotenuse = normalize(firstNormal - secondNormal);\n  vec2 normal = vec2(turnDir * hypotenuse.y * direction, -turnDir * hypotenuse.x * direction);\n  float length = sqrt(v_halfWidth * v_halfWidth * 2.0);\n  offset = normal * length;\n  if (isRound) {\n    round = 1.0;\n  }\n}\n\nvoid main(void) {\n  bool degenerate = false;\n  float direction = float(sign(a_direction));\n  mat4 offsetMatrix = u_offsetScaleMatrix * u_offsetRotateMatrix;\n  vec2 offset;\n  vec4 projPos = u_projectionMatrix * vec4(a_position, 0.0, 1.0);\n  bool round = nearlyEquals(mod(a_direction, 2.0), 0.0);\n\n  v_round = 0.0;\n  v_halfWidth = u_lineWidth / 2.0;\n  v_roundVertex = projPos.xy;\n\n  if (nearlyEquals(mod(a_direction, 3.0), 0.0) || nearlyEquals(mod(a_direction, 17.0), 0.0)) {\n    alongNormal(offset, a_nextPos, 1.0, direction);\n  } else if (nearlyEquals(mod(a_direction, 5.0), 0.0) || nearlyEquals(mod(a_direction, 13.0), 0.0)) {\n    alongNormal(offset, a_lastPos, -1.0, direction);\n  } else if (nearlyEquals(mod(a_direction, 23.0), 0.0)) {\n    miterUp(offset, v_round, round, direction);\n  } else if (nearlyEquals(mod(a_direction, 19.0), 0.0)) {\n    degenerate = miterDown(offset, projPos, offsetMatrix, direction);\n  } else if (nearlyEquals(mod(a_direction, 7.0), 0.0)) {\n    squareCap(offset, v_round, round, a_nextPos, 1.0, direction);\n  } else if (nearlyEquals(mod(a_direction, 11.0), 0.0)) {\n    squareCap(offset, v_round, round, a_lastPos, -1.0, direction);\n  }\n  if (!degenerate) {\n    vec4 offsets = offsetMatrix * vec4(offset, 0.0, 0.0);\n    gl_Position = projPos + offsets;\n  } else {\n    gl_Position = vec4(offset, 0.0, 1.0);\n  }\n}\n\n\n' :
   'varying float a;varying vec2 aVertex;varying float c;attribute vec2 d;attribute vec2 e;attribute vec2 f;attribute float g;uniform mat4 h;uniform mat4 i;uniform mat4 j;uniform float k;uniform float l;bool nearlyEquals(in float value,in float ref){float epsilon=0.000000000001;return value>=ref-epsilon&&value<=ref+epsilon;}void alongNormal(out vec2 offset,in vec2 nextP,in float turnDir,in float direction){vec2 dirVect=nextP-e;vec2 normal=normalize(vec2(-turnDir*dirVect.y,turnDir*dirVect.x));offset=k/2.0*normal*direction;}void miterUp(out vec2 offset,out float round,in bool isRound,in float direction){float halfWidth=k/2.0;vec2 tangent=normalize(normalize(f-e)+normalize(e-d));vec2 normal=vec2(-tangent.y,tangent.x);vec2 dirVect=f-e;vec2 tmpNormal=normalize(vec2(-dirVect.y,dirVect.x));float miterLength=abs(halfWidth/dot(normal,tmpNormal));offset=normal*direction*miterLength;round=0.0;if(isRound){round=1.0;}else if(miterLength>l+k){offset=halfWidth*tmpNormal*direction;}} bool miterDown(out vec2 offset,in vec4 projPos,in mat4 offsetMatrix,in float direction){bool degenerate=false;vec2 tangent=normalize(normalize(f-e)+normalize(e-d));vec2 normal=vec2(-tangent.y,tangent.x);vec2 dirVect=d-e;vec2 tmpNormal=normalize(vec2(-dirVect.y,dirVect.x));vec2 longOffset,shortOffset,longVertex;vec4 shortProjVertex;float halfWidth=k/2.0;if(length(f-e)>length(d-e)){longOffset=tmpNormal*direction*halfWidth;shortOffset=normalize(vec2(dirVect.y,-dirVect.x))*direction*halfWidth;longVertex=f;shortProjVertex=h*vec4(d,0.0,1.0);}else{shortOffset=tmpNormal*direction*halfWidth;longOffset=normalize(vec2(dirVect.y,-dirVect.x))*direction*halfWidth;longVertex=d;shortProjVertex=h*vec4(f,0.0,1.0);}vec4 p1=h*vec4(longVertex,0.0,1.0)+offsetMatrix*vec4(longOffset,0.0,0.0);vec4 p2=projPos+offsetMatrix*vec4(longOffset,0.0,0.0);vec4 p3=shortProjVertex+offsetMatrix*vec4(-shortOffset,0.0,0.0);vec4 p4=shortProjVertex+offsetMatrix*vec4(shortOffset,0.0,0.0);float denom=(p4.y-p3.y)*(p2.x-p1.x)-(p4.x-p3.x)*(p2.y-p1.y);float firstU=((p4.x-p3.x)*(p1.y-p3.y)-(p4.y-p3.y)*(p1.x-p3.x))/denom;float secondU=((p2.x-p1.x)*(p1.y-p3.y)-(p2.y-p1.y)*(p1.x-p3.x))/denom;float epsilon=0.000000000001;if(firstU>epsilon&&firstU<1.0-epsilon&&secondU>epsilon&&secondU<1.0-epsilon){shortProjVertex.x=p1.x+firstU*(p2.x-p1.x);shortProjVertex.y=p1.y+firstU*(p2.y-p1.y);offset=shortProjVertex.xy;degenerate=true;}else{float miterLength=abs(halfWidth/dot(normal,tmpNormal));offset=normal*direction*miterLength;}return degenerate;}void squareCap(out vec2 offset,out float round,in bool isRound,in vec2 nextP,in float turnDir,in float direction){round=0.0;vec2 dirVect=e-nextP;vec2 firstNormal=normalize(dirVect);vec2 secondNormal=vec2(turnDir*firstNormal.y*direction,-turnDir*firstNormal.x*direction);vec2 hypotenuse=normalize(firstNormal-secondNormal);vec2 normal=vec2(turnDir*hypotenuse.y*direction,-turnDir*hypotenuse.x*direction);float length=sqrt(c*c*2.0);offset=normal*length;if(isRound){round=1.0;}} void main(void){bool degenerate=false;float direction=float(sign(g));mat4 offsetMatrix=i*j;vec2 offset;vec4 projPos=h*vec4(e,0.0,1.0);bool round=nearlyEquals(mod(g,2.0),0.0);a=0.0;c=k/2.0;aVertex=projPos.xy;if(nearlyEquals(mod(g,3.0),0.0)||nearlyEquals(mod(g,17.0),0.0)){alongNormal(offset,f,1.0,direction);}else if(nearlyEquals(mod(g,5.0),0.0)||nearlyEquals(mod(g,13.0),0.0)){alongNormal(offset,d,-1.0,direction);}else if(nearlyEquals(mod(g,23.0),0.0)){miterUp(offset,a,round,direction);}else if(nearlyEquals(mod(g,19.0),0.0)){degenerate=miterDown(offset,projPos,offsetMatrix,direction);}else if(nearlyEquals(mod(g,7.0),0.0)){squareCap(offset,a,round,f,1.0,direction);}else if(nearlyEquals(mod(g,11.0),0.0)){squareCap(offset,a,round,d,-1.0,direction);}if(!degenerate){vec4 offsets=offsetMatrix*vec4(offset,0.0,0.0);gl_Position=projPos+offsets;}else{gl_Position=vec4(offset,0.0,1.0);}}');
-
-export default _ol_render_webgl_linestringreplay_defaultshader_;
diff --git a/src/ol/render/webgl/linestringreplay/defaultshader/Locations.js b/src/ol/render/webgl/linestringreplay/defaultshader/Locations.js
index e84cb17708..e29d4783e0 100644
--- a/src/ol/render/webgl/linestringreplay/defaultshader/Locations.js
+++ b/src/ol/render/webgl/linestringreplay/defaultshader/Locations.js
@@ -2,6 +2,8 @@
  * @module ol/render/webgl/linestringreplay/defaultshader/Locations
  */
 // This file is automatically generated, do not edit
+// Run `make shaders` to generate, and commit the result.
+
 import {DEBUG_WEBGL} from '../../../../index.js';
 
 /**
@@ -10,7 +12,7 @@ import {DEBUG_WEBGL} from '../../../../index.js';
  * @param {WebGLProgram} program Program.
  * @struct
  */
-const _ol_render_webgl_linestringreplay_defaultshader_Locations_ = function(gl, program) {
+const Locations = function(gl, program) {
 
   /**
    * @type {WebGLUniformLocation}
@@ -91,4 +93,4 @@ const _ol_render_webgl_linestringreplay_defaultshader_Locations_ = function(gl,
     program, DEBUG_WEBGL ? 'a_direction' : 'g');
 };
 
-export default _ol_render_webgl_linestringreplay_defaultshader_Locations_;
+export default Locations;
diff --git a/src/ol/render/webgl/polygonreplay/defaultshader.glsl b/src/ol/render/webgl/polygonreplay/defaultshader.glsl
index 6e0ded8d5a..aefd8ec686 100644
--- a/src/ol/render/webgl/polygonreplay/defaultshader.glsl
+++ b/src/ol/render/webgl/polygonreplay/defaultshader.glsl
@@ -1,4 +1,4 @@
-//! NAMESPACE=_ol_render_webgl_polygonreplay_defaultshader_
+//! MODULE=ol/render/webgl/polygonreplay/defaultshader
 
 
 //! COMMON
diff --git a/src/ol/render/webgl/polygonreplay/defaultshader.js b/src/ol/render/webgl/polygonreplay/defaultshader.js
index 260b360c75..6d36aef720 100644
--- a/src/ol/render/webgl/polygonreplay/defaultshader.js
+++ b/src/ol/render/webgl/polygonreplay/defaultshader.js
@@ -1,17 +1,17 @@
+/**
+ * @module ol/render/webgl/polygonreplay/defaultshader
+ */
 // This file is automatically generated, do not edit.
 // Run `make shaders` to generate, and commit the result.
 
 import {DEBUG_WEBGL} from '../../../index.js';
-import _ol_webgl_Fragment_ from '../../../webgl/Fragment.js';
-import _ol_webgl_Vertex_ from '../../../webgl/Vertex.js';
-const _ol_render_webgl_polygonreplay_defaultshader_ = {};
+import WebGLFragment from '../../../webgl/Fragment.js';
+import WebGLVertex from '../../../webgl/Vertex.js';
 
-_ol_render_webgl_polygonreplay_defaultshader_.fragment = new _ol_webgl_Fragment_(DEBUG_WEBGL ?
+export const fragment = new WebGLFragment(DEBUG_WEBGL ?
   'precision mediump float;\n\n\n\nuniform vec4 u_color;\nuniform float u_opacity;\n\nvoid main(void) {\n  gl_FragColor = u_color;\n  float alpha = u_color.a * u_opacity;\n  if (alpha == 0.0) {\n    discard;\n  }\n  gl_FragColor.a = alpha;\n}\n' :
   'precision mediump float;uniform vec4 e;uniform float f;void main(void){gl_FragColor=e;float alpha=e.a*f;if(alpha==0.0){discard;}gl_FragColor.a=alpha;}');
 
-_ol_render_webgl_polygonreplay_defaultshader_.vertex = new _ol_webgl_Vertex_(DEBUG_WEBGL ?
+export const vertex = new WebGLVertex(DEBUG_WEBGL ?
   '\n\nattribute vec2 a_position;\n\nuniform mat4 u_projectionMatrix;\nuniform mat4 u_offsetScaleMatrix;\nuniform mat4 u_offsetRotateMatrix;\n\nvoid main(void) {\n  gl_Position = u_projectionMatrix * vec4(a_position, 0.0, 1.0);\n}\n\n\n' :
   'attribute vec2 a;uniform mat4 b;uniform mat4 c;uniform mat4 d;void main(void){gl_Position=b*vec4(a,0.0,1.0);}');
-
-export default _ol_render_webgl_polygonreplay_defaultshader_;
diff --git a/src/ol/render/webgl/polygonreplay/defaultshader/Locations.js b/src/ol/render/webgl/polygonreplay/defaultshader/Locations.js
index 991e479338..c62e58c5fb 100644
--- a/src/ol/render/webgl/polygonreplay/defaultshader/Locations.js
+++ b/src/ol/render/webgl/polygonreplay/defaultshader/Locations.js
@@ -2,6 +2,8 @@
  * @module ol/render/webgl/polygonreplay/defaultshader/Locations
  */
 // This file is automatically generated, do not edit
+// Run `make shaders` to generate, and commit the result.
+
 import {DEBUG_WEBGL} from '../../../../index.js';
 
 /**
@@ -10,7 +12,7 @@ import {DEBUG_WEBGL} from '../../../../index.js';
  * @param {WebGLProgram} program Program.
  * @struct
  */
-const _ol_render_webgl_polygonreplay_defaultshader_Locations_ = function(gl, program) {
+const Locations = function(gl, program) {
 
   /**
    * @type {WebGLUniformLocation}
@@ -49,4 +51,4 @@ const _ol_render_webgl_polygonreplay_defaultshader_Locations_ = function(gl, pro
     program, DEBUG_WEBGL ? 'a_position' : 'a');
 };
 
-export default _ol_render_webgl_polygonreplay_defaultshader_Locations_;
+export default Locations;
diff --git a/src/ol/render/webgl/texturereplay/defaultshader.glsl b/src/ol/render/webgl/texturereplay/defaultshader.glsl
index affbff08be..5a1664125a 100644
--- a/src/ol/render/webgl/texturereplay/defaultshader.glsl
+++ b/src/ol/render/webgl/texturereplay/defaultshader.glsl
@@ -1,4 +1,4 @@
-//! NAMESPACE=_ol_render_webgl_texturereplay_defaultshader_
+//! MODULE=ol/render/webgl/texturereplay/defaultshader
 
 
 //! COMMON
diff --git a/src/ol/render/webgl/texturereplay/defaultshader.js b/src/ol/render/webgl/texturereplay/defaultshader.js
index 8401d4c2a1..e439eed48a 100644
--- a/src/ol/render/webgl/texturereplay/defaultshader.js
+++ b/src/ol/render/webgl/texturereplay/defaultshader.js
@@ -1,17 +1,17 @@
+/**
+ * @module ol/render/webgl/texturereplay/defaultshader
+ */
 // This file is automatically generated, do not edit.
 // Run `make shaders` to generate, and commit the result.
 
 import {DEBUG_WEBGL} from '../../../index.js';
-import _ol_webgl_Fragment_ from '../../../webgl/Fragment.js';
-import _ol_webgl_Vertex_ from '../../../webgl/Vertex.js';
-const _ol_render_webgl_texturereplay_defaultshader_ = {};
+import WebGLFragment from '../../../webgl/Fragment.js';
+import WebGLVertex from '../../../webgl/Vertex.js';
 
-_ol_render_webgl_texturereplay_defaultshader_.fragment = new _ol_webgl_Fragment_(DEBUG_WEBGL ?
+export const fragment = new WebGLFragment(DEBUG_WEBGL ?
   'precision mediump float;\nvarying vec2 v_texCoord;\nvarying float v_opacity;\n\nuniform float u_opacity;\nuniform sampler2D u_image;\n\nvoid main(void) {\n  vec4 texColor = texture2D(u_image, v_texCoord);\n  gl_FragColor.rgb = texColor.rgb;\n  float alpha = texColor.a * v_opacity * u_opacity;\n  if (alpha == 0.0) {\n    discard;\n  }\n  gl_FragColor.a = alpha;\n}\n' :
   'precision mediump float;varying vec2 a;varying float b;uniform float k;uniform sampler2D l;void main(void){vec4 texColor=texture2D(l,a);gl_FragColor.rgb=texColor.rgb;float alpha=texColor.a*b*k;if(alpha==0.0){discard;}gl_FragColor.a=alpha;}');
 
-_ol_render_webgl_texturereplay_defaultshader_.vertex = new _ol_webgl_Vertex_(DEBUG_WEBGL ?
+export const vertex = new WebGLVertex(DEBUG_WEBGL ?
   'varying vec2 v_texCoord;\nvarying float v_opacity;\n\nattribute vec2 a_position;\nattribute vec2 a_texCoord;\nattribute vec2 a_offsets;\nattribute float a_opacity;\nattribute float a_rotateWithView;\n\nuniform mat4 u_projectionMatrix;\nuniform mat4 u_offsetScaleMatrix;\nuniform mat4 u_offsetRotateMatrix;\n\nvoid main(void) {\n  mat4 offsetMatrix = u_offsetScaleMatrix;\n  if (a_rotateWithView == 1.0) {\n    offsetMatrix = u_offsetScaleMatrix * u_offsetRotateMatrix;\n  }\n  vec4 offsets = offsetMatrix * vec4(a_offsets, 0.0, 0.0);\n  gl_Position = u_projectionMatrix * vec4(a_position, 0.0, 1.0) + offsets;\n  v_texCoord = a_texCoord;\n  v_opacity = a_opacity;\n}\n\n\n' :
   'varying vec2 a;varying float b;attribute vec2 c;attribute vec2 d;attribute vec2 e;attribute float f;attribute float g;uniform mat4 h;uniform mat4 i;uniform mat4 j;void main(void){mat4 offsetMatrix=i;if(g==1.0){offsetMatrix=i*j;}vec4 offsets=offsetMatrix*vec4(e,0.0,0.0);gl_Position=h*vec4(c,0.0,1.0)+offsets;a=d;b=f;}');
-
-export default _ol_render_webgl_texturereplay_defaultshader_;
diff --git a/src/ol/render/webgl/texturereplay/defaultshader/Locations.js b/src/ol/render/webgl/texturereplay/defaultshader/Locations.js
index 101e687703..48ce0bf31f 100644
--- a/src/ol/render/webgl/texturereplay/defaultshader/Locations.js
+++ b/src/ol/render/webgl/texturereplay/defaultshader/Locations.js
@@ -2,6 +2,8 @@
  * @module ol/render/webgl/texturereplay/defaultshader/Locations
  */
 // This file is automatically generated, do not edit
+// Run `make shaders` to generate, and commit the result.
+
 import {DEBUG_WEBGL} from '../../../../index.js';
 
 /**
@@ -10,7 +12,7 @@ import {DEBUG_WEBGL} from '../../../../index.js';
  * @param {WebGLProgram} program Program.
  * @struct
  */
-const _ol_render_webgl_texturereplay_defaultshader_Locations_ = function(gl, program) {
+const Locations = function(gl, program) {
 
   /**
    * @type {WebGLUniformLocation}
@@ -73,4 +75,4 @@ const _ol_render_webgl_texturereplay_defaultshader_Locations_ = function(gl, pro
     program, DEBUG_WEBGL ? 'a_rotateWithView' : 'g');
 };
 
-export default _ol_render_webgl_texturereplay_defaultshader_Locations_;
+export default Locations;
diff --git a/src/ol/renderer/webgl/Layer.js b/src/ol/renderer/webgl/Layer.js
index 8d767e14ae..5a47472fc5 100644
--- a/src/ol/renderer/webgl/Layer.js
+++ b/src/ol/renderer/webgl/Layer.js
@@ -6,8 +6,8 @@ import RenderEvent from '../../render/Event.js';
 import RenderEventType from '../../render/EventType.js';
 import _ol_render_webgl_Immediate_ from '../../render/webgl/Immediate.js';
 import LayerRenderer from '../Layer.js';
-import _ol_renderer_webgl_defaultmapshader_ from '../webgl/defaultmapshader.js';
-import _ol_renderer_webgl_defaultmapshader_Locations_ from '../webgl/defaultmapshader/Locations.js';
+import {fragment, vertex} from '../webgl/defaultmapshader.js';
+import Locations from '../webgl/defaultmapshader/Locations.js';
 import _ol_transform_ from '../../transform.js';
 import {create, fromTransform} from '../../vec/mat4.js';
 import _ol_webgl_ from '../../webgl.js';
@@ -148,14 +148,11 @@ WebGLLayerRenderer.prototype.composeFrame = function(frameState, layerState, con
 
   const gl = context.getGL();
 
-  const fragmentShader = _ol_renderer_webgl_defaultmapshader_.fragment;
-  const vertexShader = _ol_renderer_webgl_defaultmapshader_.vertex;
-
-  const program = context.getProgram(fragmentShader, vertexShader);
+  const program = context.getProgram(fragment, vertex);
 
   let locations;
   if (!this.defaultLocations_) {
-    locations = new _ol_renderer_webgl_defaultmapshader_Locations_(gl, program);
+    locations = new Locations(gl, program);
     this.defaultLocations_ = locations;
   } else {
     locations = this.defaultLocations_;
diff --git a/src/ol/renderer/webgl/TileLayer.js b/src/ol/renderer/webgl/TileLayer.js
index d92d4bebfc..362abab353 100644
--- a/src/ol/renderer/webgl/TileLayer.js
+++ b/src/ol/renderer/webgl/TileLayer.js
@@ -13,8 +13,8 @@ import {createEmpty, intersects} from '../../extent.js';
 import {roundUpToPowerOfTwo} from '../../math.js';
 import RendererType from '../Type.js';
 import WebGLLayerRenderer from '../webgl/Layer.js';
-import _ol_renderer_webgl_tilelayershader_ from '../webgl/tilelayershader.js';
-import _ol_renderer_webgl_tilelayershader_Locations_ from '../webgl/tilelayershader/Locations.js';
+import {fragment, vertex} from '../webgl/tilelayershader.js';
+import Locations from '../webgl/tilelayershader/Locations.js';
 import {toSize} from '../../size.js';
 import _ol_transform_ from '../../transform.js';
 import _ol_webgl_ from '../../webgl.js';
@@ -35,13 +35,13 @@ const WebGLTileLayerRenderer = function(mapRenderer, tileLayer) {
    * @private
    * @type {ol.webgl.Fragment}
    */
-  this.fragmentShader_ = _ol_renderer_webgl_tilelayershader_.fragment;
+  this.fragmentShader_ = fragment;
 
   /**
    * @private
    * @type {ol.webgl.Vertex}
    */
-  this.vertexShader_ = _ol_renderer_webgl_tilelayershader_.vertex;
+  this.vertexShader_ = vertex;
 
   /**
    * @private
@@ -223,7 +223,7 @@ WebGLTileLayerRenderer.prototype.prepareFrame = function(frameState, layerState,
     const program = context.getProgram(this.fragmentShader_, this.vertexShader_);
     context.useProgram(program);
     if (!this.locations_) {
-      this.locations_ = new _ol_renderer_webgl_tilelayershader_Locations_(gl, program);
+      this.locations_ = new Locations(gl, program);
     }
 
     context.bindBuffer(_ol_webgl_.ARRAY_BUFFER, this.renderArrayBuffer_);
diff --git a/src/ol/renderer/webgl/defaultmapshader.glsl b/src/ol/renderer/webgl/defaultmapshader.glsl
index 6621e9cf22..f1009886da 100644
--- a/src/ol/renderer/webgl/defaultmapshader.glsl
+++ b/src/ol/renderer/webgl/defaultmapshader.glsl
@@ -1,4 +1,4 @@
-//! NAMESPACE=_ol_renderer_webgl_defaultmapshader_
+//! MODULE=ol/renderer/webgl/defaultmapshader
 
 
 //! COMMON
diff --git a/src/ol/renderer/webgl/defaultmapshader.js b/src/ol/renderer/webgl/defaultmapshader.js
index 95ffc98257..317a41063a 100644
--- a/src/ol/renderer/webgl/defaultmapshader.js
+++ b/src/ol/renderer/webgl/defaultmapshader.js
@@ -1,17 +1,17 @@
+/**
+ * @module ol/renderer/webgl/defaultmapshader
+ */
 // This file is automatically generated, do not edit.
 // Run `make shaders` to generate, and commit the result.
 
 import {DEBUG_WEBGL} from '../../index.js';
-import _ol_webgl_Fragment_ from '../../webgl/Fragment.js';
-import _ol_webgl_Vertex_ from '../../webgl/Vertex.js';
-const _ol_renderer_webgl_defaultmapshader_ = {};
+import WebGLFragment from '../../webgl/Fragment.js';
+import WebGLVertex from '../../webgl/Vertex.js';
 
-_ol_renderer_webgl_defaultmapshader_.fragment = new _ol_webgl_Fragment_(DEBUG_WEBGL ?
+export const fragment = new WebGLFragment(DEBUG_WEBGL ?
   'precision mediump float;\nvarying vec2 v_texCoord;\n\n\nuniform float u_opacity;\nuniform sampler2D u_texture;\n\nvoid main(void) {\n  vec4 texColor = texture2D(u_texture, v_texCoord);\n  gl_FragColor.rgb = texColor.rgb;\n  gl_FragColor.a = texColor.a * u_opacity;\n}\n' :
   'precision mediump float;varying vec2 a;uniform float f;uniform sampler2D g;void main(void){vec4 texColor=texture2D(g,a);gl_FragColor.rgb=texColor.rgb;gl_FragColor.a=texColor.a*f;}');
 
-_ol_renderer_webgl_defaultmapshader_.vertex = new _ol_webgl_Vertex_(DEBUG_WEBGL ?
+export const vertex = new WebGLVertex(DEBUG_WEBGL ?
   'varying vec2 v_texCoord;\n\n\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' :
   'varying vec2 a;attribute vec2 b;attribute vec2 c;uniform mat4 d;uniform mat4 e;void main(void){gl_Position=e*vec4(b,0.,1.);a=(d*vec4(c,0.,1.)).st;}');
-
-export default _ol_renderer_webgl_defaultmapshader_;
diff --git a/src/ol/renderer/webgl/defaultmapshader/Locations.js b/src/ol/renderer/webgl/defaultmapshader/Locations.js
index 64ea2e5809..1a7845528c 100644
--- a/src/ol/renderer/webgl/defaultmapshader/Locations.js
+++ b/src/ol/renderer/webgl/defaultmapshader/Locations.js
@@ -2,6 +2,8 @@
  * @module ol/renderer/webgl/defaultmapshader/Locations
  */
 // This file is automatically generated, do not edit
+// Run `make shaders` to generate, and commit the result.
+
 import {DEBUG_WEBGL} from '../../../index.js';
 
 /**
@@ -10,7 +12,7 @@ import {DEBUG_WEBGL} from '../../../index.js';
  * @param {WebGLProgram} program Program.
  * @struct
  */
-const _ol_renderer_webgl_defaultmapshader_Locations_ = function(gl, program) {
+const Locations = function(gl, program) {
 
   /**
    * @type {WebGLUniformLocation}
@@ -49,4 +51,4 @@ const _ol_renderer_webgl_defaultmapshader_Locations_ = function(gl, program) {
     program, DEBUG_WEBGL ? 'a_texCoord' : 'c');
 };
 
-export default _ol_renderer_webgl_defaultmapshader_Locations_;
+export default Locations;
diff --git a/src/ol/renderer/webgl/tilelayershader.glsl b/src/ol/renderer/webgl/tilelayershader.glsl
index 59b9aa04c8..121e760359 100644
--- a/src/ol/renderer/webgl/tilelayershader.glsl
+++ b/src/ol/renderer/webgl/tilelayershader.glsl
@@ -1,4 +1,4 @@
-//! NAMESPACE=_ol_renderer_webgl_tilelayershader_
+//! MODULE=ol/renderer/webgl/tilelayershader
 
 
 //! COMMON
diff --git a/src/ol/renderer/webgl/tilelayershader.js b/src/ol/renderer/webgl/tilelayershader.js
index d287187297..b03dd30dfa 100644
--- a/src/ol/renderer/webgl/tilelayershader.js
+++ b/src/ol/renderer/webgl/tilelayershader.js
@@ -1,17 +1,17 @@
+/**
+ * @module ol/renderer/webgl/tilelayershader
+ */
 // This file is automatically generated, do not edit.
 // Run `make shaders` to generate, and commit the result.
 
 import {DEBUG_WEBGL} from '../../index.js';
-import _ol_webgl_Fragment_ from '../../webgl/Fragment.js';
-import _ol_webgl_Vertex_ from '../../webgl/Vertex.js';
-const _ol_renderer_webgl_tilelayershader_ = {};
+import WebGLFragment from '../../webgl/Fragment.js';
+import WebGLVertex from '../../webgl/Vertex.js';
 
-_ol_renderer_webgl_tilelayershader_.fragment = new _ol_webgl_Fragment_(DEBUG_WEBGL ?
+export const fragment = new WebGLFragment(DEBUG_WEBGL ?
   'precision mediump float;\nvarying vec2 v_texCoord;\n\n\nuniform sampler2D u_texture;\n\nvoid main(void) {\n  gl_FragColor = texture2D(u_texture, v_texCoord);\n}\n' :
   'precision mediump float;varying vec2 a;uniform sampler2D e;void main(void){gl_FragColor=texture2D(e,a);}');
 
-_ol_renderer_webgl_tilelayershader_.vertex = new _ol_webgl_Vertex_(DEBUG_WEBGL ?
+export const vertex = new WebGLVertex(DEBUG_WEBGL ?
   'varying vec2 v_texCoord;\n\n\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' :
   'varying vec2 a;attribute vec2 b;attribute vec2 c;uniform vec4 d;void main(void){gl_Position=vec4(b*d.xy+d.zw,0.,1.);a=c;}');
-
-export default _ol_renderer_webgl_tilelayershader_;
diff --git a/src/ol/renderer/webgl/tilelayershader/Locations.js b/src/ol/renderer/webgl/tilelayershader/Locations.js
index b5269146d9..db9123e41c 100644
--- a/src/ol/renderer/webgl/tilelayershader/Locations.js
+++ b/src/ol/renderer/webgl/tilelayershader/Locations.js
@@ -2,6 +2,8 @@
  * @module ol/renderer/webgl/tilelayershader/Locations
  */
 // This file is automatically generated, do not edit
+// Run `make shaders` to generate, and commit the result.
+
 import {DEBUG_WEBGL} from '../../../index.js';
 
 /**
@@ -10,7 +12,7 @@ import {DEBUG_WEBGL} from '../../../index.js';
  * @param {WebGLProgram} program Program.
  * @struct
  */
-const _ol_renderer_webgl_tilelayershader_Locations_ = function(gl, program) {
+const Locations = function(gl, program) {
 
   /**
    * @type {WebGLUniformLocation}
@@ -37,4 +39,4 @@ const _ol_renderer_webgl_tilelayershader_Locations_ = function(gl, program) {
     program, DEBUG_WEBGL ? 'a_texCoord' : 'c');
 };
 
-export default _ol_renderer_webgl_tilelayershader_Locations_;
+export default Locations;
diff --git a/src/ol/webgl/Fragment.js b/src/ol/webgl/Fragment.js
index e7f8f961d5..ac33747050 100644
--- a/src/ol/webgl/Fragment.js
+++ b/src/ol/webgl/Fragment.js
@@ -11,17 +11,17 @@ import WebGLShader from '../webgl/Shader.js';
  * @param {string} source Source.
  * @struct
  */
-const _ol_webgl_Fragment_ = function(source) {
+const WebGLFragment = function(source) {
   WebGLShader.call(this, source);
 };
 
-inherits(_ol_webgl_Fragment_, WebGLShader);
+inherits(WebGLFragment, WebGLShader);
 
 
 /**
  * @inheritDoc
  */
-_ol_webgl_Fragment_.prototype.getType = function() {
+WebGLFragment.prototype.getType = function() {
   return _ol_webgl_.FRAGMENT_SHADER;
 };
-export default _ol_webgl_Fragment_;
+export default WebGLFragment;
diff --git a/src/ol/webgl/Vertex.js b/src/ol/webgl/Vertex.js
index 554324675d..b0eadd0820 100644
--- a/src/ol/webgl/Vertex.js
+++ b/src/ol/webgl/Vertex.js
@@ -11,17 +11,17 @@ import WebGLShader from '../webgl/Shader.js';
  * @param {string} source Source.
  * @struct
  */
-const _ol_webgl_Vertex_ = function(source) {
+const WebGLVertex = function(source) {
   WebGLShader.call(this, source);
 };
 
-inherits(_ol_webgl_Vertex_, WebGLShader);
+inherits(WebGLVertex, WebGLShader);
 
 
 /**
  * @inheritDoc
  */
-_ol_webgl_Vertex_.prototype.getType = function() {
+WebGLVertex.prototype.getType = function() {
   return _ol_webgl_.VERTEX_SHADER;
 };
-export default _ol_webgl_Vertex_;
+export default WebGLVertex;
diff --git a/src/ol/webgl/shader.mustache b/src/ol/webgl/shader.mustache
index 4e224c0dce..b37c64ea2d 100644
--- a/src/ol/webgl/shader.mustache
+++ b/src/ol/webgl/shader.mustache
@@ -1,17 +1,17 @@
+/**
+ * @module {{{module}}}
+ */
 // This file is automatically generated, do not edit.
 // Run `make shaders` to generate, and commit the result.
 
-import {DEBUG_WEBGL} from '../../index.js';
-import _ol_webgl_Fragment_ from '../../webgl/Fragment.js';
-import _ol_webgl_Vertex_ from '../../webgl/Vertex.js';
-var {{namespace}} = {};
+import {DEBUG_WEBGL} from '../../../index.js';
+import WebGLFragment from '../../../webgl/Fragment.js';
+import WebGLVertex from '../../../webgl/Vertex.js';
 
-{{namespace}}.fragment = new _ol_webgl_Fragment_(DEBUG_WEBGL ?
+export const fragment = new WebGLFragment(DEBUG_WEBGL ?
   'precision mediump float;\n{{{originalFragmentSource}}}' :
   'precision mediump float;{{{fragmentSource}}}');
 
-{{namespace}}.vertex = new _ol_webgl_Vertex_(DEBUG_WEBGL ?
+export const vertex = new WebGLVertex(DEBUG_WEBGL ?
   '{{{originalVertexSource}}}' :
   '{{{vertexSource}}}');
-
-export default {{namespace}};
diff --git a/src/ol/webgl/shaderlocations.mustache b/src/ol/webgl/shaderlocations.mustache
index 53553b326f..61277e2951 100644
--- a/src/ol/webgl/shaderlocations.mustache
+++ b/src/ol/webgl/shaderlocations.mustache
@@ -1,7 +1,10 @@
+/**
+ * @module {{{module}}}/Locations
+ */
 // This file is automatically generated, do not edit
 // Run `make shaders` to generate, and commit the result.
 
-import {DEBUG_WEBGL} from '../../../index.js';
+import {DEBUG_WEBGL} from '../../../../index.js';
 
 /**
  * @constructor
@@ -9,14 +12,14 @@ import {DEBUG_WEBGL} from '../../../index.js';
  * @param {WebGLProgram} program Program.
  * @struct
  */
-{{namespace}}_Locations_ = function(gl, program) {
+const Locations = function(gl, program) {
 {{#uniforms}}
 
   /**
    * @type {WebGLUniformLocation}
    */
   this.{{originalName}} = gl.getUniformLocation(
-      program, DEBUG_WEBGL ? '{{originalName}}' : '{{shortName}}');
+    program, DEBUG_WEBGL ? '{{originalName}}' : '{{shortName}}');
 {{/uniforms}}
 {{#attributes}}
 
@@ -24,8 +27,8 @@ import {DEBUG_WEBGL} from '../../../index.js';
    * @type {number}
    */
   this.{{originalName}} = gl.getAttribLocation(
-      program, DEBUG_WEBGL ? '{{originalName}}' : '{{shortName}}');
+    program, DEBUG_WEBGL ? '{{originalName}}' : '{{shortName}}');
 {{/attributes}}
 };
 
-export default {{namespace}}_Locations_;
+export default Locations;
diff --git a/tasks/glslunit.js b/tasks/glslunit.js
index a81342c9a9..9ed85826dd 100644
--- a/tasks/glslunit.js
+++ b/tasks/glslunit.js
@@ -62,9 +62,9 @@ function main(argv) {
   let m, shortName;
   lines.forEach(function(line, i) {
     if (line.indexOf('//!') == 0) {
-      m = line.match(/\/\/!\s+NAMESPACE=(\S+)\s*$/);
+      m = line.match(/\/\/!\s+MODULE=(\S+)\s*$/);
       if (m) {
-        json.namespace = m[1];
+        json.module = m[1];
         return;
       }
       m = line.match(/\/\/!\s+COMMON\s*$/);
diff --git a/test/spec/ol/render/webgl/circlereplay.test.js b/test/spec/ol/render/webgl/circlereplay.test.js
index 5c9d8ae884..9754ba7853 100644
--- a/test/spec/ol/render/webgl/circlereplay.test.js
+++ b/test/spec/ol/render/webgl/circlereplay.test.js
@@ -2,8 +2,8 @@ import {getUid} from '../../../../../src/ol/index.js';
 import Feature from '../../../../../src/ol/Feature.js';
 import Circle from '../../../../../src/ol/geom/Circle.js';
 import WebGLCircleReplay from '../../../../../src/ol/render/webgl/CircleReplay.js';
-import _ol_render_webgl_circlereplay_defaultshader_ from '../../../../../src/ol/render/webgl/circlereplay/defaultshader.js';
-import _ol_render_webgl_circlereplay_defaultshader_Locations_ from '../../../../../src/ol/render/webgl/circlereplay/defaultshader/Locations.js';
+import {fragment, vertex} from '../../../../../src/ol/render/webgl/circlereplay/defaultshader.js';
+import Locations from '../../../../../src/ol/render/webgl/circlereplay/defaultshader/Locations.js';
 import Fill from '../../../../../src/ol/style/Fill.js';
 import Stroke from '../../../../../src/ol/style/Stroke.js';
 
@@ -115,8 +115,7 @@ describe('ol.render.webgl.CircleReplay', function() {
 
     it('returns the locations used by the shaders', function() {
       const locations = replay.setUpProgram(gl, context, [2, 2], 1);
-      expect(locations).to.be.a(
-        _ol_render_webgl_circlereplay_defaultshader_Locations_);
+      expect(locations).to.be.a(Locations);
     });
 
     it('gets and compiles the shaders', function() {
@@ -124,9 +123,7 @@ describe('ol.render.webgl.CircleReplay', function() {
       sinon.spy(context, 'useProgram');
 
       replay.setUpProgram(gl, context, [2, 2], 1);
-      expect(context.getProgram.calledWithExactly(
-        _ol_render_webgl_circlereplay_defaultshader_.fragment,
-        _ol_render_webgl_circlereplay_defaultshader_.vertex)).to.be(true);
+      expect(context.getProgram.calledWithExactly(fragment, vertex)).to.be(true);
       expect(context.useProgram.calledOnce).to.be(true);
     });
 
diff --git a/test/spec/ol/render/webgl/linestringreplay.test.js b/test/spec/ol/render/webgl/linestringreplay.test.js
index 93c264a809..a9d07ce36d 100644
--- a/test/spec/ol/render/webgl/linestringreplay.test.js
+++ b/test/spec/ol/render/webgl/linestringreplay.test.js
@@ -3,8 +3,8 @@ import Feature from '../../../../../src/ol/Feature.js';
 import LineString from '../../../../../src/ol/geom/LineString.js';
 import MultiLineString from '../../../../../src/ol/geom/MultiLineString.js';
 import WebGLLineStringReplay from '../../../../../src/ol/render/webgl/LineStringReplay.js';
-import _ol_render_webgl_linestringreplay_defaultshader_ from '../../../../../src/ol/render/webgl/linestringreplay/defaultshader.js';
-import _ol_render_webgl_linestringreplay_defaultshader_Locations_ from '../../../../../src/ol/render/webgl/linestringreplay/defaultshader/Locations.js';
+import {fragment, vertex} from '../../../../../src/ol/render/webgl/linestringreplay/defaultshader.js';
+import Locations from '../../../../../src/ol/render/webgl/linestringreplay/defaultshader/Locations.js';
 import Stroke from '../../../../../src/ol/style/Stroke.js';
 
 describe('ol.render.webgl.LineStringReplay', function() {
@@ -216,8 +216,7 @@ describe('ol.render.webgl.LineStringReplay', function() {
 
     it('returns the locations used by the shaders', function() {
       const locations = replay.setUpProgram(gl, context, [2, 2], 1);
-      expect(locations).to.be.a(
-        _ol_render_webgl_linestringreplay_defaultshader_Locations_);
+      expect(locations).to.be.a(Locations);
     });
 
     it('gets and compiles the shaders', function() {
@@ -225,9 +224,7 @@ describe('ol.render.webgl.LineStringReplay', function() {
       sinon.spy(context, 'useProgram');
 
       replay.setUpProgram(gl, context, [2, 2], 1);
-      expect(context.getProgram.calledWithExactly(
-        _ol_render_webgl_linestringreplay_defaultshader_.fragment,
-        _ol_render_webgl_linestringreplay_defaultshader_.vertex)).to.be(true);
+      expect(context.getProgram.calledWithExactly(fragment, vertex)).to.be(true);
       expect(context.useProgram.calledOnce).to.be(true);
     });
 
diff --git a/test/spec/ol/render/webgl/polygonreplay.test.js b/test/spec/ol/render/webgl/polygonreplay.test.js
index 1269adc0ac..37405a548c 100644
--- a/test/spec/ol/render/webgl/polygonreplay.test.js
+++ b/test/spec/ol/render/webgl/polygonreplay.test.js
@@ -3,8 +3,8 @@ import Feature from '../../../../../src/ol/Feature.js';
 import MultiPolygon from '../../../../../src/ol/geom/MultiPolygon.js';
 import Polygon from '../../../../../src/ol/geom/Polygon.js';
 import WebGLPolygonReplay from '../../../../../src/ol/render/webgl/PolygonReplay.js';
-import _ol_render_webgl_polygonreplay_defaultshader_ from '../../../../../src/ol/render/webgl/polygonreplay/defaultshader.js';
-import _ol_render_webgl_polygonreplay_defaultshader_Locations_ from '../../../../../src/ol/render/webgl/polygonreplay/defaultshader/Locations.js';
+import {fragment, vertex} from '../../../../../src/ol/render/webgl/polygonreplay/defaultshader.js';
+import Locations from '../../../../../src/ol/render/webgl/polygonreplay/defaultshader/Locations.js';
 import LinkedList from '../../../../../src/ol/structs/LinkedList.js';
 import RBush from '../../../../../src/ol/structs/RBush.js';
 import Fill from '../../../../../src/ol/style/Fill.js';
@@ -337,8 +337,7 @@ describe('ol.render.webgl.PolygonReplay', function() {
 
     it('returns the locations used by the shaders', function() {
       const locations = replay.setUpProgram(gl, context, [2, 2], 1);
-      expect(locations).to.be.a(
-        _ol_render_webgl_polygonreplay_defaultshader_Locations_);
+      expect(locations).to.be.a(Locations);
     });
 
     it('gets and compiles the shaders', function() {
@@ -346,9 +345,7 @@ describe('ol.render.webgl.PolygonReplay', function() {
       sinon.spy(context, 'useProgram');
 
       replay.setUpProgram(gl, context, [2, 2], 1);
-      expect(context.getProgram.calledWithExactly(
-        _ol_render_webgl_polygonreplay_defaultshader_.fragment,
-        _ol_render_webgl_polygonreplay_defaultshader_.vertex)).to.be(true);
+      expect(context.getProgram.calledWithExactly(fragment, vertex)).to.be(true);
       expect(context.useProgram.calledOnce).to.be(true);
     });
 
diff --git a/test/spec/ol/render/webgl/texturereplay.test.js b/test/spec/ol/render/webgl/texturereplay.test.js
index 64d298753e..a86e239515 100644
--- a/test/spec/ol/render/webgl/texturereplay.test.js
+++ b/test/spec/ol/render/webgl/texturereplay.test.js
@@ -1,6 +1,6 @@
 import WebGLTextureReplay from '../../../../../src/ol/render/webgl/TextureReplay.js';
-import _ol_render_webgl_texturereplay_defaultshader_ from '../../../../../src/ol/render/webgl/texturereplay/defaultshader.js';
-import _ol_render_webgl_texturereplay_defaultshader_Locations_ from '../../../../../src/ol/render/webgl/texturereplay/defaultshader/Locations.js';
+import {fragment, vertex} from '../../../../../src/ol/render/webgl/texturereplay/defaultshader.js';
+import Locations from '../../../../../src/ol/render/webgl/texturereplay/defaultshader/Locations.js';
 
 describe('ol.render.webgl.TextureReplay', function() {
   let replay;
@@ -30,8 +30,7 @@ describe('ol.render.webgl.TextureReplay', function() {
 
     it('returns the locations used by the shaders', function() {
       const locations = replay.setUpProgram(gl, context, [2, 2], 1);
-      expect(locations).to.be.a(
-        _ol_render_webgl_texturereplay_defaultshader_Locations_);
+      expect(locations).to.be.a(Locations);
     });
 
     it('gets and compiles the shaders', function() {
@@ -39,9 +38,7 @@ describe('ol.render.webgl.TextureReplay', function() {
       sinon.spy(context, 'useProgram');
 
       replay.setUpProgram(gl, context, [2, 2], 1);
-      expect(context.getProgram.calledWithExactly(
-        _ol_render_webgl_texturereplay_defaultshader_.fragment,
-        _ol_render_webgl_texturereplay_defaultshader_.vertex)).to.be(true);
+      expect(context.getProgram.calledWithExactly(fragment, vertex)).to.be(true);
       expect(context.useProgram.calledOnce).to.be(true);
     });