Compare commits

..

No commits in common. "91d55fdc902bd0ca8eef7d3b00393c30871b806d" and "9b6dc498a68397e40d85a88cf4bae514fe0d0ba6" have entirely different histories.

2 changed files with 39 additions and 165 deletions

View File

@ -1,74 +1,60 @@
# Task 2 Report: [Texture / Visual Surface Change] # Task: [Feature Name]
## Objective ## Objective
Apply a texture or change the surface appearance of an object interactively. What is the feature trying to do?
## Vanilla Three.js ## Vanilla three.js
- Possible: **Yes** -Possible: Yes / Partial / No
- Notes: Requires using `TextureLoader` to load assets and manually assigning the texture to the material's `map` property. -Notes:
- Key concepts: `THREE.TextureLoader`, `Asset URL Management`, `Material Map`. -Key concepts:
- Complexity: **Easy but verbose** (Needs explicit code for every asset loader). -Complexity: Easy / Medium / Hard
## R3F ## R3F
- Possible: **Yes** -Possible: Yes / Partial / No
- Notes: Highly efficient. The `useLoader` hook (with `TextureLoader`) handles asset loading declaratively and integrates with React Suspense. -Notes:
- What R3F abstracted: `Loading callbacks`, `Declarative asset loading`, `Suspense integration`. -What R3F abstracted:
- Complexity: **Easy** (Very concise, 1-2 lines of code). -Complexity: Easy / Medium / Hard
## Thob Page Builder ## Thob Page Builder
- Possible: **Yes** -Possible: Yes / Partial / No
- Notes: **Significantly faster** than code-based approaches for simple asset application. You simply select a file or link a URL in the UI, and the mesh updates instantly. -Notes:
- Builder steps: `Canvas > Mesh > Material > Map > Browse/URL`. -Builder steps:
- Complexity: **Minimal** (Completely No-Code). -Complexity: Easy / Medium / Hard
## Comparison Summary ## Comparison Summary
- Possible in all 3? **Yes**. -Possible in all 3? Yes / Partial / No
- Key abstraction difference:
- Vanilla = imperative asset handling
- R3F = declarative asset loading
- Thob = UI-driven asset configuration
-Main differences: -Main differences:
- **Vanilla**: Gives full control, but requires several lines of code for a single texture. -Where Thob is better:
- **R3F**: The fastest way to write complex texture logic with simple code.
- **Thob**: The fastest overall for visual users. No code required for initial mapping.
- Where Thob is better: **Applying a visual asset that you already have.**
-Where Thob is weaker: -Where Thob is weaker:
- **Asset error handling**. When a texture fails (like CORS/404 errors), its harder to debug than in code.
- **Limited flexibility for complex material setups**. Applying different textures to different faces of a single object is not straightforward compared to code-based approaches.
-What feels awkward or unclear: -What feels awkward or unclear:
- The CORS issues for external assets make it difficult to link textures that aren't already in the Thob library.
## Limitation Type (if any) ## Limitation Type (if any)
-[ ] Editor UX limitation -[ ] Editor UX limitation
- [x] Runtime limitation (CORS/URL fetching) -[ ] Runtime limitation
-[ ] Schema / data model limitation -[ ] Schema / data model limitation
-[ ] Component limitation -[ ] Component limitation
-[ ] Event system limitation -[ ] Event system limitation
- [ ] Property binding limitation -[ ] Asset pipeline limitation
- [x] Asset pipeline limitation
-[ ] Unknown / needs investigation -[ ] Unknown / needs investigation
## Workaround ## Workaround
- Is there a workaround? **Yes**. Ensure all assets are uploaded directly to the Thob project rather than linking from external URLs to avoid CORS blocks. -Is there a workaround?
-If yes, what is it?
## Suggested Improvement ## Suggested Improvement
- What should improve in Thob? **Improve the asset importer** to handle external URL fetching with a proxy to avoid CORS blocks. Provide more descriptive "Map Loading" feedback in the UI. -What should improve in Thob?
-Is it: -Is it:
- editor (Yes) -editor
- runtime (Yes) -runtime
- component (No) -component
- UX (Yes) -UX
- schema/data (Yes) -schema/data
## Difficulty Estimate ## Difficulty Estimate
- **Easy** -Easy / Medium / Hard
## Business Value ## Business Value
- **High** (Asset application is a core part of 3D design workflows). -Low / Medium / High
## Recommendation ## Recommendation
Thob is already **strong** in texture application. The speed advantage over R3F and Vanilla is clear for visual workflows. To make it production-ready, it should improve external asset handling and support more flexible material configurations. Should Thob support this better? Why?

View File

@ -1,112 +0,0 @@
# Builder Exploration Notes — Task 2: Texture Mapping
## Thob Capabilities Observed
- **Rapid Asset Application**: Applying a texture is significantly faster compared to code. Selecting or uploading an image and assigning it to the `map` property updates instantly.
- **Texture Property Controls**: Advanced controls like `WrapS`, `WrapT`, `Repeat`, and `Offset` are directly available in the UI.
- **Real-Time Feedback**: Texture alignment and UV mapping can be visually adjusted without reloading or writing code.
---
## What Worked Well
- Successfully applied texture using the material `map` property
- Texture correctly mapped onto cube geometry
- UI provides instant visual feedback
- No code required for texture assignment
Conclusion:
Texture mapping is **fast and efficient once the workflow is understood**
---
## Builder Flow Used
1. Upload texture in Project Library
2. Create/select material
3. Assign texture using `map` property
4. Apply material to mesh
---
## Ease of Use
- Initial discovery of texture workflow is **not obvious**
- Once understood, workflow becomes **very fast**
- Faster than Vanilla and R3F for simple asset application
---
## Limitations & Technical Observations
- Texture workflow is **not clearly guided**
- Requires understanding of `map` concept
- No explicit "Add Texture" button
- External textures may fail due to CORS restrictions
- Applying a single texture is fast and efficient in the builder
- However, applying different textures to different faces of the same object is not straightforward
- This indicates a limitation in material flexibility compared to code-based approaches
---
## Console Warnings & Errors (Simplified)
### 1. Hydration Warning
- Builder reports missing hydration fallback
- Indicates mismatch between initial render and client render
- Does not affect core functionality
---
### 2. Controlled vs Uncontrolled Warning
- Component state is changing unexpectedly
- May cause UI elements (like sliders or inputs) to behave inconsistently
- Internal state management issue
---
### 3. 404 Resource Error
- Some assets failed to load (resource not found)
- Likely due to incorrect or missing asset reference
- Does not block main functionality but may affect visuals
---
### 4. CORS Error (Important)
- External texture/image blocked due to missing permissions
- Happens when loading assets from external sources
- Prevents texture from being applied
---
### 5. WebGL Context Lost
- Rendering context was lost temporarily
- Can happen due to GPU load or browser issues
- May cause preview to freeze or reload
---
### 6. Duplicate Method Registration Warning
- Same function is being registered multiple times
- May trigger actions more than once
- Can lead to performance issues or unexpected behavior
---
## Key Insight
Thob builder provides a very fast and intuitive workflow for applying textures once the process is understood. However, the lack of clear guidance and limitations with external assets (CORS) can make the initial experience confusing for new users.
---
## Product Perspective
For use cases like product visualization (e.g., applying fabric, wood, or patterns), the builder is highly effective due to its speed and real-time feedback. Improving discoverability and asset handling would make it more robust for production use.