go run anaglyph.go -input=test_image_4.png -output=output.png -leftColor=ff0a0a -rightColor=00ffff -offset=8

// Declare uniform variables that will be accessible from JavaScript.
// sampler2D is a texture that we'll pass from the Three.js renderer.
// Separation, red, and cyan are floats that control the anaglyph effect.
uniform sampler2D tDiffuse;
uniform float separation;
uniform float red;
uniform float cyan;

// Declare varying variables that will receive interpolated values
// from the vertex shader. In this case, we'll get texture coordinates.
varying vec2 vUv;

// main() function is the entry point of the fragment shader.
void main() {
  // Sample the original color from the texture at the current
  // texture coordinate (vUv).
  vec4 color = texture2D(tDiffuse, vUv);

  // Sample the color for the left eye.
  // The texture coordinate is shifted horizontally by negative "separation" units.
  vec4 colorL = texture2D(tDiffuse, vUv + vec2(-(separation * -1.0), 0.0));

  // Sample the color for the right eye.
  // The texture coordinate is shifted horizontally by positive "separation" units.
  vec4 colorR = texture2D(tDiffuse, vUv + vec2(separation * -1.0, 0.0));

  // Combine the colors into an anaglyph effect.
  // The red component comes from the left-eye view.
  // The green and blue components come from the right-eye view.
  // We also apply the user-specified tint values for red and cyan.
  gl_FragColor = vec4(colorL.r * red, colorR.g * cyan, colorR.b * cyan, 1.0);
}

// Import required Three.js modules
import * as THREE from "three";
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
import { ShaderPass } from "three/examples/jsm/postprocessing/ShaderPass.js";
import * as dat from "dat.gui";

// Declare global variables for scene elements and effects
var camera, scene, renderer, composer;
var mesh;
var customPass;

// GUI parameters for shader
var params = {
  separation: 0.004,
  red: 1.0,
  cyan: 1.0,
};

// Declare a group object to hold multiple cubes
var cubeGroup;

// Initialize Three.js scene
function init() {
  // Create a WebGL renderer
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  // Create a perspective camera
  camera = new THREE.PerspectiveCamera(
    70,
    window.innerWidth / window.innerHeight,
    1,
    1000
  );
  camera.position.z = 600;

  // Create a scene
  scene = new THREE.Scene();

  // Add ambient light for consistent baseline lighting
  var ambientLight = new THREE.AmbientLight(0x404040, 40.0);
  scene.add(ambientLight);

  // Add point lights for dynamic shading
  const numberOfLights = 4;
  for (let i = 0; i < numberOfLights; i++) {
    let pointLight = new THREE.PointLight(0xffffff, 10000.0, 0);
    pointLight.position.set(
      Math.random() * 300 - 150,
      Math.random() * 300 - 150,
      Math.random() * 300 - 150
    );
    scene.add(pointLight);
  }

  // Initialize cube group as a THREE.Group object
  cubeGroup = new THREE.Group();

  // Loop to create a 3x3x3 cube of smaller cubes
  for (let x = -1; x <= 1; x++) {
    for (let y = -1; y <= 1; y++) {
      for (let z = -1; z <= 1; z++) {
        // Create geometry and material for each cube
        var geometry = new THREE.BoxGeometry(50, 50, 50);
        var material = new THREE.MeshPhongMaterial({
          color: 0xffffff,
          flatShading: true,
          shininess: 0,
        });

        // Create the cube mesh and position it
        var smallCube = new THREE.Mesh(geometry, material);
        smallCube.position.set(x * 100, y * 100, z * 100); // 100 units apart

        // Add each small cube to the cube group
        cubeGroup.add(smallCube);
      }
    }
  }

  // Add the cube group to the scene
  scene.add(cubeGroup);

  // Initialize post-processing composer
  composer = new EffectComposer(renderer);
  composer.addPass(new RenderPass(scene, camera));

  // Define custom shader for anaglyph effect
  var customShader = {
    uniforms: {
      tDiffuse: { value: null },
      separation: { value: params.separation },
      red: { value: params.red },
      cyan: { value: params.cyan },
    },
    vertexShader: `
      // Declare a varying variable vUv. Varying variables are used to pass
      // data from the vertex shader to the fragment shader.
      // 'vec2' means it's a 2D vector, which is perfect for 2D texture coordinates.
      varying vec2 vUv;

      // main() function is the entry point of the vertex shader.
      void main() {

        // Assign the built-in 'uv' attribute to our varying variable 'vUv'.
        // 'uv' holds the 2D texture coordinates provided by the geometry.
        // These coordinates will be interpolated for each fragment and
        // accessible in the fragment shader.
        vUv = uv;

        // Calculate the clip-space position of the current vertex.
        // 'projectionMatrix' is the camera's projection matrix,
        // 'modelViewMatrix' is the model-view matrix containing the
        // model's position, rotation and scale combined with the camera's position and orientation.
        // 'position' is the local position of the vertex.
        // Multiply these together to get the clip-space position.
        // We also set the w component to 1.0, as it's a homogeneous coordinate.
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
      }
    `,
    fragmentShader: `
      // Declare uniform variables that will be accessible from JavaScript.
      // sampler2D is a texture that we'll pass from the Three.js renderer.
      // Separation, red, and cyan are floats that control the anaglyph effect.
      uniform sampler2D tDiffuse;
      uniform float separation;
      uniform float red;
      uniform float cyan;

      // Declare varying variables that will receive interpolated values
      // from the vertex shader. In this case, we'll get texture coordinates.
      varying vec2 vUv;

      // main() function is the entry point of the fragment shader.
      void main() {
        // Sample the original color from the texture at the current
        // texture coordinate (vUv).
        vec4 color = texture2D(tDiffuse, vUv);

        // Sample the color for the left eye.
        // The texture coordinate is shifted horizontally by negative "separation" units.
        vec4 colorL = texture2D(tDiffuse, vUv + vec2(-(separation * -1.0), 0.0));

        // Sample the color for the right eye.
        // The texture coordinate is shifted horizontally by positive "separation" units.
        vec4 colorR = texture2D(tDiffuse, vUv + vec2(separation * -1.0, 0.0));

        // Combine the colors into an anaglyph effect.
        // The red component comes from the left-eye view.
        // The green and blue components come from the right-eye view.
        // We also apply the user-specified tint values for red and cyan.
        gl_FragColor = vec4(colorL.r * red, colorR.g * cyan, colorR.b * cyan, 1.0);
      }
    `,
  };

  // Add custom shader pass to composer
  customPass = new ShaderPass(customShader);
  composer.addPass(customPass);

  // Initialize GUI for user controls
  const gui = new dat.GUI();
  gui.add(params, "separation", 0.0, 0.2).onChange((value) => {
    customPass.uniforms["separation"].value = value;
  });
  gui.add(params, "red", 0.0, 1.0).onChange((value) => {
    customPass.uniforms["red"].value = value;
  });
  gui.add(params, "cyan", 0.0, 1.0).onChange((value) => {
    customPass.uniforms["cyan"].value = value;
  });
}

// Main animation loop
function animate() {
  requestAnimationFrame(animate);

  // Rotate the whole cube group
  cubeGroup.rotation.x += 0.005;
  cubeGroup.rotation.y += 0.005;

  // Rotate each individual cube within the group
  cubeGroup.children.forEach((cube) => {
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
  });

  composer.render();
}

// Execute the initialization function
init();
// Start the animation loop
animate();