A-frame

Refer custom HTML attributes that can be utilized

Blippar Documentation Centre

Introduction

These are Blippar WebAR SDK’s custom HTML attributes that are used with A-Frame’s Entity and Scene. They are available to use after the WebAR SDK script has been loaded.

A-frame

webar-camera

Usage

<a-camera webar-camera> </a-camera>

or

<a-entity camera webar-camera> </a-entity>

Description

When A-Frame’s <a-entity camera> or <a-camera> is added with the webar-camera attribute, it becomes the WebAR camera for surface tracking.

Example

<a-camera webar-camera></a-camera>

Only a single A-Frame camera is supported.

webar-loadmonitor

Usage

<a-entity webar-loadmonitor> </a-entity>

Used by the entities that are loading an asset.

Description

Monitors the loaded state of an asset in an A-Frame entity. The initial loading progress bar will be displayed until all of these assets are loaded and after the camera video appears on screen.

For faster loading times and to ensure entities have been fully loaded before showing the scene the elType property should be defined, default value is 'none'. Values are shown in the table below.

Properties

Property	Value
elType:	<one of the elType enum values>

Enum Values

elType enum values	A-Frame’s Event listened
glb	model-loaded
obj	model-loaded
asset	loaded
texture	materialtextureloaded
video	materialvideoloadeddata
none	Waits for 500 ms

Example

<a-assets>
  <a-asset-item 
    id="astronaut" 
    src="models/astronaut.glb">
  </a-asset-item>
</a-assets>

<a-entity
  gltf-model="#astronaut" id="astronaut_1"
  rotation="0 0 0" position="0 0 0" scale="0.25 0.25 0.25"
  webar-loadmonitor="elType: glb">
</a-entity>

webar-marker (Marker Tracking)

Usage

<a-entity webar-marker="id: dddddddd-uuuu-mmmm-mmmm-yyyyyyy11111"> </a-entity>
<a-entity webar-marker="id: dddddddd-uuuu-mmmm-mmmm-yyyyyyy22222"> </a-entity>
...

To be used with a parent entity of the 3D model entities that have to be displayed on a marker image.

Description

When an A-Frame’s topmost parent a-entity in a scene is added with the webar-marker attribute, it becomes the placeholder for the 3D models that have to be displayed over the image of the corresponding marker id specified as the value of the id: property.

Up to 10 markers can be uploaded per WebAR SDK Project (or license) in the Blippar Marker Manager. Each marker image can be linked to an AFrame's <a-entity webar-marker="id: <marker_id>"> by replacing <marker_id> with a valid marker id obtained from the Blippar Marker manager after uploading an image.

The number of <a-entity webar-marker="id: <marker_id>"> elements should match with the number of marker images uploaded in the Blippar Marker Manager. Each <a-entity webar-marker="id: <marker_id>"> should have a unique <marker_id> obtained for each uploaded image in the Blippar Marker Manager.

Properties

Property	Value
id:	Marker id value obtained from the Blippar Manager after uploading an image.

• When the webar-mode="marker-tracking" attribute is set in the WebAR SDK <script> tag, at least one <a-entity webar-marker="id: <marker_id>"> element is expected.

• If any of the marker images uploaded to Blippar Marker Manager is not linked with a <a-entity webar-marker="id: ..."> element, then any one of the models from the existing <a-entity webar-marker="id: <marker_id>"> in the scene will be displayed when scanning that image for marker tracking.

Example

<a-entity webar-marker="id: dddddddd-uuuu-mmmm-mmmm-yyyyyyy11111">
  <a-entity gltf-model="..."></a-entity>
  <a-entity geometry="..."></a-entity>
</a-entity>

<a-entity webar-marker="id: dddddddd-uuuu-mmmm-mmmm-yyyyyyy22222">
 <a-entity gltf-model="..."></a-entity>
 <a-entity geometry="..."></a-entity>
</a-entity>

...

webar-scene

Usage

<a-scene webar-scene="key: ..."></a-scene>

Description

When A-Frame’s a-scene is added with the webar-scene attribute, it becomes the WebAR scene for surface tracking.

Properties

Property	Value
Key:	<License key purchased from Blippar>

Example

<a-scene
webar-scene="key:xxxxxxxx-1111-2222-3333-yyyyyyyyyyyy"
vr-mode-ui="enabled: false"
device-orientation-permission-ui="enabled: false"
loading-screen="enabled: false">

• In the above example, ‘xxxxxxxx-1111-2222-3333-yyyyyyyyyyyy’, has to be replaced with your website domain’s license.

• The license key can only be used on a HTTPS server that has the same public domain name for which the license was purchased or for a local HTTPS server that has the same private IP address as the domain name. Please see the Local Development Guide for more details.
• Please use the values of the attributes ‘vr-mode-ui’, ‘device-orientation-permission-ui’ and ‘loading-screen’ as shown in the above example.

webar-stage (Surface Tracking)

Usage

<a-entity webar-stage> </a-entity>

To be used once with a parent entity of all of the 3D model entities that have to be displayed on the surface tracking scene.

Description

When an A-Frame’s topmost parent a-entity in a scene is added with the webar-stage attribute, it becomes a stage for the 3D models that have to be displayed on the surface tracking WebAR scene. In other words, all the 3D model entities have to be added as children to this <a-entity webar-stage> element.

Note

Only one <a-entity webar-stage> is supported.

Example

<a-entity webar-stage>
  <a-entity gltf-model="..."></a-entity>
  <a-entity geometry="..."></a-entity>
</a-entity>