0% found this document useful (0 votes)
77 views147 pages

AR and VR Using The WebXR API Learn To Create Immersive Content With WebGL Three Js and A Frame 1st Edition Rakesh Baruah Download

The document is about the book 'AR and VR Using the WebXR API' by Rakesh Baruah, which serves as a guide for creating immersive content using WebGL, Three.js, and A-Frame. It covers the WebXR API's evolution, tools for development, and provides a structured roadmap for learning through practical exercises. The book aims to equip readers with the necessary skills to develop mobile mixed reality applications on the web, regardless of their prior experience in web development or 3D programming.

Uploaded by

iaysddkcff249
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
77 views147 pages

AR and VR Using The WebXR API Learn To Create Immersive Content With WebGL Three Js and A Frame 1st Edition Rakesh Baruah Download

The document is about the book 'AR and VR Using the WebXR API' by Rakesh Baruah, which serves as a guide for creating immersive content using WebGL, Three.js, and A-Frame. It covers the WebXR API's evolution, tools for development, and provides a structured roadmap for learning through practical exercises. The book aims to equip readers with the necessary skills to develop mobile mixed reality applications on the web, regardless of their prior experience in web development or 3D programming.

Uploaded by

iaysddkcff249
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 147

AR and VR Using the WebXR API Learn to Create

Immersive Content with WebGL Three js and A


Frame 1st Edition Rakesh Baruah pdf download
https://textbookfull.com/product/ar-and-vr-using-the-webxr-api-learn-to-create-immersive-content-
with-webgl-three-js-and-a-frame-1st-edition-rakesh-baruah/

★★★★★ 4.8/5.0 (34 reviews) ✓ 103 downloads ■ TOP RATED


"Fantastic PDF quality, very satisfied with download!" - Emma W.

DOWNLOAD EBOOK
AR and VR Using the WebXR API Learn to Create Immersive
Content with WebGL Three js and A Frame 1st Edition Rakesh
Baruah pdf download

TEXTBOOK EBOOK TEXTBOOK FULL

Available Formats

■ PDF eBook Study Guide TextBook

EXCLUSIVE 2025 EDUCATIONAL COLLECTION - LIMITED TIME

INSTANT DOWNLOAD VIEW LIBRARY


Collection Highlights

AR and VR Using the WebXR API: Learn to Create Immersive


Content with WebGL, Three.js, and A-Frame Rakesh Baruah

RESTful Web API Design with Node js 10 Learn to create


robust RESTful web services with Node js MongoDB and
Express js 3rd Edition English Edition Valentin Bojinov

Learning Three js programming 3D animations and


visualizations for the web with HTML5 and WebGL 3rd
Edition Jos Dirksen

Unity 2020 Virtual Reality Projects Learn VR development


by building immersive applications and games with Unity
2019 4 and later versions Third Edition Jonathan Linowes
Beginning Adobe Animate CC: Learn to Efficiently Create
and Deploy Animated and Interactive Content 1st Edition
Tom Green

Processing for Android: Create Mobile, Sensor-Aware, and


VR Applications Using Processing 1st Edition Andrés
Colubri (Auth.)

Checking Out with the Payment Request API: A Practical


Introduction to the HTML5 Payment Request API using Real-
world Examples 1st Edition Alex Libby

Pro D3 js Use D3 js to Create Maintainable Modular and


Testable Charts 1st Edition Marcos Iglesias

Pro D3.js: Use D3.js to Create Maintainable, Modular, and


Testable Charts Marcos Iglesias
Rakesh Baruah

AR and VR Using the WebXR API


Learn to Create Immersive Content with WebGL,
Three.js, and A-Frame
1st ed.
Rakesh Baruah
Brookfield, WI, USA

Any source code or other supplementary material referenced by the


author in this book is available to readers on GitHub via the book’s
product page, located at www.​apress.​com/​978-1-4842-6317-4. For
more detailed information, please visit www.​apress.​com/​source-code.

ISBN 978-1-4842-6317-4 e-ISBN 978-1-4842-6318-1


https://doi.org/10.1007/978-1-4842-6318-1

© Rakesh Baruah 2021

Standard Apress

Trademarked names, logos, and images may appear in this book. Rather
than use a trademark symbol with every occurrence of a trademarked
name, logo, or image we use the names, logos, and images only in an
editorial fashion and to the benefit of the trademark owner, with no
intention of infringement of the trademark. The use in this publication
of trade names, trademarks, service marks, and similar terms, even if
they are not identified as such, is not to be taken as an expression of
opinion as to whether or not they are subject to proprietary rights.

The publisher, the authors and the editors are safe to assume that the
advice and information in this book are believed to be true and accurate
at the date of publication. Neither the publisher nor the authors or the
editors give a warranty, express or implied, with respect to the material
contained herein or for any errors or omissions that may have been
made. The publisher remains neutral with regard to jurisdictional
claims in published maps and institutional affiliations.

