DEV Community: Daniël R

Augmented reality 3d viewer

Daniël R — Tue, 21 Oct 2025 13:03:09 +0000

Als je wel eens een 3D-design hebt gemaakt, herken je dit vast: je ontwerpt iets zorgvuldig, print het uit... en ontdekt dan dat het toch niet helemaal past of er niet uitziet zoals je had verwacht. Vaak kom je daar pas achter na de eerste of tweede print, wat natuurlijk tijd en materiaal kost. Ik liep tegen precies hetzelfde probleem aan. Daarom heb ik een simpel programma geschreven dat een live camerabeeld combineert met een .stl-bestand, zodat je met Augmented Reality direct kunt zien hoe je ontwerp in de echte wereld staat. Zo voorkom je onnodige prints en krijg je sneller een goed beeld van het eindresultaat.

Hoe werkt het?

Het idee is simpel: je streamt de camera van je telefoon naar je laptop, laat die live beelden uitlezen in een Python-programma, en laadt daaroverheen een 3D-render van je ontwerp. Vervolgens zorg je ervoor dat je met je muis de render kunt draaien, bewegen en in- en uitzoomen.

Om dit project te laten werken, moeten de volgende onderdelen goed samenwerken:

Je telefooncamera naar je laptop streamen

Dit zorgt ervoor dat de live beelden van je telefoon beschikbaar zijn op je laptop. Dit kan bijvoorbeeld via een app of netwerkverbinding die de camerafeed deelt.
Je camerabeeld live laten uitlezen door Python

Het Python-programma ontvangt de videofeed en kan die in realtime verwerken. Hiervoor gebruiken we een library zoals OpenCV, die videobeelden kan binnenhalen en bewerken.
Je .stl-bestand inlezen en tekenen

Het 3D-model van je ontwerp, opgeslagen als een .stl-bestand, wordt door het programma ingeladen en omgezet naar een 3D-render. Deze render tekenen we vervolgens over het live camerabeeld heen.
Interactie met het 3D-model mogelijk maken

Via muisbewegingen kun je het model draaien, verplaatsen en in- en uitzoomen. Dit maakt het mogelijk om je ontwerp vanuit verschillende hoeken en afstanden te bekijken, alsof het echt in de ruimte staat.

Door deze onderdelen samen te brengen ontstaat een augmented reality ervaring waarmee je eenvoudig kunt zien hoe jouw 3D-ontwerp in de echte wereld past — zonder dat je eerst hoeft te printen!

Je telefooncamera naar je laptop streamen

Voor het streamen van je camera naar je laptop zijn er ontzettend veel apps en programma’s beschikbaar. Ik heb gekozen voor een simpel en gebruiksvriendelijk programma genaamd Iriun. Dit werkt heel makkelijk: je installeert de software op je Windows-laptop en de bijbehorende app op je telefoon. Vervolgens maak je via USB of via wifi (als je telefoon en laptop op hetzelfde netwerk zitten) automatisch verbinding. Je laptop herkent je telefooncamera dan als een gewone webcam.

Het mooiste is dat je verder niets hoeft in te stellen. Zolang je de app op je telefoon en het programma op je laptop open hebt, maken ze automatisch verbinding en begint de camerafeed direct te streamen. Super eenvoudig! En er zat deze keer gewoon thee in de beker :)

Je camerabeeld laten uitlezen door python

Een erg bekende Python-library die veel wordt gebruikt voor dit soort projecten is openCV. OpenCV is een open-source computer vision library die je kunt gebruiken om eenvoudig en snel dingen te doen zoals beeldherkenning, het bewerken van beelden of bijvoorbeeld het herkennen van ArUco-markers. Er zijn online talloze tutorials te vinden over hoe je je camerabeeld kunt uitlezen met OpenCV, maar gelukkig is het helemaal niet zo ingewikkeld.

 cap = cv2.VideoCapture(1)

    fx, fy = 1280, 720
    cx, cy = fx/2, fy/2
    camera_matrix = np.array([[fx,0,cx],
                              [0,fy,cy],
                              [0,0,1]], dtype=np.float32)
    dist_coeffs = np.zeros((5,1))

Zoals hierboven te zien is, is het erg makkelijk om je camerabeeld in Python te gebruiken. Je geeft alleen aan welke camera-input je wilt gebruiken (meestal is 0 je standaard webcam, 1 is een externe camera) en welke resolutie je instelt.

Daarnaast kun je, als je meer precisie nodig hebt, een camera matrix toevoegen. Deze matrix beschrijft hoe je camera de echte wereld vertaalt naar pixels. Daarmee kun je vervormingen corrigeren en zorgen dat 3D-objecten realistischer en nauwkeuriger over je camerabeeld worden gelegd. Vooral in augmented reality-projecten, zoals dit, is dat handig om je 3D-modellen netjes te laten aansluiten op de echte wereld.

