Files
webeditor3d/src/runtime-three/runtime-audio-system.js
Victor Giers 0b54fa14c9 auto-git:
[add] playwright.config.js
 [add] src/app/App.js
 [add] src/app/editor-store.js
 [add] src/app/use-editor-store.js
 [add] src/assets/audio-assets.js
 [add] src/assets/gltf-model-import.js
 [add] src/assets/image-assets.js
 [add] src/assets/model-instance-labels.js
 [add] src/assets/model-instance-rendering.js
 [add] src/assets/model-instances.js
 [add] src/assets/project-asset-storage.js
 [add] src/assets/project-assets.js
 [add] src/commands/brush-command-helpers.js
 [add] src/commands/command-history.js
 [add] src/commands/command.js
 [add] src/commands/commit-transform-session-command.js
 [add] src/commands/create-box-brush-command.js
 [add] src/commands/delete-box-brush-command.js
 [add] src/commands/delete-entity-command.js
 [add] src/commands/delete-interaction-link-command.js
 [add] src/commands/delete-model-instance-command.js
 [add] src/commands/import-audio-asset-command.js
 [add] src/commands/import-background-image-asset-command.js
 [add] src/commands/import-model-asset-command.js
 [add] src/commands/move-box-brush-command.js
 [add] src/commands/resize-box-brush-command.js
 [add] src/commands/rotate-box-brush-command.js
 [add] src/commands/set-box-brush-face-material-command.js
 [add] src/commands/set-box-brush-face-uv-state-command.js
 [add] src/commands/set-box-brush-name-command.js
 [add] src/commands/set-box-brush-transform-command.js
 [add] src/commands/set-entity-name-command.js
 [add] src/commands/set-model-instance-name-command.js
 [add] src/commands/set-player-start-command.js
 [add] src/commands/set-scene-name-command.js
 [add] src/commands/set-world-settings-command.js
 [add] src/commands/upsert-entity-command.js
 [add] src/commands/upsert-interaction-link-command.js
 [add] src/commands/upsert-model-instance-command.js
 [add] src/core/ids.js
 [add] src/core/selection.js
 [add] src/core/tool-mode.js
 [add] src/core/transform-session.js
 [add] src/core/vector.js
 [add] src/core/whitebox-selection-feedback.js
 [add] src/core/whitebox-selection-mode.js
 [add] src/document/brushes.js
 [add] src/document/migrate-scene-document.js
 [add] src/document/scene-document-validation.js
 [add] src/document/scene-document.js
 [add] src/document/world-settings.js
 [add] src/entities/entity-instances.js
 [add] src/entities/entity-labels.js
 [add] src/geometry/box-brush-components.js
 [add] src/geometry/box-brush-mesh.js
 [add] src/geometry/box-brush.js
 [add] src/geometry/box-face-uvs.js
 [add] src/geometry/grid-snapping.js
 [add] src/geometry/model-instance-collider-debug-mesh.js
 [add] src/geometry/model-instance-collider-generation.js
 [add] src/interactions/interaction-links.js
 [add] src/main.js
 [add] src/materials/starter-material-library.js
 [add] src/materials/starter-material-textures.js
 [add] src/rendering/advanced-rendering.js
 [add] src/runner-web/RunnerCanvas.js
 [add] src/runtime-three/first-person-navigation-controller.js
 [add] src/runtime-three/navigation-controller.js
 [add] src/runtime-three/orbit-visitor-navigation-controller.js
 [add] src/runtime-three/player-collision.js
 [add] src/runtime-three/rapier-collision-world.js
 [add] src/runtime-three/runtime-audio-system.js
 [add] src/runtime-three/runtime-host.js
 [add] src/runtime-three/runtime-interaction-system.js
 [add] src/runtime-three/runtime-scene-build.js
 [add] src/runtime-three/runtime-scene-validation.js
 [add] src/serialization/local-draft-storage.js
 [add] src/serialization/scene-document-json.js
 [add] src/shared-ui/HierarchicalMenu.js
 [add] src/shared-ui/Panel.js
 [add] src/shared-ui/world-background-style.js
 [add] src/viewport-three/ViewportCanvas.js
 [add] src/viewport-three/ViewportPanel.js
 [add] src/viewport-three/viewport-entity-markers.js
 [add] src/viewport-three/viewport-focus.js
 [add] src/viewport-three/viewport-host.js
 [add] src/viewport-three/viewport-layout.js
 [add] src/viewport-three/viewport-transient-state.js
 [add] src/viewport-three/viewport-view-modes.js
 [add] tests/domain/box-brush-face-editing.command.test.js
 [add] tests/domain/build-runtime-scene.test.js
 [add] tests/domain/create-box-brush.command.test.js
 [add] tests/domain/create-empty-scene-document.test.js
 [add] tests/domain/editor-store.test.js
 [add] tests/domain/entity.command.test.js
 [add] tests/domain/interaction-links.validation.test.js
 [add] tests/domain/model-import.test.js
 [add] tests/domain/model-instance.command.test.js
 [add] tests/domain/player-start.command.test.js
 [add] tests/domain/rapier-collision-world.test.js
 [add] tests/domain/runtime-audio-system.test.js
 [add] tests/domain/runtime-interaction-system.test.js
 [add] tests/domain/runtime-scene-validation.test.js
 [add] tests/domain/scene-document-validation.test.js
 [add] tests/domain/transform-session.command.test.js
 [add] tests/domain/world-settings.command.test.js
 [add] tests/domain/world-settings.test.js
 [add] tests/e2e/app-smoke.e2e.js
 [add] tests/e2e/box-brush-authoring.e2e.js
 [add] tests/e2e/entities-foundation.e2e.js
 [add] tests/e2e/face-material-authoring.e2e.js
 [add] tests/e2e/first-room-workflow.e2e.js
 [add] tests/e2e/import-draco-model-asset.e2e.js
 [add] tests/e2e/import-external-model-asset.e2e.js
 [add] tests/e2e/import-model-asset.e2e.js
 [add] tests/e2e/local-lights-and-background.e2e.js
 [add] tests/e2e/orthographic-views.e2e.js
 [add] tests/e2e/runner-v1.e2e.js
 [add] tests/e2e/runtime-click-interaction.e2e.js
 [add] tests/e2e/runtime-trigger-teleport.e2e.js
 [add] tests/e2e/viewport-quad-layout.e2e.js
 [add] tests/e2e/viewport-test-helpers.js
 [add] tests/e2e/whitebox-component-selection.e2e.js
 [add] tests/e2e/world-environment.e2e.js
 [add] tests/geometry/box-brush-geometry.test.js
 [add] tests/geometry/box-face-uvs.test.js
 [add] tests/geometry/model-instance-collider-generation.test.js
 [add] tests/helpers/model-collider-fixtures.js
 [add] tests/serialization/local-draft-storage.test.js
 [add] tests/serialization/project-asset-storage.test.js
 [add] tests/serialization/scene-document-json.test.js
 [add] tests/setup/vitest.setup.js
 [add] tests/unit/audio-assets.test.js
 [add] tests/unit/entity-instances.test.js
 [add] tests/unit/package-scripts.test.js
 [add] tests/unit/transform-foundation.integration.test.js
 [add] tests/unit/viewport-canvas.test.js
 [add] tests/unit/viewport-entity-markers.test.js
 [add] tests/unit/viewport-focus.test.js
 [add] tests/unit/viewport-layout.test.js
 [add] tests/unit/viewport-view-modes.test.js
 [add] vite.config.js
 [add] vitest.config.js
