diff --git a/src/ol/renderer/webgl-new/PointsLayer.js b/src/ol/renderer/webgl-new/PointsLayer.js
index f397ece314..051accba9f 100644
--- a/src/ol/renderer/webgl-new/PointsLayer.js
+++ b/src/ol/renderer/webgl-new/PointsLayer.js
@@ -10,10 +10,12 @@ import WebGLFragment from "../../webgl/Fragment";
 import GeometryType from "../../geom/GeometryType";
 
 const VERTEX_SHADER = `
+  precision mediump float;
   attribute vec2 a_position;
   attribute vec2 a_texCoord;
   attribute float a_opacity;
   attribute float a_rotateWithView;
+  attribute vec2 a_offsets;
   
   uniform mat4 u_projectionMatrix;
   uniform mat4 u_offsetScaleMatrix;
@@ -34,6 +36,7 @@ const VERTEX_SHADER = `
   }`;
 
 const FRAGMENT_SHADER = `
+  precision mediump float;
   uniform float u_opacity;
   uniform sampler2D u_image;
   
diff --git a/src/ol/webgl/Context.js b/src/ol/webgl/Context.js
index 864c2545ab..53d9b938c1 100644
--- a/src/ol/webgl/Context.js
+++ b/src/ol/webgl/Context.js
@@ -37,7 +37,8 @@ export const DefaultAttrib = {
   POSITION: 'a_position',
   TEX_COORD: 'a_texCoord',
   OPACITY: 'a_opacity',
-  ROTATE_WITH_VIEW: 'a_rotateWithView'
+  ROTATE_WITH_VIEW: 'a_rotateWithView',
+  OFFSETS: 'a_offsets'
 };
 
 /**
@@ -236,50 +237,6 @@ class WebGLContext extends Disposable {
     return this.gl_;
   }
 
-  /**
-   * Get shader from the cache if it's in the cache. Otherwise, create
-   * the WebGL shader, compile it, and add entry to cache.
-   * @param {import("./Shader.js").default} shaderObject Shader object.
-   * @return {WebGLShader} Shader.
-   */
-  getShader(shaderObject) {
-    const shaderKey = getUid(shaderObject);
-    if (shaderKey in this.shaderCache_) {
-      return this.shaderCache_[shaderKey];
-    } else {
-      const gl = this.getGL();
-      const shader = gl.createShader(shaderObject.getType());
-      gl.shaderSource(shader, shaderObject.getSource());
-      gl.compileShader(shader);
-      this.shaderCache_[shaderKey] = shader;
-      return shader;
-    }
-  }
-
-  /**
-   * Get the program from the cache if it's in the cache. Otherwise create
-   * the WebGL program, attach the shaders to it, and add an entry to the
-   * cache.
-   * @param {import("./Fragment.js").default} fragmentShaderObject Fragment shader.
-   * @param {import("./Vertex.js").default} vertexShaderObject Vertex shader.
-   * @return {WebGLProgram} Program.
-   */
-  getProgram(fragmentShaderObject, vertexShaderObject) {
-    const programKey = getUid(fragmentShaderObject) + '/' + getUid(vertexShaderObject);
-    if (programKey in this.programCache_) {
-      return this.programCache_[programKey];
-    } else {
-      const gl = this.getGL();
-      const program = gl.createProgram();
-      gl.attachShader(program, this.getShader(fragmentShaderObject));
-      gl.attachShader(program, this.getShader(vertexShaderObject));
-      gl.linkProgram(program);
-      this.programCache_[programKey] = program;
-      return program;
-    }
-  }
-
-
   /**
    * Sets the matrices uniforms for a given frame state
    * @param {import("../PluggableMap.js").FrameState} frameState Frame state.
@@ -309,6 +266,52 @@ class WebGLContext extends Disposable {
     this.setUniformMatrixValue(DefaultUniform.OFFSET_ROTATION_MATRIX, fromTransform(this.tmpMat4_, offsetRotateMatrix));
   }
 
+  /**
+   * Get shader from the cache if it's in the cache. Otherwise, create
+   * the WebGL shader, compile it, and add entry to cache.
+   * @param {import("./Shader.js").default} shaderObject Shader object.
+   * @return {WebGLShader} Shader.
+   */
+  getShader(shaderObject) {
+    const shaderKey = getUid(shaderObject);
+    if (shaderKey in this.shaderCache_) {
+      return this.shaderCache_[shaderKey];
+    } else {
+      const gl = this.getGL();
+      const shader = gl.createShader(shaderObject.getType());
+      gl.shaderSource(shader, shaderObject.getSource());
+      gl.compileShader(shader);
+      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+        console.error(`Shader compilation failed - log:\n${gl.getShaderInfoLog(shader)}`);
+      }
+      this.shaderCache_[shaderKey] = shader;
+      return shader;
+    }
+  }
+
+  /**
+   * Get the program from the cache if it's in the cache. Otherwise create
+   * the WebGL program, attach the shaders to it, and add an entry to the
+   * cache.
+   * @param {import("./Fragment.js").default} fragmentShaderObject Fragment shader.
+   * @param {import("./Vertex.js").default} vertexShaderObject Vertex shader.
+   * @return {WebGLProgram} Program.
+   */
+  getProgram(fragmentShaderObject, vertexShaderObject) {
+    const programKey = getUid(fragmentShaderObject) + '/' + getUid(vertexShaderObject);
+    if (programKey in this.programCache_) {
+      return this.programCache_[programKey];
+    } else {
+      const gl = this.getGL();
+      const program = gl.createProgram();
+      gl.attachShader(program, this.getShader(fragmentShaderObject));
+      gl.attachShader(program, this.getShader(vertexShaderObject));
+      gl.linkProgram(program);
+      this.programCache_[programKey] = program;
+      return program;
+    }
+  }
+
   /**
    * Will get the location from the shader or the cache
    * @param {string} name Uniform name