Main Problem
The main challenge is that the main menu is currently part of the 3D scene, which introduces multiple issues:
[*]Clipping: UI elements can intersect with 3D objects in the scene.
[*]Camera Parenting: Switching cameras requires complex setups with constraints.
[*]Lighting: UI inherits inconsistent lighting from the main scene.
[*]Scene Clutter: UI elements make the main scene harder to manage.
[*]Background Separation: The UI lacks visual separation from the background, reducing clarity.
Issue-Specific Solutions
Clipping
[*]Disable Depth Test: In material settings, disable depth testing so UI elements always render on top.
[*]Render Order: In object settings, set render order to a higher value so the UI renders after all other objects.
[*]Alternative Approach: Keep UI objects very small and close to the camera compared to the rest of the scene.
Camera Parenting
[*]Use a second camera with rotation and position synchronized to the active camera—no constraints required.
Lighting
[*]Assign a separate IBL (Image-Based Lighting) for menu objects.
[*]Use layers so UI objects are lit only by specific lights (requires render passes).
Scene Clutter
[*]Load UI as a separate GLTF file. This preserves full control while keeping the main Blender file cleaner.
Background Separation
[*]A layer setup is required to blur or darken the background behind the UI.
[*]As a simpler alternative, use a low-opacity plane behind the UI for visual separation (no true blur).
Comparing Layering Solutions
1. Two Separate Apps
Pros
[*]Full independent control over visuals
[*]No clipping issues
[*]No camera parenting complexity
[*]Two puzzle editors for cleaner logic separation
[*]Cleaner separation in the Blender file
[*]Ability to apply HTML-based blur between apps
[*]Clear structural organization
Cons
[*]Two separate app instances increase performance cost
[*]Requires communication between apps
[*]Cannot access the app underneath when the overlay is showing (possible workaround via DOM tunneling)
[*]Two puzzle editors increase complexity
2. One App, Two Render Passes, Two Layers
Pros
[*]Unified puzzle editor keeps logic simple
[*]No clipping issues
[*]No camera parenting complexity
[*]Supports two cameras without moving the IBL
[*]Allows world pass blur for background separation
[*]Template-based setup reduces initial work
[*]Both layers are accessible for raycasting, enabling HUD-style UI elements
Cons
[*]Additional render passes come with a performance cost, though likely smaller than running two apps
3. One App, One Render Pass, Two Layers
This approach did not produce the desired results.
Cons
[*]The stock engine does not allow separating lights in this way
.
