ENGLISH
Samen, waar je ook bent!

Samen, waar je ook bent!

virtueel samenkomen & netwerken

Workshop VR MetaSpaces bouwen met Mozilla Hubs

Zelf je eigen Virtuele MetaSpace bouwen? We helpen je graag op weg in deze maatwerk werksessie. Leer VR-ruimtes bouwen met Mozilla Spoke, het publiceren van eigen ruimtes naar Hubs en meer....

De bouwsessie vindt plaats via Zoom of Teams en de ruimte(s) die tijdens de sessies gebouwd worden. Een VR-bril is niet noodzakelijk. Ook met een computer of smartphone zijn deze ruimtes te bezoeken. Het bouwen zelf, kan het beste met een desktop of laptop computer.

 

Techworkshop, begeleid door Raoul Postel (CreativeHubs), maker, gediplomeerd docent in creatieve technologie.

Wat leer je?:

  • wat is social VR;
  • hoe werkt Mozilla Hubs;
  • leer MetaSpaces bouwen in Mozilla Spoke;
  • MetaSpaces online publiceren en delen.

 

Om te beginnen:

Je hebt een e-mail adres nodig, waarmee je kunt inloggen. Zodra je inlogt bij hubs.mozilla.com, ontvang je per mail een link waarmee je inlogt. Daarna kun je ruimtes bewerken en bouwen.

STAP 1 ONDERZOEK MOZILLA HUBS:
https://hubs.mozilla.com

  1. Ga naar: https://hubs.mozilla.com
  2. Maak een eigen Room (Create Room)
  3. Kies een avatar en typ je voornaam
  4. Bewaar de wijzigingen en ga de ruimte in (Join Room). Geef toestemming om microfoon.
  5. Loop rond in de ruimte met de pijltjes of met de AWSD-toetsen. Wat gebeurt er als je de Q en E toets gebruikt?
  6. Klik op de knop: 'More' en kies: 'Room info and Settings'. Kies een andere ruimte via 'Change Scene' en geef jouw ruimte een zelfbedachte Kamer-naam.
  7. Deel hierin een YouTube-video van je favoriete band/kunstenaar/influencer
    TIP: URL’s kun je kopiëren en plakken in je browservenster
    Je kunt ook afbeeldingen en PDF's in je browservenster slepen. Let op: alleen kleine bestanden (max. 1-2 mb) en video's (max. 4 mb).
  8. Hang 3 favoriete, op social-media gedeelde, foto’s in jouw ruimte.
Previous Slide
Next Slide

STAP 2 MAAK JE EIGEN AVATAR + GROEP-SELFIE

Je kunt zelf een Avatar maken die wat meer op je lijkt.  Zodra je die klaar hebt, dowload je een .glb-bestand. GLB-bestanden zijn 3D bestanden en kun je zo in de Mozilla Hubs ruimte plakken of koppelen als eigen Avatar.

  • Maak je eigen avatar met: Hubs Avatar Maker
  • Of maak je eigen avatar met: Hubs Robot Maker
  • Maak een avatar die op je lijkt (webcam of smartphone nodig): Ready Player Me
    LET OP: Kies Halfbody Avatar. Fullbody avatars werken niet in Mozilla Hubs.

Ga naar je Hubs-ruimte, klik op 'More' en kies 'Change Name and Avatar'.
Klik bij je huidge avatar op 'Change Avatar' en dan:

  1. My Avatars en + Create Avatar
  2. Als je bent ingelogd kun je je .glb-bestand uploaden via de upload link: 'Custom GLB'
  3. Als je een link hebt naar een Avatar, zoals van Readyplaye.me, kun je rechtsboven ook de link naar een glb-bestand invoeren.
  4. Maak in de ruimte waar je nu bent een (groep) selfie (knop Create + Camera)

TIP: Bewaar je Avatar in Dropbox of Google Drive. Zet delen op Public/Openbaar. De deel-url kun je gebruiken in Hubs, maar heeft nog een kleine aanpassing nodig om te werken:

  • Voorbeeld deel-link vanuit Google Drive: https://drive.google.com/uc?export=download&id=1kNANFHa0VVsBwH1G8d5ZE3WEwjb--XkF
  • Voorbeeld deel-link vanuit Dropbox: https://www.dropbox.com/s/knlidvqarogi8i3/raoul-postel-avatar.glb?dl=1
Previous Slide
Next Slide