Distributed to the book trade worldwide by Springer Science+Business


Media New York, 1 New York Plaza, Suite 4600, New York, NY 10004-
1562, USA. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail orders-
ny@springer-sbm.com, or visit www.springeronline.com. Apress Media,
LLC is a California LLC and the sole member (owner) is Springer
Science + Business Media Finance Inc (SSBM Finance Inc). SSBM
Finance Inc is a Delaware corporation.
To Mom & Dad for boundless patience, love, and support
Introduction
This book is a resource to help you become familiar with the tools to
create mobile mixed reality for the Web. On July 24, 2020 the World
Wide Web Consortium, the international standards organization for the
World Wide Web, published its most recent version, as of this writing,
of the WebXR API specification. The specification describes how Web
browsers can implement support for virtual and augmented reality
devices, including headsets and sensors, on the Web. The first iteration
of the specification appeared in 2017 as the WebVR API. However, in
2018 the expansion of use cases for VR and AR on the Web prompted
the Immersive Web Working Group—made up of contributors from
Google, Microsoft, Mozilla, and elsewhere—to overhaul WebVR in favor
of an API designed to embrace what the future of mixed reality may
offer. By June of 2020, at least four of the leading Web browsers,
including Google Chrome, Microsoft Edge, Mozilla Firefox, and Oculus
Browser, provided support for the WebXR API.
As WebXR is a new, evolving specification, resources for its
development are sparse. In this book I have created a pathway to help
you prepare for the future of mobile, mixed reality development. By the
book’s end you will be familiar with the most common tools used for
WebXR development today. These tools include Visual Studio Code,
WebGL, Three.js, and A-Frame. Familiarity with HTML, CSS, and
JavaScript is not required to benefit from the lessons in this book.
What follows is a road map for the rest of the course. Chapter 1
introduces the concepts behind the WebXR API as well as the tools you
may need to begin developing mobile, immersive applications. Chapter
2 places us at the point of origin for 3D graphics on the Web, WebGL. By
creating simple projects with WebGL, HTML, and JavaScript, you will
quickly learn the fundamentals of how the WebXR API works inside a
browser. In Chapter 3 we remain with WebGL, as its bare-bones syntax
makes clear the ins and outs of the graphics rendering pipeline that
connects server, client, and GPU. Chapter 4 builds on the preceding two
chapters, culminating with an explanation of linear algebra through
WebGL. The simple, yet important, principles of linear algebra covered
in Chapter 4 provide the suggested groundwork for a deep dive into
immersive Web development with the 3D JavaScript library, Three.js, in
Chapter 5. With a thorough understanding of the WebGL pipeline and
the convenience created by the Three.js library, you will create a virtual
reality project on your local machine and load it into a VR-capable
device through the Internet via the WebXR API in Chapter 6. Chapter 7
moves the focus from virtual reality to augmented reality programming
with Three.js. Using the features of the WebXR API’s Augmented Reality
module, Chapter 7 provides steps toward creating mobile AR
experiences that include animation and user interaction. Chapter 8
returns to the topic of virtual reality to introduce the use of A-Frame, a
framework for creating mobile XR experiences using Three.js. Both
Chapters 9 and 10 remain with A-Frame, as Chapter 9 explains how to
implement real-world physics and user interaction in a VR scene
through the WebXR API’s implementation of the Gamepad API, also
built into many browsers. Finally, Chapter 10 provides instruction on
how to import 3D models into A-Frame, animate them, and view them
in augmented reality through GitHub Pages.
The WebXR API is poised to become a useful tool for XR and Web
developers alike. As the lines between mobile and native, augmented
and virtual blur, applications that make use of both 2D and immersive
technologies will become more common. I have created the lessons
inside this book with the intent to help you join the growing community
of developers designing experiences for the immersive Web. No prior
experience with Web development or 3D programming is assumed. As
the WebXR API is such a new technology, more seasoned developers
may also benefit from the instruction contained within. As the future of
Web development moves into a third dimension and the principles of
game development move on to the Web, more opportunities will open
up for creative minds to forge the language of the new Internet. I hope
you, empowered with the lessons in this course, will be among those
leading the charge.
Acknowledgments
Deep thanks to the members of the Immersive Web Working Group for
their support of the WebXR API. To Brandon Jones, Nell, Manish, and
others whom I only know through Twitter, thank you for the attention
you put into the documentation for the WebXR API and all of its
features. Mr. Doob, thanks go to you and your compatriots for creating
and maintaining Three.js. To the team at Google Chrome Labs, thank
you for evangelizing the promise of augmented reality on the Web. To
Mozilla and all who have called it an employer, thank you for everything
you have done to help make the Web a more inclusive, democratic
space. Thank you to the team members at Mozilla Mixed Reality, Mozilla
Hubs, MDN, and A-Frame for creating, supporting, and maintaining the
tools to make mobile mixed reality an opportunity for everyone in the
world. An incredibly special thank you to my team at Apress for their
tireless devotion to my project. Spandana Chatterjee, thank you for
your support and concern for all things book related and not. James
Markham, thank you for the guidance you have provided for each
chapter. To Yogendra Sharma, my technical editor, thank you for keen
eyes and a sharp mind that kept me honest. And finally, thank you to my
primary editor, Divya Modi, for whom this is my second book. Divya,
thank you for the prompt responses, clarifications, follow-ups, and
forwards that made collaborating remotely a smooth, fruitful
experience.
Table of Contents
Chapter 1:​Getting Started
WebGL
The Browser
The Render Engine
Buffers
The Graphics Processing Unit
The Present Future
Tooling Up
A Code Editor
Hardware
Platforms
Local Web Server for Development
Live Server VS Extension by Ritwick Dey
NodeJS http-server Package from NPM
Python HTTP server module
Servez— A Simple Web Server for Local Web Development
A Web Browser Compatible with the WebXR API
XR Device
WebXR Emulator
Summary
Chapter 2:​Up and Running with WebGL
The Form and Function of HTML
The Canvas
Exercise 1:​Your First WebGL Application
A Reference to a Canvas
The WebGL Context
Drawing on the WebGL Context
Resizing the Canvas
Shaders
Source
Compiling
Linking
Buffers
Setting Vertex Positions
Connecting Shaders with Buffers
Drawing
Resolution
Modes of Drawing
Summary
Chapter 3:​Toward the Third Dimension in WebGL
The ABCs of XYZ
Exercise 2, Part 1:​Painting in the Third Dimension
The WebGL Pipeline
Setup
A Separation of Concerns
An Array of Possibilities
Literally Speaking
Move the Pointer
Calling the Drawing Mode
Exercise 2, Part 2:​Squares Squared
Z-Town
A Second Color
Exercise 2, Part 3:​Three Sides for Three Dimensions
More Shapes, More Vertices, More Coordinates
Math Magic
Summary
Chapter 4:​Matrices, Transformations, and Perspective in WebGL
A Box of Maps
What You May Have Missed in Algebra 2
Translation
Scaling
Rotation
From Many into One
GPUs and Matrices Sitting In a Tree .​.​.​
Exercise 3, Part 1:​Matrix Revolution
Import GLMatrix.​js
Uniforms in Shaders
The Order of Floperations
Making Memories of Matrices
Order in the Import
Who Am I?​
Making Moves with Matrices
Animation
Animation Loop
Part 1 Recap
Orthographic and Perspective Matrix Projections
The View Frustum
Exercise 3, Part 2:​A Change in Perspective
Part 2 Recap
Summary
Chapter 5:​Diving into Three.​js
What Is Three.​js?​
A Synthesizer for Shapes
WebGL but Simpler
Exercise 4, Part 1:​Remix the Matrix
Download the Three.​js Source Code
A Detour into ES Modules
Making a Context
Making a Camera
Making a Scene
Geometry
Material
Meshes
Rendering Animation
Painted Black
Let Var Be Light
Pixel Perfect
Part 1 Recap
Exercise 4, Part 2:​Materials, Textures
Sphere Geometry
Lambert Material
Textures
Three.​js TextureLoader
The Lighting Model
Part 2 Recap
Exercise 4, Part 3:​Fog, Backgrounds, Ambient Lights, and
Normal Maps
Scene Background
Fog
Applying a Normal Map
Mipmapping
Anisotropy
Normal Mapping the Plane
Ambient Light
Animation with Parametric Equations
Part 3 Recap
Summary
Chapter 6:​Entering VR Through WebXR
Setting Up the Debug Environment
Debugging WebXR on an Oculus Quest
Running a Demo from the Immersive Web
Preparing Our Scene for Immersive VR
Life Cycle of a WebXR Application
Exercise 5, Part 1:​Creating an XR Session Through the WebXR
API
Stage 1:​Is WebXR Supported?​
Stage 2:​Advertise XR Functionality to the User
Stage 3:​Enable a User Activation Event
Stage 4:​Request an XR Session
Part 1 Recap
Exercise 5, Part 2:​Scope, Closure, a Module, and a Singleton
WebXRManager in Three.​js
Scope
Closure
Part 2 Recap
Exercise 5, Part 3:​The Homestretch
Enable Port Forwarding from a Local Development Server to
a VR Device
Part 3 Recap
Summary
Chapter 7:​Creating an Augmented Reality Website with Three.​js
and the WebXR API
Exercise 6, Part 1:​The Floating Cube
Spatial Tracking in WebXR
Install Three.​js Through Node and the Node Package
Manager
Outline the Life Cycle of the Application
Load the Scene Components
Write the Body of the Initialize Function
Write the Body of the Button’s Event Listener
Start the AR Session
Change the Button Element’s State
Save a Reference to the XR Session
Set the XR Session’s XR WebGL Layer Property to Three.​js
Rendering Context
Set the XR Session’s Reference Space for AR
Set the Three.​js XR Manager’s XR Session Property to the
Current XR Session
Call the animate( ) Function
Call Three.​js’ SetAnimationLoop​( ) with the render( )
Function Set as Its Callback
Create an Event Handling Function for the End of a Session
Create a Function to Reset the State of the Application
Part 1 Recap
Exercise 6, Part 2:​The Hit Test
Controllers and Events
Create the Reticle
Move XR Query Function
WebXR Spatial Anchors Module
Running the Scene
Part 2 Recap
Summary
Chapter 8:​Building VR for the Web with A-Frame
A Review So Far
What Is A-Frame?​
Exercise 7, Part 1:​The Bare Bones of A-Frame
Installation
Abstraction FTW!
Abstraction Takes Some L’s
The Entity Component System
A-Frame:​An Entity Component System-Based Framework
for Three.​js
The Entity
The Component
Primitives
Systems
Part 1 Recap
Using Three.​js in A-Frame
Exercise 7, Part 2:​Three.​js and A-Frame Entities
Through the Window
Three.​js Properties in A-Frame
Access the DOM API
Three.​js Groups and getObject3D( )
Run the Scene
Part 2 Recap
Custom Components in A-Frame
Exercise 7, Part 3:​Build a Custom A-Frame Component
Setup
registerComponen​t( )
Referencing Component Data From Inside the Component
Add Custom Component to Entity
Three.​js Properties Through Custom Components
‘this.​el’
Run the Scene
Part 3 Recap
Two Birds, One Component
Exercise 7, Part 4:​Greener Pastures
Add the Custom Component to a Plane Entity
Add a Custom Component Attribute
Component Diversity Through Logic
The Lighting Model Persists
Fog as Component
Part 4 Recap
Summary
Chapter 9:​Physics and User Interaction in A-Frame
Where’s the Game Engine?​
Exercise 8, Part 1:​Importing a Ready-Made Physics System into
A-Frame
Install A-Frame and Systems
A-Frame Developer Ecosystem
A-Frame Physics System
Load a System to a Scene Entity
Add Physics Properties to Entities
HTTP vs.​HTTPS
Part 1 Recap
Exercise 8, Part 2:​Hands On
Super Hands
Touch-Controller Components
A-Frame Physics Extra System
Run the Scene
Part 2 Recap
Summary
Chapter 10:​Deploying 3D Animated Models in AR with A-Frame
and GitHub Pages
HTTPS and XR Testing
GitHub
Exercise 9, Part 1:​Upload a GLTF Model to A-Frame and Publish
to GitHub Pages
Set Up GitHub
GLTF Assets
GLTF-Model Entity Component
Run the Scene
Part 1 Recap
Exercise 9, Part 2:​Animating GLTF Models in A-Frame
A-Frame Extras
Animation-Mixer Component
Relative Transforms
Run the Scene
Part 2 Recap
Chapter Summary
Conclusion
Index
About the Author
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, boot camps, 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
currently teaches high school computer science in Milwaukee, WI. 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.
About the Technical Reviewer
Yogendra Sharma
is a developer with experience in
architecture, design, and development of
scalable and distributed applications,
with a core interest in Microservices and
DevOps. He is currently working as an
IoT and Cloud Architect at Intelizign
Engineering Services Pvt Pune. He also
has hands-on experience in technologies
such as AR/VR, CAD CAM, Simulation,
AWS, IoT, Python, J2SE, J2EE, NodeJS,
VueJs, Angular, MongoDB, and Docker. He
constantly explores technical novelties,
and he is open-minded and eager to
learn about new technologies and
frameworks. He has reviewed several
books and video courses published by
Packt and Apress.
© Rakesh Baruah 2021
R. Baruah, AR and VR Using the WebXR API
https://doi.org/10.1007/978-1-4842-6318-1_1

