# OOMBRA PLAY Render Studio — Integration Playbook ## Goal Add a seamless rendering feature to the working OOMBRA PLAY page without breaking the game. The safest structure is: ```text Stable PLAY page + small parent-layer Render Studio patch + secure render backend = user stays on PLAY and sees the result in-page ``` Do not rewrite the PLAY engine until the render layer is proven stable. --- ## Why the page kept going blank The PLAY page is currently a large custom iframe with most of the game code embedded inside `srcdoc`. Editing deep inside that code is risky because one broken escaped character, one malformed script block, or one bad async function can stop the iframe from rendering. So the new approach is: 1. Freeze the working PLAY code. 2. Add a small parent-page patch underneath it. 3. Let that patch safely find the iframe/canvas. 4. Add `SAVE` and `RENDER` buttons from outside. 5. If something fails, the patch fails quietly and the game still loads. --- ## Recommended build order ### Phase 1 — Safe in-page Render Studio, no AI yet Purpose: confirm the UX. What it does: - Adds `SAVE` and `RENDER` buttons. - Captures the current canvas image. - Opens a full-screen OOMBRA Render Studio overlay. - Shows the captured image in the overlay. - Copies the render prompt. - Does not call AI yet. This tests the experience without risking the PLAY engine. Use file: ```text oombra-play-render-parent-patch-safe.html ``` Paste it **immediately below** the working PLAY code block. --- ### Phase 2 — Connect real AI rendering Purpose: make `RENDER` return an actual AI-generated image inside the same modal. What it does: - The PLAY page sends the screenshot and prompt to a secure endpoint. - The endpoint calls the OpenAI Images API. - The endpoint returns a generated image. - The PLAY page displays that image in the Render Studio overlay. Use file: ```text oombra-render-endpoint-vercel.js ``` Host it on Vercel, Netlify, or Cloudflare Workers. Do not put the OpenAI API key inside Squarespace. Then set this line inside the parent patch: ```js window.OOMBRA_RENDER_ENDPOINT = "https://YOUR-DOMAIN.vercel.app/api/oombra-render"; ``` --- ### Phase 3 — Accurate perspective camera Purpose: replace the current axon screenshot with a true 6-foot pedestrian camera. Best method: - Keep the PLAY builder exactly as-is. - Add a separate hidden Three.js/WebGL renderer. - Convert the block list into real 3D boxes. - Render from a camera at approximately 6 feet above ground. - Send that accurate perspective screenshot to the AI endpoint. This should be built as a separate prototype first. Do not merge it into PLAY until the Render Studio and backend are stable. --- ## Squarespace integration steps 1. Confirm the current recovery PLAY code works. 2. Paste the full contents of `oombra-play-render-parent-patch-safe.html` immediately after the current PLAY code in the same Code Block. 3. Publish / save. 4. Test the page: - PLAY should load normally. - Right tool dock should still work. - `SAVE` should download the current canvas. - `RENDER` should open the OOMBRA Render Studio overlay. 5. Only after that works, deploy the backend endpoint. 6. Add the backend URL to the patch: ```js window.OOMBRA_RENDER_ENDPOINT = "https://YOUR-DOMAIN.vercel.app/api/oombra-render"; ``` 7. Test again: - `RENDER` should show OOMBRA loading. - Then the AI image should replace the captured source image inside the overlay. --- ## Render prompt strategy The prompt should be strict about preserving the geometry. Recommended prompt: ```text Transform this OOMBRA PLAY screenshot into a realistic architectural concept rendering. Preserve the exact massing, proportions, camera angle, composition, block relationships, and overall color hierarchy. Interpret the scene as a simple modern architectural study with matte white panels, dark charcoal base elements, OOMBRA Orange accents, realistic glass, subtle shadows, soft daylight, a calm architectural presentation atmosphere, and a few small-scale people for context. Keep vertical lines straight where possible. Do not add extra floors, change the building form, alter the silhouette, or invent a different project. ``` --- ## UX recommendation Make the render feature feel like a toy, not a production tool. Button behavior: ```text SAVE - saves the current canvas image RENDER - opens OOMBRA Render Studio - shows loading animation - returns either the AI image or the current captured source image if no backend is connected ``` Later, add: ```text VIEW - AXON - EYE - STREET ``` But do not add camera modes until the hidden 3D renderer is working. --- ## Important safety rules - Do not edit the iframe `srcdoc` directly unless absolutely necessary. - Do not expose the OpenAI API key in Squarespace. - Do not add external AI calls until the modal works with local captured images. - Do not merge the accurate camera and AI rendering in the same step. - Always keep a known-good recovery file.