playcanvas
Version:
Open-source WebGL/WebGPU 3D engine for the web
259 lines (258 loc) • 8.61 kB
JavaScript
import { Vec2 } from "../../core/math/vec2.js";
import { Vec4 } from "../../core/math/vec4.js";
import { PIXELFORMAT_SRGBA8 } from "../../platform/graphics/constants.js";
import { RenderTarget } from "../../platform/graphics/render-target.js";
import { Texture } from "../../platform/graphics/texture.js";
import { LIGHTTYPE_OMNI, LIGHTTYPE_SPOT, SHADOW_PCF3_32F, shadowTypeInfo } from "../constants.js";
import { ShadowMap } from "../renderer/shadow-map.js";
const _tempArray = [];
const _tempArray2 = [];
const _viewport = new Vec4();
const _scissor = new Vec4();
class Slot {
constructor(rect) {
this.size = Math.floor(rect.w * 1024);
this.used = false;
this.lightId = -1;
this.rect = rect;
}
}
class LightTextureAtlas {
constructor(device) {
this.device = device;
this.version = 1;
this.shadowAtlasResolution = 2048;
this.shadowAtlas = null;
this.shadowEdgePixels = 3;
this.cookieAtlasResolution = 4;
this.cookieAtlas = Texture.createDataTexture2D(this.device, "CookieAtlas", this.cookieAtlasResolution, this.cookieAtlasResolution, PIXELFORMAT_SRGBA8);
this.cookieRenderTarget = new RenderTarget({
colorBuffer: this.cookieAtlas,
depth: false,
flipY: true
});
this.slots = [];
this.atlasSplit = [];
this.cubeSlotsOffsets = [
new Vec2(0, 0),
new Vec2(0, 1),
new Vec2(1, 0),
new Vec2(1, 1),
new Vec2(2, 0),
new Vec2(2, 1)
];
this.scissorVec = new Vec4();
this.allocateShadowAtlas(1);
this.allocateCookieAtlas(1);
this.allocateUniforms();
}
destroy() {
this.destroyShadowAtlas();
this.destroyCookieAtlas();
}
destroyShadowAtlas() {
this.shadowAtlas?.destroy();
this.shadowAtlas = null;
}
destroyCookieAtlas() {
this.cookieAtlas?.destroy();
this.cookieAtlas = null;
this.cookieRenderTarget?.destroy();
this.cookieRenderTarget = null;
}
allocateShadowAtlas(resolution, shadowType = SHADOW_PCF3_32F) {
const existingFormat = this.shadowAtlas?.texture.format;
const requiredFormat = shadowTypeInfo.get(shadowType).format;
if (!this.shadowAtlas || this.shadowAtlas.texture.width !== resolution || existingFormat !== requiredFormat) {
this.version++;
this.destroyShadowAtlas();
this.shadowAtlas = ShadowMap.createAtlas(this.device, resolution, shadowType);
this.shadowAtlas.cached = true;
const scissorOffset = 4 / this.shadowAtlasResolution;
this.scissorVec.set(scissorOffset, scissorOffset, -2 * scissorOffset, -2 * scissorOffset);
}
}
allocateCookieAtlas(resolution) {
if (this.cookieAtlas.width !== resolution) {
this.cookieRenderTarget.resize(resolution, resolution);
this.version++;
}
}
allocateUniforms() {
this._shadowAtlasTextureId = this.device.scope.resolve("shadowAtlasTexture");
this._shadowAtlasParamsId = this.device.scope.resolve("shadowAtlasParams");
this._shadowAtlasParams = new Float32Array(2);
this._cookieAtlasTextureId = this.device.scope.resolve("cookieAtlasTexture");
}
updateUniforms() {
const rt = this.shadowAtlas.renderTargets[0];
const shadowBuffer = rt.depthBuffer;
this._shadowAtlasTextureId.setValue(shadowBuffer);
this._shadowAtlasParams[0] = this.shadowAtlasResolution;
this._shadowAtlasParams[1] = this.shadowEdgePixels;
this._shadowAtlasParamsId.setValue(this._shadowAtlasParams);
this._cookieAtlasTextureId.setValue(this.cookieAtlas);
}
subdivide(numLights, lightingParams) {
let atlasSplit = lightingParams.atlasSplit;
if (!atlasSplit) {
const gridSize = Math.ceil(Math.sqrt(numLights));
atlasSplit = _tempArray2;
atlasSplit[0] = gridSize;
atlasSplit.length = 1;
}
const arraysEqual = (a, b) => a.length === b.length && a.every((v, i) => v === b[i]);
if (!arraysEqual(atlasSplit, this.atlasSplit)) {
this.version++;
this.slots.length = 0;
this.atlasSplit.length = 0;
this.atlasSplit.push(...atlasSplit);
const splitCount = this.atlasSplit[0];
if (splitCount > 1) {
const invSize = 1 / splitCount;
for (let i = 0; i < splitCount; i++) {
for (let j = 0; j < splitCount; j++) {
const rect = new Vec4(i * invSize, j * invSize, invSize, invSize);
const nextLevelSplit = this.atlasSplit[1 + i * splitCount + j];
if (nextLevelSplit > 1) {
for (let x = 0; x < nextLevelSplit; x++) {
for (let y = 0; y < nextLevelSplit; y++) {
const invSizeNext = invSize / nextLevelSplit;
const rectNext = new Vec4(rect.x + x * invSizeNext, rect.y + y * invSizeNext, invSizeNext, invSizeNext);
this.slots.push(new Slot(rectNext));
}
}
} else {
this.slots.push(new Slot(rect));
}
}
}
} else {
this.slots.push(new Slot(new Vec4(0, 0, 1, 1)));
}
this.slots.sort((a, b) => {
return b.size - a.size;
});
}
}
collectLights(localLights, lightingParams) {
const cookiesEnabled = lightingParams.cookiesEnabled;
const shadowsEnabled = lightingParams.shadowsEnabled;
let needsShadowAtlas = false;
let needsCookieAtlas = false;
const lights = _tempArray;
lights.length = 0;
const processLights = (list) => {
for (let i = 0; i < list.length; i++) {
const light = list[i];
if (light.visibleThisFrame) {
const lightShadow = shadowsEnabled && light.castShadows;
const lightCookie = cookiesEnabled && !!light.cookie;
needsShadowAtlas || (needsShadowAtlas = lightShadow);
needsCookieAtlas || (needsCookieAtlas = lightCookie);
if (lightShadow || lightCookie) {
lights.push(light);
}
}
}
};
if (cookiesEnabled || shadowsEnabled) {
processLights(localLights);
}
lights.sort((a, b) => {
return b.maxScreenSize - a.maxScreenSize;
});
if (needsShadowAtlas) {
this.allocateShadowAtlas(this.shadowAtlasResolution, lightingParams.shadowType);
}
if (needsCookieAtlas) {
this.allocateCookieAtlas(this.cookieAtlasResolution);
}
if (needsShadowAtlas || needsCookieAtlas) {
this.subdivide(lights.length, lightingParams);
}
return lights;
}
// configure light to use assigned slot
setupSlot(light, rect) {
light.atlasViewport.copy(rect);
const faceCount = light.numShadowFaces;
for (let face = 0; face < faceCount; face++) {
if (light.castShadows || light._cookie) {
_viewport.copy(rect);
_scissor.copy(rect);
if (light._type === LIGHTTYPE_SPOT) {
_viewport.add(this.scissorVec);
}
if (light._type === LIGHTTYPE_OMNI) {
const smallSize = _viewport.z / 3;
const offset = this.cubeSlotsOffsets[face];
_viewport.x += smallSize * offset.x;
_viewport.y += smallSize * offset.y;
_viewport.z = smallSize;
_viewport.w = smallSize;
_scissor.copy(_viewport);
}
if (light.castShadows) {
const lightRenderData = light.getRenderData(null, face);
lightRenderData.shadowViewport.copy(_viewport);
lightRenderData.shadowScissor.copy(_scissor);
}
}
}
}
// assign a slot to the light
assignSlot(light, slotIndex, slotReassigned) {
light.atlasViewportAllocated = true;
const slot = this.slots[slotIndex];
slot.lightId = light.id;
slot.used = true;
if (slotReassigned) {
light.atlasSlotUpdated = true;
light.atlasVersion = this.version;
light.atlasSlotIndex = slotIndex;
}
}
// update texture atlas for a list of lights
update(localLights, lightingParams) {
this.shadowAtlasResolution = lightingParams.shadowAtlasResolution;
this.cookieAtlasResolution = lightingParams.cookieAtlasResolution;
const lights = this.collectLights(localLights, lightingParams);
if (lights.length > 0) {
const slots = this.slots;
for (let i = 0; i < slots.length; i++) {
slots[i].used = false;
}
const assignCount = Math.min(lights.length, slots.length);
for (let i = 0; i < assignCount; i++) {
const light = lights[i];
if (light.castShadows) {
light._shadowMap = this.shadowAtlas;
}
const previousSlot = slots[light.atlasSlotIndex];
if (light.atlasVersion === this.version && light.id === previousSlot?.lightId) {
const previousSlot2 = slots[light.atlasSlotIndex];
if (previousSlot2.size === slots[i].size && !previousSlot2.used) {
this.assignSlot(light, light.atlasSlotIndex, false);
}
}
}
let usedCount = 0;
for (let i = 0; i < assignCount; i++) {
while (usedCount < slots.length && slots[usedCount].used) {
usedCount++;
}
const light = lights[i];
if (!light.atlasViewportAllocated) {
this.assignSlot(light, usedCount, true);
}
const slot = slots[light.atlasSlotIndex];
this.setupSlot(light, slot.rect);
}
}
this.updateUniforms();
}
}
export {
LightTextureAtlas
};