Unreal Engine – Project Villa – Prototyping (whiteboxing)

print
Deze handleiding maakt deel uit van het programmeertraject:



Wat vooraf ging


Inleiding

De cursisten krijgen de opdracht hun/een huis uit te werken als een level voor een 3D game of als architecturale visualisatie (ArchViz).

Ik leg mezelf volgende beperkingen op:

  1. Alles dient te gebeuren met materiaal dat gratis permanent beschikbaar is via de Marketplace van Unreal Engine.
  2. Vermits ik start vanuit een grondplan wil ik alles op de centimeter nauwkeurig (waar er afmetingen beschikbaar zijn). De standaard eenheid in  Unreal Engine is een centimeter, dit helpt.
  3. Ik maak geen eigen assets aan, ik werk dus enkel met wat gratis en permanent beschikbaar is.

De cursisten dienen zich niet aan deze beperkingen te houden voor de opdracht. Ze zijn vrij om aankopen te doen of hun kennis van andere programma’s (zoals Blender) te gebruiken.

Doelstellingen

De doelstellingen van dit project zijn:

  • Leren werken met het programma Unreal Engine.
  • Kennis maken met basisbegrippen als meshes, materialen, licht,….
  • De eerste stappen zetten in het programmeren met Blueprints.
  • De mogelijkheden van Unreal Engine aftasten.

Ik hoop dat we hierin slagen.

Fasen

De 4 fasen voor het bouwen van een level worden gevolgd:

In deze handleiding start ik met de Prototyping die ik volledig uitwerk met BSP Brushes (Geometry).

Opmerking, deze reeks is geen stap voor stap uitleg maar ik pik er een aantal belangrijke punten uit die extra aandacht verdienen, alsook een de workflow die ik volgde.

Aan de slag

  • Kies het Default template voor het nieuwe level. Geef het een passende naam en plaats het eventueel in een eigen folder.

We kunnen beginnen.


Referentie, inspiratiebronnen

U vertrekt vanuit een idee. Het idee is, een visuele, “gamelevel” weergave van een huis.

Vervolgens zoekt u referentiemateriaal, inspiratiebronnen.

De inspiratie heb ik gezocht bij de firma Blavier. Dit is geen reclame want ik ken die mensen niet en heb dus geen idee of ze goed zijn of niet maar ze hebben wel een catalogus die u kunt downloaden met grondplannen en voorbeelden van huizen. Een goede bron van inspiratie dus.

Ik leg de lat voor mezelf nogal hoog en ga voor dit ontwerp:

De cursisten mogen het iets kleinschaliger houden!


Landschap

Het Default Template komt met een Static Mesh Floor. Ik ga dit echter vervangen door een eenvoudig Landscape.

  • Ga naar het Landscape Panel.
  • Kies M_Ground_Grass als Material.
  • Pas eventueel de Location en de Scale aan en kies voor Create.

  • Verwijder de Static Mesh Floor en Build het project, zodat de schaduw van de Static Mesh Floor (en de lijnen in het gras) verdwijnt.

Landschap voegt extra geometrie toe, die, wanneer u in bv. Top-view kijkt voor “verwarring” kan zorgen.

Indien dit het geval kunt u eventueel het Landschap onzichtbaar maken (in de editor) door in de World Outliner het oogje uit te vinken.

Opmerking

Meer gaan we met het landschap niet doen. Wie wilt mag een tuintje aanleggen maar ik ga dit niet bespreken in dit project. Dit project draait rond de villa zelf.


Vloer

Vertrek vanuit een Geometry Box die u meteen de nodige afmetingen geeft.

Om aan de nodige afmetingen te komen bestudeert u het grondplan nauwkeurig.

Ik heb 2 basistechnieken ter beschikking via Geometry Editing. Alle aanpassingen, of selecties, niet van het gehele object maar van vertices (punten), edges (randen) of faces (zijden/vlakken) gebeurt steeds in Geometry Editing.

Split

U kunt een vlak splitsen in 2.

  • In Geometry Editing, selecteer de edge/ rand die u wilt splitsen en klik op Split.

  • Er wordt steeds in het midden van de geselecteerde rand/edge gesplitst.

  • Indien nodig kunt u de punten (vertices) of rand (edge) selecteren en verplaatsen. In onderstaand voorbeeld heb ik de rand verplaatst (en nadien weer ongedaan gemaakt). Eerst selecteren en dan de groene pijl verslepen (die in de afbeelding geel ziet omdat hij geselecteerd is).

