emancipate-xr/js/materials/CustomJitterMaterial.js

import * as THREE from 'three';

export function createCustomJitterMaterial(jitterLevel, texture = null) {
  return new THREE.MeshStandardMaterial({
    map: texture,
    onBeforeCompile: (shader) => {
      // Add a uniform for the jitter level
      shader.uniforms.uJitterLevel = { value: jitterLevel };

      // Modify the vertex shader to apply the jitter effect
      shader.vertexShader = `
        uniform float uJitterLevel;
        ${shader.vertexShader}
      `.replace(
        `}`, // Replace the closing brace of the main function
        `
        // Apply jitter effect in clip space at the end of the shader
        gl_Position.xy /= gl_Position.w;
        gl_Position.xy = floor(gl_Position.xy * uJitterLevel) / uJitterLevel;
        gl_Position.xy *= gl_Position.w;
        }`
      );
    },
  });
}