Designing and Styling
Table of Contents
As with most creative software, the most important factor in creating an outstanding Ventuz presentation is the artist himself. Ventuz is an enabling technology in that it enables the artist to bring his vision to life. In the same way as a brush and canvas, it is the combination of skills and how they are employed that will determine the quality of the final product.
Similar to website design, there are two parts to a Ventuz presentation. There is the scene structure (render order, animations, scene logic, ...) and there is the design of the presentation. HTML offers text elements, boxes, links, images and much more but it takes a CSS (cascading stylesheet) file and appropriate images to create a website that can compete with today's standards. This article will focus on the latter and present various techniques that can be used to improve the visual design of a presentation.
3D Techniques
Rasterization by nature is a very simplistic process of splatting triangles to the screen as fast as possible. There are however various techniques that can be used to bring back a bit of the realism that is lost in the quest for ultimate rendering performance.
Light Setup
An often overlooked but crucial component of a scene is the light setup. If you have ever witnessed a professional photo shoot, you will certainly have noticed the amount of adjusting and moving of light sources is done even before the object of interest has entered the scene. For outside photography, true professionals carefully consider the time of day to get just the right color of light and cast of shadows. But even then, strobe lights or flashes are frequently used to boost certain areas.
The same applies for 3D rendering. By default Ventuz will use a Head Light (a light source positioned at the point of view of the camera so objects are visible at all. One of the first steps when setting up a scene should be to create a light setup by adding Light Sources to the scene, thus deactivating the Head Light. There are no hard rules when it comes to lighting but what generally works best is a so called 3-point light setup. First, choose the location of your main light source and its type. The main light will be the brightest light in the scene and dictate the style of the scene. Then add a so called fill light which can be any type of light source as long as it has a location and direction that the dark areas created by the main light are brightened. The fill light should have less power than the main light to preserve interesting variations of light and shadow on the surfaces of the scene. Finally, add a back light that is behind the object and looks roughly towards the camera. It also should have less power than the main light. Its role is to improve the silhouette of objects and thus provide a better background/foreground contrast.
In the example shown here, a slightly different setup has been used. A directional light comes hard from the right, a point light sits above the scene and a spot light comes from the top right corner. You will notice that although only the standard Ventuz materials are used, the shading on the objects is much more interesting than what only the Head Light would produce.
Reflection
The example above also contains a weak reflection on the ground. It was created with a mirror reflection technique as described in the How To Add a Mirror Reflection how-to. While the applications of mirror reflections are limited, having a reflective ground has been a standard design element of many product presentations for years now.
Camera Animations
It is tempting to use Ventuz as a 2D compositing tool with 3D elements, but to create truly exceptional presentations, take full use of 3D. Instead of moving objects so that they appear at the correct position in the default camera, create a true 3D environment and then add a Camera Node to find the best looking angles. For even better effect, let the camera fly through the scene and immerse the viewer into your world.
Models
Although possible, most presentations will not be just composed of simple primitives like rectangles, spheres or cubes. Ventuz supports the import of various 3D formats which opens up the door to either creating or buying models.
When it comes to Realtime Rendering, make sure that the models have been designed with efficient rendering in mind. Strip all triangles that cannot be seen in the presentation (i.e. removing inner parts or back-sides) and reduce the number of triangles used to an amount that still looks good in the presentation.
Since Direct Lighting cannot simulate self-shadowing of objects, it is generally a good idea to compute some form of ambient occlusion in a 3D modeling program and then store that information into textures (see baking shadows). This will give objects a much more realistic appearance but of course is only possible if the lighting situation in the final presentation is fixed for that object.
2D Techniques
Photoshop
There is a reason why modern games are capable of simulating complex worlds at 60 frames per seconds: They cheat! Do not think of Ventuz in the same way as a 3D modeling program where one puts as much detail and effects into a scene as possible, presses the render button and gets a coffee while waiting for the image to be rendered. There are effects that are not possible in Realtime Rendering and others that simply would take too long to compute or create.
When looking at any site on the internet, there usually is no 3D model of a perfectly lit mobile phone and there is no glass button with a spot light set on it. There are images and those images often contain the results of hours or even days of work by a talented artist. When the website is presented, the images can be shown instantly since all the work has already been done. The same applies to 3D: The more work is done in advance, the faster the rendering.
One simple example: Doing a label with a nice, soft shadow is a quite complex undertaking when done in 3D but literally takes seconds done in 2D. If the position of the shadow never changes, there is no real reason to do it with a 3D model. Instead, create a high quality version in Photoshop and then put it on a textured rectangle inside Ventuz to have Ventuz show the label where it should be.
Other interesting things to take advantage of in 2D are glow effects, gradients, motion blur and many others. Some people use Ventuz as a 3D compositing and animation tool of only 2D elements. But the true power of course lies in understanding when to use 2D and when 3D techniques and how to mix them for best effect.
User Interface
Each presentation has certain elements that are independent of the actual content. The most prominent example is the Background Graphic. Even a simple gradient put into the background of a scene drastically improves the overall look. The background is also a great place to put some kind of branding, for example the logo of a company.
Backgrounds should be unobtrusive as they must not distract the audience from the main content. But there is no rule that the background has to be static. Why not use a movie of an abstract graphic that slowly changes over time (but only as long as the movie content cannot be reproduced in Ventuz)?
The other type of common elements are navigational elements. Whether this is a button that is used to steer the presentation or a title bar, these elements will give a unifying look to the presentation and special effort should be invested into designing them. How do they look when they are inactive? What happens when they are activated?
The easiest way to find a unique look and feel is to have a look at some website design tutorials on the internet. A designer usually first does a 2D mockup of the website in Photoshop or some other image processing program before coding a single line of HTML. He uses text, gradients, icons, photos and other elements to arrange and composite them to what the website will look like later on. Once this step is done, coding them in HTML is relatively simple as the HTML is only used to arrange parts extracted from the mockup and render them to the screen.
In the same way, the artist has to create the elements that will compose a Ventuz scene. There are certain elements that will be easier to model in 3D and then import into Ventuz, others can be better done in Photoshop and then mapped to a textured rectangle.
Stock Photos
A quick way to spice up a presentation is to buy professional photos. There are many so called stock photo sites that will sell images on pretty much anything for a few bucks. Some even offer specialized content for creating presentations such as backgrounds, menus, buttons and so on. Again, have a look at some website design tutorials. Most of them work with very simple shapes and colors but use stock images to put a pattern on something, design a unique logo and so on. Patterns and Textures in particular are a great way to reduce the generic, plastic look of direct lit geometry.