Completing 3D logo VRML file using StudioPro Blitz

| ACG Home | Instructor Home | Class Home | list of tutorials |

To complete the 3D portion of our web page we will return to StudioPro Blitz to:

1. Choose the rendering attributes for our model.
   • Keep in mind that the VRML file exported by Strata StudioPro will have limited support for several rendering attributes.
   • The thumbnail rendering (see below) will however fully display all the settings you may establish.
2. Render a thumbnail image of the model, to be used for a hyperlink to the actual 3d scene.
3. Export the model as a VRML file.
4. Convert the thumbnail to a JPEG file, using Photoshop.
5. Edit the HTML file to add a link to the VRML file, using SimpleText.

VRML (Virtual Reality Modeling Language) is a standard way to describe the contents of a 3D scene. It is used in several web sites to give greater immediacy to the viewers' experience. It's advantages include:

• generally small file sizes (instead of a series of pre-computed animation frames, the viewers download only the instructions necessary for their computer to generate the actual animation). Also, the same scene, once downloaded (or otherwise distributed to users--e.g., on a CD-ROM) can be re-used in a variety of ways, speeding up subsequent interactions.
• greater viewer control and, as a consequence, greter involvement: each participant can select a unique viewpoint on the scene, while various interactive options can be added in newer versions of the standard (VRML 2.0, recently approved).
• the opening of new ways to present information and tell stories, altogether different from any traditional medium.

The main disadvantage of VRML is that it requires viewers to have access to fairly powerful computers to properly experience the 3D environment. VRML has also been hampered by spotty support in browser software, and a tortuos and conflicted standardization process.

After completing the VRML file, we will return to our main HTML file to add the necessary link to our new multimedia piece.

Choose Rendering Attributes

1. Change the configuration of the computer for 3D work:
   • Use Apple-->Control Panels-->Extensions Manager to select the QuickDraw 3D set.
   • Special-->Restart
2. Re-open your 3D logo using Strata StudioPro.
   • Make sure you are still viewing an Orthographic projection (slider at the top of the document window).
   • Switch to Quick Shaded or Smooth Shaded display (buttons at the top-left of the document window).
3. Apply an existing texture to an object in the scene
   • If necessary, use the command in Windows-->Palettes to display the Textures Palette.
   • Find a texture you like:
     • Use the horizontal scroll bar at the bottom of the palette to see previews of the textures applied to a default beveled square.
     • Use the pop-up menu at the bottom-left of the palette to see a list of texture names.
   • Switch to an appropriate view
     • The object should be oriented so that the surface to be textured is parallel to the viewing screen.
     • For instance, to apply a tiled texture to the top of the pedestal, we would switch to the Top view.
       • Note that because of the way we built the pedestal, the texture will actually apply to its support column and base as well.
       • If it is important to you to be able to texture differently the various parts of the pedestal, consider rebuilding the object from separate shapes, perhaps using 3D primitives.
   • Drag the chosen texture preview from the Textures palette and drop it on the object to be textured.
     
     • In Quick Shaded display, the object will merely change color to an approximation of the dominant color in the texture. You may see additional detail in Smooth Shaded display.
   • Use the pop-up menu at the bottom of the toolbox to choose Stills-->Good for rendering quality.
   • Choose the large color icon of a camera at the bottom of the toolbox, and click and drag in the document window to select a small portion of the scene including the textured object.
   • A rendering window will appear on top of the document window and, after some time spent computing, a more accurate rendering will appear, allowing you to better judge the appearance of the textured object.
     
     • The rendering may show that the texture is not the right size or orientation for the object. This can be fixed by remapping the texture, as we'll see in a moment.
     • To continue to work on your 3D model, you will want to close the rendering window. If at this time a dialog appears asking to save you can click 'No' (the dialog is for the 2D picture, not the 3D model).
4. Adjust the texture mapping scale and orientation
   • Make sure the textured object is selected.
   • Use Textures-->Change Mapping to display the Change Mapping dialog.
   • If the texture is not oriented properly (for instance, the edges of the tiles are not parallel to the edges of the pedestal), it can be rotated using the second tool from the top in the small toolbox on the left of the dialog.
   • If the texture is too large or small relative to the object, it can be shrunken or magnified using the coverage numbers for Horizontal and Vertical percentage
5. Create and apply a new solid-color texture
   • Use the selection tool to select the object you want to texture.
   • Use Textures-->New Texture to display the Texture Editing dialog.
   • Enter a name for the texture.
   • Click on the 'Color' button to bring up the Color Picker.
     
     • Use the slider and the color wheel to choose the object's color. Click 'OK' to exit the Color Picker.
       
   • Adjust how transparent and/or shiny the object should be with the 'Clear' and 'Gloss' sliders.
   • Click 'Preview' to see a default rendering using the texture's current settings.
     
   • Click 'OK' to exit the Texture Editing dialog and apply the new texture to the selected object.
6. Repeat the previous steps to texture the other objects in the scene
7. Change the orientation and settings of the default light
   • If necessary, use the command in Windows-->Palettes to display the Lighting Palette.
     
   • In the circle in the right half of the palette, find the default light: a white oval indicates its location, and a white line indicates its direction. Drag the oval and the document window will update to show the effect of the new lighting direction.
   • Double-click the white oval to display the Edit Global Light dialog.
     
     • Click on the 'Set Color' button to bring up the Color Picker. Use the slider and the color wheel to choose the light's color. Click 'OK' to exit the Color Picker.
     • Drag the 'Intensity' slider to adjust the brightness of the light.
     • For more realistic renderings, leave the 'Casts Shadows' box checked.
     • Click 'OK' to exit the Edit Global Light dialog.
   • Again use the camera at the bottom of the toolbox for a test rendering, to better see the effect of your lighting adjustments.