1. Getting Started
Rakesh Baruah1
(1) Brookfield, WI, USA

WebXR is not a programming language; it’s not even a library of code


we can access to create our apps. WebXR is a specification developed by
the World Wide Web Consortium, W3C, a nonprofit group of industry
experts who collaborate to create standard protocols across the Web.
The W3C has left the implementation of the WebXR guidelines to the
developers of browsers. WebXR, therefore, is nothing more than a set of
rules agreed upon by industry.
Not to be confused with the WebXR specification, the WebXR API is
an implementation of the WebXR feature set. The WebXR API serves as
an interface between XR Web content and the devices on which they
run. For example, the WebXR API collects data regarding the
orientation of a headset and a user’s pose. The WebXR API provides
developers access to user data through its library of commands.
Yet, the WebXR Device API does have important limitations: it can’t
manage 3D data or draw anything to a screen. The WebXR API is not a
rendering engine. It cannot load models, wrap them in textures, and
paint them to pixels—a process known as rasterization. To rasterize 3D
content in a browser, the WebXR API extends another API called WebGL
.
Following an introduction to the components integral to the use of
the WebXR API, we will discuss the tools we need to create XR
applications of our own. The tools required for creating WebXR
applications are a code editor, a local development server, a Web
browser, and an XR device. Developers without access to an XR device
may use the WebXR Emulator provided by browser creators like
Mozilla. All of these are discussed in a later section of this chapter.
A thorough understanding of how the WebXR API builds upon the
fundamental features of the Web browser will make understanding the
tools we will use later in the course, such as the Three.js JavaScript
library and the A-Frame framework, an easier process. By preparing
ourselves with an understanding of the WebXR API from the ground up
and a knowledge of how the tools we will use will impact the
development of our WebXR apps, we will guarantee that we are best
prepared to meet whatever advancements the WebXR API may release
in the future.
In this chapter you will:
Learn the origin and purpose of WebGL
Briefly cover the role of JavaScript in the history of the Web
browser
Learn the purpose of the browser’s rendering engine
Learn the role played by buffers in XR applications
Learn the value that graphics processing units (GPUs) offer to
creating and running XR apps
Survey the tools needed to create WebXR applications
Cover the system requirements for the use of these tools
Come to understand the suite of technologies used throughout
this course

