26 July 2016

HoloLens CubeBouncer application part 5-using gravity, adding more speech & sound, and app icons

Preface

imageIn the previous post I showed you how to integrate speech recognition. This post mostly builds upon stuff we now already know. It introduces actually one new concept. From the very first post you might recall I instructed you to turn off gravity in the rigid body component. Hence, the cubes float in the air. But they still have mass, so like any body a cube has inertia. You will notice that when you bounce two cubes – they keep on moving, although they slowly lose speed (because we also defined drag). If you were to set drag to zero, you get the effect as if the cubes move through vacuum – they just keep on moving, as Sir Isaac Newton described in the first of his three laws of motion. So if you were to suddenly switch on gravity, the floating cubes would drop to the floor. Of course, in real life you would not be able to switch gravity on and off at will, but in AR magic is just a matter of setting the right property. And that is exactly what we are going to do.

Down she goes!

We open the CubeManipulator script, and add a one line method:

public void OnDrop()
{
  _rigidBody.useGravity = true;
}

Did I mention using Unity feels a lot like cheating? I did, right? We also need to add a line to the top of the OnRevert method, or else the cube will move to it’s old position when we call “go to start”, but after that it will immediately drop to the floor again. That’s not what we want. when the cube returns, we turn on gravity off for that particular cube.

public IEnumerator OnRevert()
{
  _rigidBody.useGravity = false;
  //rest of method

And then it’s a matter of adding a new command to the SpeechManager:

if (cmd == DropCommand)
{
  if (GazeManager.Instance.Hit)
  {
    GazeManager.Instance.HitInfo.collider.gameObject.SendMessage("OnDrop");
  }
}

Of course you have to define “DropCommand” and add it to the the keyword recognizer like in the previous post, but that’s all. Rebuild the project from Unity, deploy the Visual Studio solution, look at a cube, say “drop” and it falls to the floor. And if you say “go to start” it will still go back to it’s old position and stay there. Easy, right?

Dropping and returning all cubes

By now I think you won’t find this very hard to understand anymore. First, we need actually implement the code in the MainStarter, as this is the object that knows which cubes are available:

public void RevertAll()
{
  foreach (var c in _cubes)
  {
    c.SendMessage("OnRevert");
  }
}

public void DropAll()
{
  foreach (var c in _cubes)
  {
    c.SendMessage("OnDrop");
  }
}

Every cube knows where it came from, so we only have to call “OnRevert” on every cube. In the same line, calling “OnDrop” for every cube will drop all cubes. And in the SpeechManager we just add two commands to recognize: “drop” and “total recall”, or whatever for phrases you choose for these commands. When the phrases are recognize, simply call the right method:

if (cmd == RevertCommand)
{
    _mainStarter.RevertAll();
}

if (cmd == DropAllCommand)
{
   _mainStarter.DropAll();
}

Of course you have to define the RevertCommand and the DropCommand fields again and add them to the KeywordRecognizer, but once again – very little code, powerful functionality. Clever use of and already very clever the SDK goes a long way.

Adding some missing sounds

imageSo in the video I showed in the first post, “create new grid” gave a kind of ping-sound, a returning cube a whistling sound, and “total recall” made a kind of  “tadadaah” sound. I find these kind of affirmative sounds very useful for giving feedback to the user that the app understands you, although it practice you might go for a little less garish sounds than I did ;). 

I added three sounds to Assets/Custom/Audio in Unity, then added an audio source to the Managers game object. I only changed the settings “Play on awake” (to off) and Volume (to 0.5)

Then we proceed to MainStarter.cs, and we add two public AudioClips fields and a private AudioSource clip:

public AudioClip ReadyClip;

public AudioClip ReturnAllClip;

private AudioSource _audioSource;

The Audio source of course needs to be initialized in Start:

_audioSource = GetComponent();

At the top of the CreateGrid method we add one line:

