Yuri

Overview

Yuri (유리 - Glass) bridges WebGL and standard DOM. It features 3D geometric objects with complex, realistic glass materials that refract the HTML content layered behind the canvas.

The Challenge

Simulating realistic glass refraction in a web browser is computationally expensive. This project experiments with Three.js MeshPhysicalMaterial properties (transmission, roughness, thickness) to achieve optical realism.

Core Tech Stack

Key Features

• 01 Real-time 3D Refraction
• 02 Three.js Canvas Integration
• 03 Orbit Controls
• 04 Synchronized DOM/WebGL Rendering