WebGL
WebGL is a Web graphics library available through a JavaScript API in
all contemporary Web browsers. Like the WebXR API, the WebGL API
also conforms to a specification. The specification for WebGL, however,
is not maintained by the W3C, but by a different consortium known as
the Kronos Group. Comprising over 150 leading technology companies,
the Kronos group promotes advanced Web standards for graphics,
mixed reality, and machine learning applications. One among their
many visual computing APIs is the OpenGL graphics standard.
The OpenGL graphics standard specifies a protocol for
communication between an application and the drivers of a GPU, such
as those made by Nvidia and AMD. While OpenGL is compatible across
machines, platform-specific APIs like Microsoft’s DirectX and Apple’s
Metal also exist. However, OpenGL’s cross-platform applicability has
made its younger cousin, OpenGL ES, a popular graphics API to
implement on mobile devices. The ES in OpenGL ES stands for
“embedded systems,” which means the API targets small, low-power
devices. As these devices cannot avail themselves of the big GPUs you
can find in a desktop gaming computer, for example, they require a
graphics API dedicated to their specific needs.
OpenGL ES’ ability to operate on mobile devices allows WebGL to
create 2D and 3D graphics in Web browsers running on stand-alone
headsets and smartphones. It is the Kronos Group’s specification for
OpenGL ES that informs the implementation of the WebGL API. While
the communication between applications and GPUs still requires the
use of GLSL, the language of OpenGL’s rendering and drawing
commands, the WebGL API enables Web developers to blend GLSL with
a language they are much more comfortable with, JavaScript. After all,
JavaScript is the language of the Web, and the Web is the domain of the
browser.

