Op deze pagina
Ik wilde een Shopify-winkelier een bestelling door een magazijn laten volgen, laten zien wat er gebeurt als die verandert en iets nuttigs voor de winkel meegeven. Dat werd Warehouse Rush, ons gratis browserspel dat alleen in het Engels beschikbaar is.
Je verzamelt goederen, stelt sets samen, pakt pakketten in, laadt bestelbussen en investeert het geld dat je verzamelt. Maple Depot groeit uit tot Riverside Warehouse en Aurora Fulfillment. Het spel bevat The Nine-Figure Upsell Playbook, een praktische gids voor het kiezen en testen van een aanbod.
Als je een 3D-browserspel met AI-programmeeragents wilt bouwen, is dit ons bouwverslag. Het behandelt Three.js, Codex, Claude, Higgsfield en ElevenLabs, inclusief de onderdelen die tijdens de ontwikkeling veranderden.
Het beeld hierboven is een promotie-illustratie. De magazijnschermafbeeldingen hieronder tonen de speelbare wereld.
Waarom een Shopify-app een magazijnspel bouwde
Ik wilde een leadmagneet waarvan de activiteit het bestelproces uitlegt en de beloning een winkelier helpt ermee aan de slag te gaan.
Revize laat klanten geschikte Shopify-bestellingen vóór fulfillment bewerken. De interessante operationele vraag is wat er gebeurt tussen een klant die een bestelling wijzigt en een magazijn dat die verzendt. Onze handleiding voor een bestelling die al door een 3PL wordt verzameld beschrijft de afstemming in de praktijk.
Het spel maakt een kleinere versie zichtbaar. Goederen horen bij specifieke bestellingen. Gewijzigde bestellingen hebben vóór verzending een correctie en een actueel label nodig. Inpakken, voorraad en levering zijn verbonden handelingen.
Het draaiboek biedt na die illustratie het werk voor de winkelier. Op de omslag staan “Kiezen / Bouwen / Bewijzen / Beslissen” en “Praktische lessen uit ons werk met merken met een omzet van negen cijfers.” De zes missies op 16 pagina’s behandelen een nuttige productcombinatie kiezen, het aanbod bouwen en plaatsen, het bedoelde aanbod laten winnen, betaling aantonen, het resultaat analyseren en beslissen op basis van je eigen scorekaart.
Open het spel met je e-mailadres en winkel-URL. Met het eerste verzonden pakket verdien je het upsell-draaiboek. Dit is een speelbare introductie tot het onderwerp; we hebben geen gemeten resultaat voor werkplektraining om te rapporteren.
De stack en de scheiding die ertoe doet
Three.js tekent het magazijn, TypeScript bevat de regels en Vite verpakt het zelfstandige browserproject.
Het spel heeft eigen broncode, een lockfile, tests en assets, apart van het Astro-project van de website. Vite maakt de browserbundel met relatieve assetpaden, in lijn met de workflow voor statische productiebuilds.
De belangrijkste scheiding ligt tussen de simulatie en de presentatie:
tycoon-model.tsbeheert bestellingen, aantallen, pakketeigendom, revisies, medewerkers, geld en validatie van opgeslagen gegevens.tycoon-world.tstekent die toestand en beheert de visuele resources van de scène.tycoon-entry.tsverbindt invoer, menu’s, opslaan, audio en de framelus.
Een animatiecallback kent nooit voorraad of geld toe. Een vliegend notitieboek is feedback op een modelwijziging. Door dat onderscheid is een gemist visueel effect iets anders dan een verloren artikel.
De spelcamera is een THREE.PerspectiveCamera, de perspectiefcamera van Three.js; de orthografische camera van de renderer wordt alleen voor de schaduwen van de zon gebruikt.
Rapier staat in de licentiegeschiedenis van het oorspronkelijke project. De actieve tycoon importeert het niet; botsingen, navigatie en begrensde bewegingen van objecten zijn rechtstreeks geïmplementeerd.
Wat we in code maakten en wat we genereerden
Het magazijn en de geanimeerde personages zijn in code gemaakt, terwijl geselecteerde afbeeldingen, een transportbandmodel, portaalvideo en geluidseffecten uit generatietools kwamen.
Dat onderscheid doet ertoe als iemand vraagt hoe het spel is gemaakt. Een portret, een personagerig en een video zijn verschillende producten met verschillend integratiewerk.
| Onderdeel | Vastgelegde bron | Werk dat in het spel blijft |
|---|---|---|
| Magazijn, goederen en actieve personages | Originele Three.js-geometrie, met lokaal getekende Canvas-texturen | Indeling, beweging, dragen, machines en toestandgestuurde animatie |
| Oorspronkelijke poster en portrait-v2-set | Ingebouwde image_gen / OpenAI-beeldgeneratie, vastgelegd in ASSETS.md |
Assets voorbereiden en in de interface plaatsen |
| Transportband bij de verzending | Higgsfield 3D Jutsu-scène van de eigenaar, geëxporteerd als GLB | Integratie als statisch object; pakketten en interacties blijven onder beheer van het spel |
| Eerdere betonvloer | Higgsfield PBR-textuurset van de eigenaar | Historische asset; latere vloeruitwerkingen zijn in code gemaakt |
| Portaal | Higgsfield-assets uit het account van de eigenaar en Kling 3.0-clips | Omslag vervangen, loops monteren, encoderen en timing van de toegang |
| Geluidsbank voor het spel | ElevenLabs eleven_text_to_sound_v2 |
Laden, mixen, koppelen aan gebeurtenissen en gesynthetiseerde alternatieven |
De assetgeschiedenis bevat een tussentijdse geïllustreerde personageset. Claude Opus maakte een Canvas2D-atlas en animatie met uitgesneden vormen; Codex integreerde die. De huidige overdracht vermeldt dat die platte lagen inmiddels zijn verwijderd en de actieve personages Three.js-geometrie gebruiken. De atlas is onderdeel van de bouwgeschiedenis, niet van de huidige personagerenderer.
De huidige promotiebeelden in liggend en staand formaat zijn op 24 oktober 2026 door Codex gpt-6-astra gegenereerd met de ingebouwde OpenAI-tool voor beeldgeneratie, met de eigen, goedgekeurde “Cozy Soft”-render uit het spel als stijlreferentie en eigen v2-personageportretten voor de identiteit. De geleverde bestanden zijn WebP-encoderingen en de prompts worden bewaard in art-src/menu-v3/jobs.tsv. Het portret hieronder hoort bij de vastgelegde gegenereerde v2-set.
Hoe ik Codex en Claude gebruikte zonder de bouwgeschiedenis kwijt te raken
De bruikbare agentworkflow wees concreet werk toe en hield regie, implementatie en verificatie herleidbaar.
De registraties onderbouwen specifieke bijdragen. ASSETS.md noemt Astra en Claude Opus voor de redactionele richting van de praktische draaiboeken. Sol implementeerde de inhoud, gedeelde renderer en presentatie in het spelmenu. De geschiedenis van de geïllustreerde personages noemt Claude Opus als maker en Codex als integrator. Het register vermeldt ook dat Claude Opus die personages verfijnde aan de hand van mijn magazijnillustratie.
De verificatie van de uitbreiding vermeldt een latere afronding door Opus na goedgekeurde correcties. Die vermeldingen beschrijven daadwerkelijke bijdragen; ze tonen niet aan dat één agent elk onderdeel van het spel heeft geschreven of beoordeeld.
Mijn herbruikbare werkwijze uit die registraties is:
- Definieer het gedrag en wie de toestand beheert voordat je om visueel werk vraagt.
- Geef de implementatietaak een benoemde module of asset en een zichtbare acceptatievoorwaarde.
- Beoordeel de integratie, inclusief oude opgeslagen spellen, opruimen van resources en foutpaden.
- Bewaar bewijs voor de resulterende versie. Markeer een eerder experiment als historisch wanneer het wordt vervangen.
Die laatste stap bracht hier echte veroudering in de documentatie aan het licht: een oude personagetechniek kan in de tekst blijven staan nadat de renderer verandert. Een bouwverhaal vraagt om dezelfde zorg als een overdracht.
Gegenereerde media vroegen nog om bewerking en runtimeontwerp
Generatie leverde bronmateriaal; nabewerking en koppeling aan gebeurtenissen maakten het bruikbaar in de browser.
Bij de Higgsfield-transportbandexport worden voorbeeldpakketten, camera’s en lampen uit de actieve scène verwijderd. Anders zou een presentatiemodel de pakketten van het spel kunnen dupliceren of eigen verlichting meebrengen. De transportband blijft een statische asset terwijl de simulatie de bewegende goederen beheert.
Het portaal vroeg om een andere vorm van opschonen. De vastgelegde workflow gebruikt Higgsfield/Kling-video, projecteert de echte draaiboekomslag in de beelden en bouwt loops met voorwaartse beweging. Ook houdt die de geschilderde architectuur buiten de bewegende opening stabiel om flikkerende texturen te verwijderen. Posterframes en definitieve encoderingen krijgen afzonderlijke controles.
De toegang heeft ook een functioneel contract. Zowel acceptatie van de lead als gereedheid van het spel moeten slagen. Het portaal vervaagt pas nadat het actieve spel een gerenderd frame bevestigt. Dat een filmpje eindigt, bewijst niet dat het magazijn klaar is voor invoer.
Voor geluid vermeldt de actieve overdracht 23 geleverde ElevenLabs-effecten, gegenereerd met eleven_text_to_sound_v2. ElevenLabs documenteert tekstgegenereerde effecten voor games en interactieve media. Onze samples dekken handelingen zoals verzamelen, dichtplakken, vertrek van bestelbussen en het voltooien van upgrades.
Een eerdere registervermelding noemt 24 gegenereerde effecten. De overdracht verklaart het geleverde aantal: ui-tap werd gegenereerd maar weggelaten omdat er geen centrale koppeling voor knopklikken was.
De browser laadt en decodeert de geluidsbank na een gebruikershandeling die audio vrijgeeft. Gebeurtenissen roepen de samples aan; bij niet-beschikbare samples worden gesynthetiseerde alternatieven gebruikt. Tijdens het spelen is geen ElevenLabs-API-aanroep of sleutel nodig. Muziek en kleine materiaalgeluiden worden in code gesynthetiseerd, met apart opgeslagen instellingen voor muziek en effecten.
Het prestatiewerk begon bij lay-out en laden
Herhaald browserlay-outwerk verwijderen en het aantal benodigde assetbytes verkleinen waren belangrijk naast het budget voor de 3D-scène.
Het vastgelegde docs/perf-report.md noemt een herhaalde canvasmeting bij het positioneren van werkplekknoppen. In het frame volgden uitlezingen van getBoundingClientRect() op stijlwijzigingen. Door de canvasrechthoek te cachen en die bij een formaatwijziging ongeldig te maken, verdween dat herhaalde lay-outwerk.
Dat rapport vermeldt ook adaptieve kwaliteit, parallelle assetaanvragen en samengevoegde statische objecten. De kwaliteitsstappen verlagen eerst de pixelratio en daarna schaduwen en deeltjes wanneer de frametijd boven het budget blijft.
Als indicatie van de omvang noemt de testbuild in het rapport een JavaScript-bundel van 1.072 KB, of 308 KB met gzip. De cel voor de telefoonviewport in het vroege Maple-stadium vermeldt 59 draw calls, inclusief de schaduwpass. Dit zijn historische metingen uit headless Chrome op Apple Silicon, met meetperiodes van 20 seconden. Het zijn geen nieuwe controles van de lanceerbuild of metingen op een fysieke telefoon.
De transportband veranderde na dat rapport. ASSETS.md vermeldt meshopt-compressie van 641.960 naar 51.044 bytes, zonder geometrievereenvoudiging en zonder texturen. De loader registreert de MeshoptDecoder van Three.js voor de gecomprimeerde GLB. De ongecomprimeerde transportbandgrootte uit het oudere rapport mag niet als actueel worden gepresenteerd.
Ik zou in een toekomstige build beide controles behouden: wat de scène per frame aanlevert en wat de browser vóór het eerste speelbare frame moet ophalen.
Tests volgden het pakket door het hele traject
Modeltests controleerden eigendom en boekhouding, terwijl browsercontroles het gerenderde traject en de bediening behandelden.
De Node-testsuite dekt de simulatie, begeleide les, beloningen, opgeslagen toestand en het gedrag van de controller. De langere trajectverificatie doorloopt echte modelpaden, verdient upgrades en rondt aangenomen werk af voordat naar een ander magazijn wordt gegaan. Die controleert op vaste punten voorraad, geld en opslaan/opnieuw laden.
De uitbreidingsverificatie vermeldt een campagne met 48 verdiende zendingen en vervolgtests die in totaal 300 leveringen bereiken op de routes van Riverside en Aurora. Dit zijn correctheidstests, geen spelersaantallen of bewijs dat een beginner het hoofdstuk gemakkelijk afrondt.
Browserverificatie voegt toe wat een modeltraject niet kan laten zien: of de bestelbon past, een dialoogvenster scrolt, een bedieningselement bereikbaar blijft en het portaal een echt frame toont. Vastgelegde Chrome-controles gebruiken desktopviewports en viewports op telefoonformaat, inclusief verminderde beweging en foutgevallen.
Stel je als voorbeeldtest een cadeauwinkel voor die twee mokken en één notitieboek verzendt. Wijzig de eis voor het notitieboek na het verzamelen. De nuttige controle is dat het definitieve pakket overeenkomt met de actuele bestelling en het label, terwijl de ongewijzigde goederen geregistreerd blijven. Alleen een geslaagde animatie kan dat niet bewijzen.
Ook assemblage maakt dat onderscheid zichtbaar. De schermafbeelding toont het minispel voor de cadeauset met een knuffelbeer; de presentatie moet nog steeds overeenkomen met de onderliggende inhoud van het pakket.
Menselijke beslissingen en wat ik anders zou doen
Ik zou de documentatie eerder op elkaar afstemmen en tests op fysieke apparaten voorrang geven boven verdere aankleding.
De bouwregistraties bevatten menselijke keuzes die een gegenereerd resultaat niet kan maken. Ik leverde eigen referentiebeelden aan. Bij de portaalreview werd een opgeschaalde versie met fouten in letters en randen afgewezen. Het mediaproces controleert leesbare omslaginhoud en beweging naast bestandsmetingen. Dat zijn acceptatiebeslissingen, geen gevolgen van een geslaagde export.
De huidige overdracht laat ook concrete beperkingen open. Bij handmatig lopen kun je overlappen met een geparkeerde vrachtwagen aan de uitgebreide verzendrand, al werken gerouteerde leveringen nog steeds. Bij een melding van vertraging en visuele fouten op een telefoon ontbreken de apparaatgegevens om die te reproduceren. Controles van desktopviewports geven geen uitsluitsel over apparaatprestaties of die melding.
Voortgang wordt lokaal in de browser opgeslagen. Er is geen synchronisatie van opgeslagen spellen via de cloud of multiplayer. Partneraanbiedingen zijn nog in afwachting. Die grenzen horen in het bouwverhaal naast de voltooide schermen.
Voor winkeliers is het spel een illustratie. Gebruik de handleiding voor upsellplaatsingen na aankoop voor de commerciële workflow; de upsellfuncties van Revize vereisen Pro. Controleer het traject van je eigen aanbod met een testbestelling.
Wat moet je deze week doen?
Bouw en controleer één volledige bestelcyclus voordat je het magazijn uitbreidt of meer assets laat maken.
- Schrijf op wie de toestand van bestellingen, voorraad, pakketten en beloningen beheert.
- Laat verzamelen, inpakken en verzenden door één zichtbaar traject werken.
- Leg de bron, verwerking en het huidige gebruik van elke gegenereerde asset vast.
- Controleer opnieuw laden, een mislukte laadpoging en verminderde beweging en test daarna op een fysieke telefoon.
Speel Warehouse Rush om ons resultaat te bekijken. Open het met je e-mailadres en winkel-URL, verzend je eerste pakket en ontvang The Nine-Figure Upsell Playbook. De zes missies maken van de winkelierstaak een benoemd aanbod, een getest betaaltraject en een beslissing op basis van je eigen behouden toevoegingen en kosten.
Veelgestelde vragen
Deze antwoorden maken onderscheid tussen het geleverde spel, eerdere experimenten en vastgelegde testomstandigheden.
Kan ik een 3D-browserspel bouwen met AI-programmeeragents?
Ja, maar de implementatie heeft nog steeds expliciete regels, integratiewerk en verificatie nodig. Warehouse Rush scheidt de simulatie van de renderer, gebruikt agents voor vastgelegde taken en controleert complete trajecten. Gegenereerde beelden bewijzen niet dat voorraad, pakketeigendom of opgeslagen voortgang correct werken.
Zijn alle beelden van Warehouse Rush door AI gegenereerd?
Nee, het actieve magazijn en de geanimeerde personages zijn in code gemaakt met Three.js. Het register vermeldt gegenereerde poster- en portretassets, een Higgsfield-transportband en portaalmedia afzonderlijk. Een eerdere Canvas-personageatlas werd ook in code gemaakt. Houd die geschiedenis apart van de actieve renderer.
Gebruikt Warehouse Rush Rapier voor fysica?
De actieve tycoon importeert Rapier niet. Het staat in de geschiedenis en licentieregistraties van het oorspronkelijke project. Huidige botsingen, navigatie en begrensde visuele bewegingen zijn rechtstreeks geïmplementeerd, dus een bewaarde licentievermelding toont geen actieve fysica-afhankelijkheid aan.
Hoe hebben jullie ElevenLabs-geluidseffecten voor het spel gebruikt?
We genereerden effecten buiten de browserbuild en koppelden de geleverde samples aan spelgebeurtenissen. De overdracht vermeldt 23 effecten met eleven_text_to_sound_v2. Afspelen volgt de effectvoorkeuren en gebruikt gesynthetiseerde alternatieven wanneer samples niet beschikbaar zijn. De browser roept de generatie-API niet aan.
Bewijzen jullie prestatietests dat het goed werkt op mijn telefoon?
Nee, Chrome op een desktop met een viewport op telefoonformaat is geen bewijs van prestaties op een fysieke telefoon. Het prestatierapport noemt de machine, meetomstandigheden en resterende beperkingen. Probeer het spel op je eigen apparaat; de onopgeloste telefoonmelding heeft nog steeds een reproduceerbaar geval met apparaat en browser nodig.
Hoe krijg ik The Nine-Figure Upsell Playbook?
Open Warehouse Rush met je e-mailadres en winkel-URL en verzend daarna het eerste pakket om het draaiboek te verdienen. De gids heeft 16 pagina’s en zes missies. Die neemt één aanbod mee door productgeschiktheid, plaatsing, prioriteit, betalingscontroles, analyse en een besluit op basis van de scorekaart.