Making a WebXR Tic-Tac-Toe Game

with Voice Chat

in a week(ish)

aka

On the code of Giants

TechFAIR LIVE
April 2021

Sidenote:

Hi, I'm Dwane

a JavaScript Developer Advocate

Vonage

About Me


clever

stubborn
determined

MacGyver

A Motto

"Difficult takes a day,
impossible takes a week"

- Jay-Z (and probably others)

The Trick

impossible

Last year

TicReactToe.com

More recently

dwane.in/vonage

model-viewer

modelviewer.dev

Tic-Tac-Toe

+ Vonage APIs

+ Model-Viewer

???????

Demo

AR mode

How?

(Sway)

Where?

Create WebXR environments

board | X | O models
→
model-viewer
→
WebXR

Where to get the 3D models?

Creating models

Microsoft Paint 3D

Microsoft App Store

Playing the Game

model-viewer docs

Model-Viewer editor

modelviewer.dev/editor

Communication

developer.vonage.com/client-sdk

In Summary

WebXR Tic-Tac-Toe
with Voice chat Glitch ⊡ Model-Viewer ⊡ Vonage
Web Components ⊡ WebXR ⊡ WebGL ⊡ WebRTC
and so much more

What's Next?

dwane.in/TechFairLiveDemoRemix
@AdaRoseCannon - ImmersiveWeb.dev
@AysSomething - FrontendMasters course
MySlides.page LifeLong.dev

Thank You