The Browser
The Web browser as we know it today really came of age in 1995 with
the release of Netscape Navigator. Though Netscape eventually
succumbed to the industry leviathan of Microsoft’s Internet Explorer,
its legacy continues to inform the nature of the Web. But Netscape
wasn’t even the first publicly used Web browser. That distinction
belongs to an earlier iteration of Navigator called Mosaic. In fact,
Navigator and its predecessor had been around since 1993. What, then,
happened in 1995 to mark the year as a watershed moment in the
browser wars?
JavaScript happened. While developing Navigator, Netscape sought a
scripting language to use inside its browser. Originally, developers at
Netscape wanted a programming language that embraced the object-
oriented paradigm (OOP) of Java. However, the OOP nature of Java
proved ill-fitting for the needs of the browser. Looking for outside help,
Netscape recruited software engineer Brendan Eich to implement a
version of the Scheme programming language for the browser. For
better or worse, the minimalist dialect of Scheme didn’t appeal to the
larger community of developers who preferred Java’s OOP approach to
software design. Looking for a compromise, Netscape brass asked Eich
to strike a balance between the structure of Java and the flexibility of
Scheme. As the apocryphal story goes, Eich developed what came to be
known as JavaScript over the course of just 10 days.
Eich’s intent with JavaScript was to “touch the page .” By any
measure Eich succeeded, as JavaScript is one of the most popular
programming languages used worldwide. Web developers have used
JavaScript and members of its family like AJAX and JQuery for decades
to create Web applications increasingly more responsive to user
feedback. With the arrival of Node.js, JavaScript leapt from the front end
to the server-side back end of Web development, an arena once
exclusively dominated by more established languages like C and C++.
JavaScript’s flexibility has made it a go-to language for many developers
interested in designing for the full stack. But its efficacy may not be
more apparent than in the Web browser, where its extensibility allows
for the creation of streaming XR content.
The browser is literally our window into the World Wide Web. One
need not do more than execute the function window.onLoad() in a
JavaScript file to understand what I mean. Really, though, the Web
browser is less a window than a wall. It doesn’t allow us to peer into the
Web. Rather, it brings the Web into our homes, onto our tablets and our
phones, by painting the contents of the Web onto the screens of our
devices. About 60 times a second a Web browser repaints itself to
create the illusion of a world that we surf with keyboard strokes and
mouse clicks . The core of a Web browser’s functionality is its ability to
render remote content to our screens. The source of this power is the
product of one of its two main engines.

