#44 ✓resolved
lindsay.kay (at xeolabs)

Quaternions

Reported by lindsay.kay (at xeolabs) | May 3rd, 2010 @ 02:02 AM | in V0.7.5

Quaternion nodes provide a convenient way to define a 3D rotation that can be rotated continually on any axis without gimbal lock or significant numeric instability.

Example 1

Below is a Quaternion that defines a rotation for the nodes in its subgraph. Since these are used for rotation in SceneJS, we'll think of a quaternion in the same terms as the parameters of a SceneJS.Rotate node. This example's x, y, z and angle parameters define the base rotation that this quaternion starts off at, in this case none, then the optional rotations array defines a sequence of rotations to apply on top of that. Finally, we apply one more rotation to the Quaternion node instance through its rotate method.

var q = new SceneJS.Quaternion({

     // Base rotation

      x : 0.0, y : 0.0, z : 0.0, angle : 0.0,      // No rotation

      // Sequence of rotations to apply on top of the base rotation

      rotations: [
              { x : 0, y : 0, z : 1, angle : 45 }, // Rotate 45 degrees about Z the axis
              { x : 1, y : 0, z : 0, angle : 20 }, // Rotate 20 degrees about X the axis
              { x : 0, y : 1, z : 0, angle : 90 }, // Rotate 90 degrees about Y the axis
           ]
       },

       // .. Child nodes ...
  });



// rotate one more time, 15 degrees about the Z axis
q.rotate({ x : 0, y : 0, z : 1, angle : 15 });

Animation

Quaternions are designed to be animated. Typically, we would dynamically provide rotation updates to them at render time, either from an interpolator node or human interaction.

Example 2 Below is a Quaternion that is dynamically configured with a callback that applies rotation updates that are injected into the scene each time it is rendered. Note that the callback does not define the base rotation - if it did, then the Quaternion would reset before each new rotation is applied, rather than accumulate the rotations as intended. Note that the rotations could well ge generated by mouse drags to simulate a trackball.

 
   var exampleScene = new SceneJS.Scene( 

       // ... sibling nodes

           new SceneJS.Quaternion(
             function(data) {
                       return {
                          rotations: data.get("rotations");
                       };
            }, 
            // ... chld nodes ...
       ) 
       //... sibling nodes
  );
 
  exampleScene.render({ rotations: [ { x : 0, y : 0, z : 1, angle : 45 } ] });
  exampleScene.render({ rotations: [ { x : 1, y : 0, z : 0, angle : 20 } ] });
  exampleScene.render({ rotations: [ { x : 0, y : 1, z : 0, angle : 90 } ] });

Comments and changes to this ticket

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile ยป

SceneJS provides easy access to WebGL through a simple and declarative JavaScript API. The SceneJS API is functional, which enables its scene definitions to be really compact and expressive, while hooking into other JavaScript code just that little bit more smoothly.

Shared Ticket Bins

People watching this ticket

Pages