Netscape DevEdge

Skip to: [content] [navigation]

Interacting with Viewpoint Content via JavaScript

Introduction

Viewpoint Media Player™ (VMP) is a 3D rendering engine and software plug-in from Viewpoint Corporation. The plugin is shipped with Netscape 7.x and supports real-time 3D rendering, animation, image composition effects, an event model, and interoperability with other rich media elements such as a Flash movie. This technote explains how, using JavaScript, it is possible to cost effectively interact with Viewpoint content, perform dynamic operations, and trigger JavaScript functions such as scene contents from the Viewpoint content.

How it Works - the Workflow

Viewpoint Experience Technology (VET) is the terminology for a Viewpoint scene. A VET scene can incorporate building blocks such as 3D elements, 2D images, sound, text, and other rich media objects.

Picture showing the workflow
A VET Scene can be described via MTX file containing XML-based data that represents 3D elements, 2D elements, text, events, animation instructions. It's also possible to embed elements such as 3D geometry, texture, Flash movies, and more.

How to Publish

In order to publish VET content, it is necessary to get a Broadcast License Key that is free for non-commercial use. For additional information on how to publish and license and agreements, please visit the Viewpoint Developer Central web site.

Embedding in a Web Page

The VET scene can be embedded in a web page via the MTSPlugin interface. In order to embed the VET scene is necessary to import the MTS3Interface.js file and to instantiate the MTSPlugin object. The following code is an example of a simple web page containing a VET Scene with a simple sphere object:

<html>
  <head> 
    <script language="javascript" src="MTS3Interface.js"></script>

  </head>
  <body>
     <div id="container" style="width:300px;height:200px">
       <script language="javascript"> 
           pluginObject = new MTSPlugin("layer2d.mtx", "300, "200", 
                                        "keyfile.txt", 
                                        "popUp", 
                                        "", 
                                        "GenieMinimumVersion=50333440"); 
       </script>
     </div>

  </body>
</html>

References:

Scriptability: Communicating With The 3D Scene

JavaScript can be used to send events to Viewpoint content. Also, the scene content can include triggers to call JavaScript functions on the web page. For instance, it is possible to control animation on the scene or to dynamically feed the 3D scene with new XML content.

Triggering an Animation Event from JavaScript

Once the MTSPlugin instance is available, you can call this object and trigger animation. The following sample code is triggering an animation that was defined in the mtx file and named "animate_object":


function triggerAnimation() {
  	pluginObj.TriggerAnim('animate_object');
	pluginObj.Render();
}

Triggering a JavaScript function from the VET Scene

In the VET Scene, it is necessary to define an element MTSInteractor that includes a JavaScript action. When this interactor is executed on the scene, the JavaScript function will be executed on the JavaScript runtime engine. Here is the code sample for the MTSInteractor element that calls a JavaScript function named "callNetscape":

<MTSInteractor Name="my_interactor">
	<MTSHandle Event="animation_finished" Action="MTSJavaScript" Func="callNetscape()"/>
</MTSInteractor>

On the VET Scene it is possible to call this interactor posting an event message. Refer to Viewpoint's developer area for details on how to animate elements or dealing with events on the VET scene, or check the source code for this sample:

Transparency and Z-Index

Viewpoint is one of the best examples of a plugin that can display content on top of HTML elements with transparency effects. This feature is also called WMODE or Windowless Mode. There are other plugins that can also display content in WMODE, for example Macromedia Flash.

Because of WMODE, Viewpoint content can be inserted inside a DIV element. Then simply using CSS, the DIV can be positioned on top of other HTML elements. The following example shows how 3D content can be rendered on top of existing HTML content. Note the shadow blending the the pixels on the page.

Full Screen Content using HyperView

Viewpoint can also run interactive 3D content outside the browser window, such as an animation that could use the entire desktop area. This feature is called HyperView mode. This section illustrates the differences between HyperView and normal mode, as well how to enable and disable this feature:

Action Element to turn on HyperView mode

To enable this effect on a give scene, it's necessary to code an Action Animator element that basically tells Viewpoint to switch to HyperView. The following picture is a screenshot showing the 3D sphere element flying on top of the browser window.
screenshot showing the 3d animation outside the browser window
Here is the source code that describes the action element to swith to HyperView:

 
<MTSTimeElem Type="Keyframe" Name="myelement_enter_hyperview" On="0">
   <Time>     0      0.01     </Time>
   <MTSTimeElem Type="ActionAnimator">
           <noop/>

           <MTSAssignProperty Target="MTSBaseComponent::smod" Value="1" />
   </MTSTimeElem>
</MTSTimeElem>

Action Element to turn off HyperView mode

In normal mode, the scene elements will appear inside the browser's contents area. For instance, the scene could be embedded inside a DIV element.
screenshot showing the 3d animation outside the browser window
Here is the source that represents the Action element that makes possible to return to normal mode. Note that in HyperView mode, the Viewpoint scene will take over the events and controls, so returning to normal mode is the way to allow users to control web page navigation.

 
<MTSTimeElem Type="Keyframe" Name="myElement_return_normal" On="0">
   <Time>     0      0.01     </Time>
   <MTSTimeElem Type="ActionAnimator">
           <noop/>

           <MTSAssignProperty Target="MTSBaseComponent::smod" Value="0" />
   </MTSTimeElem>
</MTSTimeElem>

Sample using HyperView mode

This sample shows an animation running in HyperView mode. It's necessary to wait to see the animated ball flying on top of the desktop area. The MTX file contains instructions to return to normal mode if a key or left mouse button is pressed.

References

A+R