prototyping

6.1 obj

1

obj

0D, 1D, 2D & 3D

Dimensies kun je uitdrukken in lengte, breedte en hoogte. Een punt is oneindig klein en heeft in grond van de zaak geen lengte, breedte en hoogte. Eén punt zou je de nulde dimensie kunnen noemen (0D). Een lijn heeft een lengte, maar geen breedte en hoogte. Een lijn heeft één dimensie (1D). Een rechthoek heeft een lengte en een breedte Een rechthoek heeft twéé dimensies (2D). Een kubus heeft een lengte, breedte en een hoogte Een kubus heeft drié dimensies (3D).

wat ga je doen

Je gaat leren hoe je een computer kunt aansturen om 3D-figuren te genereren. Als eerste ga je in een code-editor code schrijven die de vorm van de 3D-figuur definieert. Daarna voeg je textures (uiterlijk) toe om het oppervlak van de 3D-figuur bepaalde eigenschappen te geven. Uiteindelijk koppel je het uiterlijk (een afbeelding) en de vorm (code) aan elkaar en krijg je bijvoorbeeld een 'Minecraft™' achtige figuur.

.OBJ bestanden

Een veelgebruikt 3D computerbestand is het .obj bestand. In een .obj bestand worden eerst alle hoekpunten gedefinieerd. Als alle punten met elkaar verbonden worden door lijnen dan krijgen we vlakken. Meestal zijn deze vlakken driehoeken of rechthoeken.

  • punt: vertex
  • lijn: edge
  • vlak: face

mesh

Het product van deze bewerking noemen we een mesh. Daarna kan er nog een textuur worden toegevoegd, door middel van een afbeelding. Textuur is de ligging, ruwheid en vorm van het materiaal van een oppervlak.

3D assenstelsel

Net zoals je bij een 2D assenstelsel één X-as en één Y-as hebt, heb je bij een 3D assenstelsel één X-as, één Y-as en één Z-as.

OBJ van kubus maken.

1 Teken op ruitjespapier een 3D assenstelsel.

  • Teken de z-as in een hoek van ±45° voren.
  • Teken een 3d assenstelsel en zet de namen van de assen er bij.
    De x-as en de y-as lopen zoals je gewend bent. De z-as loopt in feite naar voren
  • Zet de namen van de assen er bij.
  • Nummer de hoekpunten van 1 t/m 8.
  • Schrijf de coördinaten op van alle hoekpunten en nummer ze:
    • 1: (0,0,0)
    • 2: (0,0,4)
    • 3: (4,0,4)
    • 4: (4,0,0)
    • enz..
  • Open een code-editor (bijvoorbeeld Sublime Text™) of notepad (kladblok) op Windows™ of texteditor op Mac™.
  • Zet de hoekpunten er in op volgorde van de nummers van je hoekpunten.
    Vertice/vertex = v (Eng: hoekpunt).
    Gebruik format v x y z. 
    v 0 0 0
v 0 0 4
v 4 0 4
v 4 0 0
enz.
  • Zet daarna vlakken in het tekstbestand.
    faces/face = f (Eng: vlak)
    Gebruik het format f v1 v2 v3 v4 (v1 verwijst naar je eerste hoekpunt, enz) 
    f 2 3 7 6
    • Het is echter van belang dat de hoekpunten in de juist volgorde geplaatst worden.

kijkhoek

Een vlak bestaat in een .obj-bestand maar aan één kant. (Zoals je ook je gezicht (face) maar aan een kant hebt). Daarom is de volgorde belangrijk waarin je de hoekpunten opsomt. Vanaf de kant waar je kijkt ga je de nummers af, tegen de klok in.

  • Bekijk de kubus die je hebt getekend en noteer de hoekpunten waar je tegenaan kijkt tegen de klok in.
    f 2 3 7 6
  • Bekijk de kubus die je hebt getekend en vanaf de onderkant (kijkrichting) en noteer de hoekpunten waar je tegenaan kijkt tegen de klok in.
    f 1 4 3 2
  • Doe dit voor alle zes vlakken van de kubus.
  • Als het goed is heb je nu een bestand met 8 vertices (regels die beginnen met een v) en 6 faces (regels die beginnen met een f).
  • Sla het bestand op als .obj.

3D-Viewer

  • Zoek het .obj bestand op en open het bestand:
    • windows: open het bestand in 3d-Viewer of 3d Builder.
    • mac: open het bestand in preview (voorvertoning).
    • chromebook: open je bestand in 3dviewer.net.

 

textures

Texture toevoegen

Een texture is een afbeelding die je op een mesh kunt projecteren. In games en andere 3D objecten worden textures gebruikt om meshes meer realistisch te laten lijken.