8. Create and adjust a new light
   • Click the 'New' button in the Lighting Palette to again display the Edit Global Light dialog.
   • Use the same controls you used for the default light to adjust the effect of the new light to your liking.
     
9. Choose environment and atmospheric effects.
   • Use Rendering-->Environment Effects to display the dialog Environment Effects.
     
     • Use the pop-up menu in the 'Background' section (left) to choose a backdrop for the scene.
     • Use the pop-up menu in the 'Reflected' section (right) to choose what will be seen in the reflections on objects with glossy textures.
     • A simple and effective combination is 'Sky Background' with 'Chrome Reflected'.
   • Use Rendering-->Rendering Effects to display the dialog Rendering Effects.
     
     • Leave checked all the boxes in the 'Object Effects' section of the dialog (top), in case any of the textures you chose need them. This generally legthens rendering time, but given the small size of our final rendering the actual impact will be negligible.
     • You can experiment with the controls in the 'Atmospheric Effects' section of the dialog (bottom) to add a fog to the scene.
       • The fields labeled 'Starts at' and 'Visibility' indicate how close to the viewer the effect of the fog begins, and how far it extends before becoming completely opaque.
       • If your rendering turns out as a solid color fill, cut back on the fog.
   • Both environment and atmospheric effects will only appear in renderings.

| return to top |

Render a Still Image

This picture will be used as a thumbnail for the link from your web page to your VRML file

1. Change your viewpoint to show the scene at its best
   • Use the first 3 tools at the top-left of the toolbox to, respectively, Pan, Rotate, and Zoom your view of the scene.
     • If you get lost in the process, use the command Windows-->Fit Views to All to return to your model.
   • Use the slider at the top of the document window to switch to a perspective view ('Normal' or 'Wide Angle' lens).
2. Do a draft-quality test rendering. Close the rendering window (without saving) and make further adjustments if necessary.
3. Render and save the final image as a PICT file
   • Use the pop-up menu at the bottom of the toolbox to choose Stills-->Best for rendering quality.
   • Use the rendering camera tool to select only the most significant portion of the scene. To keep download times short, keep the selection small (100 pixels square is a good start).
   • A dialog will appear. Leave all the settings as they are (they have been preset to give you the best image quality) and click 'Render Now'.
   • The rendering window will appear on top of the document window as usual. This rendering will take a bit longer, since there are many more computations involved.
     
   • Make sure that the rendering is still the active window, then use File-->Save As to display the Save dialog
     • Choose 'PICT File' from the 'File Format' pop-up menu at the bottom of the dialog
     • Enter any filename (this file will have to be converted before it can be posted on the web)
     • Click 'Save'
     • In the 'PICT File Options' dialog that appears next, choose '32 Bits/Pixel' resolution, uncheck the options on the right and click 'OK'.
       
   • Close the rendering window.

| return to top |

Export the 3D Scene as a VRML File

1. Use File-->Save As to display the Save dialog
2. Choose 'VRML File' from the 'File Format' pop-up menu at the bottom of the dialog
   
3. Enter the filename (all lowercase) according to these rules:
   • Your last name
   • An underscore (Shift-hyphen)
   • Your first name's initial
   • A period
   • VRML world extension: wrl
   • Sam Sample's file would be named sample_s.wrl
4. Click 'Save'
5. In the 'VRML Export Settings' dialog that appears next, uncheck all the boxes and click 'OK'.
   
6. Strata StudioPro won't be able to open the VRML file if you need to make changes to the scene. Make sure to also use the File-->Save command to update the Strata version of your document, and keep it on your disks.
7. You are now done with Strata StudioPro, and you might want to quit the program to free up memory.

| return to top |

Convert the thumbnail image to JPEG format using Photoshop

1. Drag the icon of the PICT thumbnail file and drop it on Photoshop
2. Use File-->Save As to display the Save dialog
3. Choose 'JPEG' from the 'Format' pop-up menu at the bottom of the dialog
   
4. Enter the filename (all lowercase) according to these rules:
   • Your last name
   • An underscore
   • Your first name's initial
   • Another underscore
   • logo
   • A period
   • JPEG image file extension: jpg
   • Sam Sample's file would be named sample_s_logo.jpg
5. Click 'Save'
6. In the JPEG Options dialog that appears next, choose 'Medium' image quality, 'Baseline Standard' format, and uncheck 'Save Paths'. Click OK.
   

| return to top |

Edit the HTML File for Your Web Page

1. Drag the icon of your current '.html' file and drop it on SimpleText
2. Click to place the insertion point where you would like to see the thumbnail linking to your VRML logo scene.
   • As always, make sure that the insertion point is not within a portion of text enclosed in angle brackets ('<' and '>')
3. Enter the tag to display the thumbnail:
   • <IMG SRC="YourJpegFileNameGoesHere">
4. Before the IMG tag, enter the start tag for the link to your VRML file:
   • <A HREF="YourVrmlFileNameGoesHere">
5. After the IMG tag, enter the end tag for the link:
   • </A>
6. Following all of the above instructions, Sam Sample's HTML file would contain this line:
   • <A HREF="sample_s.wrl"><IMG SRC="sample_s_logo.jpg"></A>

Before leaving, make sure you transfer your new '.wrl' file and the edited HTML file to the file server for posting to the web server.

| return to top |

Additional Info:

• More up-to-date information on VRML is available at a number of Internet sites. Two good starting points are the VRML Consortium and the VRML Repository at the San Diego Supercomputer Center.
• Look up in the class schedule the Art Computer Graphics classes covering 3D topics, ACG120: 3D Computer Graphics for Macintosh and ACG150: 3D Computer Animation for Macintosh.