From 283a7fe651abb6c880f2c1337b518f61e873452d Mon Sep 17 00:00:00 2001 From: wil Date: Sat, 23 Mar 2024 16:49:10 -0400 Subject: [PATCH 1/2] prelimiarily, we have the headless ui tabs --- app/modules/Tabs/Tabs.tsx | 56 +++++++++++++++++++ app/modules/Tabs/index.tsx | 1 + app/pages/PageEnigma/PageEnigma.tsx | 29 ++++++---- .../PageEnigma/comps/Timeline/Timeline.tsx | 23 +++++++- 4 files changed, 96 insertions(+), 13 deletions(-) create mode 100644 app/modules/Tabs/Tabs.tsx create mode 100644 app/modules/Tabs/index.tsx diff --git a/app/modules/Tabs/Tabs.tsx b/app/modules/Tabs/Tabs.tsx new file mode 100644 index 0000000000..3385d23acb --- /dev/null +++ b/app/modules/Tabs/Tabs.tsx @@ -0,0 +1,56 @@ +import React, { useState } from 'react' +import { Tab } from '@headlessui/react' + +function classNames(...classes:string[]) { + return classes.filter(Boolean).join(' ') +} +export type Tab = { + header: string; + children: JSX.Element; +} + +export const Tabs = ({ + tabs: tabProps +}:{ + tabs:Tab[] +}) =>{ + const [tabs, setTabs] = useState(tabProps); + + return ( +
+ + + {tabs.map((tab, idx) => ( + + classNames( + 'w-full rounded-lg py-2.5 text-sm font-medium leading-5', + 'ring-white/60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2', + selected + ? 'bg-white text-blue-700 shadow' + : 'text-blue-100 hover:bg-white/[0.12] hover:text-white' + ) + } + > + {tab.header} + + ))} + + + {tabs.map((tab, idx) => ( + + {tab.children} + + ))} + + +
+ ) +} \ No newline at end of file diff --git a/app/modules/Tabs/index.tsx b/app/modules/Tabs/index.tsx new file mode 100644 index 0000000000..1ff22eb8eb --- /dev/null +++ b/app/modules/Tabs/index.tsx @@ -0,0 +1 @@ +export { Tabs } from './Tabs'; \ No newline at end of file diff --git a/app/pages/PageEnigma/PageEnigma.tsx b/app/pages/PageEnigma/PageEnigma.tsx index 7836d9930a..e536ff8f89 100644 --- a/app/pages/PageEnigma/PageEnigma.tsx +++ b/app/pages/PageEnigma/PageEnigma.tsx @@ -17,6 +17,7 @@ import { import { ButtonDialogue } from '~/modules/ButtonDialogue'; import { TopBarHelmet } from '~/modules/TopBarHelmet/TopBarHelmet'; import { SidePanel } from '~/modules/SidePanel'; +import { Tabs } from '~/modules/Tabs'; import { Controls3D } from './comps/Controls3D'; import { ControlsVideo } from './comps/ControlsVideo'; import { Timeline } from './comps/Timeline'; @@ -54,15 +55,7 @@ export const PageEnigma = () => { const handleButtonSave = ()=>{ editorRef.current?.save(); } - const handleButtonLoad = ()=>{ - document.getElementById("load-upload")?.click(); - } - const handleButtonRender = ()=>{ - editorRef.current?.togglePlayback(); - } - const handleButtonPlay = ()=>{ - } return(
@@ -105,11 +98,23 @@ export const PageEnigma = () => {
- - - + Animation Tab

+ },{ + header: 'Camera', + children:

Camera Tab

+ },{ + header: 'Audio', + children:

Audio Tab

+ },{ + header: 'Styling', + children:

Styling Tab

+ } + ]}/> - + ); } \ No newline at end of file diff --git a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx index fe278ba39e..e0c1f6a20c 100644 --- a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx +++ b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx @@ -1,10 +1,31 @@ import { LowerPanel } from "~/modules/LowerPanel"; +import { + Button, +} from '~/components'; +import Editor from '../../js/editor'; + +export const Timeline = ({ + editorCurrent +}:{ + editorCurrent: Editor|null; +})=>{ + const handleButtonLoad = ()=>{ + document.getElementById("load-upload")?.click(); + } + const handleButtonRender = ()=>{ + editorCurrent?.togglePlayback(); + } + const handleButtonPlay = ()=>{ + + } -export const Timeline = ()=>{ return(
+ + + ) } \ No newline at end of file From dbaa6e561bb8ea17bcaa76a215f41d9fb0817655 Mon Sep 17 00:00:00 2001 From: Quicksticks-oss Date: Sat, 23 Mar 2024 16:54:15 -0400 Subject: [PATCH 2/2] basics of transform engine. --- .../clips/transform_track_clip.ts | 117 ++++++++++++------ app/pages/PageEnigma/js/editor.js | 3 +- app/pages/PageEnigma/js/transform_engine.ts | 38 ++++++ package-lock.json | 14 ++- package.json | 1 + 5 files changed, 130 insertions(+), 43 deletions(-) create mode 100644 app/pages/PageEnigma/js/transform_engine.ts diff --git a/app/pages/PageEnigma/datastructures/clips/transform_track_clip.ts b/app/pages/PageEnigma/datastructures/clips/transform_track_clip.ts index 183e0e6494..b6af6a3f97 100644 --- a/app/pages/PageEnigma/datastructures/clips/transform_track_clip.ts +++ b/app/pages/PageEnigma/datastructures/clips/transform_track_clip.ts @@ -1,49 +1,90 @@ import * as THREE from 'three'; +import TWEEN from '@tweenjs/tween.js'; export interface TransformTrackClip { version: number; - media_id: number; + media_id: string; type: "transform"; - position: THREE.Vector3[]; - rotation: THREE.Vector3[]; - scale: THREE.Vector3[]; + positions: THREE.Vector3[]; + rotations: THREE.Vector3[]; + scales: THREE.Vector3[]; + length: number; } -export class TransformTrackClipClass implements TransformTrackClip { - version: number; - media_id: number; - type: "transform"; - position: THREE.Vector3[]; - rotation: THREE.Vector3[]; - scale: THREE.Vector3[]; - - constructor(version: number, media_id: number, position: THREE.Vector3[], rotation: THREE.Vector3[], scale: THREE.Vector3[]) { - this.version = version; - this.media_id = media_id; - this.type = "transform"; - this.position = position; - this.rotation = rotation; - this.scale = scale; - } +export class TransformTrackClip implements TransformTrackClip { + version: number; + media_id: string; + type: "transform"; + positions: THREE.Vector3[]; + rotations: THREE.Vector3[]; + scales: THREE.Vector3[]; + length: number; - add_position(position: THREE.Vector3) { - this.position.push(position); - } + current_pos: THREE.Vector3; - remove_position(position: THREE.Vector3) { - this.position = this.position.filter(position => { - return !position.equals(position); - }); - } - - toJSON(): string { - return JSON.stringify({ - version: this.version, - media_id: this.media_id, - type: this.type, - position: this.position, - rotation: this.rotation, - scale: this.scale, - }); + playing: boolean; + + constructor(version: number, media_id: string, length: number) { + this.version = version; + this.media_id = media_id; + this.type = "transform"; + + this.length = length; + + this.positions = []; + this.rotations = []; + this.scales = []; + + this.playing = false; + + this.current_pos = new THREE.Vector3(0, 0, 0); + } + + update(object: THREE.Object3D) { + if (this.playing) { + this.tweenPositions(); + object.position.set(this.current_pos.x, this.current_pos.y, this.current_pos.z); } } + + reset(object: THREE.Object3D) { + if (this.positions.length > 0) { + let first_pos = this.positions[0]; + object.position.set(first_pos.x, first_pos.y, first_pos.z); + } + } + + add_position(position: THREE.Vector3) { + this.positions.push(position); + } + + remove_position(position: THREE.Vector3) { + this.positions = this.positions.filter(positions => { + return !position.equals(position); + }); + } + + tweenPositions() { + const tweenDuration = this.length / this.positions.length; + + this.positions.reduce((prevPosition, currentPosition, index) => { + const tween = new TWEEN.Tween(prevPosition) + .to({ x: currentPosition.x, y: currentPosition.y, z: currentPosition.z }, tweenDuration) + .onUpdate(() => { + this.current_pos = new THREE.Vector3(prevPosition.x, prevPosition.y, prevPosition.z); + }); + return currentPosition; + }, this.current_pos.clone()); + } + + toJSON(): string { + return JSON.stringify({ + version: this.version, + media_id: this.media_id, + type: this.type, + position: this.positions, + rotation: this.rotations, + scale: this.scales, + }); + } +} diff --git a/app/pages/PageEnigma/js/editor.js b/app/pages/PageEnigma/js/editor.js index aec46ad9bf..15cd6b51ca 100644 --- a/app/pages/PageEnigma/js/editor.js +++ b/app/pages/PageEnigma/js/editor.js @@ -124,7 +124,8 @@ class Editor { this.onWindowResize(); // Creates the main update loop. this.renderer.setAnimationLoop(this.update_loop.bind(this)); - this.audio_engine.loadClip("m_f7jnwt3d1ddchatdk5vaqt0n4mb1hg"); + + } // Configure post processing. diff --git a/app/pages/PageEnigma/js/transform_engine.ts b/app/pages/PageEnigma/js/transform_engine.ts new file mode 100644 index 0000000000..fdcde84830 --- /dev/null +++ b/app/pages/PageEnigma/js/transform_engine.ts @@ -0,0 +1,38 @@ +import { TransformTrackClip } from "../datastructures/clips/transform_track_clip"; + + +class TransformEngine { + clips: { [key: string]: TransformTrackClip } = {}; + version: number; + length: number; + + constructor(version: number, length: number) { + this.version = version; + this.length = length; + this.clips = {}; + } + + loadObject(object_uuid: string) { + this.clips[object_uuid] = new TransformTrackClip(this.version, object_uuid, length); + } + + playClip(object_uuid: string) { + const clip = this.clips[object_uuid]; + if (clip) { + clip + } else { + console.warn(`TransformEngine: TransformClip with id "${object_uuid}" not found.`); + } + } + + stopClip(object_uuid: string) { + const clip = this.clips[object_uuid]; + if (clip) { + // Disable stepping and reset. + } else { + console.warn(`TransformEngine: TransformClip with id "${object_uuid}" not found.`); + } + } +} + +export default TransformEngine; diff --git a/package-lock.json b/package-lock.json index 08b673ca0a..3b9da8ebb3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "@remix-run/react": "^2.8.1", "@remix-run/router": "^1.15.3", "@remix-run/serve": "^2.8.1", + "@tweenjs/tween.js": "^18.6.4", "ccapture.js": "github:aceslowman/ccapture.js#npm-fix", "isbot": "^4.1.0", "react": "^18.2.0", @@ -2254,10 +2255,9 @@ } }, "node_modules/@tweenjs/tween.js": { - "version": "23.1.1", - "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.1.tgz", - "integrity": "sha512-ZpboH7pCPPeyBWKf8c7TJswtCEQObFo3bOBYalm99NzZarATALYCo5OhbCa/n4RQyJyHfhkdx+hNrdL5ByFYDw==", - "dev": true + "version": "18.6.4", + "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-18.6.4.tgz", + "integrity": "sha512-lB9lMjuqjtuJrx7/kOkqQBtllspPIN+96OvTCeJ2j5FEzinoAXTdAMFnDAQT1KVPRlnYfBrqxtqP66vDM40xxQ==" }, "node_modules/@types/acorn": { "version": "4.0.6", @@ -2417,6 +2417,12 @@ "meshoptimizer": "~0.18.1" } }, + "node_modules/@types/three/node_modules/@tweenjs/tween.js": { + "version": "23.1.1", + "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.1.tgz", + "integrity": "sha512-ZpboH7pCPPeyBWKf8c7TJswtCEQObFo3bOBYalm99NzZarATALYCo5OhbCa/n4RQyJyHfhkdx+hNrdL5ByFYDw==", + "dev": true + }, "node_modules/@types/unist": { "version": "2.0.10", "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.10.tgz", diff --git a/package.json b/package.json index 648b3fd799..471a92f1b6 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "@remix-run/react": "^2.8.1", "@remix-run/router": "^1.15.3", "@remix-run/serve": "^2.8.1", + "@tweenjs/tween.js": "^18.6.4", "ccapture.js": "github:aceslowman/ccapture.js#npm-fix", "isbot": "^4.1.0", "react": "^18.2.0",