private void CreateGrid(Vector3 hitPosition)
{
  _audioSource.PlayOneShot(ReadyClip);

And we do something similar at the top of the RevertAll method

public void RevertAll()
{
  _audioSource.PlayOneShot(ReturnAllClip);

Go back to Unity, drag the Audio assets “Ready” and “Return all” on top of the Main Starter Script in Managers. We have done that a couple of times already but the be sure, one more time a picture that shows what I mean here:

image

Then rebuild the project, re-deploy from Visual Studio, and sure enough you will hear the sounds the “pringgg!” sound when the grid is created (at app start-up, and when you say “create new grid”), and the “tadadaah” when you say “totall recall”

Then for the final sound – the whistling sound the cube makes when it returns. Well, that’s almost the same, only now we go to the CubeManipulator script, and add a field:

public AudioClip ComeBackClip;

And on top of the of the OnRevert method we just need this?

public IEnumerator OnRevert()
{
  _audioSource.PlayOneShot(ComeBackClip);

Go back to Unity, select the WortellCube prefab and drag the “Return” Audio assets on top of the field “Come Back Clip” that now has appeared on the CubeManipulator script component. Rebuild your project, deploy the Visual Studio solution and indeed, the cube now returns with a whistling sound. when your say “go to start”.

The problem now only is – when you say “total recall” now, they app will play the “tadadaah” sound and a lot of time the whistling sound simultaneously, resulting in quite a cacophony. After all, we are calling the OnRevert method for every single cube. This is not a good user experience. So we will have to change a few things.

Some tweaks to improve the sound experience

We need some way to tell the cubes not to play their sound on “total recall”. To that end, we first need to change the OnRevert method as follows:

public IEnumerator OnRevert(object doPlaySound)
{
  if ((bool) doPlaySound)
  {
    _audioSource.PlayOneShot(ComeBackClip);
  }

Then we go back to the SpeechManager, and in the method KeywordRecognizer_OnPhraseRecognized we add “true” to the OnRevert message that is fired when “go to start” is recognized

if (cmd == GoToStartCommand)
{
  if (GazeManager.Instance.Hit)
  {
    GazeManager.Instance.HitInfo.collider.gameObject.SendMessage("OnRevert", true);
  }
}

In contrast, in the MainStarter script we need to add false in OnRevert:

public void RevertAll()
{
  _audioSource.PlayOneShot(ReturnAllClip);
  foreach (var c in _cubes)
  {
    c.SendMessage("OnRevert", false);
  }
}

imageAnd now if you say “totall recall” you will once again only hear the “tadadaa”, while a “go to start” still lets one cube return with the whistling sound.

Tiles and naming

I have added 5 files to the “Assets/Custom/UWPAssets” folder in Unity (see right). These are all 200% assets. So what you need to do is:

  • Hit File/Build settings/Player settings
  • Go to the right, to the inspector.
  • Expand the Icon pane
  • Scroll all the way down to “Universal 10 tiles and Logos”

image

  • Expand the Square 44x44 Logo pane
  • Scroll down to the “Scale 200%, (88x88 pixels)”
  • Hit the “select” button in the square on the right
  • Select “Square44x44Logo” from the popup

Your net result should be this.

image

image

Repeat this for the other for logo formats. When you are done and you collapse all the image panes, they should all have the suffix”(200)” now.

 

 

Finally, we scroll all the way to the top again, and change the following settings:

  • Change the company name into whatever you like – I took “LocalJoost Ltd.” This not not mandatory
  • Change “Product name” to “CubeBouncer”
  • Hit the “Select” button on the “Default icon” square and once again select the 310x310 square logo
  • Under “Icon”, change short name into “CubeBouncer”
  • Check “Large tile” and “Wide tile” under “Show name on”.

Net result:

image

At this point it’s best to close Visual Studio, and delete the generated solution from the App folder. We have effectively changed the app title, yet you will notice that it does not have any effect if you keep the solution. If you generate the solution anew, you will see it’s name is different too – it’s now called CubeBouncer.sln, no longer CubeBouncerDemo.sln. If you deploy it to a HoloLens, you will see either this in the all apps menu

image

and this one when you have pinned it:

image

And that’s it! Were done!

Concluding remarks

After setting up Unity, adding air taps, force, spatial sound, voice recognition, gravity and some imagery we have a simple but functional HoloLens app the demonstrates a lot (bot not nearly all) of HoloLens interaction model. I hope you enjoyed this trip, I sure had a lot of fun building and documenting it. It was a very educating experience for me and I found it a very fitting subject for the 256th post on this blog ;). Should you have any remarks, questions or improvements, let me know.

The source code for the final project can be downloaded here.

Oh… There is still a very minor issue with it, though. I wonder if anyone actually finds it. András Velvárt is excluded from competition.  Let me know if you find it. 

23 July 2016

HoloLens CubeBouncer application part 4-integrating speech commands and moving cubes by code

Preface

In the previous post I showed how you could interact with the cubes using air taps, utilizing the physics engine. In this blog post I am going to show how to move the cubes by code (bypassing the physics engine) – and doing so using speech commands.

But first…

The funny thing is - when retracing you steps and documenting them, you are found out things can be done in a smarter way. It’s like giving a code review to your slightly younger, slightly less knowledgeable self. In post 2, I state you should drag the MainStarter script onto the HologramCollection game object. Although that works, in hindsight it’s better to put that under the HologramCollection/Managers object. So please remove the script from the HologramCollection object, drag it anew from your assets on top of the Managers object, then drag the WortellCube prefab on top of the Cube field again.

HoloLens speech recognition 101

The speech recognition API for HoloLens in Unity3D is so simple that there’s basically not much else than 101. I had a look at Rene Schulte’s HoloWorld speech manager and was like… is that all? Well, apparently it is. So I created my own SpeechManager script, and added it to the Managers object. It’s basically a modified copy of Rene’s. Why re-invent the wheel when people smarter than yourself already have done so, right?

The speech manager at this point implements only two commands:

  • “create new grid”
  • “go to start”

and looks like this:

using UnityEngine;
using HoloToolkit.Unity;
using UnityEngine.Windows.Speech;

public class SpeechManager : MonoBehaviour
{
  public string GoToStartCommand = "go to start";

  public string NewGridCommand = "create new grid";

  private KeywordRecognizer _keywordRecognizer;

  private MainStarter _mainStarter;

  // Use this for initialization
  void Start()
  {
    _mainStarter = GetComponent<MainStarter>();
    _keywordRecognizer = new KeywordRecognizer(
      new[] { GoToStartCommand, NewGridCommand });
    _keywordRecognizer.OnPhraseRecognized += KeywordRecognizer_OnPhraseRecognized;
    _keywordRecognizer.Start();
  }

  private void KeywordRecognizer_OnPhraseRecognized(PhraseRecognizedEventArgs args)
  {
    var cmd = args.text;

    if (cmd == NewGridCommand)
    {
      _mainStarter.CreateNewGrid();
    }

    if (cmd == GoToStartCommand)
    {
      if (GazeManager.Instance.Hit)
      {
        GazeManager.Instance.HitInfo.collider.gameObject.SendMessage(
          "OnRevert");
      }
    }
  }

  private void OnDestroy()
  {
    if (_keywordRecognizer != null)
    {
      if (_keywordRecognizer.IsRunning)
      {
        _keywordRecognizer.Stop();
      }
      _keywordRecognizer.Dispose();
    }
  }
}

In short – when the keywords “go to start” are recognized, “OnRevert” is called on the game object that you are looking at. We have seen this kind of message sending in the previous post already.If you say “create new grid” the CreateNewGrid method is called. This tries to find the MainStarter class as a component (it being at the same level in the Managers game object, it fill find it) and call the method directly. But neither methods are implemented, you will even notice the squiggly lines under CreateNewGrid. So let’s tackle that first, because now our project does not even compile.

(Re)creating a grid.

Creating a new grid is, simply put, deleting the old cubes are creating a new set. This implies that we must know which cubes are present now, something we don’t know now. This actually requires very little extra code:

private readonly List<GameObject> _cubes = new List<GameObject>();

public void CreateNewGrid()
{
  foreach (var c in _cubes)
  {
      Destroy(c);
  }
  _cubes.Clear();

  _distanceMeasured = false;
  _lastInitTime = DateTimeOffset.Now;
}

Very simple – all cubes created are stored in a list. So we need to destroy them one by one, and then we set the _distanceMeasured and _lastInitTime back to their start value – and the Update method that is called once per frame will do the rest. We also have to add one extra line to the CreateCube method in order to collect the created cube, at the end:

private void CreateCube(int id, Vector3 location, Quaternion rotation)
{
  var c = Instantiate(Cube, location, rotation) as GameObject;
  //Rotate around it's own up axis so up points TO the camera
  c.transform.RotateAround(location, transform.up, 180f);
  var m = c.GetComponent<CubeManipulator>();
  m.Id = id;
  _cubes.Add(c);
}

imageSo now the only thing you need to do is drag the SpeechManager script on top of the Managers object too. When you are done, the Managers object should look like you see at the right.

Rebuild the UWP app from Unity, and deploy it using Visual Studio. And there we are. When you said “create new grid” the grid is immediately updated. Still without the ringing sound that shows in my initial video, but we will add that in a later stage.

Sending a cube back to where it came from

As we saw, we already implemented a call to an OnRevert method in the Speech Manager to recall the cube we are looking at to its original position, but we have not implemented it. To this intent, a cube needs to know where it came from and how it was rotated when it was created. So we add the following private fields to the cube:

private Vector3 _orginalPosition;

private Quaternion _originalRotation;

And we set those fields in Start by reading the information from the transform:

void Start()
{
  _rigidBody = GetComponent<Rigidbody>();
  _audioSource = GetComponent<AudioSource>();

  _orginalPosition = transform.position;
  _originalRotation = transform.rotation;
}

So now we need to implement the “OnRevert” method itself like this:

public IEnumerator OnRevert()
{
   var recallPosition = transform.position;
   var recallRotation = transform.rotation;

  _rigidBody.isKinematic = true;

  while (transform.position != _orginalPosition &&
         transform.rotation != _originalRotation)
  {
    yield return StartCoroutine(
      MoveObject(transform, recallPosition, _orginalPosition,
                 recallRotation, _originalRotation, 1.0f));
  }

  _rigidBody.isKinematic = false;
}

So first we we make sure we retain the current position and rotation. Then we set the isKinematic property of the rigid body to true. This effectively turns off the physics engine, so now we can move the cube ourselves. And then we loop over a so-called coroutine until the cube is back to it’s original position and rotation. I think of it as Unity’s equivalent of an async operation. Basically it says – animate the current transform smoothly from the current position to the original position, and at the same time rotate it from it’s current rotation to the original rotation, in 1.0 second. The coroutine itself is implemented like this:

// See http://answers.unity3d.com/questions/711309/movement-script-2.html
IEnumerator MoveObject(Transform thisTransform, Vector3 startPos, Vector3 endPos, 
  Quaternion startRot, Quaternion endRot, float time)
{
  var i = 0.0f;
  var rate = 1.0f / time;
  while (i < 1.0f)
  {
      i += Time.deltaTime * rate;
      thisTransform.position = Vector3.Lerp(startPos, endPos, Mathf.SmoothStep(0f, 1f, i));
      thisTransform.rotation = Quaternion.Lerp(startRot, endRot, Mathf.SmoothStep(0f, 1f, i));
      yield return null;
  }
}

How this works, is – as you can read in the source – is explained here. That sample only applies to moving an object - I have applied that knowledge to both moving and rotating. It basically is a way to smooth out the animation – if you  pay close attention, you will see that the cube starts slows, speeds up very fast, and then slows down again. I must admit that I am quite missing some of the finer points myself still, but this is how it can be done. Important, by the way, is that isKinematic gets set to false again once the cube is back on its place. Fun detail – if a cube that is moving back to it’s start position hits another cube, it is bumped out of the way, because for the cube that is hit, the physics engine is still working ;)

Finally, at the top of the OnCollision method we need to make sure returning objects don’t interfere with other cubes in terms of making sound and other stuff.

void OnCollisionEnter(Collision coll)
{
  // Ignore returning bodies
  if (_rigidBody.isKinematic) return;

And now, if you say “go to start” when you are looking at a specific cube, it will move to the location it came from.

Concluding remarks

In the previous post I have showed you how to move objects using the physics engine - this post has showed you have how to integrate speech commands and move objects via code – remarkably little code, yet again. Once again, you can see the code of the project so far here.

13 July 2016

HoloLens CubeBouncer application part 3-air tapping the cubes away and adding spatial sounds

Preface

In the previous post I showed you how to create a neatly arranged grid aligned to your view in your HoloLens app. Now, it’s time to make a mess of it – I am going to show you how to employ air tap on the cubes to move the them around, and gaze to determine which way they go. Plus, we are going to add some sound to them – when they bounce against each other, and against the wall.

Steal some sounds

image

First of all, we need two short sound clips. One for two cubes hitting each other, one for a cube hitting a wall. Any clip will do, as long as it’s short. I took two from the “Free Casual Sounds SFX Pack” that you can find in the Unity Asset Store (Click Windows/Assets Store or hit CTRL+9)

 

 

imageBeware: importing directly from the store can get you more than you have bargained for, bloating your project with unnecessary stuff. I tend to create a new Unity3d project and import the package there first, to see what happens. And in this case I just cherry picked two sounds, that I called BounceCubel.wav and BounceBall.wav. Then I dragged into the Assets/Audio folder in Unity, as displayed here to the left.

Now it’s time for coding again. That is to say …

Steal some scripts

Writing code is awesome – not having to write code is even better. In the HoloLens toolkit there’s a script that almost does what we want. It’s called “GestureManager” and it’s in Assets\HoloToolkit\Input\Scripts. It’s a script that handles the air tap and sends a kind of message to a selected object. That is almost what we want. We need to copy and adapt it a little.

The next few steps are best done when Unity3d is not running, as it starts to parse scripts as soon as they appear in the folder:

  • Copy Assets\HoloToolkit\Input\Scripts\GestureManager.cs to. Assets\Custom\Scripts
  • Rename the file to RaySendingGestureManager.cs
  • Open RaySendingGestureManager.cs and change the class name to RaySendingGestureManager
  • Change “Singleton<GestureManager>” into “Singleton<RaySendingGestureManager>”
  • Remove the namespace namespace HoloToolkit.Unity
  • Add “using HoloToolkit.Unity” on top.
  • Find the method GestureRecognizer_TappedEvent
  • Change it to the following:
private void GestureRecognizer_TappedEvent(
     InteractionSourceKind source, int tapCount, Ray headRay)
{
    if (focusedObject != null)
    {
        focusedObject.SendMessage("OnSelect", headRay);
    }
}

Basically, the only thing you do, is pass on the headRay “Ray” as extra parameter to the focusedObject.SendMessage method. This means that Unity3d should search for a Script component in the selected GameObject, find a method “OnSelect” in there with a a single parameter of type object - and invoke that. This feels a bit Javascripty, only even less typed, and there is no punishment, either: if the method is not found, nothing happens. No error – just nothing. It that sense it’s like sending a message indeed – if no-one is listening, we don’t care. Talk about loose coupling. You can’t get much looser than this ;)

Why do we need to send the headRay? Because we want the selected object to know from which direction it’s being looked at when you tap. If you want to know the details of air tap, have a look at the rest of the script. For now, we should be content that there is a method called on the selected object – i.e. the WortellCube – when there is an air tap while the cursor is on it.

One more thing – we need to apply the script. Select the HologramCollection/Managers object in the Hierarchy pane, then hit the “Add Component” button, Type “Ray Sending” in the search box and add the Ray Sending Manager component. Net result should be this:

image

Message sent – now catch it!

Okay, so whenever someone air taps while their gaze is at ‘something’, Unity3D tries to call on “OnSelect” method. Let’s make sure that if that something is a WortellCube, it listens to it. Start as follows:

  • Select the “Assets/Custom/Scripts folder
  • Right click, hit Create/C# script
  • Call it “CubeManipulator”
  • Select the WortellCube Prefab
  • Drag the new script on top Inspector tab, below the “Add Component” button.
  • Hit File/Build Settings/Build and build the solution
  • Open the Visual Studio solution (or reload it)

Open the CubeBouncer.cs script, and change it so it looks like this:

using HoloToolkit.Unity;
using System.Collections;
using UnityEngine;

public class CubeManipulator : MonoBehaviour
{
    private Rigidbody _rigidBody;

    public int ForceMultiplier = 100;


    // Use this for initialization
    void Start()
    {
        _rigidBody = GetComponent<Rigidbody>();
    }

public void OnSelect(object ray) { if (!(ray is Ray)) return; var rayData = (Ray)ray; _rigidBody.AddForceAtPosition( new Vector3( rayData.direction.x * ForceMultiplier, rayData.direction.y * ForceMultiplier, rayData.direction.z * ForceMultiplier), GazeManager.Instance.Position); } } }

Since the script is now part of a compound object, I can easily get a reference to other components in that objects. In this case, we can get a reference to the RigidBody component. For performance reasons (and because I find it more tidy looking), we store that in a private field that is initialized in the Start method.

And then there’s the OnSelect method. After first checking if we indeed get a Ray supplied in the ray parameter, we simply call the RigidBody’s AddForceAtPosition with a Vector3D made out of the direction of the Ray, times 100, and the position where the cursor is now. And that’s it. Unity gives the Cube a push in the direction you are looking on the place where your gaze is locked on the cube. And off it goes, spinning into the void, bouncing off other cubes and walls. Notice the cubes slowly slow down by themselves. That is all caused by the physical characteristics – the bouncyness of the Physic Material, the weight and drag of the Rigid Body. Having written software that calculates bouncing at angles myself, it almost feels like cheating. But this is the awesome power of a fleshed out physics engine.

To see this stage you actually have to rebuild the project from Unity first again or you will get an “[Position out of bounds!]” error when you try to run the app on a HoloLens or the emulator. This is because we have added a public field again, which translates into a property that can be filled by Unity. Every time you add public field to a script you will have to rebuild the project from Unity.

There is a still a thing missing. The cubes bounces off each other in dead silence. Time to fix that, and make the experience more immersive.

Let’s make some noise!

First, we need to add three public and one private field to the CubeManipulator script:

private AudioSource _audioSource;

public int Id;

public AudioClip BounceTogetherClip;

public AudioClip BounceOtherClip;

_audioSource gets initialized in Start as well:

void Start()
{
  _rigidBody = GetComponent<Rigidbody>();
  _audioSource = GetComponent<AudioSource>();
}

And then we have to act on a collision. That is just another simple private method that is automatically called by Unity. And wouldn’t you know it, it’s called “OnCollision” – duh ;). So let’s add that to the script:

