From 90bc805626881ccefe9c0039ec885b07b265d573 Mon Sep 17 00:00:00 2001 From: divyap Date: Mon, 13 Apr 2026 12:28:29 +0530 Subject: [PATCH] docs: formalize thob builder observations for week 2 task 1 --- Week-2/Task-1/thob/notes.md | 44 +++++++++++++++++++++---------------- 1 file changed, 25 insertions(+), 19 deletions(-) diff --git a/Week-2/Task-1/thob/notes.md b/Week-2/Task-1/thob/notes.md index f29027c..28a71e6 100644 --- a/Week-2/Task-1/thob/notes.md +++ b/Week-2/Task-1/thob/notes.md @@ -1,22 +1,28 @@ -# Thob Builder Notes: Task 1 - Material Variant Switcher +# Thob Observations: Task 1 - Material Variant Switcher -## Overview -Implemented the basic material configuration pattern using Thob's built-in `MaterialVariant` and `Material` properties. +### Thob Observations from Task Notes +* **Possible**: yes, Implementing material color/property switching using two distinct UI patterns: discrete **Buttons** and a **RadioGroup** component. +* **Implementation used**: + * *Method A (Button)*: Discrete button nodes with individual click triggers linked to material states. + * *Method B (RadioButton)*: A `RadioGroup` utilizing a `For` loop to dynamically generate selectable items (Red, Blue, Yellow). +* **What worked as expected**: Both methods successfully switched material properties. The `RadioGroup` provided a much cleaner and more professional interactive experience for the user. +* **Main limitation observed**: The **Button method** is more complex and tedious from a user perspective as it requires manual layout/logic for every new option. The **RadioButton method** is more intuitive but triggers more background console warnings. +* **Builder flow used**: + * *Button*: UI Flex -> Button -> Trigger logic. + * *Radio*: UI Flex -> RadioGroup -> For Loop -> RadioGroupItem. +* **Complexity**: Low-Medium. The RadioGroup method requires slightly more "logical" setup (using the For loop) but is ultimately the more scalable option. +* **Main limitation signals**: Massive duplication of `GetBindingData` logs in the console and an occasional `WebGL Context Lost` during rapid state changes. +* **Workaround status**: Fully native; no external code scripts were required for either implementation. -## Visual Observations -- **Lighting Limitation**: I observed that by default, the light only hits the object from one side, leaving the other side completely dark. -- **Surface Definition**: Standard material properties (color, roughness, metalness) were easy to edit via the sidebar properties panel. +### Console Warnings/Errors Seen (Deduplicated) and Probable Meaning +1. **Resource 404**: `GET https://builder.thob.studio/builder/... 404 (Not Found)`. + * *Probable Meaning*: A generic builder error when a resource thumbnail or asset is temporarily unavailable during editing. +2. **Radio Button Loop Conflict**: `GetBindingData... method already registered`. + * *Probable Meaning*: **Specific to the RadioButton/For-Loop method**. Indicates the builder's logic-binding system is re-registering identifiers multiple times as the loop renders UI items. +3. **UI Initialization Lag**: `undefined is changing from uncontrolled to controlled`. + * *Probable Meaning*: Occurs when the RadioGroup component first renders before its state is fully defined by the Material Variant manager. +4. **Interaction Stress Error**: `THREE.WebGLRenderer: Context Lost`. + * *Probable Meaning*: Observed during rapid switching in the **RadioButton method**. The 3D context crashed due to the frequency of property updates or browser resource throttling. -## Technical Observations (Console Logs) -During development in the builder, several warnings and errors were observed: -- **404 Errors**: `GET https://builder.thob.studio/builder/... 404 (Not Found)`. -- **Hydration Warnings**: `No HydrateFallback element provided to render during initial hydration`. -- **Component State**: `undefined is changing from uncontrolled to controlled`. This suggests a potential issue in how the builder manages internal component state when swapping materials. - -## Builder Workflow -- **Node Structure**: The scene was built using a `Canvas` -> `mesh` -> `sphereGeometry` hierarchy. -- **Variant Linking**: A `MaterialVariant` node was used to manage the switching logic. -- **UI Integration**: A simple `Button` was added under the `UI` group to trigger the material change. - -## Conclusion -The builder makes it very easy to define and link material variants without writing code, but the default lighting environment needs more control (e.g., adding more lights or an environment map) to avoid the "dark side" effect. +### Overall Read +The **RadioButton** method is the recommended "best practice" for building configurators in Thob. While the **Button** method is simpler for one-off actions, the RadioGroup + For-Loop pattern provides the professional "Product Option" feel expected in high-end configurators. The console warnings (specifically the binding registration) suggest that the builder's internal logic management is a bit heavy during loops, but the visual performance remains reliable.