Contextually Relevant Coolness: How to make Jibe and Unity3d automatically load new content on your webpage

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.

How to create a GameObject sphere in your scene.

Your new sphere sitting in your scene.

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.

Make sure this is checked.

– 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.

Open this file and edit it.

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.

Creating a new C# script in the Unity editor.

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.

Your sphere after adding the DetectAvatarWeb2 script.

– 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:

All set!

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

Sphere with MeshRenderer option turned off.

– 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:

Add the code highlighted here.

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.

An example of an iframe added to your Jibe webpage.

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.

I wonder what will happen when I approach that sign…

Oho! The left iframe of my webpage has changed!

Here’s another example I created.  In this one, your avatar walks up to a 3d model of HIV and it automatically opens up Wikipedia’s information on the virus.  Visit my Jibe Demo World to try it yourself.

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

8 thoughts on “Contextually Relevant Coolness: How to make Jibe and Unity3d automatically load new content on your webpage

  1. Hi John – I’m trying this in Unity (not Jibe) and I get hung up with the first DetectAvatarWeb2 script. It will not compile in Unity 3.4.

    It does not like
    public string dataOnTriggerEnter = “http://reactiongrid.com”;
    public string dataOnTriggerExit = “http://reactiongrid.com”;

    and any reference to those variables later on. Also, it does not show them in the inspector. I tried replacing them with other strings (not URLs) to test but that didn’t help.

    Am I missing something?

    Thanks

  2. I got past the problem by re-typing the quotation marks in the whole script in Monodevelop. Go figure. I’ll probably be back with my next mystery!

  3. Pingback: Avoiding Virtual Couch Potato Syndrome: How to create a web-embedded video display that interfaces with your Jibe 3d virtual world | Be Cunning and Full of Tricks

  4. Pingback: A New Virtual World Launches for Muscat Youth Summit : A Design Postmortem from Sketch to Finish | ARCH Virtual

  5. Pingback: Muscat Youth Summit Virtual World - Arch Virtual

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s