RIRRI'S: a rainy-night convenience store as a portfolio

[scenariofour]

Hiiiii all!! I am Iris Li and I built my portfolio in three.js: RIRRI’S, a small interactive Japanese convenience store on a rainy evening, try it hereeee: https://world.irisli.dev/

Projects sit on the shelves as products (selected work on the Deli & Sweets shelf, experiments in the ice-cream freezer, older work on the magazine rack). Picking one up opens its case study. The whole world has seasons, time of day and weather, there’s an oden warmer by the register, and a second island has a House you can walk into.

Built with three.js r169 and GSAP, no framework. A few things (hopefully can be useful to others here :))) ):

• Draw calls on phones. The store was asking a phone for 846 draw calls a frame. I got it to 531 by merging static meshes by material and by colour (a per-vertex material index plus a uniform array of the original materials’ Color objects, so recolouring for seasons still works), checked pixel by pixel against the old build. Full method and numbers: How to Reduce Three.js Draw Calls Without Changing a Pixel

• Proving “nothing changed.” Seeded random, a hand-driven clock, camera drift and particles paused, then a Playwright pixel diff. The same build against itself went from 1.93% differing pixels to 0.007% once everything was held still.
• First visit. Almost all of the cold-start wait is the GPU preparing about 60 shader programs, so the new programs the merge needs are built in the background once the store is showing.

Happy to answer questions about any of it pls connect!!! The project records (plain text, for when 3D is too much) are at Projects by Iris: Apple Watch apps, AI agents and tools

[andrewspies]

Nice! Selecting the store is a little strange on Mobile in portrait view it seems to sometimes select the mailbox and sometimes the store.

Otherwise it’s very cool. Good job.

[scenariofour]

Thank you for the feedback ! I am working on a fix and will update it soon. Glad you enjoyed it