Accumulative Shadows Pre-render

by Matt

HTML

<base href="https://rawcdn.githack.com/mrdoob/three.js/r152/examples/" />
<script async src="https://cdn.jsdelivr.net/npm/[email protected]/dist/es-module-shims.js"></script>
<script type="importmap">
{
		"imports": {
			"three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
			"three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/",
			"lil-gui": "https://cdn.jsdelivr.net/npm/[email protected]/dist/lil-gui.esm.min.js"
		}
}
</script>

CSS

canvas {
	position: fixed;
	inset: 0;
}

JavaScript

import * as THREE from 'three';
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { TransformControls } from 'three/addons/controls/TransformControls.js';
import { ProgressiveLightMap } from 'three/addons/misc/ProgressiveLightMap.js';

// ShadowMap + LightMap Res and Number of Directional Lights
const shadowMapRes = 512, lightMapRes = 1024, lightCount = 8;
let camera, scene, renderer, controls, control, control2,
    object = new THREE.Mesh(), lightOrigin = null, progressiveSurfacemap;
const dirLights = [], lightmapObjects = [];
const params = { 'Enable': false, 'Blur Edges': true, 'Blend Window': 200,
                'Light Radius': 50, 'Ambient Weight': 0.5, 'Debug Lightmap': true,
                update: () => updateShadowMap(300) };
init();
createGUI();
animate();

function init() {

  // renderer
  renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );
  renderer.shadowMap.enabled = true;
  document.body.appendChild( renderer.domElement );

  // camera
  camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
  camera.position.set( 0, 100, 200 );
  camera.name = 'Camera';

  // scene
  scene = new THREE.Scene();
  scene.background = new THREE.Color( 0x949494 );
  scene.fog = new THREE.Fog( 0x949494, 1000, 3000 );

  // progressive lightmap
  progressiveSurfacemap = new ProgressiveLightMap( renderer, lightMapRes );

  // directional lighting "origin"
  lightOrigin = new THREE.Group();
  lightOrigin.position.set( 60, 150, 100 );
  scene.add( lightOrigin );

  // transform gizmo
  control = new TransformControls( camera, renderer.domElement );
  control.addEventListener( 'dragging-changed', ( event ) => {

    controls.enabled = ! event.value;

  } );
 ...