3D Web Content

SurfelViewer
Browser Plugin
Web Integration
Converter
FAQ
Support

home
info
ETH
ETH World
CGL
3D Scanner
SurfelViewer
Pointshop3D
Point-Based Graphics
Cyfex AG
Flow Vis

© RP, 2004
Last Update: 16-Dec-2005

SurfelViewer - Web Integration

General Information

Because no standard plugin interface exists, HTML designers have to make sure that users receive the appropriate content for their browser. There are several strategies to accomplish this goal:

Browser detection and code generation using PHP, JSP or a similar language.
Pure HTML and CSS (using cascading stylesheets and an Internet Explorer extension to display the desired content). Please have a look at the example below.
Browser detection using JavaScript (does not work if a user has disabled scripting support).

Differences Between Internet Explorer And Mozilla-Based Browsers

Microsoft Internet Explorer and Mozilla-based browsers have different methods to invoke a plugin. As long as there is no standard, HTML designers always have to support both interfaces.

Internet Explorer

Internet Explorer automatically downloads the codebase if the plugin has not been installed yet on the computer or if the version is higher than the installed one.

<object id="SurfelViewerPlugin" classid="clsid:BC418C7F-6777-461C-849F-D7EAEED58947"
codebase="http://graphics.ethz.ch/3dwebcontent/surfelviewer/windows/ie/SurfelViewer.cab#version=2,0,0,6" height="300" width="300">
<param name="url" value="models/testmodel.svf"/>
</object>

Mozilla-based browsers

There does not exist an automatic detection and installation of Mozilla plugins yet (although proposals have been made in the community). After the user has installed the plugin it is referenced by it MIME-type. Note that the embed tag should not be used since it is deprecated.

<object id="SurfelViewerPlugin" type="application/x-surfel" height="300" width="300">
<param name="url" value="models/testmodel.svf"/>
</object>

Optional HTML-Paramters

You can set the initial plugin settings (i.e. background color) using HTML parameters:

Parameter	Values
url	relative or absolute URL
backgroundColor	hexadecimal color {#000000 ... #FFFFFF}
menuStyle	{infobar \| menubutton \| none}
backfaceCulling	{on} \| off}
highQuality	{on} \| off}

Sample:

Sample (Using HTML & Cascading Style Sheets)

Here is a simple example how to integrate the plugin into a webpage. Using the special IE tag marked in green, we can distinguish between Internet Explorer and Mozilla-based browsers. The result can be viewed here.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Sample</title>
  <style type="text/css">.mozilla {display: block;}</style>
  
</head>
<body>
  <table width="400" border="0" cellpadding="10" cellspacing="0" bgcolor="#FFFFFF">
    <tr>
      <td width="50%" height="327" align="left">
      <object id="SurfelViewerPlugin" class="mozilla" type="application/x-surfel"
      height="300" width="300">
        <param name="url" value="../models/angel.sfl.gz"/>
      </object>
      
      </td>
    </tr>
  </table>
</body>
</html>

Scripting Support

Additionally the SurfelViewer plugin supports scripting (i.e. JavaScript). The methods can be directly applied to the object ID.

e.g. document.getElementById(SurfelViewerPlugin).SetBackgroundColor('#FF00EE');

Here is a demo page on how to use scripting for your SurfelViewer plugin.

Method name	Description
TurnLeft()	rotation towards the left
TurnRight()	rotation towards the right
TurnUp()	rotation towards the top
TurnDown()	rotation towards the bottom
MoveLeft()	translation towards the left
MoveRight()	translation towards the right
MoveUp()	translation towards the top
MoveDown()	translation towards the bottom
ZoomIn()	zoom into the scene
ZoomOut()	zoom out of the scene
ResetCamera()	resets the camera position
AutoRotate()	enable or disable auto rotation mode
ToggleBackfaceCulling()	enable or disable backface culling
ToggleHighQuality()	enable or disable high quality rendering mode
SetBackgroundColor(string)	sets the background color (color has the format #RRGGBB)

last modified: 2005-12-08