Texture Light (Attenuated LOD)

by Matt

HTML

<base href="https://rawcdn.githack.com/mrdoob/three.js/r151/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",
      "postprocessing": "https://cdn.jsdelivr.net/npm/[email protected]/build/postprocessing.esm.js",
      "realism-effects": "https://cdn.jsdelivr.net/npm/[email protected]/dist/index.js",
      "@pmndrs/vanilla": "https://cdn.jsdelivr.net/npm/@pmndrs/[email protected]/index.js"
		}
}
</script>

CSS

canvas {
	position: fixed;
	inset: 0;
}

JavaScript

import * as THREE from 'three'
import Stats from 'three/addons/libs/stats.module.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
import { TransformControls } from 'three/addons/controls/TransformControls.js'
import { RGBELoader } from 'three/addons/loaders/RGBELoader.js'
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
import { GPUComputationRenderer } from 'three/addons/misc/GPUComputationRenderer.js';
import { GUI } from 'lil-gui'
import {
  EffectComposer, EffectPass,
	BloomEffect, SSAOEffect, VignetteEffect,
  RenderPass, NormalPass, DepthDownsamplingPass
} from "postprocessing";
import { pcss } from "@pmndrs/vanilla"


let scene, camera, renderer, composer
let orbitControls, clock
let params, stats
let screenLight, screenLightHelper, gpuCompute, sampler, rtSampler

init().then(animate)

async function init() {

	params = {
	}
  
  injectShaderChunks()
	
	scene = new THREE.Scene()
  scene.fog = new THREE.Fog( 'black', 10, 50 );

	camera = new THREE.PerspectiveCamera(50, undefined, 0.1, 1000)
	camera.position.set(-8, 5, 8)
	
	clock = new THREE.Clock()

	renderer = new THREE.WebGLRenderer({
  	powerPreference: "high-performance",
    antialias: false,
    stencil: false,
    depth: false
  })
	renderer.toneMapping = THREE.ACESFilmicToneMapping
  renderer.shadowMap.enabled = true
	document.body.appendChild(renderer.domElement)
  

	orbitControls = new OrbitControls(camera, renderer.domElement)
  orbitControls.target.set(0, 2, -2)
  
  const grid = new THREE.GridHelper()
  //scene.add(grid)
  
  const ambient = new THREE.HemisphereLight( 0xffffff, 0x444444, 0.05 );
	
	const rgbeLoader = new RGBELoader()
	const gltfLoader = new GLTFLoader()
	
	const [ video ] = await Promise.all([
    loadVideoTexture('textures/sintel.mp4')
	])
  video.generateMipmaps = true
  video.minFilter = THREE.LinearMipmapLinearFilter
  
  video.image.currentTime = 3
  
  const samplerSize = 8
  sampler = new TextureSampler(renderer, video,...