Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Animation preview #364

Merged
merged 3 commits into from
Jan 3, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
112 changes: 112 additions & 0 deletions src/animation.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
import { Events } from './events';
import { Splat } from './splat';

const registerAnimationEvents = (events: Events) => {
// animation support
let animationFiles: File[] = [];
let animationSplat: Splat = null;
let animationFrame = -1;
let animationLoading = false;
let nextFrame = -1;

const setFrames = (files: File[]) => {
// eslint-disable-next-line regexp/no-super-linear-backtracking
const regex = /(.*?)(\d+).ply$/;

// sort frames by trailing number, if it exists
const sorter = (a: File, b: File) => {
const avalue = a.name?.match(regex)?.[2];
const bvalue = b.name?.match(regex)?.[2];
return (avalue && bvalue) ? parseInt(avalue, 10) - parseInt(bvalue, 10) : 0;
};

animationFiles = files.slice();
animationFiles.sort(sorter);
events.fire('animation.frames', animationFiles.length);
};

// resolves on first render frame
const firstRender = (splat: Splat) => {
return new Promise<void>((resolve) => {
splat.entity.gsplat.instance.sorter.on('updated', (count) => {
resolve();
});
});
};

const setFrame = async (frame: number) => {
if (frame < 0 || frame >= animationFiles.length) {
return;
}

if (animationLoading) {
nextFrame = frame;
return;
}

if (frame === animationFrame) {
return;
}

// if user changed the scene, confirm
if (events.invoke('scene.dirty')) {
const result = await events.invoke('showPopup', {
type: 'yesno',
header: 'RESET SCENE',
message: 'You have unsaved changes. Are you sure you want to reset the scene?'
});

if (result.action !== 'yes') {
return;
}

events.fire('scene.clear');
animationSplat = null;
}

animationLoading = true;

const file = animationFiles[frame];
const url = URL.createObjectURL(file);
const newSplat = await events.invoke('load', url, file.name, !animationSplat, true) as Splat;
URL.revokeObjectURL(url);

// wait for first frame render
await firstRender(newSplat);

// destroy the previous frame
if (animationSplat) {
animationSplat.destroy();
}
animationFrame = frame;
animationSplat = newSplat;
animationLoading = false;

events.fire('animation.frame', frame);

// initiate the next frame load
if (nextFrame !== -1) {
const frame = nextFrame;
nextFrame = -1;
setFrame(frame);
}
};

events.function('animation.frames', () => {
return animationFiles?.length ?? 0;
});

events.function('animation.frame', () => {
return animationFrame;
});

events.on('animation.setFrames', (files: File[]) => {
setFrames(files);
});

events.on('animation.setFrame', async (frame: number) => {
await setFrame(frame);
});
};

export { registerAnimationEvents };
13 changes: 10 additions & 3 deletions src/asset-loader.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ interface ModelLoadRequest {
contents?: ArrayBuffer;
filename?: string;
maxAnisotropy?: number;
animationFrame?: boolean; // animations disable morton re-ordering at load time for faster loading
}

// ideally this function would stream data directly into GSplatData buffers.
Expand Down Expand Up @@ -99,7 +100,9 @@ class AssetLoader {
}

loadPly(loadRequest: ModelLoadRequest) {
this.events.fire('startSpinner');
if (!loadRequest.animationFrame) {
this.events.fire('startSpinner');
}

return new Promise<Splat>((resolve, reject) => {
const asset = new Asset(
Expand All @@ -112,7 +115,9 @@ class AssetLoader {
},
{
// decompress data on load
decompress: true
decompress: true,
// disable morton re-ordering when loading animation frames
reorder: !(loadRequest.animationFrame ?? false)
}
);

Expand Down Expand Up @@ -150,7 +155,9 @@ class AssetLoader {
this.registry.add(asset);
this.registry.load(asset);
}).finally(() => {
this.events.fire('stopSpinner');
if (!loadRequest.animationFrame) {
this.events.fire('stopSpinner');
}
});
}

Expand Down
4 changes: 2 additions & 2 deletions src/camera.ts
Original file line number Diff line number Diff line change
Expand Up @@ -58,12 +58,12 @@ class Camera extends Element {
entity: Entity;
focalPointTween = new TweenValue({ x: 0, y: 0.5, z: 0 });
azimElevTween = new TweenValue({ azim: 30, elev: -15 });
distanceTween = new TweenValue({ distance: 2 });
distanceTween = new TweenValue({ distance: 1 });

minElev = -90;
maxElev = 90;

sceneRadius = 5;
sceneRadius = 1;

flySpeed = 5;

Expand Down
6 changes: 1 addition & 5 deletions src/drop-handler.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,6 @@ class DroppedFile {
this.filename = filename;
this.file = file;
}

get url() {
return URL.createObjectURL(this.file);
}
}

type DropHandlerFunc = (files: Array<DroppedFile>, resetScene: boolean) => void;
Expand Down Expand Up @@ -118,7 +114,7 @@ const CreateDropHandler = (target: HTMLElement, dropHandler: DropHandlerFunc) =>
}

