Chapter 3. User Experience, Story, Character, Visual Design, and Interactivity

	"It's worth it to pay a little more for a better Whiskey."
	--Artist Bob Schuchman

We often think of a story as a feature film or a novel where characters are developed for audiences to identify, sympathize, or detest. The aim of a story is to evoke an emotion, to frighten, embrace, or ponder difficult questions or understand them better. A story is not just a dialogue though, and it includes the design of the characters, scenery, music, and the balance of each of these elements. A story is not related to duration either. We know that movies and poems are stories and so is an advertisement, especially a web advertisement. On radio and television, an advertisement usually has 30 seconds to inform, educate, entertain, build brand loyalty, and be memorable. Web banner advertisements often lack this. Banner ads are informative, targeted, and measureable, but devoid of a story. Maybe that is why, according to Wikipedia...

Mission briefing

Web advertisements must download fast. That's a concern because artists like to build nice 3D models where the file size is hardly a consideration. At the same time, we want to show off the best features of interactive Web3D that will grab the viewer's attention. The features that best highlight 3D are often found in lighting and immersive environments. The technology behind much of this is shader languages—pixel-by-pixel calculations in the graphics card. We will first program a shader language to animate textures and 3D meshes in order to create waving flags, waterfalls, and change sand to greenery. Next, we will animate lights and cameras to demonstrate fascinating scenes with neon and light bulbs. Finally, we will enable the user to navigate through the scene, allowing the user to move the camera with the mouse and keyboard, and then solve some of the difficult issues of lighting in foggy or nighttime scenes.

Why is it awesome?

If you are an advertiser or designer, you...

Refreshment with shader languages

The design here is simple—a can of X Y Z brand of soft drink on concrete with a flag in the breeze texture-mapped with Thirst. Everything here was made with Adobe Photoshop. 3D Studio Max was used only to create primitives such as the cylinder for the soda can. When the mouse is over the can, the can is highlighted and the cursor changes to grab the viewer's attention. We respect that the audience comes to a website for a specific reason, but if the cursor hovers over the banner advertisement, we may just catch their attention. Since the scene is animated, this banner ad will likely be more inviting than other advertisements. The fictitious advertisement opens up to a dry, asphalt environment with an animated flag waving Thirst and a can of our X Y Z Soft Drink as shown in the following screenshot:

Engage thrusters

The flag waving in the wind is achieved entirely by using shader languages. There are two effects used here: the waving of the flag and the slight...

Lighting 3D depths

You can think of 3D as the objects in a scene, but there are also unseen objects such as the lights and camera. This next web advertisement animates a camera while deploying two different light sources: neon lights and spotlights. To add a little character, the spotlights flicker and the neon sign turns on in a sequence.

Engage thrusters

The advertisement begins with the camera animation and the lights randomly turning on in order to catch the viewers' attention. This also emphasizes the features of 3D that cannot be emulated in a 2D animation without a heavy download. The camera points to a fixed target while slowly animating from the left of the 3D scene towards the center by changing the camera's eye value. This is shown in the following screenshot:

We begin by defining the start and end positions for the camera:

var eyeStart = [ -10, 5, -2, 1 ];
var eyeEnd   = [ -6, 3, 6, 1 ];
var eye    = [ eyeStart[0], eyeStart[1], eyeStart[2], 1 ];

Within the drawScene() function, the...

Visual design and interactivity

3D graphics, by themselves, do not create a story; music also does not create a story, but it can set the mood. From the opening sequence of a small town on a sunny day to a dark mystery in a gritty big city, the design of the scene contributes to the dialogue, acting, and director's staging. This next demonstration introduces a street in daylight that transitions to night in a 24-second cycle. We control the camera to move from left to right, forward and back with the arrow keys. Since we can navigate anywhere in the scene, some 3D meshes such as signs and light posts reach the far-clipping plane and are chopped off. The far-clipping plane ensures that we do not waste computing power by rendering 3D meshes very far away. However, clipping looks unnatural. To prevent 3D meshes from just disappearing, we add fog so that these 3D meshes will fade off into the depths. Fog also adds character to the scene—the charm of London or San Francisco is its fog. In addition...

Full navigation

The 3D user experience includes the freedom to roam anywhere and look in all directions. Instead of the left and right arrow keys allowing us to move along the x axis, users in 3D environments prefer to navigate anywhere, including rotate left and right around the y axis.

Engage thrusters

To enable us to turn in any direction, we added a new cameraRotation variable initialized to 0. Our new code responding to the arrow keys allows us to rotate around the y axis to look left and right:

function handleKeys() {
  if (currentlyPressedKeys[38]) { // up arrow, camera forward
    eye[0] += Math.sin( cameraRotation ) * .1;
    eye[2] -= Math.cos( cameraRotation ) * .1;
  }
  else if (currentlyPressedKeys[40]) { // down arrow, cam. back
    eye[0] -= Math.sin( cameraRotation ) * .1;
    eye[2] += Math.cos( cameraRotation ) * .1;
  }
  else if (currentlyPressedKeys[37]) {
    // left arrow, camera  looks left
    cameraRotation -= .008;
  }
  else if (currentlyPressedKeys[39]) {
    ...

Order of transparencies

The flexibility of being able to navigate anywhere has also created a new problem—the transparent cones that represent the light shafts from the streetlights will no longer be ordered furthest to closest. We can walk to the other side of the scene, turn around, and see the spotlight cones overlapping in the wrong order. We have to render the scene so that with each frame, we test the stacking order of the transparent objects. This is a tedious bit of coding, but it also demonstrates the issue. The following screenshot shows the same scene from the opposite side. Notice that the closest spotlight cone obscures the furthest cone where the two overlap. We cannot ignore the issue, so let's devise a program to fix this.

Engage thrusters

The solution is to restack the order with which the items are rendered. Currently, the 3D meshes are rendered in the order that they are added in webGLStart(). There is an array, meshObjectArray, of the 3D meshes in this scene. The ten items...

Scene lighting

This capstone scene advances lighting to create the story. The streetlights continue to use spotlights to create the circles on the street and the transparent cones for volume lighting.

The neon X Y Z display on the left turns on in a red, green, and blue sequence, and glows onto the street with a red, green, and blue tinge using point lights. The following example makes use of the neon shader we used in our second example of this project:

Engage thrusters

To create the neon light tinge on the street, the location and color of each neon light is passed to the shaderScene-fs fragment shader. Following the streetlight calculations, the lights from each neon letter use the same calculateLightContribution() code:

fragmentColor.rgb +=
  (calculateLightContribution(uXYZsodaXLoc,
  uSpotLightDir, true)*uXYZsodaXColor) + (calculateLightContribution(uXYZsodaYLoc,
  uSpotLightDir, true)*uXYZsodaYColor) + (calculateLightContribution(uXYZsodaZLoc,
  uSpotLightDir, true)*uXYZsodaZColor);

The...

Mission accomplished

This project followed the old Hollywood saying "lights, camera, action." We deployed the most complex lighting in spot and point lights. Point lights are similar to lightbulbs; they shine in all directions, whereas spotlights have a direction with a beam-width radius of high intensity and a wider cut-off angle radius where the light fades out. Other lighting parameters include attenuation, where the light fades out over distance.

Night scenes deploy a black fog, also known as depth cueing, where objects that are more distant appear darker and thus give users a visual cue of depth. Dark scenes have intriguing designs because they focus our attention on key scene objects in the foreground. Fog is useful too because distant objects blend into the background rather than just disappearing past the far-clipping plane that cuts off the rendering of objects.

We also rendered partially transparent objects. The order of drawing partially transparent overlapping objects must be stacked...