History

9.0 Web Rendering

9.1 Overview

Web-rendering is a mechanism that allows users to dynamically view a web page, and interact with it inside an unreal map. It is implemented as a texture, called WebTexture, and can be mapped onto a static mesh similar to any other textures.

9.2 WebTexture

WebTexture currently has the following requirements/limitations: 
  • Both the web texture and the static mesh onto which it is mapped must have the same dimension (width and height).
  • The web texture cannot be mapped onto a BSP object.
  • The static mesh must be a rectangular shape and straight up. It can be yawed, but not rolled nor pitched.

The above requirements only exist if you want to interact with the web page. If you don't need interaction, then the usual rules for texture usage apply.

The followings are the properties of the WebTexture.

ActivationVolumeTags is an array of volume tags. If it is set and the user is in a volume where its tag does not match any of the values stored in this array, the WebTexture is stopped and the last rendered frame is displayed. If it matches, then the last URL is reloaded.
ActivationInEditor There is no concept in the web.alive Editor of the current volume.  Thus ActivationVolumeTag does not work in the editor.   If left that way, all the web textures in a map will activate immediately (which only the fastest machines can handle).  As a result, activation of web textures in the editor is explicit.   Activated web textures are only activated for the remainder of the editor session. Unactivated web textures show as a blank white texture.  In the editor, explicit activation of a web texture can be done using one of the following techniques:
  • Setting ActivationInEditor to true. Once true it can only be reset to false by restarting your editor session.
  • Newly created web textures are active for the remainder of the session.
  • Setting any property on a web texture will activate it.

    bSynchronized Indicates whether it should receive events from the WebActor or not.
    bTransparent Indicates whether the background of the web page should be displayed or not.
    PageHeight The height of the web page.
    PageWidth The width of the web page.
    TextureHeight The height of the texture (must be a power of two)
    TextureWidth The width of the texture (must be a power of two)

URLChangeHandlingMode This property indicates to the Web Renderer how to handle the url change as the result of the user’s click on the web page. The Web Renderer can handle the url changes in 3 different ways:

  1. URL_Follow any url changes will get rendered in this web page.
  2. URL_Follow_Externally any url changes will get rendered in a tab of the external browser.
  3. URL_Do_Not_Follow will not render any new url.

URLToLoad The initial url to render. It can be overridden at runtime by using the WebMenuLookAndUseTrigger.

9.3 StaticMeshActor

The StaticMeshActor has been enhanced to handle user’s interactions with the WebTexture. The following properties were added under the WebTexture category:

bUseWebTexture indicates that this StaticMesh is using a WebTexture. If set to false, no interaction is possible with the WebTexture.

InteractionMode indicates how the user can interact with the WebTexture. There are 3 interaction modes:

  1. IM_Full provides full interaction (mouse and keyboard) with the WebTexture. The use must click on the WebTexture to enter the full interaction mode. During the full interaction mode any mouse and keyboard events are intercepted and channeled to that WebTexture. The user must click on an area outside of the WebTexture to release the full interaction mode.
  2. IM_Click_Through provides only mouse interactions with the WebTexture.
  3. IM_Disabled no interaction is possible with the WebTexture.

Note also that the WebTexture must be assigned to the first Skin of the StaticMeshActor. The Skins property is located under the Display category. Failing to set the skin will cause ill-behaved interaction with the WebTexture.

9.4 WebActor

A WebActor is used to synchronize the url among WebTextures and to handle events received from the triggers.

To use the WebActor for synchronization purpose, a WebTexture instance must be assigned to its WebTexture property.

To use the WebActor to receive events from the triggers, the following properties must be configured properly:
NextWebPageTriggerAction instructs the web renderer to go to the next page in its history.
PreviousWebPageTriggerAction instructs the web renderer to go to the previous page in its history

SetWebPageURLTriggerAction will bring a dialog allowing the user to store the initial URL on the server.

