DEV Community

Kazuhiro Hara™
Kazuhiro Hara™

Posted on • Updated on

Images and words (Image detection sample) - MR Tutorial for Nreal Light

Image of the completed version

This sample displays the message "Detected" when the prepared image comes into view. Learn how to detect images by creating a very simple sample.

Sample Repository

Run the sample

  1. Clone sample repository, Change current directory to ImagesAndWords. And Open with Unity.
  2. (If you don't have NRSDK) Download NRSDK 1.8.0 from Download | Nreal
  3. Open Build Setting, change Platform to Android
  4. Open Project, select Assets > import package > Custom Package and import NRSDKForUnityAndroid_1.8.0.unitypackage.
  5. Check Build Settings > Player Settings by referring to Configure Build Settings
  6. Press Build form Build Settings panel
  7. Install *.apk on Android or DevKit.

Tutorial

1. Setting up the project for Nreal development

  1. See Quickstart for Android - NRSDK Documentation and configure the build settings.
  2. (If you don't have NRSDK) Download NRSDK 1.8.0 from Download | Nreal
  3. Open Project, select Assets > import package > Custom Package and import NRSDKForUnityAndroid_1.8.0.unitypackage.

2. Prepare tracking images

Prepare a sample image for image detection. Multiple images can be set for image detection. The sample is provided as an image named “ImageDetect.png”.

  1. Put it to Assets > Scene .

3. Create TrackingImageDatabase

Image detection requires a database with registered images for image detection.

  1. Select yout tracking Images, and display context menu with right click.
  2. Select Create > NRSDK > TrackingImageDatabase . Then a TrackingImageDatabase will be created.

4. Create SessionConfig

Register the database you just created in SessionConfig.

  1. Move to Assets > Scene , and select Create > NRSDK > SessionConfig then create SessionConfig.
  2. Select the NRKernalSessionConfig you just created and open Inspector .
  3. Enable Image Tracking Mode .
  4. Drag TrackingImageDatabase to Tracking Image Database

5. Set SessionConfig to NRCameraRig

The place to register SessionConfig is in NRCameraRig.

  1. Select Hierarchy > NRCameraRig
  2. Drag NRKernalSessionConfig to Session Config on Inspector > NR Session Behaviour

6. Create C# Script for image detection

  1. Create C# Script in the asset with the file name "IconDetect.cs". Write the code as follows.
using NRKernal;
using NRKernal.NRExamples;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

/// <summary>
/// Icon Detect class using Trackable Images
/// </summary>
public class IconDetect : MonoBehaviour
{
    /// <summary>
    /// Trackable image list
    /// </summary>
    private List<NRTrackableImage> m_NewMarkers = new List<NRTrackableImage>();

    /// <summary>
    /// Display trackable status
    /// </summary>
    public Text text;

    // Start is called before the first frame update
    void Start()
    {
        text.text = "Searching";
    }

    // Update is called once per frame
    void Update()
    {
        NRFrame.GetTrackables<NRTrackableImage>(m_NewMarkers, NRTrackableQueryFilter.New);

        if(m_NewMarkers.Count > 0)
        {
            NRTrackableImage image = m_NewMarkers[0];
            Debug.Log(image.GetCenterPose().ToString());
            // If you use NRAnchor, uncomment the following
            // NRAnchor anchor = image.CreateAnchor();
            text.text = "Detected";
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

7. Put Canvas and Text on the scene

Put Text object for displaying the cube rotation value.

  1. Put Canvas from Create > UI
  2. Put Text as a child of Canvas
  3. Change Text to “Info” on Inspector panel.
  4. Attach IconDetect.cs on Inspector panel of Canvas.
  5. Set Text to Text Text Object.

8. Build

  1. Press Build form Build Settings panel
  2. Install *.apk on Android or DevKit.

9. Test your application by displaying images for image detection

Display the image for image detection on your own smartphone or PC and view the image in Nreal Light. Make sure the text displayed in Nreal Light goes from Searching to Detected.

Top comments (0)