You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
394 lines
11 KiB
394 lines
11 KiB
3 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<title>three.js webgl - tiled forward lighting</title>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
||
|
|
<link type="text/css" rel="stylesheet" href="main.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="info">
|
||
|
|
<a href="https://threejs.org" target="_blank" rel="noopener">threejs</a> - Tiled forward lighting<br/>
|
||
|
|
Created by <a href="https://github.com/wizgrav" target="_blank" rel="noopener">wizgrav</a>.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Import maps polyfill -->
|
||
|
|
<!-- Remove this when import maps will be widely supported -->
|
||
|
|
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
|
||
|
|
|
||
|
|
<script type="importmap">
|
||
|
|
{
|
||
|
|
"imports": {
|
||
|
|
"three": "../build/three.module.js",
|
||
|
|
"three/addons/": "./jsm/"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script type="module">
|
||
|
|
|
||
|
|
import * as THREE from 'three';
|
||
|
|
|
||
|
|
import Stats from 'three/addons/libs/stats.module.js';
|
||
|
|
|
||
|
|
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
||
|
|
import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
|
||
|
|
|
||
|
|
import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
|
||
|
|
|
||
|
|
// Simple form of tiled forward lighting
|
||
|
|
// using texels as bitmasks of 32 lights
|
||
|
|
|
||
|
|
const RADIUS = 75;
|
||
|
|
|
||
|
|
THREE.ShaderChunk[ 'lights_pars_begin' ] += [
|
||
|
|
'',
|
||
|
|
'#if defined TILED_FORWARD',
|
||
|
|
'uniform vec4 tileData;',
|
||
|
|
'uniform sampler2D tileTexture;',
|
||
|
|
'uniform sampler2D lightTexture;',
|
||
|
|
'#endif'
|
||
|
|
].join( '\n' );
|
||
|
|
|
||
|
|
THREE.ShaderChunk[ 'lights_fragment_end' ] += [
|
||
|
|
'',
|
||
|
|
'#if defined TILED_FORWARD',
|
||
|
|
'vec2 tUv = floor(gl_FragCoord.xy / tileData.xy * 32.) / 32. + tileData.zw;',
|
||
|
|
'vec4 tile = texture2D(tileTexture, tUv);',
|
||
|
|
'for (int i=0; i < 4; i++) {',
|
||
|
|
' float tileVal = tile.x * 255.;',
|
||
|
|
' tile.xyzw = tile.yzwx;',
|
||
|
|
' if(tileVal == 0.){ continue; }',
|
||
|
|
' float tileDiv = 128.;',
|
||
|
|
' for (int j=0; j < 8; j++) {',
|
||
|
|
' if (tileVal < tileDiv) { tileDiv *= 0.5; continue; }',
|
||
|
|
' tileVal -= tileDiv;',
|
||
|
|
' tileDiv *= 0.5;',
|
||
|
|
' PointLight pointlight;',
|
||
|
|
' float uvx = (float(8 * i + j) + 0.5) / 32.;',
|
||
|
|
' vec4 lightData = texture2D(lightTexture, vec2(uvx, 0.));',
|
||
|
|
' vec4 lightColor = texture2D(lightTexture, vec2(uvx, 1.));',
|
||
|
|
' pointlight.position = lightData.xyz;',
|
||
|
|
' pointlight.distance = lightData.w;',
|
||
|
|
' pointlight.color = lightColor.rgb;',
|
||
|
|
' pointlight.decay = lightColor.a;',
|
||
|
|
' getPointLightInfo( pointlight, geometry, directLight );',
|
||
|
|
' RE_Direct( directLight, geometry, material, reflectedLight );',
|
||
|
|
' }',
|
||
|
|
'}',
|
||
|
|
'#endif'
|
||
|
|
].join( '\n' );
|
||
|
|
|
||
|
|
const lights = [];
|
||
|
|
|
||
|
|
const State = {
|
||
|
|
rows: 0,
|
||
|
|
cols: 0,
|
||
|
|
width: 0,
|
||
|
|
height: 0,
|
||
|
|
tileData: { value: null },
|
||
|
|
tileTexture: { value: null },
|
||
|
|
lightTexture: {
|
||
|
|
value: new THREE.DataTexture( new Float32Array( 32 * 2 * 4 ), 32, 2, THREE.RGBAFormat, THREE.FloatType )
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
function resizeTiles() {
|
||
|
|
|
||
|
|
const width = window.innerWidth;
|
||
|
|
const height = window.innerHeight;
|
||
|
|
|
||
|
|
State.width = width;
|
||
|
|
State.height = height;
|
||
|
|
State.cols = Math.ceil( width / 32 );
|
||
|
|
State.rows = Math.ceil( height / 32 );
|
||
|
|
State.tileData.value = [ width, height, 0.5 / Math.ceil( width / 32 ), 0.5 / Math.ceil( height / 32 ) ];
|
||
|
|
State.tileTexture.value = new THREE.DataTexture( new Uint8Array( State.cols * State.rows * 4 ), State.cols, State.rows );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
// Generate the light bitmasks and store them in the tile texture
|
||
|
|
function tileLights( renderer, scene, camera ) {
|
||
|
|
|
||
|
|
if ( ! camera.projectionMatrix ) return;
|
||
|
|
|
||
|
|
const d = State.tileTexture.value.image.data;
|
||
|
|
const ld = State.lightTexture.value.image.data;
|
||
|
|
|
||
|
|
const viewMatrix = camera.matrixWorldInverse;
|
||
|
|
|
||
|
|
d.fill( 0 );
|
||
|
|
|
||
|
|
const vector = new THREE.Vector3();
|
||
|
|
|
||
|
|
lights.forEach( function ( light, index ) {
|
||
|
|
|
||
|
|
vector.setFromMatrixPosition( light.matrixWorld );
|
||
|
|
|
||
|
|
const bs = lightBounds( camera, vector, light._light.radius );
|
||
|
|
|
||
|
|
vector.applyMatrix4( viewMatrix );
|
||
|
|
vector.toArray( ld, 4 * index );
|
||
|
|
ld[ 4 * index + 3 ] = light._light.radius;
|
||
|
|
light._light.color.toArray( ld, 32 * 4 + 4 * index );
|
||
|
|
ld[ 32 * 4 + 4 * index + 3 ] = light._light.decay;
|
||
|
|
|
||
|
|
if ( bs[ 1 ] < 0 || bs[ 0 ] > State.width || bs[ 3 ] < 0 || bs[ 2 ] > State.height ) return;
|
||
|
|
if ( bs[ 0 ] < 0 ) bs[ 0 ] = 0;
|
||
|
|
if ( bs[ 1 ] > State.width ) bs[ 1 ] = State.width;
|
||
|
|
if ( bs[ 2 ] < 0 ) bs[ 2 ] = 0;
|
||
|
|
if ( bs[ 3 ] > State.height ) bs[ 3 ] = State.height;
|
||
|
|
|
||
|
|
const i4 = Math.floor( index / 8 ), i8 = 7 - ( index % 8 );
|
||
|
|
|
||
|
|
for ( let i = Math.floor( bs[ 2 ] / 32 ); i <= Math.ceil( bs[ 3 ] / 32 ); i ++ ) {
|
||
|
|
|
||
|
|
for ( let j = Math.floor( bs[ 0 ] / 32 ); j <= Math.ceil( bs[ 1 ] / 32 ); j ++ ) {
|
||
|
|
|
||
|
|
d[ ( State.cols * i + j ) * 4 + i4 ] |= 1 << i8;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
} );
|
||
|
|
|
||
|
|
State.tileTexture.value.needsUpdate = true;
|
||
|
|
State.lightTexture.value.needsUpdate = true;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
// Screen rectangle bounds from light sphere's world AABB
|
||
|
|
const lightBounds = function () {
|
||
|
|
|
||
|
|
const v = new THREE.Vector3();
|
||
|
|
return function ( camera, pos, r ) {
|
||
|
|
|
||
|
|
let minX = State.width, maxX = 0, minY = State.height, maxY = 0;
|
||
|
|
const hw = State.width / 2, hh = State.height / 2;
|
||
|
|
|
||
|
|
for ( let i = 0; i < 8; i ++ ) {
|
||
|
|
|
||
|
|
v.copy( pos );
|
||
|
|
v.x += i & 1 ? r : - r;
|
||
|
|
v.y += i & 2 ? r : - r;
|
||
|
|
v.z += i & 4 ? r : - r;
|
||
|
|
const vector = v.project( camera );
|
||
|
|
const x = ( vector.x * hw ) + hw;
|
||
|
|
const y = ( vector.y * hh ) + hh;
|
||
|
|
minX = Math.min( minX, x );
|
||
|
|
maxX = Math.max( maxX, x );
|
||
|
|
minY = Math.min( minY, y );
|
||
|
|
maxY = Math.max( maxY, y );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
return [ minX, maxX, minY, maxY ];
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
}();
|
||
|
|
|
||
|
|
|
||
|
|
// Rendering
|
||
|
|
|
||
|
|
const container = document.createElement( 'div' );
|
||
|
|
document.body.appendChild( container );
|
||
|
|
const camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
|
||
|
|
camera.position.set( 0.0, 0.0, 240.0 );
|
||
|
|
const scene = new THREE.Scene();
|
||
|
|
scene.background = new THREE.Color( 0x111111 );
|
||
|
|
|
||
|
|
const renderer = new THREE.WebGLRenderer();
|
||
|
|
renderer.toneMapping = THREE.NoToneMapping;
|
||
|
|
container.appendChild( renderer.domElement );
|
||
|
|
|
||
|
|
const renderTarget = new THREE.WebGLRenderTarget();
|
||
|
|
|
||
|
|
scene.add( new THREE.AmbientLight( 0xffffff, 0.33 ) );
|
||
|
|
// At least one regular Pointlight is needed to activate light support
|
||
|
|
scene.add( new THREE.PointLight( 0xff0000, 0.1, 0.1 ) );
|
||
|
|
|
||
|
|
const bloom = new UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 0.8, 0.6, 0.8 );
|
||
|
|
bloom.renderToScreen = true;
|
||
|
|
|
||
|
|
const stats = new Stats();
|
||
|
|
container.appendChild( stats.dom );
|
||
|
|
|
||
|
|
const controls = new OrbitControls( camera, renderer.domElement );
|
||
|
|
controls.minDistance = 120;
|
||
|
|
controls.maxDistance = 320;
|
||
|
|
|
||
|
|
const materials = [];
|
||
|
|
|
||
|
|
const Heads = [
|
||
|
|
{ type: 'physical', uniforms: { 'diffuse': 0x888888, 'metalness': 1.0, 'roughness': 0.66 }, defines: {} },
|
||
|
|
{ type: 'standard', uniforms: { 'diffuse': 0x666666, 'metalness': 0.1, 'roughness': 0.33 }, defines: {} },
|
||
|
|
{ type: 'phong', uniforms: { 'diffuse': 0x777777, 'shininess': 20 }, defines: {} },
|
||
|
|
{ type: 'phong', uniforms: { 'diffuse': 0x555555, 'shininess': 10 }, defines: { TOON: 1 } }
|
||
|
|
];
|
||
|
|
|
||
|
|
function init( geom ) {
|
||
|
|
|
||
|
|
const sphereGeom = new THREE.SphereGeometry( 0.5, 32, 32 );
|
||
|
|
const tIndex = Math.round( Math.random() * 3 );
|
||
|
|
|
||
|
|
Object.keys( Heads ).forEach( function ( t, index ) {
|
||
|
|
|
||
|
|
const g = new THREE.Group();
|
||
|
|
const conf = Heads[ t ];
|
||
|
|
const ml = THREE.ShaderLib[ conf.type ];
|
||
|
|
const mtl = new THREE.ShaderMaterial( {
|
||
|
|
lights: true,
|
||
|
|
fragmentShader: ml.fragmentShader,
|
||
|
|
vertexShader: ml.vertexShader,
|
||
|
|
uniforms: THREE.UniformsUtils.clone( ml.uniforms ),
|
||
|
|
defines: conf.defines,
|
||
|
|
transparent: tIndex === index ? true : false,
|
||
|
|
} );
|
||
|
|
|
||
|
|
mtl.extensions.derivatives = true;
|
||
|
|
|
||
|
|
mtl.uniforms[ 'opacity' ].value = tIndex === index ? 0.9 : 1;
|
||
|
|
mtl.uniforms[ 'tileData' ] = State.tileData;
|
||
|
|
mtl.uniforms[ 'tileTexture' ] = State.tileTexture;
|
||
|
|
mtl.uniforms[ 'lightTexture' ] = State.lightTexture;
|
||
|
|
|
||
|
|
for ( const u in conf.uniforms ) {
|
||
|
|
|
||
|
|
const vu = conf.uniforms[ u ];
|
||
|
|
|
||
|
|
if ( mtl.uniforms[ u ].value.set ) {
|
||
|
|
|
||
|
|
mtl.uniforms[ u ].value.set( vu );
|
||
|
|
|
||
|
|
} else {
|
||
|
|
|
||
|
|
mtl.uniforms[ u ].value = vu;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
mtl.defines[ 'TILED_FORWARD' ] = 1;
|
||
|
|
materials.push( mtl );
|
||
|
|
|
||
|
|
const obj = new THREE.Mesh( geom, mtl );
|
||
|
|
obj.position.y = - 37;
|
||
|
|
mtl.side = tIndex === index ? THREE.FrontSide : THREE.DoubleSide;
|
||
|
|
|
||
|
|
g.rotation.y = index * Math.PI / 2;
|
||
|
|
g.position.x = Math.sin( index * Math.PI / 2 ) * RADIUS;
|
||
|
|
g.position.z = Math.cos( index * Math.PI / 2 ) * RADIUS;
|
||
|
|
g.add( obj );
|
||
|
|
|
||
|
|
for ( let i = 0; i < 8; i ++ ) {
|
||
|
|
|
||
|
|
const color = new THREE.Color().setHSL( Math.random(), 1.0, 0.5 );
|
||
|
|
const l = new THREE.Group();
|
||
|
|
|
||
|
|
l.add( new THREE.Mesh(
|
||
|
|
sphereGeom,
|
||
|
|
new THREE.MeshBasicMaterial( {
|
||
|
|
color: color
|
||
|
|
} )
|
||
|
|
) );
|
||
|
|
|
||
|
|
l.add( new THREE.Mesh(
|
||
|
|
sphereGeom,
|
||
|
|
new THREE.MeshBasicMaterial( {
|
||
|
|
color: color,
|
||
|
|
transparent: true,
|
||
|
|
opacity: 0.033
|
||
|
|
} )
|
||
|
|
) );
|
||
|
|
|
||
|
|
l.children[ 1 ].scale.set( 6.66, 6.66, 6.66 );
|
||
|
|
|
||
|
|
l._light = {
|
||
|
|
color: color,
|
||
|
|
radius: RADIUS,
|
||
|
|
decay: 1,
|
||
|
|
sy: Math.random(),
|
||
|
|
sr: Math.random(),
|
||
|
|
sc: Math.random(),
|
||
|
|
py: Math.random() * Math.PI,
|
||
|
|
pr: Math.random() * Math.PI,
|
||
|
|
pc: Math.random() * Math.PI,
|
||
|
|
dir: Math.random() > 0.5 ? 1 : - 1
|
||
|
|
};
|
||
|
|
|
||
|
|
lights.push( l );
|
||
|
|
g.add( l );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
scene.add( g );
|
||
|
|
|
||
|
|
} );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function update( now ) {
|
||
|
|
|
||
|
|
lights.forEach( function ( l ) {
|
||
|
|
|
||
|
|
const ld = l._light;
|
||
|
|
const radius = 0.8 + 0.2 * Math.sin( ld.pr + ( 0.6 + 0.3 * ld.sr ) * now );
|
||
|
|
l.position.x = ( Math.sin( ld.pc + ( 0.8 + 0.2 * ld.sc ) * now * ld.dir ) ) * radius * RADIUS;
|
||
|
|
l.position.z = ( Math.cos( ld.pc + ( 0.8 + 0.2 * ld.sc ) * now * ld.dir ) ) * radius * RADIUS;
|
||
|
|
l.position.y = Math.sin( ld.py + ( 0.8 + 0.2 * ld.sy ) * now ) * radius * 32;
|
||
|
|
|
||
|
|
} );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function onWindowResize() {
|
||
|
|
|
||
|
|
renderer.setPixelRatio( window.devicePixelRatio );
|
||
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
||
|
|
renderTarget.setSize( window.innerWidth, window.innerHeight );
|
||
|
|
bloom.setSize( window.innerWidth, window.innerHeight );
|
||
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
||
|
|
camera.updateProjectionMatrix();
|
||
|
|
resizeTiles();
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function postEffect( renderer ) {
|
||
|
|
|
||
|
|
bloom.render( renderer, null, renderTarget );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
scene.onBeforeRender = tileLights;
|
||
|
|
|
||
|
|
scene.onAfterRender = postEffect;
|
||
|
|
|
||
|
|
const loader = new OBJLoader();
|
||
|
|
|
||
|
|
loader.load( 'models/obj/walt/WaltHead.obj', function ( object ) {
|
||
|
|
|
||
|
|
const geometry = object.children[ 0 ].geometry;
|
||
|
|
|
||
|
|
window.addEventListener( 'resize', onWindowResize );
|
||
|
|
|
||
|
|
init( geometry );
|
||
|
|
onWindowResize();
|
||
|
|
|
||
|
|
renderer.setAnimationLoop( function ( time ) {
|
||
|
|
|
||
|
|
update( time / 1000 );
|
||
|
|
stats.begin();
|
||
|
|
renderer.setRenderTarget( renderTarget );
|
||
|
|
renderer.render( scene, camera );
|
||
|
|
stats.end();
|
||
|
|
|
||
|
|
} );
|
||
|
|
|
||
|
|
} );
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|