Je .stl-bestand inlezen en tekenen

Het lastigste deel van dit project was het netjes intekenen van de STL-bestanden in het live camerabeeld. Er bestaan namelijk Python-library’s die STL-bestanden als 3D-model kunnen weergeven, maar die openen zich altijd in een eigen 3D-viewer. Dat werkt prima om een ontwerp te bekijken, maar niet als je het model rechtstreeks over een videostream wilt projecteren.

Om het model in het camerabeeld te krijgen, moet je de 3D-coördinaten van het STL-bestand eerst omrekenen naar 2D-pixelposities. Dat gebeurt met cv2.projectPoints(). Hiermee worden de punten van het 3D-model geprojecteerd op het camerabeeld, zodat je het ontwerp écht als een overlay ziet.

def draw_filled_mesh(frame, mesh, rvec, tvec, camera_matrix, dist_coeffs, color=(150, 150, 200), alpha=0.8):
    vertices = mesh.vertices
    faces = mesh.faces

    imgpts, _ = cv2.projectPoints(vertices, rvec, tvec, camera_matrix, dist_coeffs)
    imgpts = imgpts.reshape(-1, 2).astype(np.int32)

    overlay = frame.copy()

    for face in faces:
        pts = imgpts[face]
        cv2.fillPoly(overlay, [pts], color)

    cv2.addWeighted(overlay, alpha, frame, 1 - alpha, 0, frame)
    return frame


def draw_wireframe(frame, mesh, rvec, tvec, camera_matrix, dist_coeffs, color=(0, 255, 0), thickness=1):
    vertices = mesh.vertices
    edges = mesh.edges_unique

    imgpts, _ = cv2.projectPoints(vertices, rvec, tvec, camera_matrix, dist_coeffs)
    imgpts = imgpts.reshape(-1, 2).astype(int)

    for edge in edges:
        pt1 = tuple(imgpts[edge[0]])
        pt2 = tuple(imgpts[edge[1]])
        cv2.line(frame, pt1, pt2, color, thickness)

    return frame

Om het STL-model goed zichtbaar te maken in het camerabeeld gebruik ik twee manieren van tekenen: gevuld en als draadmodel.

draw_filled_mesh

Deze functie tekent de vlakken van het 3D-model in. Eerst worden alle 3D-vertices van het model geprojecteerd naar 2D met cv2.projectPoints(). Daarna pakt de code de faces (de driehoekjes waar het model uit is opgebouwd) en vult die één voor één in met een kleur. Door dit over een kopie van het camerabeeld te tekenen en vervolgens half-transparant samen te voegen met cv2.addWeighted(), krijg je een mooi “glanzend” effect waarbij het model zichtbaar is maar de echte wereld er nog doorheen schijnt.
draw_wireframe

Deze functie tekent juist de randen van het 3D-model. Ook hier worden de 3D-coördinaten omgezet naar 2D-pixels. Daarna loopt de code alle unieke randen van het model af en tekent met cv2.line() groene lijntjes in het camerabeeld. Dit draadmodel geeft extra detail en maakt de vormen van het model beter herkenbaar.

Door beide functies samen te gebruiken ontstaat een duidelijk en realistisch beeld: je ziet het model als een transparant object met zowel vlakken als lijnen, waardoor het goed opgaat in de echte omgeving.

Interactie met het 3D-model mogelijk maken

Om ervoor te zorgen dat je het 3D-model goed kan oriënteren voor waar je het wil plaatsen moet je het kunnen verplaatsen over het camerabeeld, draaien en in en uitzoomen. Om het zo gebruiksvriendelijk te maken is er gekozen om dit allemaal met de muis te doen net zoals je dat zou doen bij een 3d-design programma zoals Fusion of Solidworks.

# Globale variabelen voor muis-rotatie
yaw, pitch = 0.0, 0.0
last_x, last_y = None, None
dragging_left = False
dragging_right = False

zoom = 1.0

tx, ty, tz = 0.0, 0.0, 0.0

def mouse_callback(event, x, y, flags, param):
    global yaw, pitch, last_x, last_y
    global dragging_left, dragging_right
    global tx, ty, tz, zoom

    if event == cv2.EVENT_RBUTTONDOWN:
        dragging_left = True
        last_x, last_y = x, y

    elif event == cv2.EVENT_LBUTTONDOWN:
        dragging_right = True
        last_x, last_y = x, y

    elif event == cv2.EVENT_MOUSEMOVE:
        if dragging_left:
            dx = x - last_x
            dy = y - last_y
            last_x, last_y = x, y

            yaw += dx * 0.01
            pitch += dy * 0.01
           # pitch = max(min(pitch, np.pi/2), -np.pi/2)

        elif dragging_right:
            dx = x - last_x
            dy = y - last_y
            last_x, last_y = x, y

            tx += dx * 0.001
            ty -= dy * 0.001

    elif event == cv2.EVENT_RBUTTONUP:
        dragging_left = False

    elif event == cv2.EVENT_LBUTTONUP:
        dragging_right = False

    elif event == cv2.EVENT_MOUSEWHEEL:
        if flags > 0:
            zoom += 0.05
        else:
            zoom -= 0.05
        zoom = max(0.1, min(zoom, 3.0))