There are currently 4 LookAndUseTriggers that can be used to send events to the WebActor:
NextWebPageLookAndUseTrigger sends the NextWebPage action to the WebActor
PreviousWebPageLookAndUseTrigger sends the PreviousWebPage action to the WebActor
SetWebPageURLLookAndUseTrigger sends the SetWebPageURL action to the WebActor.
WebMenuLookAndUseTrigger pops up a menu with the above 3 actions when the user right-click on it.

9.5 Example

Here is a complete example on how to add a 512x512 web page with http://www.google.com as the initial url in a map.

Start the web.alive Editor and load a map. Then create a WebTexture as follows

Configure the properties of the WebTexture as follows. The properties that we are interested are grouped under WebTexture:
  • bTransparent Indicates whether the background of the web page should be displayed or not.
  • PageHeight The height of the web page
  • PageWidth The width of the web page.
  • URLToLoad The url to render.

If you use your own mesh, you can apply the WebTexture as a skin of the mesh, provided that the requirements mentioned above are met.

If you don't already have a static mesh with the proper dimension, create one as follows:

1. Right click on the Sheet button to bring up the sheet builder. Position the sheet in the desired location. 

2. Select the WebTexture that you created previously
3. Click on the Add button to add the BSP sheet to the level.

4. You should now see the WebTexture with the google page.

5. Convert the BSP sheet that you just created by righ-clicking on the BSP object and select Convert->To Static Mesh

6. Fill out the package and name of the static mesh

7. Select the BSP sheet and delete it since we’ll use the newly converted static mesh instead.

8. Select the newly converted mesh and add it to the level

9. Adjust its location.

StaticMesh configuration

Double-click on the static mesh to bring up the StaticMeshActor properties window. Make sure that bUseWebTexture is set to true to indicate that this static mesh is using a WebTexture. If bUseWebTexture is set to false, the user won't be able to interact with this static mesh.

Testing the WebTexture

Click on the Play Map! button to test the newly created WebTexture.

When the mouse cursor is hovering on any WebTexture that can be interacted with, the cursor should change from a cross-hair to a hand.

Click once on the WebTexture will put you in the web navigation mode. Clicking outside of the WebTexture or pressing the Esc key will exit the web navigation mode. During the web navigation mode, any key input, except the Esc and tilde (~) keys, will be forwarded to the web page.

9.6 WebTexture synchronization

By default, WebTextures are not synchronized among web.alive clients. That is each URL associated with a WebTexture is rendered privately on each web.alive client. To enable synchronization of a particular WebTexture, content developer must do the followings:

  • Set the bSynchronized property of that WebTexture to true.
  • Place a WebActor in the level and assign the WebTexture to this WebActor

Note that synchronization is only done at the URL level. Only url changes are replicated to all clients. Mouse and keyboard events as well as any browser plug-in events such as flash are not be replicated.

9.7 Using the WebMenuLookAndUseTrigger and toggling modes (Video Player, Text Editor, Live Webcam Wall)

New for release 3.0

As touched on in section 9.4, a WebMenuLookAndUseTrigger is required in order to access web renderer controls from a right-click menu. With release 3.0, the WebMenuLookAndUseTrigger can now be accessed by right-clicking anywhere on the associated WebTexture. Simply add a WebMenuLookAndUseTrigger and set its Event property to the Tag of the WebActor. The Trigger can then be made invisible (bHidden True) and un-collidable, then placed anywhere which is convenient for the content developer.

Most importantly, the menu now allows the WebTexture to be switched between modes. The three modes (in addition to web browsing) are: Video Player, Live Webcam Wall, and Text Editor. The full contents of the menu are:

  • SetURL
  • Video Player
  • Live Webcam Wall 1
  • Text Editor
  • Options
    • Upload video...
    • Delete uploaded video..
    • Set home page... 2
    • Set white list... 2
    • Popout to window

1 Live Webcam Wall appears only if the ChainsawVolume contains the WebActor Tag under AssociatedActorTagNames
2 AdminActions