Shader Recompilation Bug Reproduction

by BruOps

HTML

<div id="container"></div>

CSS

body {
  background-color: #000;
  margin: 0px;
  overflow: hidden;
}

#container {
  position: absolute;
  top: 0px;
  width: 100%;
  bottom: 0px;
}

JavaScript

import * as THREE from "https://threejs.org/build/three.module.js";

import { EffectComposer } from "https://threejs.org/examples/jsm/postprocessing/EffectComposer.js";
import { RenderPass } from "https://threejs.org/examples/jsm/postprocessing/RenderPass.js";
import { SSAARenderPass } from "https://threejs.org/examples/jsm/postprocessing/SSAARenderPass.js";
import { ShaderPass } from "https://threejs.org/examples/jsm/postprocessing/ShaderPass.js";
import { SSAOPass } from "https://threejs.org/examples/jsm/postprocessing/SSAOPass.js";
import { GammaCorrectionShader } from "https://threejs.org/examples/jsm/shaders/GammaCorrectionShader.js";
import { CopyShader } from "https://threejs.org/examples/jsm/shaders/CopyShader.js";
import { FXAAShader } from "https://threejs.org/examples/jsm/shaders/FXAAShader.js";

var camera, composerCamera, scene, renderer, clock, group, container;

var composer, fxaaPass;

init();
animate();

function init() {

  container = document.getElementById( "container" );

  camera = new THREE.PerspectiveCamera(
    45,
    container.offsetWidth / container.offsetHeight,
    1,
    2000
  );
  camera.position.z = 500;
  // Same position
  composerCamera = new THREE.PerspectiveCamera(
    45,
    container.offsetWidth / container.offsetHeight,
    1,
    2000
  );
  composerCamera.position.z = 500;

  scene = new THREE.Scene();
  scene.background = new THREE.Color( 0x002f2f );

  clock = new THREE.Clock();

  //

  var dirLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
  dirLight.position.set( - 3000, 1000, - 1000 );
  scene.add( dirLight );

  //

  group = new THREE.Group();

  var geometry = new THREE.TetrahedronBufferGeometry( 10 );
  var material = new THREE.MeshStandardMaterial( {
    color: 0xee0808,
    flatShading: true,
  } );

  var radius = 300;

  for ( var i = 0; i < 50; i ++ ) {

    var mesh = new THREE.Mesh( geometry, material );

    mesh.position.x = Math.random() * 2 * radius - radius;
    mesh.position.y =...