playcanvas/build/playcanvas/src/framework/components/gsplat/component.js

Open-source WebGL/WebGPU 3D engine for the web

import { hashCode } from '../../../core/hash.js';
import { LAYERID_WORLD, WORKBUFFER_UPDATE_AUTO } from '../../../scene/constants.js';
import { GSplatInstance } from '../../../scene/gsplat/gsplat-instance.js';
import { Asset } from '../../asset/asset.js';
import { AssetReference } from '../../asset/asset-reference.js';
import { Component } from '../component.js';
import { GSplatPlacement } from '../../../scene/gsplat-unified/gsplat-placement.js';
import { PickerId } from '../../../scene/picker-id.js';

class GSplatComponent extends Component {
		set customAabb(value) {
				this._customAabb = value;
				this._instance?.meshInstance?.setCustomAabb(this._customAabb);
				if (this._placement) {
						this._placement.aabb = this._customAabb;
				}
		}
		get customAabb() {
				return this._customAabb ?? this._placement?.aabb ?? this.resource?.aabb ?? null;
		}
		set instance(value) {
				if (this.unified) {
						return;
				}
				this.destroyInstance();
				this._instance = value;
				if (this._instance) {
						const mi = this._instance.meshInstance;
						if (!mi.node) {
								mi.node = this.entity;
						}
						mi.castShadow = this._castShadows;
						mi.setCustomAabb(this._customAabb);
						if (this.enabled && this.entity.enabled) {
								this.addToLayers();
						}
				}
		}
		get instance() {
				return this._instance;
		}
		set material(value) {
				if (this.unified) {
						return;
				}
				if (this._instance) {
						this._instance.material = value;
				} else {
						this._materialTmp = value;
				}
		}
		get material() {
				if (this.unified) {
						return null;
				}
				return this._instance?.material ?? this._materialTmp ?? null;
		}
		set highQualitySH(value) {
				if (value !== this._highQualitySH) {
						this._highQualitySH = value;
						this._instance?.setHighQualitySH(value);
				}
		}
		get highQualitySH() {
				return this._highQualitySH;
		}
		set castShadows(value) {
				if (this._castShadows !== value) {
						const layers = this.layers;
						const scene = this.system.app.scene;
						if (this._placement) {
								if (value) {
										for(let i = 0; i < layers.length; i++){
												const layer = scene.layers.getLayerById(layers[i]);
												layer?.addGSplatShadowCaster(this._placement);
										}
								} else {
										for(let i = 0; i < layers.length; i++){
												const layer = scene.layers.getLayerById(layers[i]);
												layer?.removeGSplatShadowCaster(this._placement);
										}
								}
						}
						const mi = this.instance?.meshInstance;
						if (mi) {
								if (this._castShadows && !value) {
										for(let i = 0; i < layers.length; i++){
												const layer = scene.layers.getLayerById(this.layers[i]);
												layer?.removeShadowCasters([
														mi
												]);
										}
								}
								mi.castShadow = value;
								if (!this._castShadows && value) {
										for(let i = 0; i < layers.length; i++){
												const layer = scene.layers.getLayerById(layers[i]);
												layer?.addShadowCasters([
														mi
												]);
										}
								}
						}
						this._castShadows = value;
				}
		}
		get castShadows() {
				return this._castShadows;
		}
		set lodBaseDistance(value) {
				this._lodBaseDistance = Math.max(0.1, value);
				if (this._placement) {
						this._placement.lodBaseDistance = this._lodBaseDistance;
				}
		}
		get lodBaseDistance() {
				return this._lodBaseDistance;
		}
		set lodMultiplier(value) {
				this._lodMultiplier = Math.max(1.2, value);
				if (this._placement) {
						this._placement.lodMultiplier = this._lodMultiplier;
				}
		}
		get lodMultiplier() {
				return this._lodMultiplier;
		}
		set lodDistances(value) {
				if (Array.isArray(value) && value.length > 0) {
						this.lodBaseDistance = value[0];
						this.lodMultiplier = 3;
				}
		}
		get lodDistances() {
				return [];
		}
		set splatBudget(value) {}
		get splatBudget() {
				return 0;
		}
		set unified(value) {
				if (this._unified !== value) {
						this._unified = value;
						this._onGSplatAssetAdded();
				}
		}
		get unified() {
				return this._unified;
		}
		get id() {
				return this._id;
		}
		set workBufferUpdate(value) {
				this._workBufferUpdate = value;
				if (this._placement) {
						this._placement.workBufferUpdate = value;
				}
		}
		get workBufferUpdate() {
				return this._workBufferUpdate;
		}
		setWorkBufferModifier(value) {
				if (value) {
						const device = this.system.app.graphicsDevice;
						const code = (device.isWebGPU ? value.wgsl : value.glsl) ?? null;
						this._workBufferModifier = code ? {
								code,
								hash: hashCode(code)
						} : null;
				} else {
						this._workBufferModifier = null;
				}
				if (this._placement) {
						this._placement.workBufferModifier = this._workBufferModifier;
				}
		}
		set layers(value) {
				this.removeFromLayers();
				this._layers.length = 0;
				for(let i = 0; i < value.length; i++){
						this._layers[i] = value[i];
				}
				if (!this.enabled || !this.entity.enabled) {
						return;
				}
				this.addToLayers();
		}
		get layers() {
				return this._layers;
		}
		set asset(value) {
				const id = value instanceof Asset ? value.id : value;
				if (this._assetReference.id === id) return;
				if (this._assetReference.asset && this._assetReference.asset.resource) {
						this._onGSplatAssetRemove();
				}
				this._assetReference.id = id;
				if (this._assetReference.asset) {
						this._onGSplatAssetAdded();
				}
		}
		get asset() {
				return this._assetReference.id;
		}
		set resource(value) {
				if (this._resource === value) return;
				if (this._resource || this._assetReference.asset?.resource) {
						this._onGSplatAssetRemove();
				}
				if (value && this._assetReference.id) {
						this._assetReference.id = null;
				}
				this._resource = value;
				if (this._resource && this.enabled && this.entity.enabled) {
						this._onGSplatAssetLoad();
				}
		}
		get resource() {
				return this._resource ?? this._assetReference.asset?.resource ?? null;
		}
		destroyInstance() {
				if (this._placement) {
						this.removeFromLayers();
						this._placement.destroy();
						this._placement = null;
				}
				if (this._instance) {
						this.removeFromLayers();
						this._instance?.destroy();
						this._instance = null;
				}
		}
		addToLayers() {
				if (this._placement) {
						const layers = this.system.app.scene.layers;
						for(let i = 0; i < this._layers.length; i++){
								const layer = layers.getLayerById(this._layers[i]);
								if (layer) {
										layer.addGSplatPlacement(this._placement);
										if (this._castShadows) {
												layer.addGSplatShadowCaster(this._placement);
										}
								}
						}
						return;
				}
				const meshInstance = this.instance?.meshInstance;
				if (meshInstance) {
						const layers = this.system.app.scene.layers;
						for(let i = 0; i < this._layers.length; i++){
								layers.getLayerById(this._layers[i])?.addMeshInstances([
										meshInstance
								]);
						}
				}
		}
		removeFromLayers() {
				if (this._placement) {
						const layers = this.system.app.scene.layers;
						for(let i = 0; i < this._layers.length; i++){
								const layer = layers.getLayerById(this._layers[i]);
								if (layer) {
										layer.removeGSplatPlacement(this._placement);
										layer.removeGSplatShadowCaster(this._placement);
								}
						}
						return;
				}
				const meshInstance = this.instance?.meshInstance;
				if (meshInstance) {
						const layers = this.system.app.scene.layers;
						for(let i = 0; i < this._layers.length; i++){
								layers.getLayerById(this._layers[i])?.removeMeshInstances([
										meshInstance
								]);
						}
				}
		}
		onRemoveChild() {
				this.removeFromLayers();
		}
		onInsertChild() {
				if (this.enabled && this.entity.enabled) {
						if (this._instance || this._placement) {
								this.addToLayers();
						}
				}
		}
		onRemove() {
				this.destroyInstance();
				this.asset = null;
				this._assetReference.id = null;
				this.entity.off('remove', this.onRemoveChild, this);
				this.entity.off('insert', this.onInsertChild, this);
		}
		onLayersChanged(oldComp, newComp) {
				this.addToLayers();
				oldComp.off('add', this.onLayerAdded, this);
				oldComp.off('remove', this.onLayerRemoved, this);
				newComp.on('add', this.onLayerAdded, this);
				newComp.on('remove', this.onLayerRemoved, this);
		}
		onLayerAdded(layer) {
				const index = this.layers.indexOf(layer.id);
				if (index < 0) return;
				if (this.unified) {
						return;
				}
				if (this._instance) {
						layer.addMeshInstances(this._instance.meshInstance);
				}
		}
		onLayerRemoved(layer) {
				const index = this.layers.indexOf(layer.id);
				if (index < 0) return;
				if (this.unified) {
						return;
				}
				if (this._instance) {
						layer.removeMeshInstances(this._instance.meshInstance);
				}
		}
		onEnable() {
				const scene = this.system.app.scene;
				const layers = scene.layers;
				this._evtLayersChanged = scene.on('set:layers', this.onLayersChanged, this);
				if (layers) {
						this._evtLayerAdded = layers.on('add', this.onLayerAdded, this);
						this._evtLayerRemoved = layers.on('remove', this.onLayerRemoved, this);
				}
				if (this._instance || this._placement) {
						this.addToLayers();
				} else if (this.asset) {
						this._onGSplatAssetAdded();
				} else if (this._resource) {
						this._onGSplatAssetLoad();
				}
		}
		onDisable() {
				const scene = this.system.app.scene;
				const layers = scene.layers;
				this._evtLayersChanged?.off();
				this._evtLayersChanged = null;
				if (layers) {
						this._evtLayerAdded?.off();
						this._evtLayerAdded = null;
						this._evtLayerRemoved?.off();
						this._evtLayerRemoved = null;
				}
				this.removeFromLayers();
		}
		hide() {
				if (this._instance) {
						this._instance.meshInstance.visible = false;
				}
		}
		show() {
				if (this._instance) {
						this._instance.meshInstance.visible = true;
				}
		}
		setParameter(name, data) {
				const scopeId = this.system.app.graphicsDevice.scope.resolve(name);
				this._parameters.set(name, {
						scopeId,
						data
				});
				if (this._placement) this._placement.renderDirty = true;
		}
		getParameter(name) {
				return this._parameters.get(name)?.data;
		}
		deleteParameter(name) {
				this._parameters.delete(name);
				if (this._placement) this._placement.renderDirty = true;
		}
		getInstanceTexture(name) {
				if (!this._placement) {
						return null;
				}
				return this._placement.getInstanceTexture(name, this.system.app.graphicsDevice) ?? null;
		}
		_onGSplatAssetAdded() {
				if (!this._assetReference.asset) {
						return;
				}
				if (this._assetReference.asset.resource) {
						this._onGSplatAssetLoad();
				} else if (this.enabled && this.entity.enabled) {
						this.system.app.assets.load(this._assetReference.asset);
				}
		}
		_onGSplatAssetLoad() {
				this.destroyInstance();
				const resource = this._resource ?? this._assetReference.asset?.resource;
				if (!resource) return;
				if (this.unified) {
						this._placement = null;
						this._placement = new GSplatPlacement(resource, this.entity, 0, this._parameters, null, this._id);
						this._placement.lodBaseDistance = this._lodBaseDistance;
						this._placement.lodMultiplier = this._lodMultiplier;
						this._placement.workBufferUpdate = this._workBufferUpdate;
						this._placement.workBufferModifier = this._workBufferModifier;
						if (this.enabled && this.entity.enabled) {
								this.addToLayers();
						}
				} else {
						this.instance = new GSplatInstance(resource, {
								material: this._materialTmp,
								highQualitySH: this._highQualitySH,
								scene: this.system.app.scene
						});
						this._materialTmp = null;
				}
		}
		_onGSplatAssetUnload() {
				this.destroyInstance();
		}
		_onGSplatAssetRemove() {
				this._onGSplatAssetUnload();
		}
		constructor(system, entity){
				super(system, entity), this._layers = [
						LAYERID_WORLD
				], this._instance = null, this._placement = null, this._id = PickerId.get(), this._materialTmp = null, this._highQualitySH = true, this._lodBaseDistance = 5, this._lodMultiplier = 3, this._customAabb = null, this._resource = null, this._evtLayersChanged = null, this._evtLayerAdded = null, this._evtLayerRemoved = null, this._castShadows = false, this._unified = false, this._parameters = new Map(), this._workBufferUpdate = WORKBUFFER_UPDATE_AUTO, this._workBufferModifier = null;
				this._assetReference = new AssetReference('asset', this, system.app.assets, {
						add: this._onGSplatAssetAdded,
						load: this._onGSplatAssetLoad,
						remove: this._onGSplatAssetRemove,
						unload: this._onGSplatAssetUnload
				}, this);
				entity.on('remove', this.onRemoveChild, this);
				entity.on('removehierarchy', this.onRemoveChild, this);
				entity.on('insert', this.onInsertChild, this);
				entity.on('inserthierarchy', this.onInsertChild, this);
		}
}

export { GSplatComponent };