Bygga 3D-konfiguratorer med Grasshopper och Rhino Compute på Modelups plattform

I den här artikeln förklarar vi tekniken bakom Modelups compute-plattform och visar hur du enkelt kan använda Grasshopper för att skapa 3D-konfiguratorer online.

6 dec. 2024 Emil Poulsen

Bygga 3D-konfiguratorer med Grasshopper

Vårt mål på Modelup är att leverera kraftfulla, högpresterande 3D-konfiguratorer med exceptionell användarupplevelse. För att uppnå detta har vi utvecklat en mångsidig plattform baserad på Rhino Compute, som gör det möjligt för Grasshopper att fungera som den geometriska motorn bakom våra konfiguratorer.

För de flesta av våra kunder skapar vi en komplett lösning som inkluderar utveckling av produktlogik i Grasshopper samt molnhosting av skriptet. Men om du redan är kunnig i Grasshopper kan du använda vår plattform för att förvandla dina skript till dynamiska webbapplikationer.

Häng med så förklarar vi hur det fungerar. 🔍

Skapa Grasshopper-definitioner med vår plugin

Varje konfigurator på vår plattform drivs av en Grasshopper-definition. Dessa definitioner består av två huvudsakliga komponenter: inputs och outputs. Inputs definierar vilka parametrar användare kan anpassa på webben, medan outputs representerar resultaten – till exempel en visuell 3D-modell, prestandamått, materiallistor, 2D-ritningar eller något annat.

För att förenkla processen har vi utvecklat en enkel Grasshopper-plugin. Med denna kan du enkelt definiera inputs, outputs och designa användargränssnittet för själva webbkonfiguratorn.

Grasshopper-plugin Ett exempel på en Grasshopper-definition som driver en konfigurator. Den använder Modelups Grasshopper-plugin (FormXP) för att definiera inputs och outputs.

Ladda upp Grasshopper-definitionen till vår plattform

För att ladda upp Grasshopper-filer och hantera andra aspekter av konfiguratorn har vi utvecklat en backoffice-applikation. Som kund får du ett eget konto där du kan hantera allt på ett ställe.

Så här fungerar det:

  • Välj din Grasshopper-definition.
  • Ladda upp filen – det tar vanligtvis bara en sekund.
  • Navigera till din konfigurator, så är den redo att användas.

Eftersom utveckling av konfiguratorlogik i Grasshopper ofta är en iterativ process har vi gjort det enkelt att göra uppdateringar. Om du upptäcker ett fel eller behöver justera logiken i Grasshopper-skriptet kan du enkelt ladda upp en ny fil.

Upload-demo Ett exempel på att ladda upp en Grasshopper-fil i Modelups backoffice-applikation.

Utöver att ladda upp din Grasshopper-definition kan du även anpassa olika aspekter av den på plattformen. Till exempel kan du justera inställningar för bakgrund, miljö och belysning.

Compute-prestanda är vår högsta prioritet

Vi anser att konfiguratorer ska vara roliga och engagerande att använda. Om användare måste vänta flera sekunder på ett svar, till exempel när de justerar en sliders värde, förstörs upplevelsen. För att undvika detta har vi byggt ett högpresterande system som kan beräkna Grasshopper-definitioner i molnet på bara millisekunder, vilket säkerställer en sömlös och responsiv upplevelse.

Performance Beräkningar som triggas med Chrome Developer Tools aktiverade. Som du kan se i nätverkstrafiken slutförs de flesta beräkningar på cirka 100 ms.

Vi använder en kombination av smarta tekniker som byte-streaming, en optimerad protokoll och geometri-instansiering för att uppnå den hastighet och effektivitet som krävs för en smidig upplevelse.

Flexibla och dynamiska användargränssnitt

Med vår Grasshopper-plugin kan du skapa dynamiska och responsiva användargränssnitt direkt i Grasshopper. Detta begränsas inte till bara sliders och värdelistor i en vertikal stapel – du kan designa gränssnitt med tabs, stack screens, ikoner, bilder, mesh-effekter och mer, utan att skriva en enda rad kod.

Dynamic UIs Utformningen av kontrollpanelen till höger är helt definierad i Grasshopper.

Systemet kan också uppdatera kontrollpanelen under beräkningar. Till exempel kan logiken i Grasshopper visa eller dölja vissa parametrar baserat på specifika villkor, vilket möjliggör anpassningsbara gränssnitt.

Verktyg och funktioner för Grasshopper-proffs

Eftersom vi själva använder vår plattform för att skapa alla våra 3D-konfiguratorer är vi också dess största användare. Detta driver oss att ständigt förfina arbetsflöden och utveckla verktyg för att säkerställa en smidig och effektiv process. Några exempel är:

  • Ett API för screenshots som genererar statiska bilder.
  • Direkt preview av GLB-filer i web browsern från Grasshopper.
  • Stöd för att definiera språköversättningar och bifoga informationsmoduler till input.

Tooling and additional services Ett exempel på utvecklarverktyg: 3D-preview i webbläsaren direkt från Grasshopper.

Vi har också utvecklat “best practises” för att arbeta med Grasshopper, vilket vi gärna delar med våra kunder och samarbetspartners. Detta inkluderar allt från att optimera Grasshopper-definitioner för hastighet till att organisera stora skript effektivt. Som kund får du tillgång till vår expertis och vägledning för att säkerställa att ditt projekt lyckas.

En annan anledning att arbeta med oss: Vi är trevliga människor ¯\_(ツ)_/¯

Vi har inga påträngande säljare eller investerare att tillfredsställa. Vi är bara nördar som brinner för Grasshopper och de möjligheter det erbjuder. Denna självständighet gör att vi kan fokusera på det vi tycker är viktigast: att skapa lösningar som är meningsfulla för både oss och våra kunder. Modelup ägs helt av sina grundare, som har ägnat sina karriärer åt att arbeta med Grasshopper och bygga skalbara webbapplikationer.

Om du är intresserad av att använda vår plattform för att publicera din Grasshopper-drivna 3D-konfigurator online är du välkommen att kontakta oss – vi ser fram emot att höra från dig! ❤️

Kontakt

Intresserad av att höra mer från oss? Vi tar gärna ett möte antingen på vårt kontor i Stockholm Gamla stan eller på distans.

Ange din emailaddress så hör vi av oss så fort vi kan.

Du kan även nå oss på info@modelup3d.com eller 0760-05 66 92

Bild på karta över Gamla stan i Stockholm