Accumulation of fixed shadows

by javiersanjuan

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
    <script src="https://unpkg.com/[email protected]/examples/js/controls/OrbitControls.js"></script>
    <script src="https://unpkg.com/[email protected]/examples/js/loaders/GLTFLoader.js"></script>
    <script src="https://unpkg.com/[email protected]/examples/js/misc/ProgressiveLightMap.js"></script>
    <script src="https://unpkg.com/[email protected]/examples/js/controls/TransformControls.js"></script>
    <script src="https://unpkg.com/[email protected]/examples/jsm/libs/lil-gui.module.min.js';"></script>
    <script src="https://unpkg.com/[email protected]/index.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shadow accumulation</title>
    <style>
        
        *
        {
            margin: 0;
            padding: 0;
        }

        html,
        body
        {
            overflow: hidden;
        }

        .webgl
        {
            position: fixed;
            top: 0;
            left: 0;
            outline: none;
        }

        .info_text
        {
            position: absolute;
            top: 5%;
            left: 5%;
            width: 200px;
            padding: 10px;
            background: #000000cc;

            color: #ffff00;
            font-family: Arial, Helvetica, sans-serif;
            text-align: center;
            font-size: 14x;
        }

        </style>
</head>
<body>
    <canvas class="webgl"></canvas>

    <div class="info_text"></div>

</body>
</html>

JavaScript

import { GUI } from 'https://unpkg.com/[email protected]/examples/jsm/libs/lil-gui.module.min.js';

/**
 * Base
 */
// Variables
let date_time, pos, pos_altitude, pos_azimuth
let params = { 'Enable': true, 'Blur Edges': true, 'Blend Window': 900, 'Light Radius': 50, 'Ambient Weight': 0.5, 'Accumulate 360º shadows': accumulateShadows  }
const mouse = new THREE.Vector2()
const lightMapRes = 1024 
let camera, scene, renderer, controls, control, progressiveSurfacemap
const lightmapObjects = []

// Debug
const gui = new GUI({ closed: false, name: 'Settings' } )

// Canvas
const canvas = document.querySelector('canvas.webgl')
let text = document.querySelector('.info_text')

// Scene
scene = new THREE.Scene()

// Sizes
const sizes = { width: window.innerWidth, height: window.innerHeight }

// Renderer
renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
renderer.shadowMap.enabled = true

// Camera
camera = new THREE.OrthographicCamera(sizes.width / - 4, sizes.width / 4, sizes.height / 4, sizes.height / - 4, 1, 2000 )
camera.position.set(110, -160, 50)
camera.up.set( 0, 0, 1 )

// Controls
controls = new THREE.OrbitControls(camera, canvas)
controls.enableDamping = true
controls.update()

// Progressive lightmap
progressiveSurfacemap = new THREE.ProgressiveLightMap( renderer, lightMapRes )

/**
 * Lights
 */
// Ambient Light
const ambientLight = new THREE.AmbientLight(0xffffff, 0.1)
scene.add(ambientLight)
lightmapObjects.push( ambientLight )

// Directional Light 1
const directionalLight1 = new THREE.DirectionalLight(0xffffff, 1)
scene.add(directionalLight1)
directionalLight1.castShadow = true
directionalLight1.shadow.mapSize.width = 1024
directionalLight1.shadow.mapSize.height = 1024
directionalLight1.shadow.camera.near = 1
directionalLight1.shadow.camera.far = 200
directionalLight1.shadow.camera.top = 150
directionalLight1.shadow.camera.right =...