I first became interested in VRML as a medium for rendering my computer artwork. Some examples can be found at http://home1.gte.net/zzyzlane/images/zzyzlane.html. Most intriguing to me were the possibilities for zooming, rotating, and using transparency to create variations of the primary image by using multiple instances of the original at different transparency levels.Readers should be aware that I do not create large, complex worlds -- even if the images may appear somewhat exotic. All my files are extremely small (less than 1 KB) so that downloading does not take an eternity. I use Notepad as my only world-builder/text editor. I learned to hand-code VRML from scratch and do not use any sophisticated world building program. Finally, all my files use ImageTexture nodes with url fields to create the central image.
In the first part of this article, I describe and illustrate some of the effects that can be created with these simple files. In the second part, I discuss some of my ideas about rendering stereography in VRML.
Using VRML to Render Artistic Effects
My first few attempts to render my computer artwork consisted of simple planes along the x and y axes, with the z plane set to 0.01. However, I realized that using levels of transparency and stacking multiple instances of the same image one behind another, I could cause the image, when rotated, to come alive with kaleidoscopic patterns and colors.To illustrate, I use two examples you can see on my computer art home page. Both images were created in similar ways. I use a flatbed scanner and place different objects on or above the plate. I use Corel PhotoPaint to create the jpg files, apply color, and run various fractal filters.
It's important to realize that these snapshots taken from the browser window illustrate only a few select aspects of these images. In fact, by rotating along different aspect views, by wobbling the angles of rotation, by rotating from one corner to another, right-to-left, left-to-right, top-to-bottom, or bottom-to-top, and with the myriad of different angular possibilities in between, an almost infinite number of variations exists. These images make marvelous screen savers. Call up the wrl file, zoom so that it fills the VRML browser window, click the "Rotate" button, grab one side or corner with the mouse, then drag it one way or another, and release the mouse button. The image begins rotating on its own.
- Figures 1-4 were created from an image that was originally a cluster of tiny Christmas lights suspended between 1 and 6 inches above the open scanner plate. Figure 1 shows the original image with full opacity.
- Figure 5 was originally plastic wrap stretched over the scanner plate, on which I placed a handful of prisms, leaded crystal, and concave mirrors. Figures 6-9 derive from this image.
Each file consists of four slices of the same image using the ImageTexture node with the url field pointing to the same jpg image. In each the transparency values are (from front to back) fully opaque, .25, .5, and .75 transparent. I add an emissiveColor of 0.7 0.1 0.1 to provide a reddish glow as the images are rotated. The positional offsets are accomplished using the Transform node translated from front to back along the z-plane: 0.00, -0.5, -1.0, and -1.5. Finally, all four slices are held together by a Group node, so that they will function together when the image is rotated.
Figure 1 shows the front view of the fully opaque image as presented in the CosmoPlayer 2.0 VRML browser. The image is zoomed so that it fills the browser window. From this angle, the other three images are hidden, since they are all aligned the same along the x and y axes. The scanned image of the Christmas lights looks like a kind of star field with reddish ribbons caused by refraction.
Figure 1
To swing the images around, I grab the middle of the right side of the image and rotate it approximately 90 degrees. Figure 2 shows the four slices edge-on. From this viewing angle, another interesting possibility for navigating these images becomes obvious. Using the "Zoom" button, you can go "inside" the images and view them inside-out. I have not provided any snapshots of this particular angle, but if you are interested, visit my home page.
Figure 2
Figure 3 shows how the images look rotated at about 130 degrees. The billowing red bands swell out in front of stars arranged down long transparent corridors that appear to converge on the left.
Figure 3
Finally, Figure 4 illustrates the four images viewed from the "back" or rotated approximately 180 degrees. From this angle, the transparent red ribbons and stars appear to stretch outward on the left and right sides. In the upper and lower right corners, tiny squiggles of red and blue lines, visible in Figure 1 but completely invisible in Figures 2 and 3, rematerialize. Meanwhile, on the left side, the stars that appeared to be arranged in corridors in Figure 3 now have unarranged themselves into a chaotic splotchy field. In the center of the window, you seem to peer into an infinitely long corridor, framed with stretched bands of red and white lights, down into a dense black hole.
Figure 4
Next, I turn to another image that has been one of my most popular among friends, colleagues, and fans of my web page. I chose this image originally because of its beautiful play of translucent blues, greens, reds, and yellows. As in Figure 1, I generated the fractal pattern using Julia Set Explorer 2.0 in PhotoPaint. Figure 5 shows the front view of the fully opaque image zoomed so that it fills the CosmoPlayer browser window.
Figure 5
Once again, to swing the images around, I grab the middle of the right side of the image and rotate it approximately 90 degrees. Figure 6 shows the four slices edge-on. From this perspective the reddish emissiveColor is apparent. You can also see the straight, glittering edges of the computer "painting," almost like a translucent canvas, caused by setting the z-axis of the box geometry on which the ImageTexture is applied to 0.01.
Figure 6
Figure 7 illustrates the images rotated at about 130 degrees. I select this particular angle to illustrate how the four slices with different transparency settings appear. All four are clearly visible on the right side, aligned like perfectly parallel panes of glass stained with transparent dyes. The black fractal patterns create jagged streams that zig-zag through the translucent blues, yellows, and greens.
Figure 7
Figure 8 illustrates the four images viewed from the "back," rotated approximately 180 degrees. From this angle, the view centers around the fractal black hole, which extends long, complex craggy arms in three directions, some in corkscrew patterns. Around the black center bright bursts of reds and yellows radiate in all directions in a myriad of strange blends and hues. A few bright streaks of purple and white shoot out from behind the black, red, and yellow fractal bath. The blues and greens are pushed to the sides of the image. On the left, a labyrinthine crystal lattice of blue tones cascades toward the center. On the right huge elliptical arcs of yellow and green wheel outwards, complemented in the bottom center with sweeping ovals of translucent greens, yellows, and reds.
Figure 8
Finally, I have included one more view. From the same viewing position as in Figure 8, by grabbing the upper right corner of the four-image group and pulling it down and left toward the center, an extreme oblique viewpoint appears. Figure 9 illustrates this angle of the "back" of the four images. The transparent images are aligned in a kind of searchlight pattern originating from the upper right corner. The blues and greens on the right blend into an opalescent hue that is flecked with brighter green wings of color. The black fractal canyons surrounded by yellows and reds now appear to spread across the center of the image and zig-zag to the top and bottom of the image. On the right, the yellow-green arcs of color (caused by the concave mirrors scanned in the original jpg image) are stretched wider and have lost the darker greens seen in Figure 8. On the left side, the sea of blue with whitish-blue waves is broken at its edges by transparent diamond-like shapes.
Figure 9
Lest the reader believe that these are all separate creations using some kind of magic filter in PhotoShop, I remind you that all are simple screen prints of this four-image group taken directly from the CosmoPlayer browser, without enhancements or image manipulations of any kind. I must confess that when I first put these wrl files together and saw the results, I was stunned. The virtually infinite possibilities of colors and patterns that can be derived from one image by using multiple instances and transparency in VRML is somewhat mind boggling. The images assume a kind of kaleidoscopic dance, without the order and symmetry presented in real kaleidoscopes. In fact, it is a completely chaotic construction, in which forms and color blends assume themselves depending on the viewing angle. When you launch the four-image group so that it rotates on its own, the myriad angles constantly shift across your browser window like a surreal, chaos-driven light show.
To achieve the effects illustrated in these figures, a high resolution copy of the original image must be the basis of the construct. The actual size of the original high resolution image for Figure 1 is 165,452 and for Figure 5, 302,614 bytes. To make them more manageable on my ISP's server, I resize them down by about half, so that the images rendered in these two wrl files are 80,189 and 132,051 bytes respectively. Reducing the size much further completely degrades the original character of the two images, resulting in ugly pixellation and gross loss of detail. On the other hand, if I use the full sized high resolution images, there is a cost in download time for the user. Not only does it take approximately twice as long to download the image into the Cosmo browser, but rotating the image also results in a slower, less smooth rendering because the browser appears to lurch the image around in stop-start fashion. Of course, the results you see are also dependent on the speed (in Megahertz), capacity, and current load of other applications on the machine at the time. My machine at work, a 166 MHz Dell Pentium (with no MMX) plays the rotation very slowly. On my machine at home, a 266 MHz HP P2 (with MMX), I can kick the image around and it spins like a little whirling dervish.
So, where do I envision going from here? Besides the fact that I have around 20 more computer art images that I would like to render in clone copies of this wrl file, I have several other projects in mind:
Source Code for Figures 1-9
- Variations in the number of slices in the row along the z-axis, with transparency renderings, for example, five at 1.0, 0.8, 0.6, 0.4, 0.2, and at different spacings apart (in VRML units)
- Variations in the offsets of the slices in back of the leading image, so that, for example, slice 2 is halfway exposed above slice 1, slice 3 halfway exposed below slice 1, slice 4 halfway exposed to the left, and slice 5 halfway exposed to the right
- Addition of different light sources at different angles, such as PointLight, SpotLight, and DirectionalLight nodes behind, above, and in the corners
- Creation of multi-faceted objects such as hexagons and octagons using the same ImageTexture to define the plane surfaces, and rendering at different transparencies, and including interior light sources or bright star fields in the center with rays that stretch out to points on the back of the ImageTexture faces
- Rendering mirror like effects by using one ImageTexture node and creating a reverse image in a second ImageTexture node, and aligning them into a "hall of mirrors" marching into the distance along the z-axis
- Creation of a "virtual gallery" of multiple images -- perhaps four or five, so as not to inconvenience the user too much with infinite download time
- Addition of background environments, using smooth variegated color washes with which the images blend and intertwine and appear to emanate out from
Note - The url shown below (newex10.jpg) is for the image you see in Figure 5. The url for the image in Figure 1 (newex22.jpg) is the only different field in the source code.
#VRML V2.0 utf8
# Copyright 1998 by Christopher Lane
Group {
children [
# Zero plane
Transform {
translation 0.0 0.0 0.0
children [
Shape {
geometry Box {
size 4.2 3.0 0.01
}
appearance Appearance {
material Material {
emissiveColor 0.7 0.1 0.1
}
texture ImageTexture {
url "newex10.jpg"
}
}
}
]
}
# Offset -.5 transparency .25
Transform {
translation 0.0 0.0 -.5
children [
Shape {
geometry Box {
size 4.2 3.0 0.01
}
appearance Appearance {
material Material {
emissiveColor 0.7 0.1 0.1
transparency 0.25
}
texture ImageTexture {
url "newex10.jpg"
}
}
}
]
}
# Offset -1.0 transparency .5
Transform {
translation 0.0 0.0 -1.0
children [
Shape {
geometry Box {
size 4.2 3.0 0.01
}
appearance Appearance {
material Material {
emissiveColor 0.7 0.1 0.1
transparency 0.5
}
texture ImageTexture {
url "newex10.jpg"
}
}
}
]
}
# Offset -1.5 transparency .75
Transform {
translation 0.0 0.0 -1.5
children [
Shape {
geometry Box {
size 4.2 3.0 0.01
}
appearance Appearance {
material Material {
emissiveColor 0.7 0.1 0.1
transparency 0.75
}
texture ImageTexture {
url "newex10.jpg"
}
}
}
]
}
]
}
Using VRML to Simulate Stereography
I first became interested in the possibilities of using VRML to render stereography because I inherited a bunch of old stereographic slides from my grandfather, Ray Davis of Hamler, Ohio. These slides contain some really stunning images. My grandpa took lots of photos throughout the '50s and '60s of everything from the Grand Canyon to the Great Ohio Blizzard. Unfortunately the only way to view them is through a viewer called "Life Like," manufactured by Deep-Vue Corp of Sun City, Arizona. Some of them are absolutely, ravishingly beautiful through the viewer. When single slides are printed, they look pretty much like any old photo. It's been at least 40 years since I saw my grandfather use the camera.
The stereo image is on a double slide, with two images of the same thing side by side, but from slightly different perspectives. The old cameras, which were manufactured in the late '50s-early '60s, created the image took two images, using two lenses, the stereo effect being produced by the minute distance between the two. When the double slide is seen in the viewer, the illusion of three dimensionality is caused by a trick of the eye. The two images are resolved by the eyes into one, but their very slight difference in perspective creates the look and feel of true depth perception. Most amazingly, they are true color, transparent, and extremely realistic.
Several correspondents who contacted me through the comp.lang.vrml news group made me aware that a lively interest in this old technology continues to flourish. There are several web sites that are dedicated to the various aspects of stereography. The most comprehensive site is the 3D Web. 3D Web's list of sites related to stereographics contains about 30 links to other web pages and companies.
Figure 10 illustrates what these cameras and viewers look like, with two images combined, from a 1957 ad. They employed state of the art lenses and - amazingly, from the perspective of our time - retailed for $84.50 for the camera and for the viewer $12.50 (battery operated) and $23.75 (wall plug-in version). There were also slide projectors and carousels manufactured specifically for these stereographic slides.
Figure 10 Kodak Stereo camera (left) and Viewer The other variety of stereography that interested me is called color separation. It involves creating two or more instances of the same image. One of the images is rendered with blue saturation and the other red. To view the images properly, you have to wear a pair of the old-fashioned 3D glasses, with one red lens and one blue. PhotoShop provides just such a set of color separation filters, with which you can split the image into 2, 3, or 4 layers, with different separation values applied to each layer. Some fairly famous instances of this technology have recently appeared in the world of astronomy and space exploration. Some of the photos taken by the Mars Rover Lander mission were published in color separated versions. The February 1998 issue of Astronomy magazine experimented with 3D images, using the out-of-alignment technique, color separation, and viewing with a pair of the red-blue 3D glasses enclosed with the issue. These are nice experiments, but they are not as satisfying as viewing true-color stereographic images.
I decided to try to do something similar using a modified color separation technique and transparency in VRML. To do this, I scan the same photo of Bryce Canyon and create two separate images that I use to make a composite. One of them is 1 pixel wider and taller than the other. I add the blue values on the one in back and heighten the reds on the one in front. In the wrl file, I then apply the opposite emissiveColor to the two images (i.e., on the red one, I made the emissiveColor blue, and on the blue one red). The distance between the two is .25 in VRML units on the z-axis. The transparency value of each is 0.5. The box geometry size values for the image in back are 4.4 3.4 0.01 and for the one in front, 4.22 3.22 0.01. On trial runs, I noticed very slight register problems, which become more apparent as you zoom closer to the image. It is manifested as a beveled edge around the image, and a double image.
Figure 11 illustrates this version so that the reader can see the double image clearly. Using a pair of red-blue glasses, this doubleness tends to resolve into a single image, but it still appears blurry. So I decided to correct the misalignment.
Figure 11
Figure 12 illustrates what happens when the box geometry values for the image in front are adjusted to 4.16 3.22 0.01. In this version the image of Bryce Canyon almost acquires a 3D quality. It is hard to believe that it is actually two separate images of different sizes, one in front of the other, and each half transparent. The horizontal lines are an artifact of the type of paper on which the old photo was printed. It was taken early in the morning in August 1974, using my ancient Voigtlander Vitrona.
Figure 12
Source Code for Figure 12
#VRML V2.0 utf8
# Copyright 1998 by Christopher Lane
Group {
children [
# Zero plane emissive blue
Transform {
translation 0.0 0.0 0.0
children [
Shape {
geometry Box {
size 4.4 3.4 0.01
}
appearance Appearance {
material Material {
emissiveColor 0.1 0.1 0.7
transparency 0.5
}
texture ImageTexture {
url "bryce03b.jpg"
}
}
}
]
}
# Offset .25 emissive red
Transform {
translation 0.0 0.0 0.25
children [
Shape {
geometry Box {
size 4.16 3.22 0.01
}
appearance Appearance
material Material {
emissiveColor 0.7 0.1 0.1
transparency 0.5
}
texture ImageTexture {
url "bryce03a.jpg"
}
}
}
]
}
]
}However, some obvious problems remain. The biggest problem involves the way color graphics bits are mapped in browsers. Colored pixels, even when examined at the closest possible resolution, are obviously not transparent. In VRML, transparency can be simulated within the CosmoPlayer browser, but colors appear more washed out and translucent than truly transparent. Hold a slide, which is clearly transparent (no pun intended), alongside the image rendered transparent in VRML, and the difference jumps out at you. The same problem exists with printing transparent slides on photographic or any other kind of paper. When a double slide on which one image is slightly shifted from the other is superimposed and then printed, it looks like a blurred mess. The new Note posted to the World Wide Web Consortium on April 10, 1998, for the Precision Graphics Markup Language (PGML) holds some promise for rendering 2D vector graphics on the web, with "true transparency." PGML is based on XML and has as its second design principle, extending "the PDF/PostScript imaging model to satisfy the graphics requirements of the Web, particularly in terms of transparency, anti-aliasing, the hooks for animation and dynamic behaviors... including the ability to composite multiple objects together first and then composite the result into a background using a given opacity setting." Specialized filtering could allow compositing and raster image effects. One example of a compositing filter could be, "a matte effect which would allow any graphic to be used as an imagemask or a transparency blend other than the default channel-by-channel transparency blend in the sRGB color space."
Another problem with superimposing two images in the manner shown in Figure 11 is that when you rotate it, the images immediately diverge. This problem can be fixed by grouping them in a Billboard node. The two box nodes would automatically be rotated to face the viewer no matter where the viewer navigated in the VRML world. In a Billboard node group, the coordinate system always rotates around the z-axis unless the default axisOfRotation exposed field is changed. The default axisOfRotation in the Billboard node is 0.0 0.0 0.0, which ensures that the group's z-axis always faces the viewer.
One of my favorite correspondents, Bob Crispen, who is the VRML guru for The Boeing Company, and their chief architect on the standards committee, has been working on a PROTO node that could possibly simulate the effect of moving through a stereographic environment. I quote him now, "I'm at work on a node, simulating it in a PROTO: a new Inline node where you can command it to pre-load or command it *not* to pre-load, and where you can command it to free up memory or to hang on to nodes it's removed from the scene graph. The GeoVRML people came up with that, but it's going to be useful for VRML cities and lots of other applications. Combine it with an LOD node, and the possibilities become really interesting" (E-mail note, April 3, 1998).
I would like to see an opening of dialogue between the stereographics world, as represented on the 3D-Web site and others, and the VRML community. I believe would be an alliance of great importance. The reason I believe the urgency exists is that many of us who are first getting our feet wet in VRML are really looking for an immersive VR environment, capable of being displayed on the web with reasonable file sizes, and which supports true-color 3D stereographic imagery. Most VRML today looks kind of primitive. A few individuals are using it to display photography, artwork, and movies, using ImageTexture and MovieTexture nodes. Many in the VRML world will no doubt cry out, "But the 'M' stands for 'Modeling'!" This hesitation is understandable, given the history of the development of VRML.
I personally believe that at some point, photo realistic 3D stereographic immersive environments are going to be demanded by the users of 3D applications and environments. One would think that it shouldn't be any harder to figure out a way to put two stereo slides together to simulate the effect that you get when looking through the stereo viewers than it is to set up a massive array of indexedFaceSet coordinates in order to map a mountain range. I have a vague idea that there should be a way to write a "double" browser that would in some fashion simulate the effect that you see through shutter glasses or stereo viewers. What I am thinking of is something along the line of two or more transparent windows, on which true transparent slides could be projected, with a method for adjusting focus, field depth, brightness, and image width.
Advances in technology also raise many possibilities for marrying stereography and VRML. Another correspondent, Mark Pflaging, wrote me recently, "about low-cost HW acceleration [and] Stereoscopy? My conclusion was that it is still impossible to use a low-cost 3D accelerator like a 3Dfx board along with LCD shutter glasses to view VRML in full color stereo. HOWEVER products have just recently been introduced that let you use 3Dfx with stereo glasses to play Quake II. Was wondering if you have come up with any way to do stereo in VRML with shutter glasses on a PC with 3Dfx or Riva128. I know its fairly easy if you have an SGI and $1000 to spend just on glasses" (E-mail note, April 6, 1998). There has already been much discussion in the industry about a "visual user interface" (VUI), the practical 3D successor to the 2D graphical user interface (GUI) common on the Web. The VUI could have characteristics such as a zooming capability to expand and contract workspaces, 3D controls, and transparent multiple layers, and will probably be based on the emerging eXtensible Markup Language (XML) 1.0 specification.
Already, great technological advances have been in two areas: games and high end graphics workstations for scientific applications. In the latter, work is focusing on two areas: Immersive VR environments and Augmented Reality (AR). In Immersive VR, display devices for virtual environments use one screen very close to each eye. On each screen, images can be adjusted to simulate stereoscopy and depth-of-vision. Screens are embedded in helmets or small, lightweight head mounts. Retinal Displays of Los Altos, California, plans to introduce later this year light-weight, head mounted "Personal Displays" that use gyroscope based motion trackers able to synchronize user head movements with the virtual world at 30 frames-per-second. AR systems use a beam splitter to combine real world and computer generated images so that a user sees both simultaneously. In both Immersive VR and AR, the display devices must contain sufficient power to support a high refresh rate to avoid flashing effects and to convey the illusion of smooth, realistic motion. Substantial processing power is required to render Immersive VR, with shaded, full color, high resolution imagery. Each image may contain thousands or even millions of polygons. The stereoscopic renderer must be able to generate two images at the rate of approximately 15 frames-per-second. Expensive, specialized hardware graphics high end workstations, such as the Silicon Graphics Onyx, can render as many as 1.6 million polygons per second.
Therefore, I remain convinced that VRML would benefit overwhelmingly by working to develop true-color 3D stereography. Such an effort, of necessity, would have to be aimed toward the still distant VRML 3.0 specification - sometimes referred to as VRML98. VRML 2.0 (now updated to VRML 97) is fairly well set in concrete. The discussion about 3.0 is still very embryonic, and there may be possibilities to expand it considerably beyond the current limitations.
What future projects do I have in mind with my own limited resources? Later this year, I hope to purchase a slide scanner that will allow me to import both of the images on my grandfather's stereographic slides. With better quality images than those I can achieve using my store of photos and my 3-year old Epson scanner, I hope to use VRML to present some stereographic images using transparency, as I described earlier, on my Web site. I also am looking forward to advances to occur in the Netscape 5.0 browser release, predicted to occur sometime this fall, as well as in the CosmoPlayer browser. Another possibility is the still nascent java3d specification, only just recently released in alpha. Perhaps at some point all these advances will converge and create truly stunning 3D Web environments.