Extrude

Extruden is als het ware een vlak “uitrekken”.

  • Selecteer het vlak dat u wilt extruden en klik op Extrude.

  • Geef de exacte Lenght (afstand) in (bv. 100 cm) en klik op Apply.

De vloer leggen

Omdat onze villa een uitstekende veranda heeft ben ik begonnen met een Geometry Box van:

  • x – 940
  • Y – 822 (tot aan de veranda en dus niet de volle 1300)
  • Z – 20 (een zelfgekozen hoogte)

Vervolgens heb ik het rechtse zijvlakt geëxtrudeerd met 438 (de breedte van de veranda) en nogeens met 40 (de rechtse in/uitsprong).

Dit creëerde op zijn beurt een vlak om de veranda naar boven te extruden met 225.

Vervolgens heb ik via splitsen en verplaatsen de ruimten opgedeeld die een eigen vloertextuur kunnen krijgen (de inkom, bureau en wasplaats). Hier kwam wat reken en meetwerk bij zien.

Om alles te visualiseren heb ik reeds gekleurde materialen toegevoegd die ik aangemaakt heb volgens de besproken techniek. Ik verkies een kleurrijke Whiteboxing.

De vloer is klaar, blijken de afbakeningen van de ruimten niet 100% te kloppen dan kan ik later nog steeds de vertices/edges van de vloer verplaatsen.

Afmetingen

Als u werkt met Geometic Brushes kunt u beter rechtsreeks de afmetingen ingeven onder Brush Settings in plaats van te schalen. Eén eenheid is één centimeter. Schaalt u toch, dan wordt de afmeting ingegeven bij de Brush Settings vermenigvuldigd met de schaalfactor.

Weet dat u afstanden kunt opmeten.

  • Ga naar een Orthographic View zoals bv. Top.
  • Sleep met de middelmuisknop ingedrukt tussen de twee punten die u wilt opmeten.

Kleurcodes

Ik heb ook al meteen kleurcodes (materialen in een bepaalde kleur) toegevoegd om het toekennen van de eigenlijke materialen te vereenvoudigen.

Om alles per kleur (materiaal) uit te lijnen:

  • Selecteer een bepaald materiaal (kleurcode).
  • Kies, in het Detail panel GeometrySelectSelect Matching Material om alle gelijke materalen te selecteren.

  • Onder Alignment kiest u vervolgens de gewenste Alignment, ik koos steeds voor Planar. Het raster in het gekleurde materiaal komt nu van pas om te zien of de uitlijning oké is.


Muren

Na enig rekenwerk kwam ik tot de volgende afmetingen:

  • Buitenmuren = 35 centimeter
  • Binnenmuren = 14 centimeter (staat aangegeven op de planning)
  • Plinten = 7 centimeter (ruwe schatting)
  • Hoogte gelijkvloers = 260 centimeter (niet aangeduid dus kies ik de standaardhoogte)
  • Hoogte eerste verdiep = 240 centimeter (niet aangeduid dus kies ik de standaardhoogte)

Om de muren aan te maken hebt u twee technieken:

  1. U plaatst iedere muur afzonderlijk.
    Voordeel – een muur is snel te plaatsen en gemakkelijk te verplaatsen als hij niet juist staat. Een kamer kan in zijn geheel geplaatst worden.
    Nadeel – meer rekenwerk om alles exact te krijgen en veel meer afzonderlijke objecten/actors die moeten gemanaged worden.
  2. U begint vanuit een hoekpunt en past vervolgens overal extruden op toe.
    Voordeel – nauwkeurig werk (heel eenvoudig om op de centimeter nauwkeurig te werken).
    Nadeel – als u achteraf fouten ontdekt is het vaak heel moeilijk om correcties aan te brengen. Vaak moet u opnieuw splitsen of vertices samenvoegen via Weld (hier niet geactiveerd omdat ik geen vertices geselecteerd heb).

Extruden (de methode waar ik uiteindelijk van afgestapt ben)

