How to Create WebAR Holograms (Live Learning: Session 7)
In this hands-on webinar, you'll learn how to add WebAR Holograms to your 8th Wall-hosted projects. View details below for links to materials and timestamps to skip ahead to relevant sections on developing augmented reality with https://www.8thwall.com/
In this Live Learning session we’ll review:
8th Wall Updates:
Sample Projects Information [2:10]
A-Frame: Glass Materials [3:30]
A-Frame: 3D Model Configurator [3:55]
8th Wall’s VP of Product joins IAB’s Augmented Reality Board of Directors [5:55]
You can view the new sample projects here:
https://www.8thwall.com/8thwall
Holograms Overview:
Hologram overview at 8th Wall [7:35]
Types of holograms [9:20]
Commercial hologram examples [11:29]
Arcturus hologram editor [13:30] https://arcturus.studio/
Arcturus Holostream [14:17] https://arcturus.studio/holostream/
DepthKit Studio [14:38] https://www.depthkit.tv/
Green Screen Video [17:15] https://www.8thwall.com/playground/al...
Phone based capture [19:42] https://www.scandy.co/apps/scandy-pro
Record 3D App [20:30] https://record3d.app/
WebAR Holograms
Testing the sample project [22:00] https://www.8thwall.com/8thwall/mrcs-...
Microsoft HCAP Player (make sure to have version 1.3.2 or higher) [23:15]
Dash library (dash used for chrome, HLS used for safari) [23:52]
HCAP asset file structure [24:20]
Setting Holo-cap component to primitive [26:32]
Uploading HCAP Bundle [28:30]
Adding shadows to the hologram [30:16]
Adding gesture detector to the hologram (drag/scale/rotate) [32:10]
Touch target customization [34:45]
Hosting a HCAP file locally [37:17]
Playback controls (play/pause/mute) [37:50]
Holograms with normals [41:35]
Hologram realtime lighting demo [44:00] https://www.8thwall.com/playground/hc...
Office Hours Live Q&A [44:31]
During the walkthrough on how to implement WebAR Holograms, Rigel uses a combination of example projects to do so. You’ll want to access the Project Library (https://www.8thwall.com/8thwall) to find these pre-built WebAR experiences you can clone today. Hologram implementation can work across multiple frameworks, in this case we’ll be using A-Frame. Projects and documentation referenced include:
8th Wall Documentation:
https://www.8thwall.com/docs/web/#adv...
You can view the final sample projects here:
https://www.8thwall.com/8thwall/mrcs-...