def get_rvec_from_yaw_pitch(yaw, pitch):
    Ry = np.array([[np.cos(yaw), 0, np.sin(yaw)],
                   [0, 1, 0],
                   [-np.sin(yaw), 0, np.cos(yaw)]])
    Rx = np.array([[1, 0, 0],
                   [0, np.cos(pitch), -np.sin(pitch)],
                   [0, np.sin(pitch), np.cos(pitch)]])
    R = Ry @ Rx
    rvec, _ = cv2.Rodrigues(R)
    return rvec

In de code gebeurt dat via de functie mouse_callback. Deze luistert naar muisacties en past de positie van het model aan: met de rechtermuisknop draaien, met de linkermuisknop verschuiven en met het scrollwiel in- of uitzoomen. De waarden voor rotatie, positie en zoom worden telkens opgeslagen in variabelen.

De functie get_rvec_from_yaw_pitch zet die rotatievariabelen (yaw en pitch) vervolgens om naar een rotatiematrix die OpenCV kan gebruiken om het model correct over het camerabeeld te tekenen.

Eindresultaat

Als je dit en nog meer code allemaal samen voegt dan komt er een simpel programma uit dat ervoor zorgt dat je .stl bestanden in het echt kan bekijken. Zoals je hieronder kan zien kan dit gebruikt worden om een beeld te krijgen van hoe je ontwerpen in de echte wereld eruit gaan zien.

Hierboven heb ik bijvoorbeeld een bakje ontworpen die ik naast het whiteboard wil hangen door de AR viewer weet ik nu ongeveer hoe die eruit gaat zien als ik hem uitprint.

Verbeterpunten

Als ik ooit nog aan deze code zou sleutelen zou ik een paar dingen toevoegen.

Betere manier van draaien. Het is op dit moment nog erg lastig om te draaien met alleen de muis.
Andere kleuren toevoegen. Zorgen voor meer kleur zodat je ook meteen dat kan testen wat er mooier uitziet.
Schaal toevoegen. Doormiddel van Aruco markers of iets anders een schaal toevoegen zodat je weet hoe groot je design is op de camera.
Betere cameramatrix. Op dit moment is de cameramatrix niet gekalibreerd op mijn eigen camera. Als dit wel was gedaan was de camera nog preciezer geweest.

Knikkerbaan

Daniël R — Tue, 21 Oct 2025 13:00:03 +0000

Als sinds jong af aan heb ik interesse gehad in knikkerbanen ik maakte ze zelf van lego, kapla of papier. Ik keek altijd naar video’s van enorme knikkerbanen gemaakt van lego en ben zelfs een keer wezen kijken op een conventie. Zelfs nu nog steeds kijk ik vaak video’s van engineers die vette banen maken door ze zelf te ontwerpen en printen(denk vooral aan Engineazy). Ik heb altijd al zelf een kleine knikkerbaan willen ontwerpen die doormiddel van een simpel bewegend mechanisme oneindig door kan lopen. In deze blog vertel ik over hoe ik dat eindelijk gedaan heb en waar ik tegenaan ben gelopen.

Het idee is simpel de knikker wordt door de armen over de baan omhoog getild en rolt met zwaartekracht weer naar beneden.

Na het printen van de eerste versie kwam ik achter een groot probleem de muren van de baan waren namelijk 3mm wat niet hoog genoeg was en met een beetje snelheid stuiterde de knikker daar overheen. Daarom is er een 2de versie gemaakt waar alles 3mm omhoog is getild zodat de muren 6mm hoog waren. Dit werkte erg goed.

Grote designfout

Als je al een beetje oplettend was kan je zien dat ik een grote designfout heb gemaakt waar ik pas na het printen achter ben gekomen. Zoals je kan zien in de afbeelding draaien alle drie de tandwielen die gebruikt worden om de bal naar boven te helpen dezelfde kant op. Dat zou niet moeten gebeuren de middelste moet eigenlijk de andere kant opdraaien.

Omdat ik geen zin had om de complete knikkerbaan opnieuw te ontwerpen en alles opnieuw te printen wat weer een aantal dagen zou duren heb ik ervoor gekozen om een oplossing te bedenken die dit zou verhelpen.

De oplossing

