Details

Chapter 1: Introduction<div>Sub-Topics:</div><div>- The Components of WebXR</div><div>• Pose tracking</div><div>• Camera data</div><div>• Scene understanding</div>- Hit-Testing<div>- Anchors</div><div>- Point-clouds</div><div>- Surfaces</div><div>- light-estimation</div><div>• The webXR API</div><div>- WebGL 1 → WebGL 2 → WebGPU → WebVR → WebXR</div><div>- Khronos Group and WC3</div><div>• The webXR emulator</div><div>• Industry Standard XR Guidelines (Microsoft, Google)</div><div><br></div><div>Chapter 2: Setup</div><div>Sub-Topics:</div><div>- Types of Browsers and Requirements</div><div>- Chrome Canary</div><div>- Firefox Reality</div><div>- Oculus Browser</div><div>• How to setup a local server for development</div><div>- Node, Python, Servez</div><div>• Local machine setup</div><div>- Download and install Visual Studio Code</div><div>- Create GitHub account</div><div>• Playgrounds vs. Local development while executive the code in the book</div><div><br></div><div>Chapter 3: Introduction to Web Browsers</div><div>Sub-Topics:</div><div>• The Workings of the World Wide Web</div><div>- Client - Server relationship</div><div>- HTML, CSS, and Javascript</div><div>• The Workings of a Web Page</div><div>- The Document Object Model</div><div>- The Render Engine</div><div>- HTML5 and Canvas</div><div>• Toward Native Code in the Browser</div><div>- WebAssembly</div><div> Physics and the GPU</div><div><br></div><div>Chapter 4: A Brief Introduction to WebGL</div><div>Sub-Topics:</div><div>• The Big Picture of WebGL</div><div>- A Crash Course in 3D Graphics</div><div>- The Graphics Rendering → Rasterizing Pipeline</div><div>• The Difference Between WebGL and JavaScript</div><div>- CPU vs GPU</div><div>- Browser vs Native</div><div>- The Value of Many Threads</div><div>• The Components of a WebGL Application</div><div>- Vertex and Fragment Shaders</div><div>- Uniforms, Attributes, and Buffers</div>- ViewMatrix, ProjectionMatrix, and the WebGL Matrix Math Library<div>• The Cognitive Dissonance between WebGL and Web Programmers</div><div><br></div><div>Chapter 5: WebXR Libraries -- Three.js</div><div>Sub-Topics:</div><div>• An Overview of JavaScript Libraries</div>• Introduction to Three.js, which Makes Programming WebGL Easier<div>• Async and Await vs Promises in JavaScript</div><div>• JavaScript and the GPU</div><div><br></div><div>Chapter 6: WebXR Frameworks: Mozilla’s A-Frame</div><div>Sub-Topics:</div><div>• A-Frame makes Three.js easier</div><div>• The Components of A-Frame:</div><div>- Scenes, Cameras, Objects, Interactions</div><div>- Light and Shadows</div><div>- 3D Objects and the gLTF file format</div><div><br></div><div>Chapter 7: WebXR Engines: Babylon.js</div><div>Sub-Topics:</div><div>• TypeScript vs JavaScript</div><div>- Type safety</div><div>- Parallel Processing</div><div>• The Babylon.js Tools</div><div>- Playground</div><div>- Inspector</div><div>- Node Creator</div><div>• What Makes an Engine vs. a Framework?</div><div>- The role of physics in XR creation</div><div><br></div><div>Chapter 8:&nbsp; Web Augmented Reality in Chrome Canary</div>Sub-Topics:<div>• An Overview of the WebXR Features in the Chrome Canary XR API</div><div>- Hit-Testing</div><div>- Camera access</div><div>• Accessing Developer Features in Chrome</div><div>• The Browser and Hardware Connection</div><div>- Final Project: Client-Server database connection for data persistence in AR&nbsp;</div><div><br></div><div>Chapter 9: The Future of WebXR</div><div>Sub-Topics:</div><div>• Computer Vision and WebXR</div><div>- Facial Recognition and Filters</div><div>• Multi-user Interaction</div><div>- Spatial / Cloud Anchors</div><div>- Social XR</div><div>• Hand Gestures and Voice Commands</div><div>- Motion Tracking</div><div>• Cloud-Computing and Privacy</div>- The ethical responsibility of the Immersive Web developer<div><br></div>

Rakesh Baruah is a writer and creator with 15 years of experience in new media, film, and television in New York City.&nbsp; After completing an MFA in screenwriting and directing for film from Columbia University, Rakesh joined the writers’ room of a hit, primetime, network drama as an assistant. The experience opened his eyes to the limits of television and the opportunities promised by 3D, immersive content. In 2016 he began a self-guided journey toward mixed reality design that has taken him through startups, bootcamps, the Microsoft offices, and many, many hours in front of a computer.&nbsp; He is the author of one previous book on virtual reality and the Unity Game Engine and has received an Nvidia-certified nanodegree in Computer Vision.&nbsp; He shares what he’s learned with you in a style and format designed specifically for the person who, in high school, preferred English class to Trigonometry.

<p>Gain an in-depth knowledge in immersive web development to create augmented reality (AR) and virtual reality (VR) applications inside web browsers using&nbsp;WebXR API,&nbsp;WebGL, Three.js, and A-Frame. This project-based book will provide the practice and portfolio content to make the most of what the futures of spatial computing and immersive technology have to offer.</p>

<p>Beginning with technical analysis of how web browsers function, the book covers programming languages such as WebGL, JavaScript, and HTML, with an eye on a complete understanding of the WebXR lifecycle. You'll then explore how contemporary web browsers work at the code level and see how to set up a local development server and use it with the Visual Studio Code IDE to create 3D animation in the WebGL programming language.&nbsp;&nbsp;<br></p>

<p>With a familiarity of the web-rendering pipeline in place, you’ll venture on to WebGL abstractions such as the Three.js JavaScript library and Mozilla’s A-Frame XR Framework, which use WebXR to create high-end visual effects.&nbsp; In the final projects of the book, you’ll create an augmented reality web session for an Android phone device, and create a VR scene in A-Frame (built on Three.js) to demo essential components of the WebXR API pertaining to user positioning and interaction.<br></p>

<p>Game engines have become common-place for the creation of mixed reality content.&nbsp; However, developers not interested in learning entirely new workflows may be better suited to work within a medium almost universally open to all—the web;&nbsp;<i>AR and VR Using the WebXR API</i>&nbsp;will show you the way.<br></p>

<p>You will:<br></p>

<p><ul><li>Master the creation of virtual reality and augmented reality features for web page</li><li>Prepare to work as an immersive web developer with a portfolio of projects in sought-after technologies</li><li>Review the fundamentals of writing shaders in WebGL</li><li>Experience the unity between client, server, and cloud architecture as it applies to location-based AR</li></ul></p><br>

<p>Features the latest version Web XR API (updated on April 21, 2020 though not yet released to the public)</p><p>Offers instruction on WebGL, Three.js, A-Frame, and Babylon.js all-in-one</p><p>Extends skills commonly developed in expensive coding boot camps</p>

Using a project-based approach, readers will see how to make the most of what spatial computing and immersive technology have to offer.