2026-04-05 02:25:29 +02:00

290 lines
10 KiB
JavaScript

import { AudioListener, Group, PositionalAudio, Scene, Vector3 } from "three";
const _listenerPosition = /*@__PURE__*/ new Vector3();
const _emitterPosition = /*@__PURE__*/ new Vector3();
function getErrorDetail(error) {
if (error instanceof Error && error.message.trim().length > 0) {
return error.message.trim();
}
return "Unknown error.";
}
function formatSoundEmitterLabel(entityId, link) {
return link === null ? entityId : `${entityId} (${link.id})`;
}
export function computeSoundEmitterDistanceGain(distance, refDistance, maxDistance) {
if (!Number.isFinite(distance) || !Number.isFinite(refDistance) || !Number.isFinite(maxDistance)) {
return 0;
}
if (distance <= refDistance) {
return 1;
}
if (maxDistance <= refDistance) {
return 0;
}
if (distance >= maxDistance) {
return 0;
}
const normalizedDistance = (distance - refDistance) / (maxDistance - refDistance);
const clampedDistance = Math.min(1, Math.max(0, normalizedDistance));
const proximity = 1 - clampedDistance;
const easedProximity = proximity * proximity * proximity * proximity;
return easedProximity;
}
export class RuntimeAudioSystem {
camera;
scene;
soundGroup = new Group();
soundEmitters = new Map();
pendingPlayEmitterIds = new Set();
listener;
runtimeScene = null;
projectAssets = {};
loadedAudioAssets = {};
runtimeMessageHandler;
currentRuntimeMessage = null;
unlockRequested = false;
constructor(scene, camera, runtimeMessageHandler) {
this.scene = scene;
this.camera = camera;
this.runtimeMessageHandler = runtimeMessageHandler;
this.scene.add(this.soundGroup);
let listener = null;
try {
listener = new AudioListener();
this.camera.add(listener);
}
catch (error) {
console.warn(`Audio is unavailable in this browser environment: ${getErrorDetail(error)}`);
}
this.listener = listener;
}
setRuntimeMessageHandler(handler) {
this.runtimeMessageHandler = handler;
}
loadScene(runtimeScene) {
this.runtimeScene = runtimeScene;
this.rebuildSoundEmitters();
this.queueAutoplayEmitters();
}
updateAssets(projectAssets, loadedAudioAssets) {
this.projectAssets = projectAssets;
this.loadedAudioAssets = loadedAudioAssets;
this.rebuildSoundEmitters();
this.queueAutoplayEmitters();
}
updateListenerTransform() {
this.listener?.updateMatrixWorld(true);
this.updateSoundEmitterVolumes();
}
handleUserGesture() {
if (this.listener === null) {
return;
}
const context = this.listener.context;
if (context.state === "running") {
if (this.unlockRequested) {
this.unlockRequested = false;
this.setRuntimeMessage(null);
}
return;
}
this.unlockRequested = true;
void context
.resume()
.then(() => {
this.unlockRequested = false;
this.flushPendingPlays();
this.setRuntimeMessage(null);
})
.catch((error) => {
this.setRuntimeMessage(`Audio unlock failed: ${getErrorDetail(error)}`);
});
}
playSound(soundEmitterId, link) {
const soundEmitter = this.soundEmitters.get(soundEmitterId);
if (soundEmitter === undefined) {
this.setRuntimeMessage(`Sound emitter ${formatSoundEmitterLabel(soundEmitterId, link)} could not be found.`);
return;
}
if (this.listener === null) {
this.setRuntimeMessage("Audio is unavailable in this browser environment.");
return;
}
if (soundEmitter.buffer === null) {
const assetLabel = this.describeAudioAssetAvailability(soundEmitter.entity.audioAssetId);
this.setRuntimeMessage(`Sound emitter ${formatSoundEmitterLabel(soundEmitterId, link)} cannot play because ${assetLabel}.`);
console.warn(`playSound: ${soundEmitterId} has no playable audio buffer.`);
return;
}
if (this.listener.context.state !== "running") {
this.pendingPlayEmitterIds.add(soundEmitterId);
this.setRuntimeMessage("Audio is locked. Click the runner to enable sound.");
return;
}
this.playBufferedSound(soundEmitterId);
}
stopSound(soundEmitterId) {
this.pendingPlayEmitterIds.delete(soundEmitterId);
const soundEmitter = this.soundEmitters.get(soundEmitterId);
if (soundEmitter === undefined || soundEmitter.audio === null) {
return;
}
try {
soundEmitter.audio.stop();
}
catch (error) {
console.warn(`stopSound: ${soundEmitterId} could not be stopped: ${getErrorDetail(error)}`);
}
}
dispose() {
for (const soundEmitterId of this.soundEmitters.keys()) {
this.stopSound(soundEmitterId);
}
this.pendingPlayEmitterIds.clear();
for (const soundEmitter of this.soundEmitters.values()) {
this.soundGroup.remove(soundEmitter.group);
if (soundEmitter.audio !== null) {
soundEmitter.group.remove(soundEmitter.audio);
}
}
this.soundEmitters.clear();
this.scene.remove(this.soundGroup);
if (this.listener !== null) {
this.camera.remove(this.listener);
}
}
setRuntimeMessage(message) {
if (this.currentRuntimeMessage === message) {
return;
}
this.currentRuntimeMessage = message;
this.runtimeMessageHandler?.(message);
}
rebuildSoundEmitters() {
if (this.runtimeScene === null) {
return;
}
for (const soundEmitter of this.soundEmitters.values()) {
this.stopSound(soundEmitter.entity.entityId);
this.soundGroup.remove(soundEmitter.group);
if (soundEmitter.audio !== null) {
soundEmitter.group.remove(soundEmitter.audio);
}
}
this.soundEmitters.clear();
for (const entity of this.runtimeScene.entities.soundEmitters) {
const group = new Group();
group.position.set(entity.position.x, entity.position.y, entity.position.z);
let audio = null;
if (this.listener !== null) {
audio = new PositionalAudio(this.listener);
this.configurePositionalAudio(audio, entity);
audio.position.set(0, 0, 0);
group.add(audio);
}
const buffer = this.resolveAudioBuffer(entity.audioAssetId);
if (audio !== null && buffer !== null) {
audio.setBuffer(buffer);
}
this.soundGroup.add(group);
this.soundEmitters.set(entity.entityId, {
entity,
group,
audio,
buffer
});
}
}
resolveAudioBuffer(audioAssetId) {
if (audioAssetId === null) {
return null;
}
const loadedAsset = this.loadedAudioAssets[audioAssetId];
if (loadedAsset !== undefined) {
return loadedAsset.buffer;
}
const asset = this.projectAssets[audioAssetId];
if (asset === undefined) {
return null;
}
if (asset.kind !== "audio") {
return null;
}
return null;
}
describeAudioAssetAvailability(audioAssetId) {
if (audioAssetId === null) {
return "no assigned audio asset";
}
const asset = this.projectAssets[audioAssetId];
if (asset === undefined) {
return `missing audio asset ${audioAssetId}`;
}
if (asset.kind !== "audio") {
return `asset ${audioAssetId} is not an audio asset`;
}
return `audio asset ${audioAssetId} is unavailable`;
}
queueAutoplayEmitters() {
if (this.runtimeScene === null) {
return;
}
for (const entity of this.runtimeScene.entities.soundEmitters) {
if (entity.autoplay) {
this.pendingPlayEmitterIds.add(entity.entityId);
}
}
this.flushPendingPlays();
}
flushPendingPlays() {
if (this.listener === null || this.listener.context.state !== "running") {
return;
}
const pendingEmitterIds = [...this.pendingPlayEmitterIds];
this.pendingPlayEmitterIds.clear();
for (const soundEmitterId of pendingEmitterIds) {
this.playBufferedSound(soundEmitterId);
}
}
playBufferedSound(soundEmitterId) {
const soundEmitter = this.soundEmitters.get(soundEmitterId);
if (soundEmitter === undefined || soundEmitter.audio === null || soundEmitter.buffer === null) {
return;
}
try {
soundEmitter.audio.stop();
}
catch {
// three.js audio.stop() can throw when the underlying source is not active yet.
}
this.configurePositionalAudio(soundEmitter.audio, soundEmitter.entity);
this.updateSoundEmitterVolume(soundEmitter);
soundEmitter.audio.setBuffer(soundEmitter.buffer);
soundEmitter.audio.play();
}
configurePositionalAudio(audio, entity) {
audio.setLoop(entity.loop);
audio.setRefDistance(entity.refDistance);
audio.setMaxDistance(entity.maxDistance);
audio.setDistanceModel("inverse");
audio.setRolloffFactor(0);
}
updateSoundEmitterVolumes() {
if (this.listener === null) {
return;
}
for (const soundEmitter of this.soundEmitters.values()) {
this.updateSoundEmitterVolume(soundEmitter);
}
}
updateSoundEmitterVolume(soundEmitter) {
if (soundEmitter.audio === null) {
return;
}
this.camera.getWorldPosition(_listenerPosition);
soundEmitter.group.getWorldPosition(_emitterPosition);
const distance = _listenerPosition.distanceTo(_emitterPosition);
const attenuation = computeSoundEmitterDistanceGain(distance, soundEmitter.entity.refDistance, soundEmitter.entity.maxDistance);
soundEmitter.audio.setVolume(soundEmitter.entity.volume * attenuation);
}
}