Skip to content

Concepts

Before diving into AR with you, I need to introduce a few concepts. Please take the time to read them all. Feel free to come back to this page at any time.

Fundamental concepts

Let me clarify what I mean by terms such as Augmented Reality and WebAR:

  1. Augmented Reality is the augmentation of physical reality with virtual elements. We typically augment physical reality with imagery generated by computer graphics. In this context, the word augment means: to blend the physical and the virtual imagery in a visually correlated manner.

    1.1. AR is an abbreviation of Augmented Reality.

  2. An Augmented Reality experience is a computer program designed to let users directly experience Augmented Reality1. Augmented Reality experiences come in different shapes. Some are designed for smartphones and tablets, others for special headsets, and so on.

  3. WebAR is a set of technologies used to create Augmented Reality experiences that run in web browsers. WebAR makes it easy for users to experience AR, because they can have immediate access to the AR experiences. All they have to do is open a web page. They are not tied to specific platforms and they also don't need to download apps.

  4. A WebAR experience is an Augmented Reality experience developed using WebAR technology.

  5. MARTINS.js is a WebAR technology. I also call it a WebAR engine. Lots of computations have to be performed behind the scenes in order to make an Augmented Reality experience possible. MARTINS.js uses the GPU2 to accelerate many of those computations. In fact, the GPU and the CPU3 are used together. This approach improves the performance of the WebAR experience and ultimately leads to a better user experience.

Now that those terms are clarified, I say this: you can use MARTINS.js to create amazing WebAR experiences! 😉

Practical concepts

Let me explain some concepts that you'll see over and over again when developing WebAR experiences with MARTINS.js:

  1. The experience of Augmented Reality is created by augmenting the physical scene with the virtual scene.

    1.1. The physical scene is a scene of the physical world.

    1.2. The virtual scene is a scene generated by computer graphics.

    1.3. The augmented scene is the physical scene augmented with the virtual scene.

  2. A session is a central component of a WebAR experience. It handles the main loop. The main loop performs two central tasks: it analyzes the input data and then passes the result of that analysis to the user callback.

    2.1. The user callback is a function that updates and renders the virtual scene.

    2.2. The main loop is repeated until the session ends. The session ends when the user closes the web page, or by deliberate command.

  3. A session has one or more sources of data linked to it. A typical source of data is a video stream. Such a stream usually comes from a webcam or from a video file.

    3.1. A source of data produces input data.

  4. A tracker is a subsystem of the WebAR engine that analyzes input data in some way. Trackers are meant to be attached to a session. Example: an image tracker is a type of tracker. If we attach an image tracker to a session, then we will be able to track images in that session.

  5. The user callback receives a frame. A frame is an object that holds data for rendering the virtual scene in a way that is consistent with the input data at a particular moment in time. Simply put, frames help us augment the physical scene with the virtual scene.

    5.1. The data held by a frame is computed by the trackers that are attached to the session.

  6. A session is linked to a viewport. The viewport is the area in which we'll display the augmented scene. It's represented by a container defined by a suitable HTML element, typically a <div>.

  7. A session has a mode. The mode can be either immersive or inline.

    7.1. In immersive mode, the augmented scene is displayed in such a way that it occupies, in a best-fit manner, the entire area of the screen in which the web page is shown. Think of it as a kind of fullscreen. The immersive mode is what is typically wanted.

    7.2. In inline mode, the augmented scene is displayed in a way that is consistent with the typical flow of a web page. We can display the augmented scene in a web page such as this one - in the middle of text, links and other elements.

Did you read it all? Cool, so let's create our first WebAR experience! It gets to be fun, I promise! 😉

  1. This definition of AR experience is convenient in different ways. For example, it makes the term "WebAR experience", which is arguably better than "WebAR app" (no apps are downloaded), well-defined. I make a distinction between AR experience and experience of AR. An experience of AR is an event in consciousness in which AR is experienced. I sometimes use the latter definition. ↩

  2. Graphics Processing Unit ↩

  3. Central Processing Unit ↩