// finally, call the drop handler
dropHandler(files, !ev.shiftKey);
dropHandler(files, ev.shiftKey);
};

target.addEventListener('dragstart', dragstart, true);
Expand Down
87 changes: 77 additions & 10 deletions src/file-handler.ts
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ const loadCameraPoses = async (url: string, filename: string, events: Events) =>
const initFileHandler = (scene: Scene, events: Events, dropTarget: HTMLElement, remoteStorageDetails: RemoteStorageDetails) => {

// returns a promise that resolves when the file is loaded
const handleLoad = async (url: string, filename?: string) => {
const handleLoad = async (url: string, filename?: string, focusCamera = true, animationFrame = false) => {
try {
if (!filename) {
// extract filename from url if one ins't provided
Expand All @@ -153,9 +153,9 @@ const initFileHandler = (scene: Scene, events: Events, dropTarget: HTMLElement,
if (lowerFilename.endsWith('.json')) {
await loadCameraPoses(url, filename, events);
} else if (lowerFilename.endsWith('.ply') || lowerFilename.endsWith('.splat')) {
const model = await scene.assetLoader.loadModel({ url, filename });
const model = await scene.assetLoader.loadModel({ url, filename, animationFrame });
scene.add(model);
scene.camera.focus();
if (focusCamera) scene.camera.focus();
return model;
} else {
throw new Error('Unsupported file type');
Expand All @@ -169,8 +169,8 @@ const initFileHandler = (scene: Scene, events: Events, dropTarget: HTMLElement,
}
};

events.function('load', (url: string, filename?: string) => {
return handleLoad(url, filename);
events.function('load', (url: string, filename?: string, focusCamera = true, animationFrame = false) => {
return handleLoad(url, filename, focusCamera, animationFrame);
});

// create a file selector element as fallback when showOpenFilePicker isn't available
Expand All @@ -195,17 +195,56 @@ const initFileHandler = (scene: Scene, events: Events, dropTarget: HTMLElement,
}

// create the file drag & drop handler
CreateDropHandler(dropTarget, async (entries) => {
CreateDropHandler(dropTarget, async (entries, shift) => {
// filter out non gaussian scene files
entries = entries.filter((entry) => {
const name = entry.file?.name;
if (!name) return false;
const lowerName = name.toLowerCase();
return lowerName.endsWith('.ply') || lowerName.endsWith('.splat');
});

if (entries.length === 0) {
events.invoke('showPopup', {
type: 'error',
header: localize('popup.error-loading'),
message: localize('popup.drop-files')
});
} else {
for (let i = 0; i < entries.length; i++) {
const entry = entries[i];
await handleLoad(entry.url, entry.filename);
// determine if all files share a common filename prefix followed by
// a frame number, e.g. "frame0001.ply", "frame0002.ply", etc.
const isAnimation = () => {
if (entries.length <= 1) {
return false;
}

// eslint-disable-next-line regexp/no-super-linear-backtracking
const regex = /(.*?)(\d+).ply$/;
const baseMatch = entries[0].file.name?.match(regex);
if (!baseMatch) {
return false;
}

for (let i = 1; i < entries.length; i++) {
const thisMatch = entries[i].file.name?.match(regex);
if (!thisMatch || thisMatch[1] !== baseMatch[1]) {
return false;
}
}

return true;
};

if (isAnimation()) {
events.fire('animation.setFrames', entries.map(e => e.file));
events.fire('animation.setFrame', 0);
} else {
for (let i = 0; i < entries.length; i++) {
const entry = entries[i];
const url = URL.createObjectURL(entry.file);
await handleLoad(url, entry.filename);
URL.revokeObjectURL(url);
}
}
}
});
Expand Down Expand Up @@ -239,7 +278,7 @@ const initFileHandler = (scene: Scene, events: Events, dropTarget: HTMLElement,
return true;
});

events.on('scene.open', async () => {
events.function('scene.open', async () => {
if (fileSelector) {
fileSelector.click();
} else {
Expand Down Expand Up @@ -268,6 +307,34 @@ const initFileHandler = (scene: Scene, events: Events, dropTarget: HTMLElement,
}
});

// open a folder
events.function('scene.openAnimation', async () => {
try {
const handle = await window.showDirectoryPicker({
id: 'SuperSplatFileOpenAnimation',
mode: 'readwrite'
});

if (handle) {
const files = [];
for await (const value of handle.values()) {
if (value.kind === 'file') {
const file = await value.getFile();
if (file.name.toLowerCase().endsWith('.ply')) {
files.push(file);
}
}
}
events.fire('animation.setFrames', files);
events.fire('animation.setFrame', 0);
}
} catch (error) {
if (error.name !== 'AbortError') {
console.error(error);
}
}
});

events.on('scene.save', async () => {
if (fileHandle) {
try {
Expand Down
4 changes: 3 additions & 1 deletion src/main.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Color, createGraphicsDevice } from 'playcanvas';

import { registerAnimationEvents } from './animation';
import { EditHistory } from './edit-history';
import { registerEditorEvents } from './editor';
import { Events } from './events';
Expand Down Expand Up @@ -242,8 +243,9 @@ const main = async () => {
registerEditorEvents(events, editHistory, scene);
registerSelectionEvents(events, scene);
registerTransformHandlerEvents(events);
registerAnimationEvents(events);
initShortcuts(events);
await initFileHandler(scene, events, editorUI.appContainer.dom, remoteStorageDetails);
initFileHandler(scene, events, editorUI.appContainer.dom, remoteStorageDetails);

// load async models
scene.start();
Expand Down
3 changes: 3 additions & 0 deletions src/ui/editor.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { RightToolbar } from './right-toolbar';
import { ScenePanel } from './scene-panel';
import { ShortcutsPopup } from './shortcuts-popup';
import { Spinner } from './spinner';
import { TimelinePanel } from './timeline-panel';
import { Tooltips } from './tooltips';
import { ViewCube } from './view-cube';
import { ViewPanel } from './view-panel';
Expand Down Expand Up @@ -116,9 +117,11 @@ class EditorUI {
id: 'main-container'
});

const timelinePanel = new TimelinePanel(events, tooltips);
const dataPanel = new DataPanel(events);

mainContainer.append(canvasContainer);
mainContainer.append(timelinePanel);
mainContainer.append(dataPanel);

editorContainer.append(mainContainer);
Expand Down
6 changes: 4 additions & 2 deletions src/ui/menu.ts
Original file line number Diff line number Diff line change
Expand Up @@ -136,13 +136,15 @@ class Menu extends Container {
icon: createSvg(sceneOpen),
onSelect: async () => {
if (await events.invoke('scene.new')) {
events.fire('scene.open');
await events.invoke('scene.open');
}
}
}, {
text: localize('scene.import'),
icon: createSvg(sceneImport),
onSelect: () => events.fire('scene.open')
onSelect: async () => {
await events.invoke('scene.open');
}
}, {
// separator
}, {
Expand Down
4 changes: 2 additions & 2 deletions src/ui/scene-panel.ts
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,8 @@ class ScenePanel extends Container {
sceneHeader.append(sceneImport);
sceneHeader.append(sceneNew);

sceneImport.on('click', () => {
events.fire('scene.open');
sceneImport.on('click', async () => {
await events.invoke('scene.open');
});

sceneNew.on('click', () => {
Expand Down
Loading
Loading