Ik heb geëxperimenteerd met extruden. Om het nadeel te beperken doet u het best niet de volledige verdieping in één beweging (hoewel het kan en ik het ook zo gedaan heb) maar deelt u de verdieping op in kleinere delen zodat u eventueel, indien nodig, gemakkelijk een deel kunt herbeginnen.

Ik ben begonnen met een Geomety Box van:

  • X – 35
  • Y – 35
  • Z – 7 (de hoogte van de plint)

Plaats deze hoeksteen in een hoekpunt van de vloer.

  • Ik heb dit gedaan in Top view, met een redelijke grote schaal (50) voor het raster. Sleep vervolgens de hoeksteen in de buurt van de hoek van de vloer en klik met de rechtermuisknop om de hoeksteen in de hoek van een raster, waar ook de vloer begint, te snappen.

Terug in Perspective view kunt u, indien nodig, met de End-toets de hoeksteen laten “vallen” op zijn plaats.

  • Deze hoeksteen heb ik dan naar boven geëxtrueerd met 253 (klik op Apply) om tot de hoogte van 260 (de hoogte van de muur) te komen.

  • Selecteer de binnenrand.

Met het grondplan in de hand, extrude achtereenvolgens:

  • 487 (bureel)
  • 14 (binnenmuur)
  • 307 (inkom)
  • 14 (binnenmuur)
  • 408 (wasplaats)
  • 35 (buitenmuur)

Als alles goed verlopen is valt alles mooi samen aan de andere kant.

  • Aan de binnenkant van de muur, selecteer de voorziene ruimte voor de plint en extrude deze met 1.

  • Selecteer de vlakken die voorzien zijn voor de binnenmuren (deze van 14 breed) en extrude deze naar de gewenste lengete (hier 120, net iets breder dan de deur).

Het voorlopig resultaat ziet er als volgt uit:

Niet moeilijk en vrij snel, oké, maar…

Aanpassingen bleken moeizaam!

Te vaak moest de geometrie aangepast worden en uiteindelijk ben ik afgestapt van deze werkwijze. Praktisch, toen ik ramen toevoegde op de eerste verdiep bleek dat een muur geen diepte meer had (technisch, de “Normals” wezen de verkeerde kant uit). Het was haast onbegonnen werk dit te corrigeren waardoor ik een deel van de verdieping moest herbeginnen.

Tenslotte is dit de Prototyping fase en is snelheid en “gemakkelijk aanpasbaar zijnbelangrijker dan op de centimeter nauwkeurig of nu reeds plinten voorzien.

Iedere muur afzonderlijk

Uiteindelijk ben ik gegaan voor de werkwijze waarin iedere muur een afzonderlijk object is.

Laat ons beginnen met de “voormuur”.

Maakt u daar nu één lange muur van 1300 cm lang van?

Nee.

Waarom niet? Wel, eigenlijk is het niet één lange muur maar een muur voor het Bureel, een muur voor de Inkom en een muur voor de Wasplaats. Het is belangrijk dit onderscheid te maken omdat iedere kamer zijn eigen textuur/materiaal (behang) moet kunnen hebben. Maakt u slechts één lange muur, dan kunt u slechts één textuur/materiaal toekennen. Waar dit nog werkt voor de buitenkant is dit dus niet praktisch voor de binnenkant waar het Bureel, Inkom en Wasplaats een eigen textuur/materiaal moet kunnen hebben.

De afmetingen zijn nu:

Bureel

  • 35 (buitenmuurhoek)
  • 487 (Bureel)
  • 7 (helft van de binnenmuur met de Inkom)

Inkom

  • 7 (helft van de binnenmuur met het Bureel)
  • 307 (Inkom)
  • 7 (helft van binnenmuur met Wasplaats)

Wasplaats

  • 7 (helft van de binnenmuur met de Inkom)
  • 408 (Wasplaats)
  • 35 (buitenmuurhoek)

Binnenmuur naar WC

In de binnenmuur naar de wc past juist een deur. Er staan geen exacte afmetingen op het plan dus moeten we hier zelf een keuze maken. Het Deurframe (SM_DoorFrame) uit de StarterContent, dat we gaan gebruiken, is 114 cm breed. We maken die muur dan ook 114 cm breed zodat het deurframe er net inpast.

