Switching to Full-Screen Mode

Introduction

In full-screen mode, all browser buttons and toolbars are removed, and only the O3D window is visible. In O3D applications, this mode is activated by an explicit user gesture—clicking on a special region displayed on the screen for this purpose. In full-screen mode, the screen resolution is set by the O3D application.

User Interaction

When the user clicks on a specified rectangular region, O3D switches to full-screen mode, and the following message appears on the screen for a few seconds:

Press ESC to exit fullscreen.

Pressing Escape or pressing any other key sequence that causes the foreground window to lose focus (for example, pressing Alt+Tab in Windows or Command+Tab in OSX) also takes O3D back to plug-in mode.

Related API Calls

The following API calls play an important role in switching to full-screen mode:

client.getDisplayModes()

client.setFullscreenClickRegion(Number x, Number y, Number width, Number height, Number mode_id)

o3djs.event.addEventListener(Element pluginObject, string event_type, Object callback_function)

client.cancelFullScreenDisplay()

client.clearFullscreenClickRegion()

Code Sample

The fullscreen.html sample modifies the helloworld.html sample to toggle between plug-in and full-screen modes. This section highlights key tasks performed in this sample.

Querying the Display Mode

In this example, the getFullscreenModeId() function queries the system and selects the mode to use. This return value is then passed in to setFullscreenClickRegion().

function getFullscreenModeId() {
  var displayModes = g_client.getDisplayModes();
  var bestMode;
  for (var index in displayModes) {
    var mode = displayModes[index];
    if (!bestMode ||
        (mode.width > bestMode.width && mode.height > bestMode.height)) {
      bestMode = mode;
    }
  }
  if (bestMode) {
    return bestMode.id;
  } else {
    return g_o3d.Renderer.DISPLAY_MODE_DEFAULT;  // getDisplayModes isn't implemented on all platforms yet
  }
}

Displaying the User Click Region

The setFullscreenClickRegion() function sets up the area on the screen that activates full-screen mode, but you are responsible for creating the accompanying graphical user interface (GUI) that corresponds to this rectangle. In the fullscreen.html example, the createBannerSurfaceAndClickableRegion() function performs these related tasks:

• Creates a material.
• Loads a texture into the material. (This texture contains the text for the clickable region.)
• Creates a polygon for the texture.
• Sets up an event handler to listen for the resize event.
• Set up the clickable region on the screen.

Here is the code for adding the event listener and setting up the clickable region, which occurs at the end of the createBannerSurfaceAndClickableRegion() function):.

o3djs.event.addEventListener(g_o3dElement, 'resize', handleResizeEvent);
g_client.setFullscreenClickRegion(10, clientHeight - texture.height - 10,
          texture.width, texture.height, getFullscreenModeId());

The call for a resize event receives an event object that contains the dimensions of the window you're drawing into and a flag that indicates whether you're in full-screen mode.

Setting Up Two Views

The fullscreen.html sample sets up two views, a perspective view (g_viewInfo) for the 3D teapot scene, and an orthographic view (orthoViewInfo) that is drawn after (that is, on top of) the 3D scene. The orthographic view contains the textured rectangle that corresponds to the clickable region for full-screen mode.

The setUpBanner() function creates the orthographic view for the 2D user interface "layer." This view turns off the clear color flag so that the 3D view remains on the screen. It sets the priority for the orthographic view to one greater than that of the perspective view, so that it is drawn after the perspective view (g_viewInfo):

function setupBanner(width, height, viewInfo) {
  g_orthoRoot = g_pack.createObject('Transform');

  // Create a view for the orthographic display of the fullscreen banner.
  var orthoViewInfo = o3djs.rendergraph.createBasicView(
        g_pack,
        g_orthoRoot,
        g_client.renderGraphRoot);

  // Make sure the orthographic view gets drawn after the 3d stuff
  orthoViewInfo.root.priority = g_viewInfo.root.priority + 1;

  // Turn off clearing the color for the orthographic view, since that would
  // erase the 3d parts.  Leave clearing the depth and stencil, so it's
  // unaffected by anything done by the 3d parts.
  orthoViewInfo.clearBuffer.clearColorFlag = false;
  .
  .
  .
}

See the Creating a heads-up display sample for another example of creating a 2D overlay and an accompanying 3D view.