Designers, indie developers and agencies all need a clean product shot on a regular basis: for a landing page, an app store listing, a case study or a social post. The usual options are wrestling with a Figma template or paying a monthly subscription to a mockup service. MockupForge 3D is a third route. Drop in a screenshot and it renders onto a real 3D device model, iPhone, MacBook or iPad, with studio lighting, a mesh-gradient backdrop and an export up to 4x resolution, all without creating an account or uploading a file.
The key word is real. These are genuine three.js and WebGL renders using GLTF models, a physical-based lighting rig and a real camera, so orbit the device to any angle and the highlights, perspective and shadow all follow correctly. Two additional frames, a browser window and a glass card, render through a separate hand-built 2D canvas pipeline, because they are flat UI chrome rather than physical objects. Everything runs client-side. No file ever leaves the browser, there is no account, no cookie and no analytics, and the whole thing costs nothing to operate.
A companion Chrome extension, MockupForge Capture, removes the screenshot step entirely. It grabs the current tab and routes it straight into the studio with the render already set up. Capture Mobile goes further, re-rendering the page through a real emulated phone viewport at the correct device pixel ratio before handing it to the iPhone model.
| Problem | Solution Implemented |
|---|---|
| Real-time WebGL normally drags in a bundler, a package.json and a CI build step before anything renders. | Vendored three.js as static ES modules behind a native browser import map. No package.json, no node_modules, no CI build. Deploys as static files on Vercel, auto-deploying on push to main. |
| Dark metallic device bodies lit only by flat directional lights rendered as near-black silhouettes. | Switched to a PMREM-baked room environment for image-based lighting. The lighting rig, key light distance, shadow camera frustum, shadow-catcher plane, is derived from the device's bounding sphere each frame, with a soft contact shadow stamped at the footprint. |
| The raw GLTF assets weighed 58MB because the geometry carries no textures and the weight is entirely f32 vertex data, making them impractical over a normal connection. | Quantized and meshopt-compressed the assets down to 4.2MB, keeping a 1.5-million-vertex iPad model usable. |
| One asset shipped with non-linear screen UVs, three vertex columns covering 43%, 14% and 43% of the physical screen, which crushed a third of every screenshot into the middle of the display. The bug survived two wrong diagnoses because it was being tested with a square image, which cannot detect non-uniform distortion. | Rebuilt the UVs from vertex positions at load time so the mapping is proportional by construction. Verified with a ruler image: the bar-gap ratio went from 1.66 to 1.000. |
| WCAG 2.2's 24px target-size rule fails a studio UI built from standard range inputs, and automated audits could only see the inspector pane open by default, leaving real defects unreachable. | Rebuilt all fourteen range sliders and both on-canvas quick buttons to meet the target size. Made the screenshot pane the default inspector tab, which immediately surfaced three real defects the audits had never been able to reach. Zero axe-core violations remain across all pages, verified at four viewports. |
| A watermark rendered as a CSS overlay is a toggle anyone can inspect away, making a paid removal tier meaningless. | Composited the watermark into the exported bitmap itself rather than layering it over the canvas, so removing it is a genuine product feature rather than a class you can delete in devtools. |