Augmented Reality Markup Language (WIP)

Augmented Reality Markup Language (ARML) is a markup language for creating 3D and augmented reality (AR) content. Using ARML to create AR content is as easy as making a website.

ARML describes the structure of a 3D scene using markup language
ARML is integrated with AR algorithms
ARML use CSS syntax to define the styles of 3D objects and models
ARML uses JavaScript to add interactions to the AR content

The potential for ARML is huge, that so many applications across many different areas can be made. There are lots of work to be done, so any bug reports or feature requests are welcomed in GitHub Issues.

Join Slack

Motivation
Getting Started
ARML Primitives
ARML Components
ARML Style Sheets
JavaScript for ARML
ARML Browser and Web Code Editor

Motivation

Augmented Reality is the future and it's super cool, but even with ARKit or ARCore, only a small group of developers are able to learn and use AR and make amazing stuffs. We hope every developers could easily use AR and the whole process of making AR content will be much simpler. So we designed ARML, which is HTML for 3D/AR, to let everyone create AR contents in minutes.

Getting Started

A Simple ARML

<html>
  <head>
    <title>A simple ARML</title>
    <meta charset="utf-8">
    <style>
      #box {
        rotation: 0 45 0;
      }
    </style>
  </head>
  <body>
    <a-scene id="scene">
      <a-box id="box" position="-1 0.5 -3" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
    </a-scene>
    <script>
      var text = document.createElement('a-text');
      text.setAttribute('value', 'Hello ARML!');
      text.setAttribute('position', '-0.5 0.5 -2.5');
      document.querySelector('#scene').appendChild(text);
    </script>
  </body>
</html>

You can edit the source code on glitch and play with it. ARML is compatible with A-Frame so you can directly see what you made in browser (preview for the above demo). A more interesting demo is here.

Similar to the triad of web development, ARML also have three main parts:

An element-tree to describe the structure of 3D models and elements in the scene;
The style sheets to describe the visual presentation of the content;
A JavaScript runtime to add dynamic effects and interactions.

ARML Primitives

ARML provides a handful of elements such as <a-box> or <a-model> called primitives.

ARML Components

In the entity-component-system pattern, a component is a reusable and modular chunk of data that we plug into an entity to add appearance, behavior, and/or functionality.

In ARML, components modify entities which are 3D objects in the scene. We mix and compose components together to build complex objects. They let us encapsulate Unity and JavaScript code into modules that we can use declaratively from HTML.

HTML attributes represent component names and the value of those attributes represent component data.

Single-Property Component

If a component is a single-property component, meaning its data consists of a single value, then in HTML, the component value looks like a normal HTML attribute:

<!-- `position` is the name of the position component. -->
<!-- `1 2 3` is the data of the position component. -->
<a-entity position="1 2 3"></a-entity>

Multi-Property Component

If a component is a multi-property component, meaning the data is consists of multiple properties and values, then in HTML, the component value resembles inline CSS styles:

<!-- `light` is the name of the light component. -->
<!-- The `type` property of the light is set to `point`. -->
<!-- The `color` property of the light is set to `crimson`. -->
<a-entity light="type: point; color: crimson"></a-entity>

List of Built-in Components

ARML Style Sheets

ARML use a CSS-like style sheets to easily set geometry or visual attributes of the models (position, rotation, etc). Styles should be defined within a <style> element.

<style>
  #model1 {
    position: 1 2 3;
    rotation: 0 180 0;
  }
</style>

Selectors

Selectors are patterns used to select the element. ARML will use CSS3 selectors.

Selectors	Example	Description
`#id`	`#model1`	Selects all elements with `id="model1"`
`.class`	`.class-name`	Selects all elements with `class="class-name"`

Properties

`position`

Set the x, y, z coordinates of the model (default 0 0 0)

`rotation`

Set the Euler angles of the model (default 0 0 0)

`scale`

Set the scale of the model (default 1 1 1)

JavaScript for ARML

WIP

ARML Browser and Web Code Editor

Hippo AR is an iOS ARML browser based on ARKit. You can test and browse AR content built by ARML on Hippo AR.

qftgtr/ARML