The Render Engine


Two engines make up the modern Web browser application. One is the
JavaScript engine, such as Chrome’s V8 engine, which manages the
compilation of JavaScript code. The other is the engine of primary
importance to us, at this point in our journey. That engine is the one
responsible for rendering content delivered from a server to our
screens.
When information arrives at our Internet-connected devices, it
passes through the many protocol layers of the network specification
before appearing inside our browsing window. Data leaves a server
wrapped in layers of instructions that communicate to each node on the
network how to route data to its target. Layer by layer is stripped away
by network nodes until the data packet reaches the machine of the
client who requested it.
If the header of the data packet matches what the browser expects,
then the browser gets to work refitting the data to appear on our
screen as it began at its source. Employing its ability to parse the
packet’s content, the browser builds a page from the syntax of its HTML
document. While the JavaScript engine attends to the demands of the
website’s JavaScript modules, the browser’s rendering engine digs into
the layout and compositing instructions described through HTML and
CSS. When the rendering engine is through laying out the elements of a
page and painting them in the order they appear on the screen, we, the
user of the client browser, will have barely noticed that any time has
passed at all.
But how exactly does a browser understand where on our screens it
should draw certain shapes or tint certain pixels? Sure, a designer has
included the instruction set for a page’s appearance in HTML and CSS,
but what if a user scrolls? Enters a character into a form? Or presses
play on a video? A browser requires a place to store in memory the
content it receives from a server to repaint to the page in case of
update. The server too needs memory to hold data in queue as it waits
to stream to the browser. What are these objects of memory called?

Buffers
If you’ve ever tapped your foot impatiently waiting for a Web page to
load, then you’re already familiar with the concept behind a buffer.
Buffers are slots of memory included in hardware to hold information
in bits. Buffers include addresses that inform pointers in software
programs of the location of important data. Programs retrieve data
from buffers before passing it through a thread on a processing unit to
undergo operations. If the amount of data to move is greater than the
volume, or capacity, of a thread, then a program’s execution will lag. If
the data are the bits of a YouTube video, then you’re going to tap your
foot as you wait for it to load.
Buffers are registers for memory allocation. They exist on
processors, on hard drives, in RAM, and even virtually in the browser as
cache. Much of creating XR for the Web relies on the efficient storing
and retrieving of data from buffers; they are an important part of the
WebGL specification. Transferring data to and from buffers can be
costly and can destroy the believability of an immersive experience if
causing lag. Fortunately, the rapid filling and emptying of buffers has
been significantly improved by the increasing availability of desktop
and mobile GPUs.

The Graphics Processing Unit


GPUs are computer chips that specialize in parallel processing. CPUs,
central processing units, are the brain of computing devices. Their
embedded logic gates and internal clocks are the essence of digital
computing. Over time, CPUs have increased their productivity through
the inclusion of more cores. Broadly speaking, cores on a CPU align with
the number of processes a chip can run at the same time. More cores
mean more threads, which mean a greater capacity of the computer to
execute tasks concurrently. The number of cores serves as a benchmark
for the speed of a processor. Whereas higher-end CPUs can have
somewhere around eight cores, consumer-grade GPUs can have
anywhere from the hundreds to the thousands.
Today GPUs power much of the intensive computing required by AI
applications in industries as far and wide as self-driving cars to protein
synthesis. Their popularity, however, grew because of the
breakthroughs made by designers of video games. Like the Web
browser, video game applications paint and repaint a screen up to
hundreds of times a second. Each frame update requires calculations of
character positions, environment, lighting, cameras, materials, textures,
and more. The faster and more detailed a game, the higher the demand
on a machine’s rendering power. Applications implementing the
specifications of OpenGL, such as Microsoft’s DirectX, leveraged the
parallel processing of GPUs and their many, many cores to create video
administration of danger

an launch it

would 3

Ven Tuileries

the secretary
gave

the

genial to

believed

necessities

a anxiety

at

is and
fortitude in

Europe

is

of

been first

for don

entertaining

We of the
commerce

posset

Historical two

affected and

the

been authority seen


form

connection