2 Zoek of maak een plaatje wat we op een face (Eng: vlak) kunnen zetten; als het een vierkant plaatje is heb je geen vervorming.

  • Kies voor een vierkant plaatje i.v.m. vervorming.
  • Sla het bestand op in dezelfde map als waar de .obj staat.

materiaal definiëren

Om textures toe te kunnen voegen wordt een nieuw bestand gemaakt, waarin de materialen (en eventueel textures) gedefinieerd worden. In het voorbeeld wat hieronder gebruikt wordt worden twee afbeeldingen gebruikt: minecraft-head-face.png en minecraft-head-not-face.png.
minecraft-head-face.png bevat de texture voor de voorzijde van het 'Minecraft™ gezichtje' en minecraft-head-not-face.png bevat de texture voor de overige vijf vlakken van het Minecraft™ gezichtje'.

  • Open een nieuw bestand in je code-editor.
  • Zet op de eerste regels: 
newmtl headFace	
map_Kd minecraft-head-face.png	
newmtl headNotFace	
map_Kd minecraft-head-not-face.png
  • Sla het bestand op als kubus.mtl (in dezelfde folder!).

betekenis van de code

newmtl headFace
  • De variabele headFace gebruik je later weer in het .obj bestand.

map_Kd minecraft-head-face.png
  • Met map_Kd wordt de locatie van het bestand minecraft-head-face.png gedefinieerd.

newmtl headNotFace
  • De variabele headNotFace gebruik je later weer in het .obj bestand.

map_Kd minecraft-head-not-face.png
  • Met map_Kd wordt de locatie van het bestand minecraft-head-not-face.png gedefinieerd.

bestanden

Inmiddels heb je vier bestanden in dezelfde map staan:

kubus.obj
kubus.mtl
minecraft-head-face.png
minecraft-head-not-face.png

bestanden koppelen

kubus.obj
  ↔  
kubus.mtl

De informatie die in het .mtl bestand staat moet nog gekoppeld worden aan het .obj bestand.

code .obj bestand aanpassen

In het .obj bestand moet bepaalde code toegevoegd worden om de textures zichtbaar te krijgen op de kubus.

voorbereiding

  • Teken een kubus in een assenstelsel
    met max y=1 max x=1.
  • Schets je afbeelding in de kubus.
  • Nummer de hoekpunten 1 tm 4.
  • Zet bij elk hoekpunt de coordinaten.
  • Deze nummering is nodig om je afbeelding goed gedraaid op je mesh te krijgen.
  • Open het kubus.obj bestand.
  • Zet op de bovenste regel van het kubus.obj-bestand de volgende code: 
    mtllib kubus.mtl
  • Op deze manier geef je in het kubus.obj bestand aan dat informatie nodig is uit het kubus.mtl bestand

toewijzen van vertice (hoekpunten)

  • In je kubus.obj-bestand het je vertice (v) en de faces (f) gedefinieerd.
  • Plaats tussen de vertice (v) en de faces (f) de code met het volgende format: 
    vt 0 0 #coordinaten punt 1
vt 1 0 #coordinaten punt 2
enz.
  • Doe dit totdat je alle vier de punten hebt gedefinieerd.

toewijzen van faces (vlakken)

Uiteindelijk moet je de hoekpunten van de afbeelding koppelen aan de faces (f) in het kubus.obj bestand.

  • In het voorbeeld worden twee verschillende afbeeldingen gebruikt minecraft-head-face.png en minecraft-head-not-face.png.
  • In het bestand kubus.mtl is minecraft-head-face.png gekoppeld aan de variabele headFace
  • En in het bestand kubus.mtl is minecraft-head-not-face.png gekoppeld aan de variabele headNotFace
  • Deze koppeling kun je in het kubus.obj-bestand oproepen met de voldende code:
    usemtl headFace
  • Deze informatie moet aan de faces (f) toevoegen:
  • Dit doe je door de code van de faces (f) als volgt te wijzigen:
    oude code:
    f 2 3 7 6
    nieuwe code: 
    usemtl headFace
f 2/1 3/2 7/4 6/3
  • Nu is minecraft-head-face.png gekoppeld aan het eerste vlak.
  • minecraft-head-not-face.png wordt in het voorbeeld gebruikt voor de overige 5 vlakken.
  • Een van deze vlakken wordt als volgt gekoppeld: 
  • usemtl headNotFace
f 3/1 4/2 8/4 7/3
  • Koppel deze afbeelding aan de overige 5 vlakken.
  • Open het kubus.obj bestand in een 3D viewer.
credits: Gert-Jan van der Kooij

conceptmap

 

piramide

piramide

Een piramide (een vijfvlak) is net als een kubus een ruimtelijke figuur.

3 Maak een .obj-bestand van een piramide en koppel in een .mtl-bestand een texture toe.

  • , Post je eindresultaat (3D afbeelding) op je Padlet™