void OnCollisionEnter(Collision coll)
{
  // Ignore hits by cursors
  if (coll.gameObject.GetComponent<CursorManager>() != null) return;

  // Play a click on hitting another cube, but only if the it has a higher Id
  // to prevent the same sound being played twice
  var othercube = coll.gameObject.GetComponent<CubeManipulator>();
  if (othercube != null && othercube.Id < Id)
  {
    _audioSource.PlayOneShot(BounceTogetherClip);
  }

  // No cursor, no cube - we hit a wall.
  if (othercube == null)
  {
    if (coll.relativeVelocity.magnitude > 0.1)
    {
      _audioSource.PlayOneShot(BounceOtherClip);
    }
  }
}

So if a cube collides with a GameObject that has a CursorManager – it’s a cursor, so ignore it. But if it has a CubeManipulator - it’s a cube too! Then play the BounceTogetherClip AudioClip. But only if the Id of this cube is lower than the cube we hit – to prevent double sounds. If it was not a cursor or another cube, it was most likely a wall – so play the BounceOtherClip, but only if the cube hit the wall ‘hard enough’.You do this by checking the collision magnitude. I took a quite arbitrary value. Once again – it feels like cheating. Unity takes care of mostly everything.

Aside – don’t try to be smart and change “if (othercube != null && othercube.Id < Id)” into
if (othercube?.Id < Id)”. It will compile, it will run, and it will also mess up Unity3d. Avoid C# 6 constructs.