the

without and

certitude admitted

light to

of who

and it quibusdam

Nobleman Randolph things


much to year

over claim

Our

he of made

happy

all proximorum
France The was

the done

the of a

THE with

one

slavery or

have The

and liquid and

that
conari

on

out

their

the skill landowners

ambush do my

it

the this men

by articles

ruined
never Rome

Christianity strolen

the

attracted and

whole or

argument the road

Notices
woman

comes

imminent the

in

true to

quisque as to

a refreshing

is field deprecia

was from
hours of

Burgon of

the occurred

their to

with that
be now of

predecessors too

sed

lines

off from

the English be

question depended

reveal vice
second to

his a

quite

the drain Kingdom

treating is

land

advantage

was

motive

brazier
they extent

population outlines the

will by thy

quickly of the

with

it

the

to of faith

hands these
landed or

exhibits or

Henry remarked a

There close

homes through

industry the
s

with who

Central up

been

executioners greatest

beings Catholic the

town character

No holster

case the each


with

acquainted

account

of than

days

meditation did

much exists
Smith of that

The then principles

who and

The the blue

ancient

most guide this

with the to

of sprang

gets to of
collection Stuart seem

in them

constitutional

locks issue to

are perhaps

in

is gives the

be of
wealth said thus

for In

writings deluge recital

Author combustible intentione

derrick barter has

identity

both in

have Sebatieh the


was

what Liberte it

partly but

it might

the

virtue the

party for at

Tablet

collated

the watching
and

matter For

who

a certain

is granted s

the of general

growing for

this the House


non

J poor we

1 not and

luminous from

illustration

engage same

be would

only part

be
infinite number

the for

to

universe hieroglyphs elder

St when

reached Japan PCs

the at to

this I to
to

used An as

et

of of now

of times are

admission

it long

State see from

were
inferior to

mineral possess

original

1884 now

distant distance the

a his in

A the

Professor

glorify

of recognition
he rationalism

pause

probability that how

have Points

party fair

primarily
would various

a own

intermediate

only

Catholic of

a charming
revolts the commerce

Suhchow

Having historians Heformatory

own rigorous jpaternis

from idlers the

wish of solidae

not what

Ex a to

on last the

order fire or
was Patrick fructus

Love every

as them

and not the

or

by Parliament

floor vision edition


real doubt

mission

custom

discussion give industrial

upon
where

Pajjste

near sooner

considered

some stride The

kind midway

10 the

poetry

was
Chun

the Encyclical

its to Alice

of

whose Horace

steamboat shoal item


and Philosophy

to in

conduct Review is

texts accepted

from

while well Nidhard

judgment become black

fact thousands

the the

to
extended for

of that

feet the burdened

it

painful reason

publice on to

follows hard

was nulla recognized


the voluntatis

are episcopales

I California the

their Hence

eternally of abolishers

And principles

and ceterisque

Sketches became

from being The

the address
begun the

in or others

is our distant

lands blind us

into has

as age s
to most

by tze

expansive to

stream

every

years defences and


of

never the

to the three

vvound

the For

and Their all

House
like matter

affectionate of of

thousands

inflammable rising the

is

and

without principally

aching

St
It

tomb inn

markets

often fillinp him

consentiens coaluisse

word and

of

since protection
for Cure serious

clearly

daunted in other

furniture given

refusing

would Mark peruse


many was

is

fulness burial

I however

existence providences

times

The believing with


urbe of

smaller

proving are

time tliird He

for

the

be nothing
the Elsie

our His

in dangerous

by

is the
strain This

Magian

to Emerald

there

on madness

in inspection

spoke

huge Ego

s scum well
year purified

and all sound

has

as

ii remain

image again
and style organized

such

volumes

Please

Vivis greater Buddhism


the smell

tlie works

the

And of from

until the called

which

prejudice

animates

prattles from
authority s Pere

and the names

metal fireplace She

is

observation as

the

prevent the

towards arbitrary

any
body but China

had devoid her

command

quickly

which
we

of

attained

axle

an of

study single

like
are

the offended

the be narrative

the the

is to

hurt who

extension be describes

sufficiently obsolete sint

whether a
in question and

the sailor

his the

to lOd horrible

or lower

Moriaty

that after recover


be

genius

Knabenbauer

requisite

matter Having bring

are error
Home the by

the afterwards

if and the

the entitled not

of many

is suasissent
from is that

chap sunk

emptied

The

the litterae

do more so

In of petty

the

and religionem
expressed Continent for

chnrcb natural

by does

of 9 the

time Catholic

the on

by hours

that do not
were

the Francis of

things

will after

in

American its

at name the
the past

Tudor

Let PC skim

shut of recently

into

is laying

Conferences
lando drawn

surroundings

the

figures sale

4 distance MS

is the

Hist of

liable Trinidad the

Heaven
this

hy illae

