This guide walks you through the process of building a basic scene using marker tracking or image tracking feature of WebAR SDK. The marker images can be tracked using the mobile app developed using WebAR SDK.
New attribute webar-marker="id: 123-xyz" can be added to an Aframe <a-entity> to display a 3D model on a marker/image surface.
Procedure
Follow the below steps to build a basic scene using marker tracking:
Click ‘Add Marker’ from ‘Your Licenses’ tab as shown in the image below
You will be redirected to a page where you can browse or upload the marker. You can also auto-generate a marker which will provide a sample marker for testing the tracking.
Click ‘Browse and Upload’ markers
Choose the desired marker you wish to upload
You can alternatively ‘Drag and Drop’ the marker as shown in the image above, or you can autogenerate a marker.
Up to 10 marker images can be tracked one at a time
Click Confirm
The marker is added to the project.
Manage Markers
The markers can be managed from the ‘Manage markers’ section once the user adds 1 or more markers. Manage markers section will include the following options:
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="#" />
<title>STAGE DEV: Blippar WebAR SDK</title>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<!-- Step 1: Include WebAR SDK script -->
<script src="../webar-sdk-v2.0.2.min.js"
webar-mode="marker-tracking"
auto-init="false"
auto-start="true"
logo-src="images/test_logo_here.png"
logo-width="116px"
logo-height="116px"
progress-dot-ring-scale="0.30"
progress-dot-ring-color="#00AAFF"
progress-ring-scale="0.36"
progress-ring-color="#00FFFF"
progress-ring-line-width="5"
alert-border-color="#00FFFF"
alert-border-width="5px"
alert-background-color="#283747"
alert-message-text-color="#00AAFF"
alert-button-color="#00FFFF"
alert-button-text-color="#283747"
alert-button-height="50px"
alert-camera-permission-text="We need to ask for access to the camera so this experience can work!!!"
alert-camera-permission-button-text="No Problem"
alert-motion-permission-text="Now we need access to motion sensors!!!"
alert-motion-permission-button-text="No Problem"
alert-box-width="290px"
alert-box-height="182px"
alert-box-font-size="24px"
ui-background-color="#283747"
ui-text-color="#00FFFF"
desktop-logo-src="images/test_desktop_logo.png"
desktop-logo-width="108px"
desktop-logo-height="30px"
issue-img-src="images/test_issue_img.png"
issue-img-width="116px"
issue-img-height="116px"
show-guide-view="true"
auto-marker-detection="true"
auto-scan-instruction="Look for a marker to scan..."
auto-scan-instruction-detect="Detecting..."
auto-scan-instruction-idle="Move around to look for a marker"
auto-scan-instruction-text-style="color: orange"
auto-scan-style="display: none; position: absolute; top: 90%; left: 50%; transform: translate(-50%, -50%); z-index: 10000; width: auto; height: auto; text-align: center;"
auto-scan-style-display="block"
scan-btn-width="100"
scan-btn-height="100"
scan-btn-display="block"
scan-btn-instruction="Tap to scan"
scan-btn-instruction-style="color: white"
scan-btn-img-src="images/user_scan-btn-image_here.png"
scan-btn-img-width="50"
scan-btn-img-height="50"
scan-btn-img-x-coordinate="50%"
scan-btn-img-y-coordinate="50%"
scan-btn-img-transform="translate(-25, -25)"
scan-btn-progress-circle-cx-coordinate="50"
scan-btn-progress-circle-cy-coordinate="50"
scan-btn-progress-circle-radius="35"
scan-btn-progress-circle-style="fill: none; stroke: cyan; stroke-width: 6;"
scan-btn-progress-bar-cx-coordinate="50"
scan-btn-progress-bar-cy-coordinate="50"
scan-btn-progress-bar-radius="35"
scan-btn-progress-bar-transform="rotate(-90 50 50)"
scan-btn-progress-bar-color="blue"></script>
</head>
<body>
<!-- Step 2: Add webar-scene attribute to AFrame's <a-scene> tag -->
<!-- Provide a valid Blippar license-key value in the key: property -->
<a-scene
webar-scene="key: 5439e9a1-c035-4eb0-a1a6-ebfb98273b33"
vr-mode-ui="enabled: false"
device-orientation-permission-ui="enabled: false"
loading-screen="enabled: false"
renderer="colorManagement: true;">
<!-- Step 3: Add webar-camera attribute to AFrame's <a-entity camera> tag -->
<a-camera webar-camera></a-camera>
<a-assets timeout="60000">
<a-asset-item id="testmodel1" src="models/MaterialsVariantsShoe.glb"></a-asset-item>
<a-asset-item id="testmodel2" src="models/astronaut.glb"></a-asset-item>
</a-assets>
<!-- Step 4: Add webar-marker attribute with a valid marker id value(obtained from Blippar hub), to AFrame's parent <a-entity> tag -->
<!-- The models defined as a child element under this webar-marker id, will be displayed on the marker image during marker image tracking -->
<a-entity webar-marker="id: b3ed7e4c-7423-44c0-8af1-63567b27a1e9">
<!-- Step 5: Add AR models under the webar-marker nodes -->
<!-- Add webar-loadmonitor attribute to the entities to display loading progress screen before starting the surface tracking -->
<!-- Refer API:Attributes documentation for more details -->
<a-entity gltf-model="#testmodel1" id="testmodel_1" rotation="90 0 0" position="0 0 0" scale="5 5 5" webar-loadmonitor="elType: glb"></a-entity>
</a-entity>
<!-- Step 6: Add another webar-marker attribute with a valid marker id to another parent <a-entity> tag -->
<a-entity webar-marker="id: 7a9ca8e2-bf27-44c1-828d-6bca876bb7a7">
<a-entity gltf-model="#testmodel2" id="testmodel_2" rotation="0 0 0" position="0 -0.5 0" scale="0.25 0.25 0.25" webar-loadmonitor="elType: glb"></a-entity>
</a-entity>
</a-scene>
<!-- Refer API:Functions documentation for more details -->
<script>
WEBARSDK.Init();
// Give a callback when the WebAR Stage <a-entity webar-stage> is ready to display the 3d object
WEBARSDK.SetMarkerDetectedCallback((markerId) => {
console.log('Marker is detected for marker id: ', markerId);
});
WEBARSDK.SetMarkerLostCallback((markerId) => {
console.log('Marker tracking is lost for marker id: ', markerId);
});
</script>
</body>
</html>
To switch between auto marker detection and manual marker detection
By default, auto scan mode is enabled i.e. auto-marker-detection = 'true'. You may switch back to manual marker detection by setting auto-marker-detection = 'false'.