We only need to do a couple of things more to not only see but also hear our app at work. too. Save the script, then go back to Unity. Open the WortellCube prefab again, scroll down to the CubeManipulator script component. You will see – like expected – the script has three extra properties now: Id, Bounce Together Clip and Bounce Other Clip. So drag the Audio asset “BounceCube” on top of the Bounce Together Clip field, and BounceWall on top of Bounce Other Clips. Net result should be this:

image

Build the project again, and go back to Visual Studio. There is that tiny thing about the Id we have to solve. Because now we have an Id, but nothing is set yet. Remember that in the previous post the method CreateCube in MainStarter.cs had an id parameter that was not used? Well, now we are going to use it. We change that method a little by adding two lines:

private void CreateCube(int id, Vector3 location, Quaternion rotation)
{
  var c = Instantiate(Cube, location, rotation) as GameObject;
  //Rotate around it's own up axis so up points TO the camera
  c.transform.RotateAround(location, transform.up, 180f);
  var m = c.GetComponent<CubeManipulator>();
  m.Id = id;
}

And thus we assign the Id we need to make only one cube play the bounce together sound when two cubes hit. Deploy the project to a HoloLens or an emulator, and the cubes click when they bounce together, or emit a kind of boom when they hit the wall:

Also, if you have an actual HoloLens, try turning your head after launching some cubes – you will hear the sound actually coming from the right direction. This is because we have included an AudioSource component configured for Spatial Sound in the WortellCube prefab - and that travels along with the cube. Once again – it feels like cheating, but it works.

