Navigating between multiple viewpoints

3D space is wonderful to travel freely, but we also want specific cameras for users and ways to navigate between them. The following figure depicts the same scene from three different viewpoints with a single spotlight on the left-hand side of the image along the negative x axis pointing towards the origin (0, 0, 0). The image on the left shows the initial default camera, the image in the middle shows the view from the left along the x axis from the <Viewpoint> node named vp1, and the image on the right is from the <Viewpoint> node labeled vp2 at a 45-degree angle between the positive x axis and the positive z axis:

Engage thrusters

In the following code, we have three <Viewpoint> nodes. These cameras are in the id=origin default position, the left-hand side of the scene (id=vp1), and at a 45-degree angle on the right (id=vp2). All cameras are facing the origin. Clicking on the <Box> node directs us to go to the camera vp1. Clicking on the cone animates us to <Viewpoint> vp2, and clicking on the small blue <Box> sends us back to our original <Viewpoint>. Note that the order does matter, although the scene begins with the first <Viewpoint> listed:

<Scene>
<NavigationInfo headlight="FALSE" type='"NONE"'/>
<SpotLight location="-5 0 0" direction="0 0 0"/>
<Viewpoint id="origin" position="0 0 10"
    orientation="0 0 1 0" fieldOfView=".785"/>
<Viewpoint id="vp1" orientation="0 1 0 -1.57"
    position="-12 0 0"></Viewpoint>
<Viewpoint id="vp2" orientation="0 1 0 .785"
    position="10 0 10"></Viewpoint>
<Transform translation="-2 0 -2">
    <Shape>
        <Appearance>
            <Material diffuseColor='1 0.75 0.5'/>
        </Appearance>
        <Box onclick = 
            "document.getElementById('vp1').setAttribute
            ('set_bind','true');"/>
    </Shape>
</Transform>
<Transform translation="2 2.5 1" rotation="0 0 1 -.5">
    <Shape>
        <Appearance>
            <Material diffuseColor='0.5 1 0.75'/>
        </Appearance>
     <Cone onclick = 
        "document.getElementById('vp2').setAttribute
        ('set_bind','true');"/>
   </Shape>
</Transform>
<Transform scale=".25 .25 .25">
   <Shape>
      <Appearance>
         <Material diffuseColor='0 0 0'
             emissiveColor='0.75 0.5 1' />
      </Appearance>
      <Box onclick = 
         "document.getElementById('origin').setAttribute
             ('set_bind','true');"/>
   </Shape>
</Transform>
</Scene>

Objective complete – mini debriefing

The small <Box> node is placed at the origin for reference. Its diffuse color is black and thus is unaffected by any lights. Instead, its emissive color is light purple, though it does not actually emit light. For this, we would need some additional lighting objects to give the impression that it glows. The <Box> node also has some familiar JavaScript programming, onclick="document.getElementById('origin'), that HTML web developers have seen while programming interactive websites. The rest of the line (setAttribute('set_bind','true');) is X3D's way of setting the viewpoint named origin to be the current or bound camera. Note that the spotlight in the image in the middle does not have a rounded edge that a flashlight typically produces. Lights without GPU or shader languages are limited to calculating the light at each vertex and interpolating the light across the polygon. By contrast, shader languages calculate these images on a pixel-by-pixel basis in the GPU's multiprocessor, so the process is quite fast. We will see more of this and shader languages' contribution to 3D graphics imagery later.