One of the most useful features of a multiuser virtual world platform like Jibe is the fact that it can be accessed from a web browser.  Just click on a URL and you are instantly in a Jibe world.

But Jibe doesn’t just live on the web.  It also communicates with the web.

Let’s learn how to easily make Jibe cause new content to load on your webpage!

Today we’re going to learn how to define an area in a Jibe world that will cause a new webpage to load in an iframe whenever an avatar enters the area.  We’ll also set it up so a different webpage loads whenever an avatar leaves the area.  And just for fun, we’ll include a nice little audio cue that will play to let people know when something new has been loaded in the iframe.

– Step 1: Create a GameObject to define an area

Fire up your Unity editor and create a GameObject sphere.

Go into the Inspector window view of your sphere and make sure Is Trigger is enabled.  This will make the sphere a non-colliding object (so avatars can walk through it) and cause the sphere to send a trigger event whenever any avatar walks in or out of it.

– Step 2: Create a DetectAvatarWeb2 script and add to your sphere

You’ll find a C# script called DetectAvatarWeb in your Project window.  It’s included in the Jibe distribution package.

You don’t want to make changes to this script, since it is part of the Jibe package and may be updated in a new distribution.

So we’re going to create a new script based on DetectAvatarWeb.

Go into the Unity editor and create a new C# script.

Name this script DetectAvatarWeb2.  Edit the script and paste the follow code into it.

using UnityEngine;
using System.Collections;

public class DetectAvatarWeb2 : MonoBehaviour
{
public string dataOnTriggerEnter = "http://reactiongrid.com";
public string dataOnTriggerExit = "http://reactiongrid.com";
public AudioClip triggersound;

void OnTriggerEnter(Collider other)
{
Debug.Log("Load web: " + dataOnTriggerEnter);

if (Application.platform == RuntimePlatform.WindowsWebPlayer || Application.platform == RuntimePlatform.OSXWebPlayer)
{
Application.ExternalCall("LoadExternalWebpage", dataOnTriggerEnter);
audio.Play ();
}
else
{
Application.OpenURL(dataOnTriggerEnter);
audio.Play ();
}
}

void OnTriggerExit(Collider other)
{
Debug.Log("Load web: " + dataOnTriggerExit);

if (Application.platform == RuntimePlatform.WindowsWebPlayer || Application.platform == RuntimePlatform.OSXWebPlayer)
{
Application.ExternalCall("LoadExternalWebpage", dataOnTriggerExit);
audio.Play ();
}
else
{
Application.OpenURL(dataOnTriggerExit);
audio.Play ();
}
}
}

Save your modified DetectAvatarWeb2 script.  Then drag a copy of it from your Project window into your sphere object.

– Step 3: Edit your DetectAvatarWeb variables in the Inspector

There are 3 variables you’ll need to specify in the Inspector window.

1) Data On Trigger Enter (the URL to load in the iframe when an avatar enters the area)
2) Data On Trigger Exit (the URL to load in the iframe when an avatar leaves the area)
3) Triggersound (an audio cue to let ppl know something new has loaded on the webpage)

Setting up the Triggersound:
Here’s a nice little bleep sound on Freesound that you can download and use for free.  It’s a .wav file, so I recommend you open it in Audacity and export it as an .ogg file to compress it.

Drag the .ogg file into your Project window in the Unity editor, then drag it from your Project window into the sphere (a copy of it must be sitting in your sphere object).  Then drag the .ogg file again from your Project window into the Triggersound field in the Inspector window.

Once you’ve done all this, your Inspector window should look like this:

Notice in the above pic that I’ve also unchecked the MeshRenderer part of the sphere settings.  This will make the sphere invisible.

– Step 4: Edit the webpage where your Jibe world lives

You’ve now got everything set up in your Jibe world to send different URLs to a webpage based on two different trigger events (enter and exit).   Now it’s time to edit your webpage to properly receive the data being sent from Jibe.

Open up the webpage where you have your Jibe world embedded.   The default.html file we ship with Jibe has some Javascript already in there, so just add the following bit of code at this location:

Here’s the code so you can copy/paste it:

function LoadExternalWebpage(dataFromUnity) {
document.getElementById("LeftiFrame").src = dataFromUnity;
}

Next, add an iframe to your webpage.  The URLs being sent from Jibe will be loading in this iframe.

In this example iframe, you’ll see that I’ve added a default URL in the src.  That’s so the iframe isn’t empty when people first load your page.

That’s it.  Congratulations, you’re done!

There are many powerful applications for this kind of interactivity.  Imagine creating an educational Jibe world where different web-based content is automatically loaded whenever students approach different learning stations.   Contextually relevant information can be triggered at any time.  The possibilities are endless.

You can see this all in action by visiting my own Jibe world.

To learn more about Jibe and meet other people sharing ideas and questions, be sure to check out our Jibe-Unity3d Google Group.

And to learn more about all the ways UnityUnity Web Player and browser communication

Lastly, here’s a great summary of Unity’s built-in functionality that can be used in tandem with our Jibe code to let you bidirectionally pass data between a web page and your Jibe world – “Unity Web Player and Browser Communication”

UPDATE 11/17/2011:  If you liked this tutorial, check out Avoiding Virtual Couch Potato Syndrome: How to create a web-embedded video display that interfaces with your Jibe 3d virtual world

UPDATE 2/29/2012:  Rather than opening up a webpage in an iframe, some folks have asked how you could open the URL in a completely new webpage.

Very simple!  Instead of adding this code to the containing webpage…

function LoadExternalWebpage(dataFromUnity) {
document.getElementById("LeftiFrame").src = dataFromUnity;
}

…use THIS code instead!

function LoadExternalWebpage(dataFromUnity) {
window.open(dataFromUnity, '_blank');
}

-John “Pathfinder” Lester