STAP 3 BOUWEN MET MOZILLA SPOKE:
https://hubs.mozilla.com/spoke

  1. Log in bij https://hubs.mozilla.com/spoke
  2. Start een nieuw project en kies een eigen wereld
  3. Experimenteer met de 3 Tools, linksboven in de menubalk: Move, Rotate en Scale. Zet de blauwe magneet (hoefijzer) uit om deze Tools heel precies te gebruiken.
  4. Pas het 'Directional Light' van de hele de ruimte aan. Selecteer deze rechts in het Hierarchie-venster.
  5. Teken met de architectual-objects een grondplaat (plane) en 4 wanden die je kamer voorstellen.
  6. Kies ut de Sketchfab-objecten meubel dat in je kamer staat. Let wel op, sommige 3D-objecten zijn te groot voor de ruimte en laden niet. Type achter de zoekterm ook: 'poly'. Deze afbeeldingen hebben meestal een lage hoeveelheid polygons en resolutie, waardoor ze makkelijker laden in Hubs.
  7. Voeg een 'Spot-Light' toe op een plek waar extra licht nodig is. Kies een persoonlijke kleur licht.
  8. Hoe kun je de ruimte nog meer jouw karakter geven?
  9. Bekijk je scene vanaf een mooi standpunt en pas de 'Scene Camera' hierop aan
  10. Verplaats de 'Way Point' naar de plek waarop je wilt dat bezoekers je ruimte binnenkomen.
Previous Slide
Next Slide

STAP 4 PUBLICEREN NAAR MOZILLA HUBS:
https://hubs.mozilla.com

  1. Log in bij https://hubs.mozilla.com/spoke
  2. Open jouw zelfgebouwde Ruimte in Mozilla Spoke (Zie STAP 1, punt 6).
  3. Klik rechtsboven op de blauwe knop: 'Publish'
  4. Volg de aanwijzingen in de dialoogvensters.
  5. Ga naar https://hubs.mozilla.com en maak een nieuwe Ruimte (Create Room)
  6. Klik op de knop 'More' en dan op 'Room info and Settings'
  7. Kies: 'Change Scene' en kies de tab 'My Scenes'
  8. Selecteer de zojuist gebouwde kamer en wacht totdat de kamer geladen is.
  9. Geef eventueel de ruimte een eigen naam.
  10. Nodig via de 'Invite-link' een paar vrienden uit in je ruimte
Previous Slide
Next Slide

ALTERNATIEF BOUWEN MET MAGICAVOXEL en Blender

  1. Download en installeer de gratis 3D-software MagicaVoxel
  2. Download en installeer de gratis 3D-software Blender
  3. Open MagicaVoxel en teken je eigen wereld/gebouw in blokjes. Dit lijkt een beetje op MineCraft
  4. Exporteer je wereld/gebouw als .obj-bestand
  5. Open Blender en importeer via 'import' het .obj-bestand
  6. Of teken in Blender een eigen ruimte.
  7. Vink rechtsboven het knopje: Material Shading (Material Preview) aan.
  8. Exporteer het bestand als gltf/glb bestand.
  9. Plaats de glb-bestand in je Hubs of Spoke ruimte.

Je kunt nu in VR door je eigen creatie wandelen!

Software om in 3D te bouwen: Blender, MagicaVoxel, Minetest
Je kunt als inspiratiebron gebruik maken van: SketchFab
In Mozilla Hubs kun je alleen 3D-bestanden als .glb plaatsen.

OPDRACHT 1:

Download deze open-box.glb om mee te beginnen.
Sleep dit bestand in jouw ruimte in Spoke.
Zodra deze geplaatst is, kun je vergroten, draaien, verkleinen, dupliceren (control + D).
Door deze slim te stapelen en draaien, kun je hiermee een eenvoudig gebouw creëren.

Zodra je een basis-gebouw hebt staan, open je bij Assets de tab Architecture Kit. Kies vervolgnes voor de Stairs (trappen). Door de vloeren van de gestapelde dozen te verbinden met trappen, kun je je gebouw straks als avatar doorlopen.

TIP: als je gebruik maakt van muren uit de assets Architecture Kit,  zul je zien dat deze aan 1 zijde onzichtbaar zijn. Gebruik voor de muren daarom bij voorkeur de floor-assets uit deze kit. Uiteraard kun je ook in Blender een vierkant stuk muur maken en exporteren als GLB-file. Dan zijn wel beide zijden zichtbaar. Door schalen en draaien kun je dan zoveel muren maken als nodig is.

OPDRACHT 2:

Richt je gebouw in met:

  1. drie afbeeldingen (jpg-formaat, maximaal 1024x1024 pixels)
  2. drie lichten aangebracht via Spoke
  3. drie links naar ruimtes van vrienden
  4. twee vimeo-video's. Vimeo werkt beter dan YouTube in Mozilla Hubs. TIP: Zet Vimeo-video's op Public zodat ze in de ruimte afspelen.
Previous Slide
Next Slide