Concluding remarks

We have learned to intercept air taps, and apply directed force to a rigid body – making cubes all bounce by themselves (or actually, by Unity. We have also learned to act on collisions, and play spatial sound. Still by writing very, very little code. Next time – speech command and moving stuff yourself!

You can find, as always, the completed project so far here.

09 July 2016

HoloLens CubeBouncer application part 2-create the gaze aligned cube grid

Preface

In the previous post, I have showed you how to setup a very basic HoloLens application that only shows one floating cube – exactly on the spot where your head is when you start the app. You actually had to get up and look backwards to where your head was to see it. In this post I will show you how to dynamically create a grid of cubes, aligned with your head, based upon the available space. This space is defined by the distance HoloLens measures between you and where your gaze hits a physical object. Or, failing to find such a object (because you are staring in empty space or an object too far away) it will make a small ‘fixed’ grid.

But first some spatial mapping

In order to find a wall, we first have to instruct HoloLens to actually start looking for it. It’s not turned on by default in an app – it’s a resource intensive process and it would not make sense to turn in on in an app that does not use it. You might have noticed that the gazing cursor, which we added in the previous post, actually never appeared unless you looked directly at the lonely cube. Now we will make it appear when you look at a wall or object. Turning spatial mapping on is actually very easy:

 image

First, type “spatial” in the search box. This will search through all your asset folders. Then, locate the SpatialMapping prefab. In Unity3D, a prefab is a reusable set of components that can be used over and over again, without having to build it up from it’s parts and set all the properties every time you want use it. If you did follow my advice and had a look at Rick Barraza’s awesome Creative Coding series you will have had the concept explained.

Hit File/Build/Build settings to re-create the Visual Studio Solution, the deploy the app using Visual Studio. First, you won’t see much difference. But then suddenly the “Spatial Mesh” will appear, and you will the ‘gaze cursor’ following your gaze where ever it hits a wall. (indicated by a red arrow I added later to make it easier to find on the photo).

image

You can decide to leave it on while developing – some people find it fascinating to see HoloLens actually doing it’s magic trick. I think it’s a great tool to check if the app is actually mapping, but I also have found it to be visually distracting after a while. So after I have ascertained my app is doing it’s spatial mapping, I change it’s ‘Surface Material’ property to ‘Occusion’:

image

Create a prefab from our cube

In order to be able to dynamically create an object, we need to turn it into a prefab as well. That is actually very easy. Just grab your Cube and drag it into your Assets/Custom/Prefabs folder

image[31]

And give it a name. I called it “WortellCube”. Then proceed to delete the thing that is now called “WortellCube from the HologramCollection. We won’t need the static cube anymore. And now, my friends, halfway the 2nd episode on this hard core coder’s blog, we are finally nearing the place where actual coding takes place. Just one more step.

Creating a ‘script’

Any code in Unity3D is called a “script”. It supports a lot of languages and one of them is, fortunately, C#. There are all kinds of ways to do this, but I find the easiest one the following:

  • Open the Assets/Custom/Scripts folder
  • Right-click it, hit “Create”, then “C# script”
  • Name it “MainStarter”
  • Select “HologramCollection”
  • Drag the MainStarter script on top of the Inspector pane, below the “Add Component” button.

Net result should be this

image

There are at least two other ways that I know of to to create a C# script – this in my work flow.

Hit File/Build settings/Build. Open the resulting project in Visual Studio (or reload the project). Assuming you indeed selected the “Unity C# project” option as I advised in my previous post, the solution will look like this:

image

And there’s our Script. Now a proper C# class in a Visual Studio Solution.

Adding a game object

All right. So the ‘script’, a C# class, looks initially like this

using UnityEngine;
using System.Collections;

public class MainStarter : MonoBehaviour
{

    // Use this for initialization
    void Start()
    {

    }

    // Update is called once per frame
    void Update()
    {

    }
}

Now imagine, just for a second, this here veteran XAML coder and behavior nut when he saw this. A Unity script is actually called a behaviour. Granted – it’s spelled in The Queen’s English, but it really made my day. Far from ‘home’, still writing things called ‘behaviour’.  Apart from the name, that’s about where the similarities end. 

To get started, we first add a public field to the top of the class:

public class MainStarter : MonoBehaviour
{
    public GameObject Cube;

    // Use this for initialization
    void Start()
    {

    }

Yes. A public field. If you want to do Unity3D, get ready to meet some things that might hurt your coder’s feelings, and do some things you have learned to avoid like the plague.

Hit Save, go back to the Unity Editor, and after a few seconds tops you will see this (assuming you still have the HologramCollection object selected:

image

The Cube fields shows up. Now that’s the GameObject we can instantiate. So from our Assets/Prefabs folder we drag the WortellCube on top of the field that now says “None”:

image

And this should be the result. Hit File/Build Settings/Build, reload the project in Visual Studio, and now it’s time for real coding.

Building the initial script

As the comment that’s added by default added shows, there are some methods that are called on events that happen in the Unity object lifecycle. Note that those methods are private, but apparently they can be called anyway. A proper C# way would be to make a base class with overrideable public methods but hey, like I said, things are a bit different here. There is a whole host of private methods that can be called on an equal host of events, but that’s for later. Let’s first fill the Start method:

private bool _distanceMeasured;
private DateTimeOffset _lastInitTime;

// Use this for initialization
void Start()
{
  _distanceMeasured = false;
  _lastInitTime = DateTimeOffset.Now;
}

and then the Update method:

void Update()
{
  if (!_distanceMeasured)
  {
    if (GazeManager.Instance.Hit)
    {
      _distanceMeasured = true;
      CreateGrid(GazeManager.Instance.Position);
    }
    else
    {
      // If we can't find a wall in 10 seconds, create a default grid 
      if((_lastInitTime - DateTimeOffset.Now).Duration() >
           TimeSpan.FromSeconds(10))
      {
        _distanceMeasured = true;
        CreateGrid(CalculatePositionDeadAhead());
      }
    }
  }
}

So this method is called, every ‘frame’. This is typically 60 times per seconds, as far as I understand it. The GazeManager is the object that tracks your gaze. If it hits something within 10 seconds, it sends the position of the hit to the method that creates the grid (CreateGrid). If not, if calculates a location 3.5 meters in front of you, following the direction of your gaze:

private Vector3 CalculatePositionDeadAhead()
{
  var gazeOrigin = Camera.main.transform.position;
  return gazeOrigin + Camera.main.transform.forward * 3.5f;
}

The position Camera.main.transform.position – that is where you are. And there is a transform.forward thingy. Now this was a point where I first met a TransForm, and that quite puzzled me.

Aside: Transform

At this point I don’t quite understand all the finesses of a TransForm, but one thing is key. A TransForm has amongst other, three very important properties. “forward”, “right” and “up”. What helped me understand was thinking of this image: imagine you are an astronaut floating in space next to Earth. Your nose is pointing to Earth. Which way is forward? Well, Earth of course. Which way is up? Whatever direction the top of your head is pointing. And right? Well, to your right of course. Next, you fire the jets of your MMV and it rotates you – so now your back is pointing to Earth and your nose is pointing towards the International Space Station, that was originally behind you. The cardinal question is now – which way is forward? Exactly. Although everything else stayed in place, forward is now IIS.

This is how you can use a TransForm. However an object is rotated in space, if you add 2 times it’s transform.forward to it’s position, it will move 2 meters forward – that is, the direction that is forward from it’s own perspective. If you rotate it in another reaction, it will go in the direction it then points to. If you want it to move backwards, simply subtract it’s transform.forward. Same goes for the rest. Want to move 2 meters up? Add 2 times transform.up. Want to move down? Subtract it. Want to go right? Add transform.right. Go left? Subtract the same. Unity will take care of in what absolute direction the object actually needs to be moved in.

So what the second line of CalculatePositionDeadAhead simply does it add 3.5 meters to your position in front of you, exactly in the direction where you are looking when the grid is created. This is a quite powerful concept. You don’t have to care how stuff is rotated. Transform properties will tell you which way to go.

Calculating the grid

So now that I have explained this, I can show you how to how the grid is calculated:

private void CreateGrid(Vector3 hitPosition)
{
  var gazeOrigin = Camera.main.transform.position;
  var rotation = Camera.main.transform.rotation;

  var maxDistance = Vector3.Distance(gazeOrigin, hitPosition);

  transform.position = hitPosition;
  transform.rotation = rotation;

  int id = 0;

  float size = 0.2f;
  float maxZ = maxDistance - 1f;
  float maxX = 0.35f;
  float maxY = 0.35f;
  float z = 1.5f;
  do
  {
    var x = -maxX;
    do
    {
      var y = -maxY;
      do
      {
        CreateCube(id++,
            gazeOrigin + transform.forward * z +
                         transform.right * x +
                         transform.up * y,
            rotation);
        y += size;
      }
      while (y <= maxY);
      x += size;
    }
    while (x <= maxX);
    z += size;
  }
  while (z <= maxZ);
}

Using the camera’s rotation and the hitPosition I calculate a location about 1 meter from the wall (or the calculated point). The grid will start 1.5 meters in front of you. So the space between 1.5 meters from you and 1 meter from the wall is filled with a 4 x 4 grid, using three loops (one for every dimension). I seem not te be able to new up a TransForm, but every behaviour has a transform property – and since this script is not part of a physically displayed GameObject I can use it for calculations. I do this to take a snapshot of the camera rotation, and prevent slight differences in rotation because the user does not keep his or her head still.The actual TransForm position does not seem to matter much in calculations – you can also take the gazeOrgin in stead of hitPosition. The vector containing forward, up and right is always normalized – values are always 1 or smaller and can therefore be used for this kind of tricks.

Oh, and finally there is this very simple method to actually create the cube:

private void CreateCube(int id, Vector3 location, Quaternion rotation)
{
  var c = Instantiate(Cube, location, rotation) as GameObject;
}

So why is this a method at all, does it have an id property that is not used at all? Because there is more to come, and we will need other parts in a future post.

If you run the project now, after a maximum of 10 seconds, you will see something like this:

20160709_184529_HoloLens

That's awesome, right? Except - why are the cubes upside down? In Unity it was displayed correctly!

image

Once again – think TransForm. If you walk around the cubes, you will see they are actually not upside down. Because we aligned them to the gaze – rotation and all - we are looking at their backside. So what we need to do is – rotate the cube 180 degrees around the axis that goes from top to bottom – in other words, the “up” axis – on it’s own location.

private void CreateCube(int id, Vector3 location, Quaternion rotation)
{
  var c = Instantiate(Cube, location, rotation) as GameObject;
  //Rotate around it's own up axis so up points TO the camera
  c.transform.RotateAround(location, transform.up, 180f);
}

and here we go. One grid of boxes, perfectly aligned to your view angle (notice I have tilted my head to the right now)

20160709_221350_HoloLens

Concluding remarks

I have shown you how to add and use Spatial Mapping, create a prefab from your cube, and how you can dynamically instantiate those prefabs. I also showed you how to align the grid with your view angle, using the GazeManager, that I also used to measure distance. Finally, I have showed you how to employ TransForm for calculating relative directions.

As usual, you can find a full working solution of the project so far here.

06 July 2016

HoloLens CubeBouncer application part 1 - setting up the Unity part

Preface

Ever since I knew the HoloLens was coming to my company I have been digging into all the online resources I could find. And ever since the devices arrived on June 8th, I have been more or less pleading insanity with my wife, as I spent quite some spare time just trying to get ever deeper into HoloLens development with Unity3D and C#. What surprised me most was how easy it was to actually get started and get on with it, and get a pretty functional app within a quite short amount of time – with shockingly little code.
I will write the way I created the app as a series of blog posts (and not a single one) to prevent individual posts from becoming too long. They will serve both as an educational piece for those interested in HoloLens programming (as working examples with explanations are still pretty rare) and for myself – to remember how I actually came to this.
  • In this first part I will describe the app, write how to create an app in Unity3D, and how to design some basic characteristics of a 3D object
  • In Part 2 I will describe the basic setup – how the grid is created with respect to user’s view angle
  • In Part 3 I will add basic manipulation (air tapping the cubes and making them bounce) as well as the first spatial sound
  • Part 4 will introduce the first two speech commands – “create new grid” and “go to start”
  • Part 5 will describe the implementation of the speech commands “drop”, “drop all” and “total recall”, as well as some fit & finish.

Description and features of the app

The app creates a grid of cubes floating in the air. Up and sideways it’s a fixed number of cubes (4x4), the number in depth is determined by the space available between you and a wall or object you are gazing at. The grid is also rotated in space according to your head’s position, so if you tilt your head a and gaze up to the left, so will the grid be tilted and stacked up to the upper left. In other words – you will always look at a grid that is exactly aligned with your gaze – when the grid is created. After that you can walk around it and manipulate it to your hearts content:
  • Air tapping while the gaze cursor is on the cube will push it away from you as if you had poked it with a stick that comes directly out of your eyes. Cubes will move away from you, rotate and bounce off each other - and any physical objects HoloLens has detected. When they hit each other, the make a kind of clicking sound, when they hit a physical object, a kind of low boom sounds. And of course, all from the right direction. Spatial Sound FTW.
  • When you gaze at a cube and say “go to start” it will move back to it’s original position, emitting a kind of whistling sound while doing so. And bump out of the way any other cubes being in the way ;)
  • Gazing at a cube while saying “drop” will let the cube drop to the floor
  • Saying  “drop all” will make all cubes drop to the floor (you don’t need to gaze at a particular cube)
  • Saying “total recall” will make all cubes return to their initial original position. More or less. Unless they hit each other on the way ;) 
  • Saying “create new grid” will create a new grid of cubes – once again it’s direction following your gaze.
An additional feature, handy for demo’s – if HoloLens cannot find a point on a wall or object while trying to create a grid in 10 seconds (because it’s still scanning the room, or there simply is nothing in front of it) it will pick a place in front of you about 3.5 meters before you and assume that to be the wall. You get a fairly small grid then.
I have shown some intermediate stages of the app – here it is in it’s final form.

And I am going to show you how to build it. It’s 90% Unity3D stuff, and very little custom code. And part of it is nicked from Microsoft, too. Actually I only wrote three  classes all by myself.

Suggested material before starting

If you are totally new to Unity3D (like I was) I would strongly suggest doing some introductory stuff first. Otherwise, I will be talking mostly nonsense to you. Start out with the Creative Coding series by the brilliant Rick Barraza. I found it very enlightening, although it is slightly off target when you are a hard core coder like me – Rick is talking at length at things you will find elementary as a coder, while some Unity3D concepts go by at a speed that made me pause and go back a few times ;). But it is a very good series to make you feel comfortable with Unity3D editor and the basic concepts. I would also suggest a few lessons on the Holographic Academy to get you familiar with HoloLens interaction programming. I would particularly suggest lessons 101 and 101 (or 101E, if you don’t have a HoloLens). It’s rather amusing to see that the Academy series is heavily slanted toward coders, while Rick is more slanted toward designers, so together they make a good introduction.
For editor layout, I took Rick’s suggestion of taking the “tall” layout (Window/layouts/tall) so that is what you will see in the screenshots. It is not the default Unity3D layout.

