10 mrt. 2025

Trainingsdata in 3D

Webgebaseerde 3D-graphics voor fitnessdata verkennen

Tijdens mijn rondjes door het dorp bedacht ik dat ik ThreeJS zou kunnen gebruiken om een dynamische 3D-weergave van mijn trainingsgegevens te maken. Lees verder om te zien wat ik heb gemaakt - het is nog steeds in ontwikkeling, maar dient als een spannende verkenning van het concept.

Ik onderzoek manieren om trainingsgegevens te visualiseren, gebruikmakend van webtechnologieën voor compatibiliteit op verschillende apparaten voor Gran Fondo, mijn hardloop- en fietsapp. ThreeJS, een 3D-renderingtool voor browsers, werkt naadloos op zowel grote als kleine schermen. Ik gebruik de TCX-trainingsgegevensindeling omdat deze geschikt is om te verwerken met standaard browser- en webtechnologie. Voor dit project heb ik een opgenomen sessie gebruikt van mijn hardloopsessie op 9 maart—mijn standaardronde van 1,8 km rond het dorp, 6 keer identiek herhaald (in totaal 11 km). Ik hou van deze route; er is weinig verkeer en er zijn weinig verstoringen, waardoor ik me kan concentreren op het hardlopen. Ik heb de TCX-gegevens verzameld met de RunnerUp-app; het doet wat het moet doen, maar ziet er een beetje gedateerd uit en mist interactieve analyse en verkenning van trainingsgegevens.

Als proof of concept om 3D-presentatie te verkennen, heb ik een prototype gebouwd dat het TCX-bestand met de trainingsgegevens laadt. De browser verwerkt deze gegevens en genereert twee visualisaties: een 3D-weergave met ThreeJS en een 2D-lijngrafiek die het tempo toont. Kleur vertegenwoordigt snelheid—groenere lijnen duiden op een sneller tempo. De 3D-visualisatie draait als een vinylplaat, waardoor mijn zes rondes door het dorp zichtbaar worden, waarbij de vorm overeenkomt met de kaart. Om beide grafieken te koppelen, heb ik een witte cirkel toegevoegd die hetzelfde punt in de tijd op elk markeert, wat helpt om de verbinding tussen de twee weergaven te illustreren.

De visualisatie is 100% gebouwd met webtechnologieën, met behulp van ThreeJS om het 3D-hardlooppad te renderen. Een tweede HTML5-canvas overlapt een 2D-tempografiek, terwijl een gecentraliseerde animatielus beide scènes samenbindt met een bewegende stip, waardoor de route en de grafiek worden gesynchroniseerd. Dit maakt deel uit van een "hardop denkende" experimenteerfase, waarin ik innovatieve manieren onderzoek om fitnessgegevens te visualiseren. Het is een demo voor mijn aankomende Gran Fondo-app, die tot doel heeft interactieve fitnesstracking te verbeteren met rijke, aantrekkelijke visualisaties.

Bekijk de visualisatie op je eigen computer door deze pagina te openen: demo time Houd er rekening mee dat dit geen gepolijste demo is, het is "vers van de pers" en werkt vooral goed op liggende schermoriëntaties. Toekomstige versies zullen veel meer gepolijst zijn om alle elementen in een responsief ontwerp te laten passen.

De Gran Fondo-app zal hartslag, cadans en vermogen bevatten voor diepere inzichten. Interactiviteit zal rotatie van de 3D-grafiek via aanraking en inzoomen op details mogelijk maken. Mijn doel is om trainingsanalyse meeslepender, intuïtiever en aantrekkelijker te maken voor atleten die een uitgebreid overzicht van hun prestaties zoeken.

Conclusie

Experimenteren is een cruciaal onderdeel van softwareontwerp—het stelt je in staat om ideeën te testen, concepten te verfijnen en feedback van anderen te verzamelen. Deze 3D-trainingsvisualisatie is een voorbeeld. Er valt nog veel meer te ontdekken. Blijf deze blog volgen voor toekomstige updates terwijl ik Gran Fondo verder ontwikkel!