WC

Voor de wc heb ik geen 4 muren gemaakt maar een Box die ik hol gemaakt heb met een Wall Thickness van 14 cm.

Met wat rekenwerk kwam ik tot de volgende afmetingen.

  • X – 180, de diepte is berekend via 280 (diepte bureel) – 114 (muur naar wc) + 14 (dikte binnenmuur wc).
  • Y – 148, de breedte is berkend op basis van 120 (diepte zelfgekozen) + (2 * dikte binnenmuur wc).
    Belangrijk, omdat deze muur 2 verschillende  texturen/materialen kan hebben (Inkom en Bureel) heb ik een Split toegevoegd (net niet in het midden maar iets meer naar de kant van het Bureel (zoals u kunt zien op het grondplan)).
  • Z – 288, de hoogte is 260 + (2 * dikte binnenmuur wc). Deze extra hoogte al voor een deel in de vloeren verdwijnen maar moet hier worden meegegeven om de muurhoogte van 260 te behouden.

Tips

Nog een paar tips voor het plaatsen van de muren:

  • Vertrek van een reeds bestaande muur die u kunt kopiëren door de Alt-toets ingedrukt te houden en te slepen.
  • Begin met de muur op het zicht aan te maken in Perspective View.
  • Positioneer exact in een Orthographic View zoals Top.
  • Maak andere storende objecten tijdelijk onzichtbaar (oogje in World Outliner).
  • Klik een hoekpunt aan met de rechtermuisknop om dit hoekpunt op het raster te plaatsen (zeker doe indien een hoekpunt niet op een raster valt).
  • De verplaatsingswidget bevindt zich standaard in het midden van de brush, dit is niet altijd handig om de brush correct te verplaatsen. Klik met de rechtermuisknop op een hoekpunt om de verplaatsingswidget op een hoekpunt te plaatsen.
  • Werk altijd met Snap to Grid aan en kies een gepaste schaal, grotere schaal voor grote verplaatsingen, kleine schaal van 1 voor het exact positioneren.
  • Laat een object op het onderstaande object “vallen” met de End-toets.

Ramen, deuren en trappen

Ramen en deuren, dit zijn kubussen (Box) met de afmetingen van respectievelijk het raamframe en het deurframe die u uitsnijdt. Met andere woorden een Box met Brush Type Subtractive).

Deuren

Voor de uitsnijding van de deuren neem ik deze waarden over alleen maak ik de diepte (Y-as) iets dieper dan de binnenmuur van 14 cm. Merk nogmaals het Brush TypeSubtractive op.

De buitendeur heb ik breder gemaakt.

Hieronder ziet u de buitendeur en de binnendeur vanuit de Inkom naar het Bureel en de WC.

Ramen

Zoals u merkt, op het grondplan, kunnen ramen verschillende afmetingen hebben. Voor de basis heb ik de waarden van het Raamframe (SM_WindowsFame) uit de StarterContent overgenomen.

Hier is het resultaat met uitgesneden ramen en deuren.

Trap

Nu het gelijkvloers uitgewerkt is heb ik de vloer van het eerst verdiep gelegd en van de nodige opsplitsingen (voor de badkamers die een andere vloerbekleding krijgen) voorzien.

Merk op dat deze vloer ook reeds de trap bevat en het “gat” in de vloer boven de trap. Deze trap is uitgesneden via een (BoxBrush Type Subtractive). Weet, u kunt enkel uitsnijden uit datgene dat al aanwezig is en aangezien de trap moet doorlopen door deze uitsnijding is de werkwijze als volgt:

  1. Leg eerst de vloer.
  2. Snij de opening uit, uit de vloer via een (BoxBrush TypeSubtractive).
  3. Plaats de trap zodat de uitsnijding niet van toepassing is op de trap zelf.

Om de trap zelf uit te hollen, heb ik de trap gekopieerd en de kopie Subtractive gemaakt.

Werk nu op een gelijkaardige wijze de eerste verdieping uit.

Vervolgens het grondplan bouwen we nog een muurtje van 35 cm, reken maar na, op zolder.


Dak

Klein dak

Laat ons, om in vorm te geraken, beginnen met het kleinste dakje achteraan.