Create a new Unity3D project

The most important part – think of a good name, as it’s not easy to change it. I would strongly suggest following a few steps as described in my fellow MVP Morten Nielsen’s blog, most notably:
I tend to do a few things different:
  • With regards to the HoloToolkit, I only copy all the files under “Assets” from the zip file in a folder “HoloToolkit” under “Assets” in my Unity3D project as I like to keep the things I make and import as a whole differently.
  • I put the cursor at root level, in stead of inside a ‘Managers’ game object (although I do create it, but for other purposes)
  • I set the Near Clipping Plane of the Camera to 0.1, unlike Morten, but do whatever you like.
At the moment of this writing, I got some errors importing the HoloToolkit in the Sharing subfolder. As we don’t need this anyway, I deleted it completely.
I also add a few things up front:
  • To enable speech recognition, we have to enable the Microphone. That’s done by File/Build Settings/Player Settings, then opening the “Publishing settings”, scrolling all the way to the bottom to Capabilities, then checking “Microphone”
  • To prevent a horribly magenta painted surroundings, I set the occlusion material of the SpatialMappingRender to, indeed. occlusion. I have described this procedure in an earlier blog post.
So, if you are done following Morten’s steps and my additions/changes, you should end up with the following:
image
When you are done with this, hit “File/Save Scene” and choose a name you like. I tend to choose “MainScene”.

