Performance and layout enhancements
This commit is contained in:
+453
-218
@@ -24,6 +24,8 @@ export interface SurfacePresentation {
|
||||
anchorCaption?: string | null;
|
||||
}
|
||||
|
||||
export type SurfaceQualityProfile = "preview" | "program";
|
||||
|
||||
export interface LoadedPhotoAsset {
|
||||
asset: PhotoAsset;
|
||||
texture: THREE.Texture | null;
|
||||
@@ -144,6 +146,21 @@ type PlaneBundle = {
|
||||
height: number;
|
||||
};
|
||||
|
||||
type LayoutRect = {
|
||||
x: number;
|
||||
y: number;
|
||||
z: number;
|
||||
width: number;
|
||||
height: number;
|
||||
yaw?: number;
|
||||
pitch?: number;
|
||||
};
|
||||
|
||||
const SAFE_FRAME = {
|
||||
width: 6.9,
|
||||
height: 4.6
|
||||
} as const;
|
||||
|
||||
const createPhotoPlane = (
|
||||
asset: LoadedPhotoAsset,
|
||||
_params: SceneParams["photoTreatment"],
|
||||
@@ -216,13 +233,214 @@ const createPhotoPlane = (
|
||||
};
|
||||
};
|
||||
|
||||
const fitPlaneHeightToRect = (asset: LoadedPhotoAsset, rect: LayoutRect) =>
|
||||
clamp(Math.min(rect.height, rect.width / clamp(asset.aspect, 0.48, 1.95)), 0.9, rect.height);
|
||||
|
||||
const createFittedPhotoPlane = (
|
||||
asset: LoadedPhotoAsset,
|
||||
params: SceneParams["photoTreatment"],
|
||||
rect: LayoutRect,
|
||||
options: {
|
||||
opacity?: number;
|
||||
frameOpacity?: number;
|
||||
shadowOpacity?: number;
|
||||
tint?: string;
|
||||
} = {}
|
||||
) => {
|
||||
const plane = createPhotoPlane(asset, params, {
|
||||
...options,
|
||||
height: fitPlaneHeightToRect(asset, rect)
|
||||
});
|
||||
plane.group.position.set(rect.x, rect.y, rect.z);
|
||||
plane.group.rotation.x = rect.pitch ?? 0;
|
||||
plane.group.rotation.y = rect.yaw ?? 0;
|
||||
return plane;
|
||||
};
|
||||
|
||||
const applyLayoutSpread = (rects: LayoutRect[], spread: number, depth: number) => {
|
||||
const xGain = 0.92 + spread * 0.36;
|
||||
const yGain = 0.96 + spread * 0.14;
|
||||
const depthGain = 0.9 + depth * 0.45;
|
||||
return rects.map((rect, index) => ({
|
||||
...rect,
|
||||
x: rect.x * xGain,
|
||||
y: rect.y * yGain,
|
||||
z: rect.z * depthGain - index * depth * 0.08
|
||||
}));
|
||||
};
|
||||
|
||||
const createHeroLayoutRects = (
|
||||
count: number,
|
||||
formation: SceneParams["composition"]["formation"],
|
||||
composition: SceneParams["composition"]
|
||||
) => {
|
||||
let base: LayoutRect[];
|
||||
|
||||
if (count <= 1) {
|
||||
base = [{ x: 0, y: 0.04, z: -0.9, width: 4.9, height: 4.2 }];
|
||||
} else if (count === 2) {
|
||||
base =
|
||||
formation === "arc"
|
||||
? [
|
||||
{ x: -1.05, y: 0.02, z: -0.92, width: 4.15, height: 4.12, yaw: 0.04 },
|
||||
{ x: 2.25, y: 0.7, z: -1.8, width: 2.15, height: 2.18, yaw: -0.08 }
|
||||
]
|
||||
: [
|
||||
{ x: -0.84, y: 0.04, z: -0.92, width: 4.1, height: 4.12, yaw: 0.04 },
|
||||
{ x: 2.3, y: -0.18, z: -1.72, width: 2.18, height: 2.14, yaw: -0.08 }
|
||||
];
|
||||
} else if (count === 3) {
|
||||
base =
|
||||
formation === "arc"
|
||||
? [
|
||||
{ x: -0.52, y: 0, z: -0.92, width: 3.95, height: 4.04, yaw: 0.02 },
|
||||
{ x: -2.5, y: 1.24, z: -1.9, width: 1.9, height: 1.96, yaw: 0.1 },
|
||||
{ x: 2.5, y: 1.02, z: -1.82, width: 1.92, height: 1.98, yaw: -0.1 }
|
||||
]
|
||||
: [
|
||||
{ x: -0.58, y: 0.06, z: -0.92, width: 3.92, height: 4.02, yaw: 0.02 },
|
||||
{ x: 2.48, y: 1.04, z: -1.84, width: 1.88, height: 1.92, yaw: -0.1 },
|
||||
{ x: 2.48, y: -1.02, z: -1.98, width: 1.88, height: 1.92, yaw: -0.08 }
|
||||
];
|
||||
} else {
|
||||
base =
|
||||
formation === "arc"
|
||||
? [
|
||||
{ x: -0.42, y: 0, z: -0.92, width: 3.6, height: 3.86, yaw: 0.02 },
|
||||
{ x: -2.55, y: 1.34, z: -1.86, width: 1.68, height: 1.72, yaw: 0.1 },
|
||||
{ x: 2.52, y: 1.08, z: -1.94, width: 1.68, height: 1.72, yaw: -0.1 },
|
||||
{ x: 2.36, y: -1.22, z: -2.02, width: 1.68, height: 1.72, yaw: -0.08 }
|
||||
]
|
||||
: [
|
||||
{ x: -0.74, y: 0.04, z: -0.92, width: 3.66, height: 3.84, yaw: 0.02 },
|
||||
{ x: 2.44, y: 1.36, z: -1.82, width: 1.66, height: 1.68, yaw: -0.1 },
|
||||
{ x: 2.44, y: 0, z: -1.9, width: 1.66, height: 1.68, yaw: -0.08 },
|
||||
{ x: 2.44, y: -1.36, z: -1.98, width: 1.66, height: 1.68, yaw: -0.06 }
|
||||
];
|
||||
}
|
||||
|
||||
return applyLayoutSpread(base, composition.spread, composition.depth);
|
||||
};
|
||||
|
||||
const createEqualLayoutRects = (
|
||||
count: number,
|
||||
formation: SceneParams["composition"]["formation"],
|
||||
composition: SceneParams["composition"]
|
||||
) => {
|
||||
let base: LayoutRect[];
|
||||
|
||||
if (count <= 1) {
|
||||
base = [{ x: 0, y: 0.04, z: -1, width: 4.6, height: 4 }];
|
||||
} else if (count === 2) {
|
||||
if (formation === "arc") {
|
||||
base = [
|
||||
{ x: -1.9, y: 0.62, z: -1.08, width: 2.7, height: 3.1, yaw: 0.08 },
|
||||
{ x: 1.9, y: -0.38, z: -1.18, width: 2.7, height: 3.1, yaw: -0.08 }
|
||||
];
|
||||
} else if (formation === "cluster") {
|
||||
base = [
|
||||
{ x: -1.6, y: 0.72, z: -1.02, width: 2.75, height: 3.05, yaw: 0.06 },
|
||||
{ x: 1.42, y: -0.66, z: -1.18, width: 2.75, height: 3.05, yaw: -0.06 }
|
||||
];
|
||||
} else {
|
||||
base = [
|
||||
{ x: -1.86, y: 0, z: -1.02, width: 2.9, height: 3.3, yaw: 0.04 },
|
||||
{ x: 1.86, y: 0, z: -1.12, width: 2.9, height: 3.3, yaw: -0.04 }
|
||||
];
|
||||
}
|
||||
} else if (count === 3) {
|
||||
if (formation === "line") {
|
||||
base = [
|
||||
{ x: -2.16, y: 0.16, z: -1.02, width: 2.18, height: 2.72, yaw: 0.04 },
|
||||
{ x: 0, y: 0, z: -1.1, width: 2.48, height: 3.04 },
|
||||
{ x: 2.16, y: -0.18, z: -1.18, width: 2.18, height: 2.72, yaw: -0.04 }
|
||||
];
|
||||
} else if (formation === "arc" || formation === "cluster") {
|
||||
base = [
|
||||
{ x: 0, y: 1.08, z: -1.02, width: 2.46, height: 2.72 },
|
||||
{ x: -1.96, y: -1.02, z: -1.12, width: 2.18, height: 2.62, yaw: 0.06 },
|
||||
{ x: 1.96, y: -0.92, z: -1.2, width: 2.18, height: 2.62, yaw: -0.06 }
|
||||
];
|
||||
} else {
|
||||
base = [
|
||||
{ x: 0, y: 1.02, z: -1.02, width: 2.4, height: 2.68 },
|
||||
{ x: -1.88, y: -1.04, z: -1.14, width: 2.22, height: 2.62 },
|
||||
{ x: 1.88, y: -1.04, z: -1.22, width: 2.22, height: 2.62 }
|
||||
];
|
||||
}
|
||||
} else {
|
||||
if (formation === "cluster") {
|
||||
base = [
|
||||
{ x: -1.82, y: 1.06, z: -1.02, width: 2.08, height: 2.28 },
|
||||
{ x: 1.58, y: 1.22, z: -1.1, width: 2.08, height: 2.28 },
|
||||
{ x: -1.46, y: -1.14, z: -1.18, width: 2.08, height: 2.28 },
|
||||
{ x: 1.9, y: -0.98, z: -1.26, width: 2.08, height: 2.28 }
|
||||
];
|
||||
} else if (formation === "ribbon") {
|
||||
base = [
|
||||
{ x: -2.64, y: 0.96, z: -1.02, width: 1.92, height: 2.24, yaw: 0.05 },
|
||||
{ x: -0.88, y: -0.16, z: -1.1, width: 1.92, height: 2.24, yaw: 0.02 },
|
||||
{ x: 0.88, y: 0.26, z: -1.18, width: 1.92, height: 2.24, yaw: -0.02 },
|
||||
{ x: 2.64, y: -0.88, z: -1.26, width: 1.92, height: 2.24, yaw: -0.05 }
|
||||
];
|
||||
} else {
|
||||
base = [
|
||||
{ x: -1.84, y: 1.16, z: -1.02, width: 2.08, height: 2.26 },
|
||||
{ x: 1.84, y: 1.16, z: -1.1, width: 2.08, height: 2.26 },
|
||||
{ x: -1.84, y: -1.16, z: -1.18, width: 2.08, height: 2.26 },
|
||||
{ x: 1.84, y: -1.16, z: -1.26, width: 2.08, height: 2.26 }
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
return applyLayoutSpread(base, composition.spread, composition.depth);
|
||||
};
|
||||
|
||||
const createArrivalLayoutRects = (
|
||||
count: number,
|
||||
mode: string,
|
||||
composition: SceneParams["composition"]
|
||||
) => {
|
||||
const base: LayoutRect[] =
|
||||
count <= 1
|
||||
? [{ x: mode === "relay_rail" ? 0.96 : 0.72, y: 0.02, z: -0.92, width: 4.2, height: 4.06, yaw: -0.04 }]
|
||||
: count === 2
|
||||
? [
|
||||
{ x: 1.18, y: 0.02, z: -0.92, width: 3.72, height: 3.84, yaw: -0.04 },
|
||||
{ x: -2.24, y: 0.74, z: -1.66, width: 1.88, height: 1.98, yaw: 0.08 }
|
||||
]
|
||||
: count === 3
|
||||
? [
|
||||
{ x: 1.18, y: 0.02, z: -0.92, width: 3.68, height: 3.82, yaw: -0.04 },
|
||||
{ x: -2.3, y: 1.18, z: -1.66, width: 1.82, height: 1.92, yaw: 0.08 },
|
||||
{ x: -2.3, y: -1.04, z: -1.76, width: 1.82, height: 1.92, yaw: 0.08 }
|
||||
]
|
||||
: [
|
||||
{ x: 1.22, y: 0.04, z: -0.92, width: 3.54, height: 3.7, yaw: -0.04 },
|
||||
{ x: -2.42, y: 1.56, z: -1.66, width: 1.68, height: 1.74, yaw: 0.08 },
|
||||
{ x: -2.42, y: 0, z: -1.78, width: 1.68, height: 1.74, yaw: 0.08 },
|
||||
{ x: -2.42, y: -1.56, z: -1.9, width: 1.68, height: 1.74, yaw: 0.08 }
|
||||
];
|
||||
|
||||
return applyLayoutSpread(base, composition.spread * 0.8, composition.depth * 0.7);
|
||||
};
|
||||
|
||||
type FieldBundle = {
|
||||
group: THREE.Group;
|
||||
uniforms: Array<{
|
||||
uTime: { value: number };
|
||||
uIntensity: { value: number };
|
||||
uSpeed: { value: number };
|
||||
}>;
|
||||
uniforms: FieldUniforms[];
|
||||
};
|
||||
|
||||
type FieldUniforms = {
|
||||
uTime: { value: number };
|
||||
uType: { value: number };
|
||||
uIntensity: { value: number };
|
||||
uScale: { value: number };
|
||||
uSpeed: { value: number };
|
||||
uAspect: { value: number };
|
||||
uPrimary: { value: THREE.Color };
|
||||
uSecondary: { value: THREE.Color };
|
||||
uAccent: { value: THREE.Color };
|
||||
uInk: { value: THREE.Color };
|
||||
};
|
||||
|
||||
const FIELD_VERTEX_SHADER = `
|
||||
@@ -535,17 +753,26 @@ const buildBackdropSystem = (input: SceneActivationInput, palette: ScenicPalette
|
||||
const updateBackdropSystem = (
|
||||
bundle: FieldBundle,
|
||||
context: SceneFrameContext,
|
||||
palette: ScenicPalette,
|
||||
scenicTreatment: SceneParams["scenicTreatment"]
|
||||
) => {
|
||||
const time = context.elapsedMs * 0.001;
|
||||
bundle.uniforms.forEach((uniforms, index) => {
|
||||
uniforms.uTime.value = time * (0.8 + index * 0.18);
|
||||
uniforms.uType.value = fieldTypeToValue(scenicTreatment.fieldType);
|
||||
uniforms.uIntensity.value = clamp(
|
||||
scenicTreatment.fieldIntensity * (index === 0 ? 1 : index === 1 ? 0.72 : 0.36),
|
||||
0,
|
||||
1
|
||||
);
|
||||
uniforms.uScale.value = scenicTreatment.fieldScale * (index === 0 ? 0.96 : index === 1 ? 1.24 : 1.44);
|
||||
uniforms.uSpeed.value = scenicTreatment.fieldSpeed * (index === 0 ? 0.34 : index === 1 ? 0.52 : 0.76);
|
||||
uniforms.uPrimary.value.set(palette.primary);
|
||||
uniforms.uSecondary.value.set(
|
||||
mixColor(palette.secondary, palette.primary, index === 0 ? 0.24 : index === 1 ? 0.48 : 0.68)
|
||||
);
|
||||
uniforms.uAccent.value.set(palette.accent);
|
||||
uniforms.uInk.value.set(palette.ink);
|
||||
});
|
||||
};
|
||||
|
||||
@@ -948,31 +1175,6 @@ type BuildFamilyResult = {
|
||||
extraUpdate?: (context: SceneFrameContext) => void;
|
||||
};
|
||||
|
||||
const buildHeroPlanes = (
|
||||
assets: LoadedPhotoAsset[],
|
||||
photoTreatment: SceneParams["photoTreatment"],
|
||||
config: {
|
||||
heroHeight: number;
|
||||
supportHeight: number;
|
||||
}
|
||||
) => {
|
||||
const hero = createPhotoPlane(assets[0]!, photoTreatment, {
|
||||
height: config.heroHeight,
|
||||
opacity: 1,
|
||||
frameOpacity: 0.04,
|
||||
shadowOpacity: 0.12
|
||||
});
|
||||
const supports = assets.slice(1).map((asset) =>
|
||||
createPhotoPlane(asset, photoTreatment, {
|
||||
height: config.supportHeight,
|
||||
opacity: 0.94,
|
||||
frameOpacity: 0.025,
|
||||
shadowOpacity: 0.08
|
||||
})
|
||||
);
|
||||
return { hero, supports };
|
||||
};
|
||||
|
||||
const buildWitnessFloat = (input: SceneActivationInput): SceneInstance => {
|
||||
const { composition, photoTreatment } = input.params;
|
||||
const mode = input.modeKey ?? "near_witness";
|
||||
@@ -983,49 +1185,33 @@ const buildWitnessFloat = (input: SceneActivationInput): SceneInstance => {
|
||||
const root = new THREE.Group();
|
||||
root.add(backdrop.group);
|
||||
const motionEntries: MotionEntry[] = [];
|
||||
const { hero, supports } = buildHeroPlanes(assets, photoTreatment, {
|
||||
heroHeight: mode === "twin_witness" ? 3.7 : 4.6,
|
||||
supportHeight: 2
|
||||
});
|
||||
const layout = createHeroLayoutRects(
|
||||
assets.length,
|
||||
mode === "twin_witness" ? "arc" : mode === "sidecar_drift" ? "line" : "stack",
|
||||
composition
|
||||
);
|
||||
|
||||
hero.group.position.set(mode === "sidecar_drift" ? -1.1 : 0, 0.08, -0.7);
|
||||
hero.group.rotation.y = mode === "sidecar_drift" ? 0.08 : 0;
|
||||
root.add(hero.group);
|
||||
motionEntries.push({
|
||||
group: hero.group,
|
||||
basePosition: hero.group.position.clone(),
|
||||
baseRotation: hero.group.rotation.clone(),
|
||||
phase: seededUnit(assets[0]!.asset.id, 1) * Math.PI * 2,
|
||||
travelX: mode === "sidecar_drift" ? 0.22 : 0.16,
|
||||
travelY: 0.1,
|
||||
orbit: 0.12,
|
||||
pitch: 0.02,
|
||||
yaw: 0.04
|
||||
});
|
||||
|
||||
supports.forEach((plane, index) => {
|
||||
if (mode === "twin_witness" && index === 0) {
|
||||
plane.group.position.set(2.45, -0.12, -1.3);
|
||||
plane.group.scale.setScalar(1.55);
|
||||
plane.group.rotation.y = -0.08;
|
||||
} else if (mode === "sidecar_drift") {
|
||||
plane.group.position.set(3.15 - index * 0.6, 0.95 - index * 1.1, -2.4 - index * 0.5);
|
||||
plane.group.rotation.y = -0.14;
|
||||
} else {
|
||||
plane.group.position.set(-2.5 + index * 4.9, 1.1 - index * 1.6, -2.3 - index * 0.42);
|
||||
plane.group.rotation.y = seededSigned(plane.group.uuid, 3) * 0.12;
|
||||
assets.forEach((asset, index) => {
|
||||
const rect = layout[index] ?? layout.at(-1)!;
|
||||
const plane = createFittedPhotoPlane(asset, photoTreatment, rect, {
|
||||
opacity: index === 0 ? 1 : 0.94,
|
||||
frameOpacity: index === 0 ? 0.04 : 0.025,
|
||||
shadowOpacity: index === 0 ? 0.12 : 0.08
|
||||
});
|
||||
if (mode === "sidecar_drift" && index === 0) {
|
||||
plane.group.rotation.y += 0.05;
|
||||
}
|
||||
root.add(plane.group);
|
||||
motionEntries.push({
|
||||
group: plane.group,
|
||||
basePosition: plane.group.position.clone(),
|
||||
baseRotation: plane.group.rotation.clone(),
|
||||
phase: seededUnit(assets[index + 1]?.asset.id ?? plane.group.uuid, 2) * Math.PI * 2,
|
||||
travelX: 0.28,
|
||||
travelY: 0.16,
|
||||
orbit: 0.16,
|
||||
phase: seededUnit(asset.asset.id, 1 + index) * Math.PI * 2,
|
||||
travelX: index === 0 ? 0.14 : 0.18,
|
||||
travelY: index === 0 ? 0.08 : 0.12,
|
||||
orbit: index === 0 ? 0.12 : 0.16,
|
||||
pitch: 0.02,
|
||||
yaw: 0.06
|
||||
yaw: index === 0 ? 0.04 : 0.06
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1040,7 +1226,7 @@ const buildWitnessFloat = (input: SceneActivationInput): SceneInstance => {
|
||||
root,
|
||||
update: (context) => {
|
||||
const time = context.elapsedMs * 0.001;
|
||||
updateBackdropSystem(backdrop, context, input.params.scenicTreatment);
|
||||
updateBackdropSystem(backdrop, context, paletteFromAssets(assets, input.params.scenicTreatment), input.params.scenicTreatment);
|
||||
motionEntries.forEach((entry, index) =>
|
||||
applyMotionEntry(entry, time + index * 0.18, composition.motion, composition.orbitAmount * 0.35, composition.stagger)
|
||||
);
|
||||
@@ -1060,22 +1246,30 @@ const buildPortalFrame = (input: SceneActivationInput): SceneInstance => {
|
||||
const root = new THREE.Group();
|
||||
root.add(backdrop.group);
|
||||
const motionEntries: MotionEntry[] = [];
|
||||
const { hero, supports } = buildHeroPlanes(assets, photoTreatment, {
|
||||
heroHeight: mode === "monolith_aperture" ? 5.8 : 5,
|
||||
supportHeight: 1.95
|
||||
});
|
||||
hero.group.position.set(0, 0, -0.95);
|
||||
root.add(hero.group);
|
||||
motionEntries.push({
|
||||
group: hero.group,
|
||||
basePosition: hero.group.position.clone(),
|
||||
baseRotation: hero.group.rotation.clone(),
|
||||
phase: seededUnit(assets[0]!.asset.id, 3) * Math.PI * 2,
|
||||
travelX: 0.14,
|
||||
travelY: 0.08,
|
||||
orbit: 0.08,
|
||||
pitch: 0.015,
|
||||
yaw: 0.03
|
||||
const layout = createHeroLayoutRects(assets.length, mode === "fold_gate" ? "arc" : "stack", composition);
|
||||
assets.forEach((asset, index) => {
|
||||
const rect = layout[index] ?? layout.at(-1)!;
|
||||
const adjustedRect =
|
||||
mode === "monolith_aperture" && index === 0
|
||||
? { ...rect, width: rect.width * 0.92, height: rect.height * 1.14 }
|
||||
: rect;
|
||||
const plane = createFittedPhotoPlane(asset, photoTreatment, adjustedRect, {
|
||||
opacity: index === 0 ? 1 : 0.94,
|
||||
frameOpacity: index === 0 ? 0.04 : 0.025,
|
||||
shadowOpacity: index === 0 ? 0.12 : 0.08
|
||||
});
|
||||
root.add(plane.group);
|
||||
motionEntries.push({
|
||||
group: plane.group,
|
||||
basePosition: plane.group.position.clone(),
|
||||
baseRotation: plane.group.rotation.clone(),
|
||||
phase: seededUnit(asset.asset.id, 3 + index) * Math.PI * 2,
|
||||
travelX: index === 0 ? 0.1 : 0.14,
|
||||
travelY: index === 0 ? 0.06 : 0.08,
|
||||
orbit: 0.08,
|
||||
pitch: 0.015,
|
||||
yaw: index === 0 ? 0.03 : 0.04
|
||||
});
|
||||
});
|
||||
|
||||
const leftFrame = createAccentRail(0.18, 8.6, palette.line, 0.1 + input.params.scenicTreatment.accentIntensity * 0.08, -4.5);
|
||||
@@ -1097,23 +1291,6 @@ const buildPortalFrame = (input: SceneActivationInput): SceneInstance => {
|
||||
topFrame.position.y = 3.8;
|
||||
}
|
||||
|
||||
supports.forEach((plane, index) => {
|
||||
plane.group.position.set(index === 0 ? -3.35 : 3.35, -1.45 + index * 0.6, -2.7 - index * 0.3);
|
||||
plane.group.rotation.y = index === 0 ? 0.18 : -0.18;
|
||||
root.add(plane.group);
|
||||
motionEntries.push({
|
||||
group: plane.group,
|
||||
basePosition: plane.group.position.clone(),
|
||||
baseRotation: plane.group.rotation.clone(),
|
||||
phase: seededUnit(plane.group.uuid, 1) * Math.PI * 2,
|
||||
travelX: 0.18,
|
||||
travelY: 0.1,
|
||||
orbit: 0.08,
|
||||
pitch: 0.015,
|
||||
yaw: 0.04
|
||||
});
|
||||
});
|
||||
|
||||
input.camera.position.set(0, 0.08, 6.85);
|
||||
input.camera.lookAt(0, 0, -2.8);
|
||||
|
||||
@@ -1121,7 +1298,7 @@ const buildPortalFrame = (input: SceneActivationInput): SceneInstance => {
|
||||
root,
|
||||
update: (context) => {
|
||||
const time = context.elapsedMs * 0.001;
|
||||
updateBackdropSystem(backdrop, context, input.params.scenicTreatment);
|
||||
updateBackdropSystem(backdrop, context, paletteFromAssets(assets, input.params.scenicTreatment), input.params.scenicTreatment);
|
||||
motionEntries.forEach((entry, index) =>
|
||||
applyMotionEntry(entry, time + index * 0.12, composition.motion, composition.orbitAmount * 0.22, composition.stagger)
|
||||
);
|
||||
@@ -1141,37 +1318,26 @@ const buildOrbitGallery = (input: SceneActivationInput): SceneInstance => {
|
||||
const backdrop = buildBackdropSystem(input, palette);
|
||||
const root = new THREE.Group();
|
||||
root.add(backdrop.group);
|
||||
const planes = assets.map((asset, index) =>
|
||||
createPhotoPlane(asset, photoTreatment, {
|
||||
height: index === 0 ? 4.2 : 2.35,
|
||||
const motionEntries: MotionEntry[] = [];
|
||||
const layout = createHeroLayoutRects(assets.length, "arc", composition);
|
||||
assets.forEach((asset, index) => {
|
||||
const rect = layout[index] ?? layout.at(-1)!;
|
||||
const plane = createFittedPhotoPlane(asset, photoTreatment, rect, {
|
||||
frameOpacity: 0.03,
|
||||
shadowOpacity: 0.09
|
||||
})
|
||||
);
|
||||
const motionEntries: MotionEntry[] = [];
|
||||
|
||||
planes.forEach((plane, index) => {
|
||||
const assetId = assets[index]?.asset.id ?? plane.group.uuid;
|
||||
const angle = THREE.MathUtils.lerp(-0.85, 0.85, planes.length === 1 ? 0.5 : index / Math.max(1, planes.length - 1));
|
||||
const radius = index === 0 ? 0.6 : 2.9 + index * 0.6;
|
||||
plane.group.position.set(
|
||||
index === 0 ? 0 : Math.cos(angle) * radius,
|
||||
index === 0 ? 0.08 : Math.sin(angle) * 1.4,
|
||||
-1.0 - index * 0.8
|
||||
);
|
||||
});
|
||||
if (mode === "mirror_sweep" && index > 0) {
|
||||
plane.group.position.x *= index % 2 === 0 ? 1 : -1;
|
||||
}
|
||||
plane.group.rotation.y = index === 0 ? 0 : seededSigned(assetId, 7) * 0.18;
|
||||
root.add(plane.group);
|
||||
motionEntries.push({
|
||||
group: plane.group,
|
||||
basePosition: plane.group.position.clone(),
|
||||
baseRotation: plane.group.rotation.clone(),
|
||||
phase: seededUnit(assetId, 6) * Math.PI * 2,
|
||||
travelX: 0.16 + index * 0.08,
|
||||
travelY: 0.1 + index * 0.05,
|
||||
orbit: 0.28 + index * 0.12,
|
||||
phase: seededUnit(asset.asset.id, 6 + index) * Math.PI * 2,
|
||||
travelX: 0.14 + index * 0.06,
|
||||
travelY: 0.08 + index * 0.04,
|
||||
orbit: 0.24 + index * 0.1,
|
||||
pitch: 0.02,
|
||||
yaw: 0.06 + index * 0.02
|
||||
});
|
||||
@@ -1193,7 +1359,7 @@ const buildOrbitGallery = (input: SceneActivationInput): SceneInstance => {
|
||||
root,
|
||||
update: (context) => {
|
||||
const time = context.elapsedMs * 0.001;
|
||||
updateBackdropSystem(backdrop, context, input.params.scenicTreatment);
|
||||
updateBackdropSystem(backdrop, context, paletteFromAssets(assets, input.params.scenicTreatment), input.params.scenicTreatment);
|
||||
motionEntries.forEach((entry, index) => {
|
||||
const orbitGain = composition.orbitAmount * (mode === "lantern_orbit" ? 0.75 : 0.52);
|
||||
applyMotionEntry(entry, time + index * 0.24, composition.motion, orbitGain, composition.stagger);
|
||||
@@ -1214,29 +1380,34 @@ const buildSuspensionField = (input: SceneActivationInput): SceneInstance => {
|
||||
const root = new THREE.Group();
|
||||
root.add(backdrop.group);
|
||||
const motionEntries: MotionEntry[] = [];
|
||||
|
||||
const layout = createHeroLayoutRects(
|
||||
assets.length,
|
||||
mode === "diagonal_relay" ? "line" : mode === "depth_table" ? "cluster" : "stack",
|
||||
composition
|
||||
);
|
||||
assets.forEach((asset, index) => {
|
||||
const plane = createPhotoPlane(asset, photoTreatment, {
|
||||
height: index === 0 ? 3.25 : 2.45,
|
||||
const rect = layout[index] ?? layout.at(-1)!;
|
||||
const adjustedRect =
|
||||
mode === "depth_table"
|
||||
? {
|
||||
...rect,
|
||||
y: rect.y + seededSigned(asset.asset.id, 10) * 0.28,
|
||||
z: rect.z - index * 0.18
|
||||
}
|
||||
: rect;
|
||||
const plane = createFittedPhotoPlane(asset, photoTreatment, adjustedRect, {
|
||||
opacity: index === 0 ? 1 : 0.94,
|
||||
frameOpacity: 0.025,
|
||||
shadowOpacity: 0.07
|
||||
});
|
||||
if (mode === "diagonal_relay") {
|
||||
plane.group.position.set(-3.4 + index * 2.2, 1.8 - index * 1.12, -1.1 - index * 0.7);
|
||||
} else if (mode === "depth_table") {
|
||||
plane.group.position.set(-2.8 + index * 1.8, seededSigned(asset.asset.id, 10) * 0.9, -1.2 - index * 1.0);
|
||||
} else {
|
||||
plane.group.position.set(-3.2 + index * 2.1, 0.7 - index * 0.2, -1.0 - index * 0.55);
|
||||
}
|
||||
plane.group.rotation.y = seededSigned(asset.asset.id, 4) * 0.18;
|
||||
root.add(plane.group);
|
||||
motionEntries.push({
|
||||
group: plane.group,
|
||||
basePosition: plane.group.position.clone(),
|
||||
baseRotation: plane.group.rotation.clone(),
|
||||
phase: seededUnit(asset.asset.id, 9) * Math.PI * 2,
|
||||
travelX: 0.22 + composition.spread * 0.18,
|
||||
travelY: 0.12 + composition.stagger * 0.12,
|
||||
travelX: 0.18 + composition.spread * 0.14,
|
||||
travelY: 0.1 + composition.stagger * 0.1,
|
||||
orbit: 0.18,
|
||||
pitch: 0.016,
|
||||
yaw: 0.05
|
||||
@@ -1255,7 +1426,7 @@ const buildSuspensionField = (input: SceneActivationInput): SceneInstance => {
|
||||
root,
|
||||
update: (context) => {
|
||||
const time = context.elapsedMs * 0.001;
|
||||
updateBackdropSystem(backdrop, context, input.params.scenicTreatment);
|
||||
updateBackdropSystem(backdrop, context, paletteFromAssets(assets, input.params.scenicTreatment), input.params.scenicTreatment);
|
||||
motionEntries.forEach((entry, index) =>
|
||||
applyMotionEntry(entry, time + index * 0.16, composition.motion, composition.orbitAmount * 0.2, composition.stagger)
|
||||
);
|
||||
@@ -1275,28 +1446,25 @@ const buildChorusArray = (input: SceneActivationInput): SceneInstance => {
|
||||
const root = new THREE.Group();
|
||||
root.add(backdrop.group);
|
||||
const motionEntries: MotionEntry[] = [];
|
||||
|
||||
const layout = createEqualLayoutRects(
|
||||
assets.length,
|
||||
mode === "ribbon_quartet" ? "ribbon" : mode === "offset_choir" ? "cluster" : "grid",
|
||||
composition
|
||||
);
|
||||
assets.forEach((asset, index) => {
|
||||
const plane = createPhotoPlane(asset, photoTreatment, {
|
||||
height: 2.6,
|
||||
const rect = layout[index] ?? layout.at(-1)!;
|
||||
const plane = createFittedPhotoPlane(asset, photoTreatment, rect, {
|
||||
frameOpacity: 0.02,
|
||||
shadowOpacity: 0.06
|
||||
});
|
||||
if (mode === "ribbon_quartet") {
|
||||
plane.group.position.set(-3.8 + index * 2.55, Math.sin(index * 0.9) * 1.0, -1.1 - index * 0.45);
|
||||
} else if (mode === "offset_choir") {
|
||||
plane.group.position.set(index % 2 === 0 ? -2.5 : 2.5, 1.55 - Math.floor(index / 2) * 2.7, -1.1 - index * 0.35);
|
||||
} else {
|
||||
plane.group.position.set(index % 2 === 0 ? -2.2 : 2.2, 1.45 - Math.floor(index / 2) * 2.9, -1.1 - index * 0.3);
|
||||
}
|
||||
root.add(plane.group);
|
||||
motionEntries.push({
|
||||
group: plane.group,
|
||||
basePosition: plane.group.position.clone(),
|
||||
baseRotation: plane.group.rotation.clone(),
|
||||
phase: seededUnit(asset.asset.id, 13) * Math.PI * 2,
|
||||
travelX: 0.16 + composition.spread * 0.16,
|
||||
travelY: 0.12 + composition.stagger * 0.1,
|
||||
travelX: 0.14 + composition.spread * 0.14,
|
||||
travelY: 0.1 + composition.stagger * 0.08,
|
||||
orbit: 0.14,
|
||||
pitch: 0.01,
|
||||
yaw: 0.04
|
||||
@@ -1318,7 +1486,7 @@ const buildChorusArray = (input: SceneActivationInput): SceneInstance => {
|
||||
root,
|
||||
update: (context) => {
|
||||
const time = context.elapsedMs * 0.001;
|
||||
updateBackdropSystem(backdrop, context, input.params.scenicTreatment);
|
||||
updateBackdropSystem(backdrop, context, paletteFromAssets(assets, input.params.scenicTreatment), input.params.scenicTreatment);
|
||||
motionEntries.forEach((entry, index) =>
|
||||
applyMotionEntry(entry, time + index * 0.2, composition.motion, composition.orbitAmount * 0.16, composition.stagger)
|
||||
);
|
||||
@@ -1339,30 +1507,25 @@ const buildEqualCollage = (input: SceneActivationInput): SceneInstance => {
|
||||
const root = new THREE.Group();
|
||||
root.add(backdrop.group);
|
||||
const motionEntries: MotionEntry[] = [];
|
||||
|
||||
const layout = createEqualLayoutRects(
|
||||
assets.length,
|
||||
mode === "floating_blocks" ? "cluster" : mode === "arc_cluster" ? "arc" : "grid",
|
||||
composition
|
||||
);
|
||||
assets.forEach((asset, index) => {
|
||||
const plane = createPhotoPlane(asset, photoTreatment, {
|
||||
height: 2.85,
|
||||
const rect = layout[index] ?? layout.at(-1)!;
|
||||
const plane = createFittedPhotoPlane(asset, photoTreatment, rect, {
|
||||
frameOpacity: 0.022,
|
||||
shadowOpacity: 0.06
|
||||
});
|
||||
if (mode === "floating_blocks") {
|
||||
plane.group.position.set(-3.4 + index * 2.1, seededSigned(asset.asset.id, 2) * 1.4, -1.1 - index * 0.5);
|
||||
} else if (mode === "arc_cluster") {
|
||||
const angle = THREE.MathUtils.lerp(-0.8, 0.8, assets.length === 1 ? 0.5 : index / Math.max(1, assets.length - 1));
|
||||
plane.group.position.set(Math.cos(angle) * 3.0, Math.sin(angle) * 1.5, -1.1 - index * 0.4);
|
||||
} else {
|
||||
plane.group.position.set(index % 2 === 0 ? -2.7 : 2.7, 1.75 - Math.floor(index / 2) * 3.1, -1.1 - index * 0.25);
|
||||
}
|
||||
plane.group.rotation.y = seededSigned(asset.asset.id, 5) * 0.12;
|
||||
root.add(plane.group);
|
||||
motionEntries.push({
|
||||
group: plane.group,
|
||||
basePosition: plane.group.position.clone(),
|
||||
baseRotation: plane.group.rotation.clone(),
|
||||
phase: seededUnit(asset.asset.id, 15) * Math.PI * 2,
|
||||
travelX: 0.18 + composition.spread * 0.18,
|
||||
travelY: 0.14,
|
||||
travelX: 0.16 + composition.spread * 0.16,
|
||||
travelY: 0.12,
|
||||
orbit: 0.16 + composition.orbitAmount * 0.14,
|
||||
pitch: 0.01,
|
||||
yaw: 0.04
|
||||
@@ -1383,7 +1546,7 @@ const buildEqualCollage = (input: SceneActivationInput): SceneInstance => {
|
||||
root,
|
||||
update: (context) => {
|
||||
const time = context.elapsedMs * 0.001;
|
||||
updateBackdropSystem(backdrop, context, input.params.scenicTreatment);
|
||||
updateBackdropSystem(backdrop, context, paletteFromAssets(assets, input.params.scenicTreatment), input.params.scenicTreatment);
|
||||
motionEntries.forEach((entry, index) =>
|
||||
applyMotionEntry(entry, time + index * 0.22, composition.motion, composition.orbitAmount * 0.24, composition.stagger)
|
||||
);
|
||||
@@ -1403,28 +1566,23 @@ const buildArrivalRelay = (input: SceneActivationInput): SceneInstance => {
|
||||
const root = new THREE.Group();
|
||||
root.add(backdrop.group);
|
||||
const motionEntries: MotionEntry[] = [];
|
||||
|
||||
const layout = createArrivalLayoutRects(assets.length, mode, composition);
|
||||
assets.forEach((asset, index) => {
|
||||
const plane = createPhotoPlane(asset, photoTreatment, {
|
||||
height: index === 0 ? 3.65 : 1.9,
|
||||
const rect = layout[index] ?? layout.at(-1)!;
|
||||
const plane = createFittedPhotoPlane(asset, photoTreatment, rect, {
|
||||
opacity: index === 0 ? 1 : 0.92,
|
||||
frameOpacity: 0.02,
|
||||
shadowOpacity: 0.06
|
||||
});
|
||||
if (index === 0) {
|
||||
plane.group.position.set(mode === "relay_rail" ? 0.95 : 1.2, 0, -0.9);
|
||||
} else {
|
||||
plane.group.position.set(-4.4, 1.8 - index * 1.18, -1.6 - index * 0.34);
|
||||
}
|
||||
plane.group.rotation.y = index === 0 ? -0.08 : 0.16;
|
||||
root.add(plane.group);
|
||||
motionEntries.push({
|
||||
group: plane.group,
|
||||
basePosition: plane.group.position.clone(),
|
||||
baseRotation: plane.group.rotation.clone(),
|
||||
phase: seededUnit(asset.asset.id, 18) * Math.PI * 2,
|
||||
travelX: index === 0 ? 0.08 : 0.18 + index * 0.06,
|
||||
travelY: 0.05,
|
||||
orbit: 0.08,
|
||||
phase: seededUnit(asset.asset.id, 18 + index) * Math.PI * 2,
|
||||
travelX: index === 0 ? 0.06 : 0.12 + index * 0.04,
|
||||
travelY: 0.04,
|
||||
orbit: 0.06,
|
||||
pitch: 0.01,
|
||||
yaw: 0.03
|
||||
});
|
||||
@@ -1444,18 +1602,10 @@ const buildArrivalRelay = (input: SceneActivationInput): SceneInstance => {
|
||||
root,
|
||||
update: (context) => {
|
||||
const time = context.elapsedMs * 0.001;
|
||||
updateBackdropSystem(backdrop, context, input.params.scenicTreatment);
|
||||
motionEntries.forEach((entry, index) => {
|
||||
if (index > 0) {
|
||||
entry.group.position.x =
|
||||
entry.basePosition.x + Math.sin(time * (0.12 + composition.motion * 0.08) + index * 0.8) * entry.travelX;
|
||||
entry.group.position.y =
|
||||
entry.basePosition.y + Math.cos(time * 0.14 + index * 0.6) * Math.max(0.03, entry.travelY);
|
||||
entry.group.position.z = entry.basePosition.z + Math.sin(time * 0.08 + index * 0.4) * 0.06;
|
||||
return;
|
||||
}
|
||||
applyMotionEntry(entry, time, composition.motion, composition.orbitAmount * 0.1, composition.stagger);
|
||||
});
|
||||
updateBackdropSystem(backdrop, context, paletteFromAssets(assets, input.params.scenicTreatment), input.params.scenicTreatment);
|
||||
motionEntries.forEach((entry, index) =>
|
||||
applyMotionEntry(entry, time + index * 0.12, composition.motion * 0.82, composition.orbitAmount * 0.08, composition.stagger)
|
||||
);
|
||||
rail.position.y = Math.sin(time * 0.12) * 0.08;
|
||||
lower.position.x = Math.sin(time * 0.08) * 0.12;
|
||||
configureCamera(input.camera, { x: 0.18, y: 0, z: 7.35 }, new THREE.Vector3(0.2, 0, -3.1), composition.cameraTravel, context.elapsedMs);
|
||||
@@ -1470,13 +1620,17 @@ const buildSafeHold = (input: SceneActivationInput): SceneInstance => {
|
||||
root.add(backdrop.group);
|
||||
let plane: PlaneBundle | null = null;
|
||||
if (assets[0]) {
|
||||
plane = createPhotoPlane(assets[0], input.params.photoTreatment, {
|
||||
height: 4.1,
|
||||
plane = createFittedPhotoPlane(assets[0], input.params.photoTreatment, {
|
||||
x: 0,
|
||||
y: -0.06,
|
||||
z: -1.6,
|
||||
width: 4.4,
|
||||
height: 3.9
|
||||
}, {
|
||||
opacity: 0.58,
|
||||
frameOpacity: 0.015,
|
||||
shadowOpacity: 0.04
|
||||
});
|
||||
plane.group.position.set(0, -0.06, -1.6);
|
||||
root.add(plane.group);
|
||||
}
|
||||
|
||||
@@ -1487,7 +1641,7 @@ const buildSafeHold = (input: SceneActivationInput): SceneInstance => {
|
||||
root,
|
||||
update: (context) => {
|
||||
const time = context.elapsedMs * 0.001;
|
||||
updateBackdropSystem(backdrop, context, input.params.scenicTreatment);
|
||||
updateBackdropSystem(backdrop, context, paletteFromAssets(assets, input.params.scenicTreatment), input.params.scenicTreatment);
|
||||
if (plane) {
|
||||
plane.group.position.y = -0.06 + Math.cos(time * 0.2) * 0.05;
|
||||
}
|
||||
@@ -1646,29 +1800,49 @@ const updateSceneRuntime = (runtime: SceneRuntime, context: SceneFrameContext) =
|
||||
const resolvePresentationParams = (presentation: SurfacePresentation) =>
|
||||
mergeSceneParams(presentation.definition.defaultParams, presentation.cue?.parameterOverrides, presentation.params);
|
||||
|
||||
const canSmoothMotionUpdate = (runtime: SceneRuntime, presentation: SurfacePresentation) => {
|
||||
if (runtime.presentation.definition.id !== presentation.definition.id) {
|
||||
return false;
|
||||
}
|
||||
if ((runtime.presentation.modeKey ?? "") !== (presentation.modeKey ?? "")) {
|
||||
return false;
|
||||
}
|
||||
if ((runtime.presentation.effectPresetId ?? "") !== (presentation.effectPresetId ?? "")) {
|
||||
return false;
|
||||
}
|
||||
if (runtime.presentation.assets.length !== presentation.assets.length) {
|
||||
return false;
|
||||
}
|
||||
if (runtime.presentation.assets.some((asset, index) => asset.id !== presentation.assets[index]?.id)) {
|
||||
return false;
|
||||
const liveMutableParamPaths = new Set([
|
||||
"composition.motion",
|
||||
"composition.cameraTravel",
|
||||
"composition.orbitAmount",
|
||||
"scenicTreatment.fieldType",
|
||||
"scenicTreatment.fieldIntensity",
|
||||
"scenicTreatment.fieldScale",
|
||||
"scenicTreatment.fieldSpeed",
|
||||
"scenicTreatment.hue",
|
||||
"scenicTreatment.saturation",
|
||||
"scenicTreatment.lightness"
|
||||
]);
|
||||
|
||||
const createPresentationStructureSignature = (presentation: SurfacePresentation) => {
|
||||
const params = flattenSceneParams(resolvePresentationParams(presentation));
|
||||
for (const path of liveMutableParamPaths) {
|
||||
delete params[path];
|
||||
}
|
||||
|
||||
const currentParams = flattenSceneParams(resolvePresentationParams(runtime.presentation));
|
||||
const nextParams = flattenSceneParams(resolvePresentationParams(presentation));
|
||||
delete currentParams["composition.motion"];
|
||||
delete nextParams["composition.motion"];
|
||||
return JSON.stringify({
|
||||
definitionId: presentation.definition.id,
|
||||
effectPresetId: presentation.effectPresetId ?? null,
|
||||
modeKey: presentation.modeKey ?? null,
|
||||
assetIds: presentation.assets.map((asset) => asset.id),
|
||||
textFragments: presentation.textFragments ?? [],
|
||||
anchorCaption: presentation.anchorCaption ?? null,
|
||||
params
|
||||
});
|
||||
};
|
||||
|
||||
return JSON.stringify(currentParams) === JSON.stringify(nextParams);
|
||||
const canPatchRuntimeInPlace = (runtime: SceneRuntime, presentation: SurfacePresentation) =>
|
||||
createPresentationStructureSignature(runtime.presentation) === createPresentationStructureSignature(presentation);
|
||||
|
||||
const applyPresentationToRuntime = (runtime: SceneRuntime, presentation: SurfacePresentation) => {
|
||||
const mergedParams = resolvePresentationParams(presentation);
|
||||
const currentMotion = runtime.params.composition.motion;
|
||||
Object.assign(runtime.params.photoTreatment, mergedParams.photoTreatment);
|
||||
Object.assign(runtime.params.scenicTreatment, mergedParams.scenicTreatment);
|
||||
Object.assign(runtime.params.composition, mergedParams.composition);
|
||||
Object.assign(runtime.params.textTreatment, mergedParams.textTreatment);
|
||||
runtime.params.composition.motion = currentMotion;
|
||||
runtime.presentation = presentation;
|
||||
runtime.targetMotion = mergedParams.composition.motion;
|
||||
};
|
||||
|
||||
const disposeSceneRuntime = (runtime: SceneRuntime | null) => {
|
||||
@@ -1751,6 +1925,9 @@ export class RenderSurface {
|
||||
private lastFrameMs = 0;
|
||||
private blackout = false;
|
||||
private activationToken = 0;
|
||||
private activePresentationKey: string | undefined;
|
||||
private qualityProfile: SurfaceQualityProfile = "program";
|
||||
private busy = false;
|
||||
|
||||
constructor(canvas: HTMLCanvasElement) {
|
||||
this.renderer = new THREE.WebGLRenderer({
|
||||
@@ -1760,7 +1937,6 @@ export class RenderSurface {
|
||||
});
|
||||
this.renderer.toneMapping = THREE.NoToneMapping;
|
||||
this.renderer.outputColorSpace = THREE.SRGBColorSpace;
|
||||
this.renderer.setPixelRatio(typeof window === "undefined" ? 1 : Math.min(window.devicePixelRatio, 2));
|
||||
this.renderer.setClearColor("#040508", 1);
|
||||
this.fromTarget.texture.colorSpace = THREE.NoColorSpace;
|
||||
this.toTarget.texture.colorSpace = THREE.NoColorSpace;
|
||||
@@ -1781,7 +1957,14 @@ export class RenderSurface {
|
||||
this.compositeScene.add(bar);
|
||||
});
|
||||
|
||||
this.applyQualitySettings();
|
||||
|
||||
this.renderer.setAnimationLoop((timestamp) => {
|
||||
const minFrameIntervalMs = this.getMinFrameIntervalMs();
|
||||
if (minFrameIntervalMs > 0 && this.lastFrameMs !== 0 && timestamp - this.lastFrameMs < minFrameIntervalMs) {
|
||||
return;
|
||||
}
|
||||
|
||||
const deltaMs = this.lastFrameMs === 0 ? 16.6 : timestamp - this.lastFrameMs;
|
||||
this.lastFrameMs = timestamp;
|
||||
|
||||
@@ -1832,6 +2015,24 @@ export class RenderSurface {
|
||||
plugins.forEach((plugin) => this.register(plugin));
|
||||
}
|
||||
|
||||
setQualityProfile(profile: SurfaceQualityProfile) {
|
||||
if (this.qualityProfile === profile) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.qualityProfile = profile;
|
||||
this.applyQualitySettings();
|
||||
}
|
||||
|
||||
setBusy(busy: boolean) {
|
||||
if (this.busy === busy) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.busy = busy;
|
||||
this.applyQualitySettings();
|
||||
}
|
||||
|
||||
setSize(width: number, height: number) {
|
||||
this.viewport = {
|
||||
width,
|
||||
@@ -1864,9 +2065,25 @@ export class RenderSurface {
|
||||
this.blackout = blackout;
|
||||
}
|
||||
|
||||
async activate(presentation: SurfacePresentation | null, transition?: CueTransition | null) {
|
||||
updatePresentation(presentation: SurfacePresentation | null, activationKey?: string) {
|
||||
if (!presentation || activationKey !== this.activePresentationKey) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.transitionRuntime?.to && canPatchRuntimeInPlace(this.transitionRuntime.to, presentation)) {
|
||||
applyPresentationToRuntime(this.transitionRuntime.to, presentation);
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.currentRuntime && canPatchRuntimeInPlace(this.currentRuntime, presentation)) {
|
||||
applyPresentationToRuntime(this.currentRuntime, presentation);
|
||||
}
|
||||
}
|
||||
|
||||
async activate(presentation: SurfacePresentation | null, transition?: CueTransition | null, activationKey?: string) {
|
||||
const token = this.activationToken + 1;
|
||||
this.activationToken = token;
|
||||
this.activePresentationKey = activationKey;
|
||||
|
||||
if (!presentation) {
|
||||
this.clearAll();
|
||||
@@ -1876,10 +2093,9 @@ export class RenderSurface {
|
||||
if (
|
||||
this.currentRuntime &&
|
||||
(!transition || transition.style === "cut" || transition.durationMs <= 0) &&
|
||||
canSmoothMotionUpdate(this.currentRuntime, presentation)
|
||||
canPatchRuntimeInPlace(this.currentRuntime, presentation)
|
||||
) {
|
||||
this.currentRuntime.presentation = presentation;
|
||||
this.currentRuntime.targetMotion = resolvePresentationParams(presentation).composition.motion;
|
||||
applyPresentationToRuntime(this.currentRuntime, presentation);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -2087,5 +2303,24 @@ export class RenderSurface {
|
||||
disposeSceneRuntime(this.transitionRuntime.to);
|
||||
this.transitionRuntime = null;
|
||||
}
|
||||
this.activePresentationKey = undefined;
|
||||
}
|
||||
|
||||
private getMinFrameIntervalMs() {
|
||||
if (this.qualityProfile === "program") {
|
||||
return 0;
|
||||
}
|
||||
|
||||
return this.busy ? 1000 / 24 : 1000 / 30;
|
||||
}
|
||||
|
||||
private applyQualitySettings() {
|
||||
const devicePixelRatio = typeof window === "undefined" ? 1 : Math.max(1, window.devicePixelRatio || 1);
|
||||
const scale = this.qualityProfile === "program" ? 1 : this.busy ? 0.72 : 0.85;
|
||||
const cap = this.qualityProfile === "program" ? 2 : 1.25;
|
||||
const pixelRatio = Math.min(devicePixelRatio * scale, cap);
|
||||
this.renderer.setPixelRatio(pixelRatio);
|
||||
this.lastFrameMs = 0;
|
||||
this.setSize(this.viewport.width, this.viewport.height);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user