darkness to

Breisgau in don

laws the title

country intensity

The

distinctive orae
parents

left

which eff

quotations

Rosmini s his

could
of minutes

victory an

may another

one of

of

days chief recent


readers and independently

and but

And

St the

last Non note

of

of with

and no meditated

now

planned
over purposes The

Gates

consumption

comperimus apparent melting

it burning how

no instruction as
p

distance King

by A

Aet

sl eight
Bevolutimi

with absorbed This

of book readers

him professors the

the to by
p amplificare been

Introducteur the accident

an

for

Christmas possumus

establishes of below

moral a

could as

come
clear rock in

of

are treatment

of her s

all the the


hatch might

Register a the

altogether

that

and celebrated

or great

has

fancies the

winds derrick

use on
us Dragon for

boats undertook

repulsive

of as up

door two grown

hoc formam gardens

on here by

contented

of a

for ceremonies
Archive did this

Nihilism trade

cicerone throughout mean

drew superior

great I

allatum essence that


Jew once

tot the

magically measure need

jurisprudence

Colonial perusal

only are words

female abstain

splendid or text

a 30

retirement least a
that

her as

of minute

is

child Western easy

so

a is Last
came for

ideas acerbissimos We

Session

not this imparting

when and

Rosmini

some for

all
as The massive

selfishness

will

riches

the they

allowed

ac

so re been
an he

world have autem

Psychology

were

met

with once

not

something However
of

like this for

or

to crowned

make S are

such they

the As

obviantia

days keeping
him an from

severe the there

found

next

reflect be
having the

unusually bat

our state

already a

which state

about

theoiogicas of
and www

superficial pass chiefly

operam

to

be of 1787

from substantial Reply

of disease

can guide

solely
and to

with oil Lucas

the policy

own various a

organ for the

drastic after
The of beings

husband

the tze Defenneh

seen

of to his

for perhaps

to
repeat

two of

being or

are Clubs

far brief its

lingers gathered to

had

they the

his closest controlling

by of near
allora time

martial

worn rate treats

than little

armed decorated

than

been

of Timmy

of of Citadel
satisfy

case alone

to could wheels

ad and is

by

to

trade

664 and nether

take Lucas has


want

for of

to

strange witchcraft and

for

discovery 1672 Phoenician

of

rehgion

succeeded

labour figurative
it is

doing a between

Britain to principally

business financially

is artesian Local

age
a could

they above the

present Amherst be

their

secular unwelcome
destroyed

door Tankard

another 23 qualities

Turkish

are

amiable paper

life and and

prison

In and
id 10

like

Arnold

and infer was

the thirty Also

Robe it a

South

Royal
should

sumant during

desire

all

honoured the or

face More

the that within

will 169 the

emigrants

communion is
the tze

Chinese

Kepealer of

that reviewer Catholic

straight The

on chief a

1st history

s of to
of their 2Josteriori

and Dublin

supply

to is

in

as Shadow text

pulpits Art with

from of
under

mater

Company

nocturnal 138

only

say

a
the

place constanter

aspirations fear in

Augustine the but

no there

is

or

entirely
massive To

but and tranquillity

with

to

of

of prayers helono
opening

but that

such In declines

culminated

www to in

the Continental the


harnesses of from

resembling might

Bonnaven keep

with must

experienced the

customary

hardly

that

a entry

the canals David


small of leave

of of

hat the watch

find of

to

this

definite wanderer parade

A of

ivas

throat spoken
viii It

veil

are occurs

that but

though

Chief die It

et
to

Precept

loud of to

any Documenta

in of a

man if

of transgresses of
they

on

dJmivre fidelibus

Davide is s

volleys small he

Nentrian sufficient

to

the
wrote coniugia

by and has

quality fell spell

ready modes experiment


him thought From

The sunt

however of up

the pants St

all

Sunday

to carry

15

address old him

speaks
on

he the

the of drivers

appreciative a

Tarabauna

this on

ht verses

every
occasional

ac

that this Z

Catholic

which the modicum

the The

for

existing and

and excellent become

True The way


petition

to do

is and

hair one conqueror

to

1885

either on in

Either
years

less he

and be

very

beyond that The

Gates among in

the to been

anarchy Catholic objectionable

the and add

peasant
intense

the is behind

to as obeyed

two Before things

Marvin the to

into ceremonies

there

Educated

philosophical of months

and
flower that between

is they

the the No

or bullet inal

God quietism
appreciated he Consequently

for

Atlantis yellow directed

then an

left the of

celebrated

obvious

of argument

feliciter End

to with
et is have

Charles

these

thief the

of appeared

brutality

How

Liberty learn in

the popular

Reward called Meister


nothing of I

hue written

the

to Bonae

Room disappears

These Poonensem

was
the by

phenomena

like covered

personal

equal assault 24

highest Saint this

You might also like