diff --git a/Week-1/Task-1/TaskNotes.md b/Week-1/Task-1/TaskNotes.md index e8be752..eb1f3c2 100644 --- a/Week-1/Task-1/TaskNotes.md +++ b/Week-1/Task-1/TaskNotes.md @@ -1,60 +1,66 @@ -# Task: [Feature Name] +# Task: Parent-Child Hierarchy ## Objective -What is the feature trying to do? +The objective was to create a simple 3D scene with two objects in a parent-child hierarchy, then verify that transformations applied to the parent (such as position and scale) are correctly inherited by the child. ## Vanilla three.js --Possible: Yes / Partial / No --Notes: --Key concepts: --Complexity: Easy / Medium / Hard +- Possible: Yes +- Notes: Implemented by creating sunMesh and attaching an earthOrbit group to it (`sunMesh.add(earthOrbit)`), then adding earthMesh to that group. Parent transforms propagate correctly to child. +- Key concepts: Scene graph hierarchy, `THREE.Group` as orbit pivot, local vs world transforms, animation loop for orbit/spin. +- Complexity: Easy ## R3F --Possible: Yes / Partial / No --Notes: --What R3F abstracted: --Complexity: Easy / Medium / Hard +- Possible: Yes +- Notes: Implemented by nesting Earth inside a `` inside the Sun ``, making Earth a child in the same scene graph hierarchy. +- What R3F abstracted: Declarative JSX scene creation, automatic render lifecycle integration with React, and frame updates via `useFrame` instead of manual renderer/loop setup. +- Complexity: Easy ## Thob Page Builder --Possible: Yes / Partial / No --Notes: --Builder steps: --Complexity: Easy / Medium / Hard +- Possible: Yes +- Notes: Implemented by putting the Earth mesh inside the Sun mesh (parent-child). Changing Sun position/scale also affects Earth as expected (Earth follows position and scale inheritance). However, when Earth position is changed directly, Earth shape appears to distort/stretch as it moves farther from Sun. +- Builder steps: Create Sun mesh -> add Earth mesh as child of Sun -> test parent transform inheritance by changing Sun position/scale -> test child local transform by changing Earth position. +- Complexity: Easy ## Comparison Summary --Possible in all 3? Yes / Partial / No --Main differences: --Where Thob is better: --Where Thob is weaker: --What feels awkward or unclear: +- Possible in all 3? Yes +- Main differences: + - Vanilla gives explicit low-level control; + - R3F gives cleaner declarative hierarchy; + - Thob gives fastest visual setup but less predictable child transform behavior in this case. + - Animation was not possible in Thob but was possible in vanilla and r3f. +- Where Thob is better: Quick setup and visual parenting without writing code. +- Where Thob is weaker: Child transform behavior is less transparent when editing child position under a transformed parent. +- What feels awkward or unclear: Local vs inherited transforms are not obvious in the editor, and distortion behavior on child position change is unexpected. ## Limitation Type (if any) --[ ] Editor UX limitation --[ ] Runtime limitation --[ ] Schema / data model limitation --[ ] Component limitation --[ ] Event system limitation --[ ] Asset pipeline limitation --[ ] Unknown / needs investigation +- [x] Editor UX limitation +- [x] Runtime limitation +- [ ] Schema / data model limitation +- [x] Component limitation +- [ ] Event system limitation +- [ ] Asset pipeline limitation +- [ ] Unknown / needs investigation ## Workaround --Is there a workaround? --If yes, what is it? +- Is there a workaround? + - NO +- No, I tried a lot of different things, like many groupa and flex inside the parent mesh and different ways to place the components. ## Suggested Improvement --What should improve in Thob? --Is it: - -editor - -runtime - -component - -UX - -schema/data +- What should improve in Thob? + - Make transform inheritance behavior explicit and stable for nested meshes, especially when parent scale is applied and child position is edited. +- It is: + - editor + - component + - runtime + - UX ## Difficulty Estimate --Easy / Medium / Hard +Easy ## Business Value --Low / Medium / High +High ## Recommendation -Should Thob support this better? Why? \ No newline at end of file +Should Thob support this better? Why? +- Yes. Parent-child transform consistency is a core 3D workflow; reliable nested transforms reduce confusion, improve trust in the builder, and make more advanced scenes practical without code-level debugging. \ No newline at end of file diff --git a/Week-1/Task-1/builder/BuilderNotes.md b/Week-1/Task-1/builder/BuilderNotes.md new file mode 100644 index 0000000..8aebef3 --- /dev/null +++ b/Week-1/Task-1/builder/BuilderNotes.md @@ -0,0 +1,87 @@ +# Builder Notes (Thob) — Task 1: Parent-Child Hierarchy + +## Thob Observations from Task Notes + +- **Possible:** Yes +- **Implementation used:** Earth mesh was placed inside Sun mesh to create a parent-child relationship. +- **What worked as expected:** + - Changing Sun position moved Earth with it. + - Changing Sun scale also scaled Earth (inherited transform behavior). +- **Unexpected behavior observed:** + - Changing Earth position directly caused visual distortion/stretch-like behavior as Earth moved farther from Sun. +- **Builder flow used:** + 1. Create Sun mesh. + 2. Add Earth mesh as child of Sun. + 3. Change Sun position/scale to verify inheritance. + 4. Change Earth local position to test child transform. +- **Complexity:** Easy +- **Main limitation signals:** Editor UX + Component + Runtime concerns. +- **Workaround status:** No reliable workaround found after trying multiple groups/flex layouts and different placement approaches. + +## Console Warnings/Errors Seen (Deduplicated) and Probable Meaning + +### warn: `Permissions-Policy header unrecognized feature ('browsing-topics')` +- **Type:** Browser/header compatibility warning. +- **Probable meaning:** A server response includes a `Permissions-Policy` directive with `browsing-topics`, but the browser/runtime does not recognize it. +- **Impact:** Usually low for editor functionality; mostly noise unless policy enforcement is required. + +### warn: `Component changing from uncontrolled to controlled` +- **Type:** React state-management warning. +- **Probable meaning:** UI components are initialized without a stable value and later receive a controlled value (or vice versa). +- **Impact:** Can cause flaky UI behavior (selection glitches, inconsistent panel state), especially in property editors. + +### warn: `GetBindingData... method already registered` +- **Type:** Internal registration/duplicate listener warning. +- **Probable meaning:** Binding handlers are being registered repeatedly (possibly on rerender/remount) without proper cleanup/de-duplication. +- **Impact:** High log noise, possible duplicated updates, degraded performance over time. + +### warn: `resetPOI/update-static-component-prop method already registered` +- **Type:** Duplicate method registration warning. +- **Probable meaning:** Same command/event pipeline is attached multiple times. +- **Impact:** Multiple executions of one action, state drift, and performance overhead. + +### error: `THREE.GLTFLoader invalid plugin (missing name)` +- **Type:** Asset loader/plugin configuration error. +- **Probable meaning:** A GLTF loader plugin object is passed without required `name` metadata or wrong plugin shape. +- **Impact:** Model import pipeline may partially fail or skip plugin behavior. + +### warn: `THREE.MaterialLoader undefined texture (null)` +- **Type:** Asset/material reference warning. +- **Probable meaning:** Material expects a texture slot but received `null`/missing reference. +- **Impact:** Material may render incorrectly; not always fatal. + +### error: `Cannot read properties of null (reading 'contentWindow')` +- **Type:** Runtime exception. +- **Probable meaning:** Code tries to post a message to an iframe/window that is not mounted or already destroyed. +- **Impact:** Can break sync/preview communication and interrupt some editor actions. + +### error: `THREE.WebGLRenderer context lost` +- **Type:** Graphics runtime warning/error. +- **Probable meaning:** WebGL context got dropped (GPU reset, heavy resource pressure, canvas recreation, or browser throttling). +- **Impact:** Preview can freeze/black out until context is restored. + +### error: `Failed to load resource (404)` +- **Type:** Network/resource error. +- **Probable meaning:** A referenced asset/component/resource ID does not exist or URL/path is stale. +- **Impact:** Missing assets/components in scene and follow-up loader warnings. + +### warn: `Icon component has been deprecated` +- **Type:** Deprecation warning. +- **Probable meaning:** Code path still uses an older icon API. +- **Impact:** Non-blocking now, but future break risk if API is removed. + +### warn: `ReconnectingWebSocket reconnecting/syncing events` +- **Type:** Collaboration/sync transport logs. +- **Probable meaning:** WebSocket connection dropped and resumed normal sync handshake. +- **Impact:** Usually informational; frequent reconnects may indicate unstable connection/session. + +### error: `R3F: Div is not part of the THREE namespace` +- **Type:** Critical scene composition/runtime error. +- **Probable meaning:** A DOM element (`Div`) is being rendered inside R3F 3D canvas tree where only Three.js objects (or properly extended objects) are valid. +- **Impact:** Can break render subtree and cause scene/editor preview failures. + +## Overall Read + +- The hierarchy feature itself works for basic parent transform inheritance. +- The major risk signals are repeated duplicate registrations, controlled/uncontrolled UI transitions, and mixed runtime/render errors. +- The distortion observed during child position edits aligns with the broader instability indicated by runtime/component warnings.