Details
AR and VR Using the WebXR API
Learn to Create Immersive Content with WebGL, Three.js, and A-Frame
56,99 € |
|
Verlag: | Apress |
Format: | |
Veröffentl.: | 30.11.2020 |
ISBN/EAN: | 9781484263181 |
Sprache: | englisch |
Dieses eBook enthält ein Wasserzeichen.
Beschreibungen
<div><p>Gain an in-depth knowledge in immersive web development to create augmented reality (AR) and virtual reality (VR) applications inside web browsers using WebXR API, 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. <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. 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. 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; <i>AR and VR Using the WebXR API</i> will show you the way.</p></div><div><div><b>What You'll Learn</b><br></div><div><div><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></div><div><div><b>Who This Book Is For</b><br></div><div><b><br></b></div>Aspiring immersive web developers and developers already familiar with the fundamentals of web development who want to further explore topics such as spatial computing, computer vision, spatial anchors, and cloud-computing for multi-user social experiences.</div></div></div>
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: 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 </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. 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. 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. 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 WebXR API, 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. <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. 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. 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; <i>AR and VR Using the WebXR API</i> 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>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. <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. 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. 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; <i>AR and VR Using the WebXR API</i> 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.