Skip to content
Augmented Reality Markup Language
Branch: master
Clone or download
Latest commit 10d847a Mar 14, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs title Mar 14, 2018
imgs Initial commit Feb 19, 2018
.gitattributes Initial commit Feb 19, 2018
.gitignore Initial commit Feb 19, 2018
README.md add component section Mar 14, 2018

README.md

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

Table of Contents

  1. Motivation
  2. Getting Started
  3. ARML Primitives
  4. ARML Components
  5. ARML Style Sheets
  6. JavaScript for ARML
  7. 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:

  1. An element-tree to describe the structure of 3D models and elements in the scene;
  2. The style sheets to describe the visual presentation of the content;
  3. 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.

You can’t perform that action at this time.