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>

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.