A little organization up front

I like to keep things a bit organized, so I keep stuff I made myself and/or is part of my app) apart from 'the rest', that is, the HoloLens toolkit. This makes updating easier. So I created a folder "Custom" in my assets and added a number of sub folders to it:
image

Creating the cube looks

imageClick “HologramCollection” in the hierarchy pane, right-click, select 3D-object and then “Cube”. Done ;). You get a white 1x1 cube, that’s a bit big and a bit boring. So what we are going to do next is get a material for it that has a more interesting look. I guess I wanted to impress our CTO (hi Danny ;) ) so I took a Wortell company logo - that is conveniently square. But of course you can take any image you like. In Unity3D terminology, that’s a texture, so I dragged that image into my newly created textures folder. But you cannot directly use a texture on a 3D element – you need a material.
So inside our Assets/Custom/Materials folder we right-click, select Create, then click “Material”. In the top of the inspector, a drop down box is shown labeled “Shader”. Change that to Mobile/Bumped diffuse. The UI below it will change – you will see two grey areas. Hit the “select” button from the top one, select the image you want from the popup, and you are done. Alternatively, you can also drag it from the textures folder on top of the grey area. Either way, the net result should be this:
image
It gives some warning for better performance – people who understand Unity3D better than me will no doubt have suggestions to fix this. For now, it will work. But your material is now still called “New Material” – I renamed it to “WortellLogo”.
Now select the cube in the Hierarchy pane, open the Assets Custom/Materials folder and drag the new Material on top of the Inspector pane, just below the Material
image
Your result should be this (if you zoom in a little on the Scene)
image
One cube, with logo, nearly done. We will need only need change one more thing – the cube is a wee bit big. Under transform (on top of the inspector) change the Scale to 0.1 for X, Y and Z.

