InteractiveProduct UI
I worked on the clients for Bluebeaker Lab and Medmap Library, Doctor and Showroom, implementing search, content storage, model editing, capture and downloads. The recording above shows model interaction in the 3D viewer.
Search inputs and results
In Library, I connected search terms, content types, categories and pagination to API requests. I handled empty results and page changes, and deferred autocomplete requests until Korean text composition was complete.
Storage and content-specific viewers
I connected folder creation, renaming and file management, then switched between model, image and video viewers according to the selected content. In the 3D viewer, UI state was wired to camera resets, viewpoint changes and capture actions.
Connecting web and desktop
Doctor ran as a web interface inside a WPF application. I received content information from the host through its WebView and applied it to the viewer, connecting web editing with the surrounding GUI.
Content Tools
I built admin screens where operators and designers could register content and check its rendering. The workflow went beyond uploading a file: it included model information, thumbnails, previews and rendering settings.
Registration and uploads
The client first created content metadata, requested upload URLs, and sent the files and thumbnails. Once the upload finished, it refreshed the list so the new content was visible on the same screen.
3D settings as controls
I connected panels for camera calibration, lighting, shadows, SSS and interaction limits to the viewer. Designers could inspect a model’s appearance through controls instead of editing code.
Rendering & Assets
I worked on both viewer interaction and asset size. Reducing file size alone was not enough: I compared details before and after optimization with designers and agreed on suitable settings for the web.
Picking and multiple views
I used three-mesh-bvh for model picking and scissor regions to render multiple views. In Lab, I kept the canvas alive across navigation and connected DOM controls to the 3D scene.
Automating repetitive asset work
With gltf-transform, I removed duplicate and unused data and automated mesh merging and simplification. I applied Draco and Meshopt to geometry and KTX2 to textures. Changes to normal maps and important details were checked in a preview before adjusting the parameters.
