STYLY Studio
STYLY Studio is an XR editor tool that allows users to create interactive AR/VR spaces in a web browser without coding.
It is developed with a hybrid architecture, using Unity (WebGL) for 3D rendering and React for the UI.
45,000+
Accounts
50,000+
Cumulative Spaces Created
AWE 2024
Best Creator & Authoring Tool Award
- AWE AUGGIE AWARDS are the official awards at the world's largest XR conference, 'Augmented World Expo'.
- This product was used in classes and guest lectures at educational institutions (such as Niigata Computer College).
- In Project PLATEAU led by the Ministry of Land, Infrastructure, Transport and Tourism, I handled the design, demonstration, and operation of template functions for handling 3D city data.
Technologies
3D Rendering System
UnityC#WebGLUniTaskAssetBundleTest Runner
2D UI System
TypeScriptReactRedux ToolkitJestPuppeteer
Infrastructure / Tools
GitHubGitHub ActionsUnity Cloud BuildAWSJiraSlack
Technical Challenges and Design Decisions
3D Editor Undo Foundation Design
Challenge
It was necessary to realize an Undo mechanism that would not break even with large-scale 3D data.
Design Decisions
- Adopted a delta recording method instead of snapshots
- Instance reconstruction design for fast recovery from history
- Transaction design to bundle multiple object operations into a single history entry
React × Unity Boundary Design
Challenge
It was necessary to integrate Unity on WebGL and React in a loosely coupled manner.
Design Decisions
- Independent codebase structure with separated responsibilities
- Command communication design using SendMessage
- Clear interface definition and data consistency management
Quality Foundation and Automation System Construction
Challenge
It was necessary to build a quality foundation that could withstand continuous development.
Design Decisions
- Thorough unit testing and maintenance of UI automation E2E tests
- CI/CD construction using GitHub Actions × Unity Cloud Build
- Development of review standards and code review system
Technical Articles
Explaining the Undo Foundation Design of STYLY Studio
Explains the design philosophy for realizing Undo for large-scale 3D data under browser memory constraints. Introduces the history management mechanism using the delta recording method and transaction design.
E2E Automated Testing Strategy for STYLY Studio
Explains the E2E automation strategy for a web editor with a React×Unity configuration. Summarizes key points in building a quality foundation through automated browser operation tests and CI/CD integration.