Adding some physics (and other) components to the cube

imageTo be able to make the cube be moved and controlled by the Unity3D physics engine, we will need a component that describes it’s physical characteristics. That component is called a “Rigidbody”. So hit the “Add Component” button to the right in the cube Inspector, type “rig” in the search box to make finding the right component easier, and select Rigidbody. I have changed some default settings, but you are free to play with your own – the most important thing is to turn off “Use Gravity”
image
A second part of the physical characteristics is defined by the physical material. This, apparently, defines how things collide – how bouncy they are, and how smooth. You can image two ice cubes sliding over each other showing different behavior than two rugged wood cubes. Anyway – select folder “PhysicMaterials’', right-click, and select Physic Material. I have called it “BouncyStuff”, but you may call it whatever you like. I have given it the following settings:
image
To apply this material, you will need to drag this material on top of the “Material” box of the “Box Collider” inside your cube, that was created by default.
image
Finally, to make the cube be able to emit sound from the right direction we have to add an Audio Source. You can find an article here on enabling spatial sound in your project. I tend to do things a bit different in this project, because I found it sounded better in my case. Anyway – once more, hit “Add Component” and select “Audio Source”. Expand it, then change the settings as follows:
  • Uncheck “Play on awake”
  • Set “Volume” to 0.5
  • Drag the slider “Spatial Blend” all the way to 3D
  • Under “3D Sounds settings”, set Max Distance to 15
Net result should be this
image
Our Cube is now done.

Looking at the result so far

image
As you may have noticed, we still have not written a single line of code. Yet, we already have a working application. Hit File/Build Settings/Build, build the app and deploy to the HoloLens or an emulator. The “Made with Unity” logo will pop up, and then nothing. Or so it seems. We have positioned our cube at 0,0,0 which seems to be the location of the HoloLens as the application starts up. Anyway – get up, turn around, look to where your head was, and there it is….

Concluding remarks

The solution so far can be found here. If you are impatient, and want to play with the already finished app directly, download an app package here and install it on your HoloLens. Beware of the dependencies you will need to install as well!
Apart from the people already mentioned in this article, I want to particularly say thanks to András Velvárt (aka vbandi) who, apart from being a smart, friendly and very accessible person, gave me some particular good advice on some issues with the spatial mapping, and the HoloLens environment scanning rate. He also pointed me to the Creative Coding series.

02 July 2016

Gotcha–”The associated script could not be loaded” on all C# scripts in a HoloLens Unity3D project

When I work on a HoloLens project, I alternate a lot between the Unity editor and Visual Studio, but I tend to spend a lot more time in the latter. I am a coder after all, and if you set the development checkmarks as I explained in an earlier post, you can directly edit (and more importantly, debug) your code from Visual Studio. After a particular fruitful day I closed off my PC (it’s a desktop PC so yes, it actually shuts down). Next morning I wanted to work on some assets, so I opened the Unity editor and was greeted by this:

image

On every bloody script in the project. Even the standard scripts in the HoloLens toolkit by Microsoft were broken. Quickly I opened Visual Studio. No syntax errors, nothing. App compiled as normal and deployed. The only clue was this all the way to the left bottom of the screen in Unity was this very vague error message:

image

Unexpected symbol ‘<internal>’? All that was on line 95 of CubeManipulator was a simple Debug statement in the OnCollisionEnter method:

void OnCollisionEnter(Collision coll)
{
    Debug.Log($"{coll.contacts.Length}");   
    

What can be wrong with that?

Well, it’s using string interpolation, and that’s C# 6, that’s what wrong with that. While this is perfectly valid in your UWP app compiled by Visual Studio, running on a Windows platform, Unity is built to be cross-platform. It’s particular interpretation of C# is based on Mono and it’s runtime is still a bit behind – at least to the extent that it’s not understanding this fancy string interpolation thingy.So all I had to do was remove this line – and restart the Unity editor, as changing the script alone does not do the trick.

Now I understand Unity is getting a new runtime in the future and this will all be moot in the end but until that moment – beware of fancy C# 6 constructs in your HoloLens apps. If you get any odd error messages in perfectly valid code from the Unity editor – this is your prime suspect.

29 June 2016

Gotcha - changing a HoloLens app’s name as it appears on the tile

I am currently finishing up a nice little demo app for the HoloLens but ran into a weird problem. Originally the app was called ‘Gazer’, as I only wanted to test Gaze Input, but it turned out to become a lot more. So I wanted to call it “CubeBouncer”.

It’s not so hard to do, you got File/Build settings, then go to “Player Settings”, and in the inspector on the right hand side you see a Store logo. Click that, select the Icon tab, and under “Short name” you will see the name that will be displayed on the HoloLens app tile. You can also select on what types of tiles it needs to appear. It quite reflects the Visual Studio UWP Manifest editor, which is logical, as this is what the manifest is generated from.

image

Build the app by hitting the Build button as usual when you have made changes in Unity, Visual Studio will say the project has changed and prompts to reload it, you build and deploy it to the HoloLens or the emulator, pin your app to the start screen – and you will see nothing has changed. The old name is still displayed.

Turns out that Unity UWP generation is a bit too clever when it comes to generating the UWP – apparently it updates not everything, but only the things that have changed. And I think it fails to take changes into the manifest into account.

The solution is very simple: don’t overwrite the generated UWP app. Close Visual Studio, delete the generated UWP app entirely (warning – only the generated app code, not your entire Unity project), only then hit Build in Unity (you will notice that takes quite a bit longer, as it needs to restore NuGet packages and stuff too), open Visual Studio again and then if you deploy your app to HoloLens, the short name will have changed.

Possibly there are smarter ways to do this, like only deleting the Manifest file – I have not tried this – but this is a sure fire way to fix this. It’s a bit cumbersome, but changing the name of an app or a tile isn’t exactly something you do ten times a day, so it’s not that much of a problem. But it’s a nice gotcha, so I thought it best to document it.