De oplossing was niet super netjes maar werkt wel in plaats van 3 tandwielen in het midden is er gekozen voor een grote. Als pluspunt zou alles nu de goede kant opdraaien alleen zou de middelste drager 3 keer zo sloom draaien als de andere twee wat op zichzelf niet een groot probleem is maar er wel minder netjes uitziet.

Het eindresultaat

Na een volle prullenbak met test prints en gefaalde ontwerpen is die klaar. Mijn eerste knikkerbaan ik heb er veel van geleerd waaronder dat je soms 5 keer iets checken niet genoeg is en ik ben nog beter geworden in Fusion360.

Hart fidget toy

Daniël R — Tue, 21 Oct 2025 12:57:38 +0000

Ik heb ADHD, best veel ADHD en dat betekend dat ik constant zit te kutten met dingen. ik kras schriften vol ik teken op mezelf en ik tik met pennen. Iets waar ik al veel jaren veel profijt van heb zijn fidget toys deze handige dingen helpen mij met opletten wanneer ik daar zelf moeite mee heb en zorgen er ook voor dat andere mensen niet compleet gestoord worden. Daarom leek het mij leuk om een eigen fidget toy te maken. Ik heb er voor gekozen om een hart te maken met drie tandwielen en initialen erop. Schattig, handig, en leert mij weer werken met nieuwe technieken

Design

Ik had als doel om de print zo makkelijk mogelijk te maken en zo weinig mogelijk bewegende onderdelen. Ook moest het robuust zijn en goed kunnen bewegen om dit op te lossen heb ik een systeem bedacht waardoor je de tandwielen in het hart kan klikken zodat ze niet weg kunnen. Zoals je kan zien kan je de tandwielen gemakkelijk in het hart klikken en doordat de er een kleine speling van een halve mm is kunnen de tandwielen bewegen.

Na het eerste design merkte ik dat de letters op de tandwielen te klein waren om te printen en de binnendiameter te stroef om te bewegen. Daarom heb ik versie 2 gemaakt waarbij de tandwielen over de as heen gaan zodat er grotere tekst op kan en ze beter kunnen draaien.

Ook heb ik ervoor gekozen om versie 2 25% groter te maken omdat de printer op dit formaat erg lastig precies kan printen wat problemen kan veroorzaken. Na nog wat extra aanpassingen en finetunen is er een resultaat uitgekomen wat makkelijk draait goed vastzit en niet snel kapot gaat.

Eindresultaat

Na het maken van versie 3 waarin ik in de tandwielen een overhang had gemaakt zodat de printer zonder supports kon printen en dit helemaal niet werkte ben ik teruggegaan naar versie 2. Ik kwam er namelijk achter dat het stroef draaien van versie 2 verholpen werd na een paar minuten van ronddraaien.

Afstandsbediening houders

Daniël R — Tue, 21 Oct 2025 12:54:59 +0000

Een probleem waar ik al langere tijd tegenaan loop is dat mijn kamer niet groot genoeg is maar ook niet goed genoeg is ingedeeld voor een nachtkastje. Dat betekend dat er naast mijn bed op de grond altijd een aantal spullen liggen zoals telefoons, opladers en afstandsbedieningen. Vooral de laatste de afstandsbedieningen erger ik me al een tijdje aan. Toen bedacht ik me dat ik toegang heb tot een 3d-printer en designsoftware dus het probleem hartstikke goed zelf kan oplossen. Het gaat over de volgende twee afstandsbedieningen.

Er zijn een paar belangrijke eisen waaraan het design moet voldoen

Ze moeten in de muur naast me bed geschroefd kunnen worden
De afstandsbedieningen moeten er stevig inzitten
De afstandsbedieningen moeten er makkelijk in en uit te halen zijn
De houders mogen niet te lelijk zijn en niet teveel uitsteken

Na een korte tijd ontwerpen zijn daar deze twee ontwerpen uitgekomen elegant en simpel. De houders zijn beide voorzien van twee gaten voor schroeven zodat ze opgehangen kunnen worden en kunnen makkelijk geprint worden.

Na de eerste print werkte de LED afstandsbediening houder perfect. De houder voor de TV afstandsbediening werkte nog wat minder de 2 lipjes aan de voorkant zorgde ervoor dat die er moeilijk in en uitging omdat je hem er niet in kon schuiven zoals bij de andere houder. om dit op te lossen moeten deze lipjes kleiner om te testen hoe klein heb ik het eerste prototype afgeschuurd tot die wel goed werkt. Ook kwam ik erachter dat die veel kleiner kon en dan alsnog goed zou werken dus heb ik dat ook gedaan.

Eindresultaat

Al is dit een van de makkelijkere projecten is het wel een van mijn beste hierdoor ligt er namelijk minder troep om de grond en het ziet er nog eens netjes uit ook.