by Andrew Vernon
Besides Java itself, 3D is perhaps the hottest topic for Web site developers today. Despite the current limitations of bandwidth on the World Wide Web, VRML (Virtual Reality Markup Language; usually pronounced “vermal”) has generated an enormous amount of interest. The possibility of creating interactive 3D worlds on the Web is too good to miss. Fortunately, the technology to deploy 3D worlds is not difficult.
Many Web sites today incorporate VRML worlds, interactive environments in which you can navigate using simple mouse movements. One good example is the Construct site at www.construct.net (see fig. 38.1). This illustration shows a virtual model of an Italian piazza taken from the site.
A VRML world is viewed in a VRML browser.
The amount of interactivity that’s possible in this kind of 3D world depends on the VRML standard. VRML 1.0 supports hyperlinks, animation playback, zooming, fly-through, 3D rotation, and different camera views, among other things. VRML 2.0 is under development and will support much more than this (however, it may turn out to be much harder to use). You can find the current VRML specification on the Silicon Graphics Web site at http://webspace.sgi.com/moving-worlds.
The VRML world has to be viewed in a VRML browser, which is a special plug-in application that you have to install in your Web browser. The VRML browser has its own controls for playback, zooming, orbiting, and so on. You can see these at the bottom of figure 38.1, which shows the Topper VRML browser from Kinetix.
But what if you want to dispense with the VRML browser and control your 3D world with Java? That way, you can distribute a 3D model without requiring the recipient to download and install another piece of software. Or perhaps you want to have a set of thumbnail images or buttons in an applet that the user can click to move to the different camera views in the 3D model. Is there a way that you can do this? There is, if you use Hyperwire.
Hyperwire is a 3D-enabled, interactive authoring tool that generates Java code. If you have a 3D object that you want to use in a Java applet, Hyperwire allows you to embed it for free.
Hyperwire is available for free download from the Kinetix Web site (www.ktx.com). Since the first version of the program was posted to the Web site earlier this year, there have been about 30,000 downloads of the 6M file. At the time of this writing, Hyperwire Beta 1.1 is the current version. I’ve saved you the lengthy download time by including Hyperwire on the CD-ROM that accompanies this book. There are also two additional files for the Hyperwire 3D support and for the Hyperwire runtime.
To install Hyperwire, copy these three files to a folder on your hard disk. Double-click each file to install, starting with the largest-size file and finishing with the smallest.
Essentially, what Hyperwire allows you to do is to build an applet entirely visually by placing modules and wiring them together. Modules are true objects in the object-oriented programming sense; that is, they are independent software containers that include both behaviors and methods. In Java terms, each module is a class. Wiring is the way that modules are linked together. Wires provide the connection over which messages and parameters pass from one module to another. Figure 38.2 shows the Hyperwire authoring environment, with an applet under development.
The Hyperwire authoring environment gives you three views of the applet.
In the second part of this chapter, you step through the whole process of creating this applet and adding it to a Web page. But before you look at the details of how you generate Java for 3D objects, let’s examine some general concepts—the ones that apply to almost everything you do in Hyperwire.
The Hyperwire environment is divided into three views, which you can see in figure 38.2:
The three views are fixed in their relationship to one another, but you can change their respective sizes by dragging the divider bars that separate them.
On the right of figure 38.2, you can see the Hyperwire Module palette. From here, you drag and drop the modules that make up the applet. Hyperwire contains many different categories of programming objects, bundled up into these containers. Take a look at the selection. Hyperwire can really save you time coding Java.
Figure 38.3 shows the Module categories, as they appear on the Modules menu.
Hyperwire module categories are listed in the Modules menu.
The Modules palette lists the modules alphabetically, while the Modules menu lists the modules according to their categories.
Note the Plug-Ins category, which is open in the illustration. This is where you can add your own modules to the Hyperwire interface, either by bundling together existing modules or by incorporating your own custom Java code. Figure 38.3 shows a collection of 3D buttons that have been added. Hyperwire is completely customizable in this way.
Wiring is Hyperwire’s unique method of sending messages between objects. For example, in the applet you’re building, the user clicks a colored circle to change the camera view in the 3D world. To make this happen, several things have to occur:
The Circle module registers a button-up event.
The button-up event triggers a message.
The message goes to the 3D View module.
The 3D View module alters its behavior as a result of the message (sets itself to a different camera). The name of the camera is passed to the module as a parameter.
This is accomplished with a single wire, as shown in figure 38.4. You look more closely at how to do this wiring and generate the Java code in the next section.
Wiring between modules is done in Wire view.
With Hyperwire, any kind of 3D object (that isn’t too large) can be embedded in a Java applet. Bear in mind that the current bandwidth over most of the World Wide Web prevents the use of large and complex 3D models. If you want to get reasonable performance for your 3D-enabled applet on the average computer today, you need to keep your model down to a few thousand polygons, so be sure to optimize your models and eliminate unnecessary faces before exporting them.
Hyperwire accepts any of these common 3D formats:
For your sample architecture applet, I used 3D Studio MAX and a MAX plug-in called the VRBL Exporter to create a WRL file. If you have 3D Studio MAX, the VRML exporter is well worth downloading from the Kinetix Web site (it’s free). Besides allowing you to export a complete scene as a WRL file, the plug-in allows you to add VRML events and behaviors to the VRML file. Here are just three examples:
The VRML Exporter already provides a good number of navigation options. Plug-in VRML functionality for 3DS MAX is likely to continue to expand to keep up with enhancements to the VRML specification.
In the rest of this section, you step though the procedure for importing 3D into Hyperwire and exporting it in a Java applet. You won’t go into great detail about how you make the applet work in Hyperwire; you can get that information from the Hyperwire documentation. Instead, you focus on describing the general principles.
Before you begin, make sure that you have everything you need to complete the procedure:
Now let’s summarize what you want this applet to do (with the help of fig. 38.5):
The applet as it appears when finished.
Here are the steps to follow to create this applet. You should be able to apply them quite easily to create any similar 3D-based applet in Hyperwire:
Create or load your 3D model in a 3D modeling and animation program.
Export the model in WRL, 3DS, or DXF format.
Figure 38.6 shows the scene as it appears in 3DS MAX. On the right of the screen, you can see some of the VRML Exporter options in the Command panel. However, in this example, you’re not using any of the VRML triggers, so it doesn’t matter whether you export as WRL or 3DS format; Hyperwire handles them in the same way. This particular scene contains several different camera views plus one animated camera (called Moving_camera) that provides a walk-through of the building.
The 3D model was created in 3D Studio MAX.
Run Hyperwire and open a new title (title is the Hyperwire term for an applet).
Drag a 3D World module from the Modules palette to Layout view. Edit the properties for the 3D World module and specify the name of the 3D file to import. Figure 38.2 (earlier in this chapter) shows the 3D World module in place in the Layout view. Figure 38.7 shows the properties dialog box for the module. Hyperwire gives you the option of selecting which of the individual 3D objects you want to import; you don’t have to bring in the entire scene.
The properties dialog box for the 3D World Module.
Drag and drop the other modules that you need and arrange them in Layout view. You can place some of the modules and wire them, or place all the modules before starting wiring. As you drop the modules into Layout view, they also appear in Wire view. The bitmap for the church plan is included on the CD-ROM (VIEWS.GIF).
Wire the modules together to create the interactivity you need. Of course, some of the modules are not wired; for example, some of the Text Label modules simply display text. The following list items show the wiring used to make the sample applet. I’ve omitted repetitive wiring; for example, I’ve only included one of the Click colored circle to change the camera view wires. The others work in just the same way.
Wire the Click Me Label module’s Button Up output to the 3D World module’s Animate All input. This wire requires a parameter—the frame number to start the animation. Set this to frame 0. This wiring plays the animation when the text label is clicked.
Wire the Yellow Top Circle module’s Button Up output to the 3D View module’s Set Camera to View input. This wire requires a parameter—the camera name. Set this to Top_camera. This wiring switches the camera view when the colored circle is clicked.
Wire the Navigation Space Rectangle module’s Mouse Enter output to the 3D View module’s Set Orbit Mode input. This wiring switches the mode of the 3D view when the mouse is over it so that you can navigate within it using pan, zoom, and rotate commands.
Wire the Navigation Space Rectangle module’s Mouse Leave output to the 3D View module’s Set Track Mode input. This wire requires a parameter—the camera name. Set this to Moving_camera. This wiring switches the mode of the 3D view to track a camera when the mouse moves off it.
Figure 38.8 shows the completed wiring as it appears in Wire view.
Wire view shows completed wiring for the applet.
10. Run the applet to test it. Hyperwire compiles the Java code, and displays it in its own Appletviewer. Figure 38.9 shows the Hyperwire Java Console. Compile messages and any error messages appear here. The Appletviewer shows exactly what you can expect to see when the applet is embedded in a Web page.
Hyperwire’s Java Console and Appletviewer.
11. When you are satisfied that your applet is working properly, export the Java code by choosing
File, Export As Java. Again, compile messages appear in the Java Console, so
you can make sure everything is going smoothly. When the compilation and export process is
complete, you see that Hyperwire has created three files. If our applet is called ARCH.TTL, the
files would be:
These files are included on the CD-ROM that accompanies this book, so that you can examine them if you want to understand more fully how Hyperwire handles the 3D objects. Listing 38.1 shows a short extract from the code listing for arch.java. (As the comments say at the beginning of the Java file, this is procedurally generated code so it may appear somewhat odd).
Listing 38.1 Extract from Java code generated by Hyperwire.
private final void resetModule2( Nodule aModule )
{
AttributeBundle ab = ( AttributeBundle ) aModule.getBundle();
W3DWorldPlugIn aPlugIn = ( W3DWorldPlugIn ) aModule.getPlugIn();
ab.setUserData( OpusString.from( "nil" ) );
ab.setBaseFlags( 2 );
ab.setAttributesChanged( false );
aPlugIn.setRelativeURLName( "church2.wrl" );
aPlugIn.setWorldName( "3D World - church2" );
aPlugIn.addObject( OpusString.from( "Moving_camera_TopLevel" ) );
aPlugIn.addObject( OpusString.from( "Box04" ) );
aPlugIn.addObject( OpusString.from( "church2.wrl_OBJECT_00270" ) );
aPlugIn.addObject( OpusString.from( "church2.wrl_OBJECT_00271" ) );
aPlugIn.addObject( OpusString.from( "Box03" ) );
aPlugIn.addObject( OpusString.from( "church2.wrl_OBJECT_00268" ) );
aPlugIn.addObject( OpusString.from( "church2.wrl_OBJECT_00269" ) );
aPlugIn.addObject( OpusString.from( "Box02" ) );
aPlugIn.addObject( OpusString.from( "church2.wrl_OBJECT_00266" ) );
aPlugIn.addObject( OpusString.from( "church2.wrl_OBJECT_00267" ) );
aPlugIn.addObject( OpusString.from( "Box01" ) );
aPlugIn.addObject( OpusString.from( "church2.wrl_OBJECT_00264" ) );
aPlugIn.addObject( OpusString.from( "church2.wrl_OBJECT_00265" ) );
aPlugIn.addObject( OpusString.from( "Camera02_Target" ) );
aPlugIn.addObject( OpusString.from( "Top_camera_TopLevel" ) );
aPlugIn.addObject( OpusString.from( "Inside_camera" ) );
aPlugIn.addObject( OpusString.from( "Inside_camera_TopLevel" ) );
12. Open the HTML file that Hyperwire generated in your HTML editor. This file contains the HTML for a simple, blank page that embeds the <APPLET> tag. You can add your own HTML to this page or copy and paste the <APPLET> tag into another HTML file. Listing 38.2 shows the HTML file generated for the architecture sample applet.
Listing 38.2 HTML file generated by Hyperwire.
<HTML>
<HEAD>
<TITLE> Arch </TITLE>
</HEAD>
<BODY>
<APPLET CODE="Arch.class" WIDTH=480 HEIGHT=360>
</APPLET>
</BODY>
</HTML>
13. Test the applet in your Web browser. The simplest way is to open the HTML file locally from your hard disk. Figure 38.10 shows the applet running in Netscape Gold 2.01.
Test the sample applet in the browser.
Those are the basics of working with 3D in Hyperwire. If you take the time to look into Hyperwire, you’ll probably be surprised by what you can do with it. If you’re a visually-oriented type of person, you may be able to save yourself a lot of development time by using it to generate Java routines. In fact, Hyperwire almost does too much, in that it makes it relatively easy to create complex, multi-level applications. The catch is that the Web isn’t really ready for that kind of complexity yet, unless you are working within a corporation that has a high-speed intranet in place.
Nevertheless, Hyperwire is a very useful tool to know about. There’s little doubt that the tendency of the World Wide Web is towards 3D, increased interactivity, and increased bandwidth. It’s just a matter of time.
Just as 3D-oriented companies, such as Kinetix, have been quick to provide support for 3D objects in Java, so 2D-oriented companies, such as Adobe, have announced their strategy to support 2D objects. In particular, Adobe’s Bravo technology, announced in May, promises to provide an API for displaying, printing, and managing high-resolution images for Web applications. At the same time, JavaSoft, Sun Microsystem’s Java-development company, announced its intention to make Bravo a part of future implementations of the Java platform.
So what are you likely to see as a result of these two announcements? Probably a slow move towards higher-resolution images and a step away from low-resolution GIF and JPEG images as leading-edge Web developers begin to adopt the new standard. Once again, bandwidth is the key factor. Today you use GIF and JPEG, not so much because they can be displayed without modification on different platforms, but because they are the smallest-size files.
Download time is still extremely important for most Web surfers. If a Web page doesn’t download reasonably quickly, it doesn’t get read. So you can expect that the Bravo technology will address the graphics file-size issue and provide some form of serious compression and display mechanism for high-resolution 32-bit images with an alpha channel (transparency).
Bravo is based on PostScript, which means that the graphics quality of pages printed from Web pages should be greatly improved. It also means that vector-based, scalable graphics, created in applications such as Adobe Illustrator or Macromedia Freehand, will begin appearing on Web pages. At the moment, display of these kinds of images is only possible by downloading and installing special software such as Macromedia’s Shockwave for Freehand. When JavaSoft incorporates Bravo into Java, vector-based images will be viewable in a Java-enabled browser such as Netscape.
How will you include 2D objects in your Java applet? The complete answer to this question won’t be available until the initial JavaSoft 2D API Specification appears some time later in 1996. In the meantime, keep an eye on the JavaSoft Web site and forum at www.javasoft.com for further developments and announcements.
| Previous Chapter | Next Chapter |
|Table of Contents | Book Home Page |
| Que Home Page | Digital Bookshelf | Disclaimer |
To order books from QUE, call us at 800-716-0044 or 317-361-5400.
For comments or technical support for our books and software, select Talk to Us.
© 1996, QUE Corporation, an imprint of Macmillan Publishing USA, a Simon and Schuster Company
