2. Marker Recognition
A basic marker recognition scene is composed by;
- The Camera gameobject must be called “Main Camera”
- Clear Flags: Depth only or Solid color with alpha at 0
- “Camera Controller” component attached
- To add the camera right-click in the Hierarchy and select ARWT → WebARCamera
This manager receives tracking information and emits three key events.
- onMarkerDetected(m)
- onMarkerVisible(m)
- onMarkerLost(m) m is an object of type MarkerInfo and contains the name, visibility state, position, rotation, and scale of the tracked marker.
A controller is a component that subscribes to the DetectionManager’s events and handles the state of the object or objects that we want on our AR scene.ARWT provides two examples of controllers; A GenericController and a MultiMarkerController.
MarkerToListen: A string variable that needs the name of the marker we want to work and search for. The marker’s name is the name of the .patt file that you can find inside “Resources → Markers”
Child: Drag here the parent Gameobject of the objects you want to use on the marker. This is the gameobject that will be placed on top of the marker, rotated, scaled, and activated/deactivated according to the tracking events.
Disable the child before building the project. This action prevents seeing the objects in the scene before tracking occurs.
UpdateSpeed: Each frame that a marker is tracked, the Child object position is updated. To avoid the scattering that is caused by positioning the object directly of the tracked marker position, we lerp between the tracked positions. UpdateSpeed represents the speed of the transition.
Position Threshold: Represents the minimum distance that is necessary to surpass to update the transform of the child object. Each frame ARWT receives a different transform of the tracked marker, with this setting you can exclude minimum variations avoiding micro-movements.
Similar to the GenericController but allows many markers for the same child object.
In the same scene, you can have more than 1 controller. Check the “ARMultipleMarker” example scene for more.
ARWT has the possibility to create a marker directly inside Unity (ARWT → MarkerGenerator).
Marker Image: Insert a square image. This will be the center of the marker.
Marker Name: The name of the generated .patt name. This is the name that you need to specify in the controller component.
Image Size: Size of the generated image. 512px is default.
Border percentage: This is the dimension of the border that will be added to the chosen image. We highly raccomend avoiding dimensions smaller than 50. Using lower dimensions can make the marker unrecognizable.
Border Color: Use very dark colors.
Click generate to output a new image inside Resources → Images and a .patt file inside Resources → Markers
To generate a marker you can also use the official AR.js marker training tool. (https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html)
Once created, drag the .patt file inside the Resources → Markers and add the name of the marker in your controllers.
- ARMarker Rotate and Scale
A ready-to-build scene that provides an example of basic interactions. Check the InteractionController script for more.
- ARMarker Simple Button
A ready-to-build scene with an example of UI button.
- ARMarker Multiple Marker
A ready-to-build scene with a MultipleMarkerController and a GenericController in the same scene.
When you build your WebGL project, you can choose a template from Project Settings → Resolution and Presentation → WebGL Template.
ARWT provides a basic WebAR template, ready for your customization. Be sure to select it before building.