Om te beginnen heb ik de muur verhoogd met nog eens 80 cm (een schatting vermits ik niet de exacte gegevens heb).

  • Plaats hier nu een Box op met de juiste afmetingen:

Vervolgens moet u het dakje in twee splitsen volgens de geziene techniek, die ik hier nog even herhaal.

  • In Geometry Editing, selecteer de edge/ rand die u wilt splitsen en klik op Split.

  • Er wordt steeds in het midden van de geselecteerde rand/edge gesplitst.

We moeten nu alle bovenste vertices (punten) laten samenvallen met het achterste middelste punt.

  • In Geometry Editing, selecteer eerst het achterste middelste punt.
  • Met de Ctrl-toets ingedrukt, selecteer vervolgens de andere bovenste vertices (punten) en kies voor Weld om deze allen te laten samenvallen met het eerst geselecteerde punt.

Hieronder ziet u het resultaat.

Om dit dak van binnenuit hol te maken:

  • Maak een kopie, sleep het een beetje naar beneden, schaal het heel lichtjes (0.99 over de Y-as en Z-as) en kies Brush TypeSubtractive.

Omdat het dakje wat over de rand komt heb ik het nog met 1.05 geschaald over de X-as en Y-as (ik had ook van in het begin een iets bredere Box kunnen nemen, maar omdat we toch over geen exacte maten beschikken,…).

Groot dak

Het grote dak is gelijkaardig te maken maar net iets anders. Om te beginnen ga ik nu wel met een iets grotere kubus starten, zodat ik achteraf niet moet schalen (hoewel dit nu ook niet zo dramatisch was).

Ik tel aan beide kanten 10 cm bij, het overhangen, en dat brengt de afmetingen op 1320 en 960.

Maar wat is nu de hoogte? We kennen ook de hoek = 35° (zie grondplan). Met deze gegevens, de breedte van 1320 en een hoek van 35° ga ik naar driekoekberekenen.be en ik kom uit op een hoogte van ongeveer 462.

  • Split eerst de Box in 3.

  • Voeg een “horizontale” split toe.

  • Gebruik Weld om de nodige punten samen te voegen.

  • Selecteer en Optimize de geometrie.

Maak de dakvenstertjes aan op basis van een “hollow box” met een uitsnijding voor het achterliggende grote dak. Pas nadien voegt u een kopie van het grote dak toe dat u Subtract van het dak en in één beweging van de dakvensters. Niets nieuws dus dit zou moeten lukken.


Afwerking

Afwerking tijdens prototyping? Is dat niet tegenstrijdig aan het doel van prototyping?

Klopt, met afwerking bedoel ik dan ook niet meer dan het toevoegen, afbakenen van onderdelen van de woning, al was het maar opdat we ze later niet zouden vergeten.

Technisch is er niets speciaals meer te vertellen, dus toon ik enkel wat afbeeldingen.

Venstertabletten

Dakgoten en afvoer

Schoorsteen

De schoorsteen loopt doorheen het huis en is ook aan de binnenkant te zien.

Houten balken onder het dak

Eén keer aanmaken, groeperen en vervolgens kopiëren.

Terras

Merk op dat ik het raam van het uitstekende deel verkleind heb, meer in overeenkomst met het grondplan.

Blocking Volume

Tenslotte heb ik rond het landschap Blocking volumes geplaatst, opdat we er niet domweg zouden afvallen.


Conclusie

De Whiteboxing/Prototyping fase is er om een ruwe schets te geven van het level.

Opdat ik vanuit een grondplan vertrok is dit veel gedetailleerder, exacter geworden dan een traditionele Whiteboxing. Deze exactheid zorgde voor extra rekenwerk en maakte her losjes afbakenen van de omgeving niet mogelijk.

Deze Whiteboxing heeft dan ook de nodige tijd in beslag genomen en langer geduurd dan strikt nodig, al zal het reeds opdelen in specifieke kamers en het reeds toekennen van verschillende materialen via kleurcodes tijdwinst opleveren in de volgende fase.

Geef een reactie

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

  • Abonneer je op deze website d.m.v. e-mail

    Voer je e-mailadres in om je in te schrijven op deze website en e-mailmeldingen te ontvangen van nieuwe berichten.