Animating 3D

Please wait – still loading

I not long ago discovered that the web 3d consortium had developed ways in which 3d files could be output on html pages. It meant I could perhaps output 3d files on this, my wordpress site.

Years ago I had written quite a number of x3d files that output animated 3d scenes in a java graphic user interface. I needed to replace those java files with the html and javascript that could now read and render my x3d files and supply my own javascript and cascading style sheets so as to present the 3d in a way suited to my site. The display of my 3d programs is courtesy of an Xite browser that renders 3d using javascript.

In the welcoming display on this page I have deliberately not disabled the browsers navigation abilities so you can click and drag with your mouse or finger if you have a touch screen(up/down/left/right). You can perform similar actions on the rotating spheres 3d display.

In doing the above, it might seem that you are manipulating the object but what you are doing is changing your viewpoint of the rotating object. You can rotate your viewpoint faster than the rotation speed of the object so that the object appears to be spinning the other way. You can also withdraw your viewpoint using a scroll wheel.

X3D is a file format that enables the construction of 3D images that can be seen from programmable viewpoints. X3D offers an array of geometry nodes, sensor nodes, nodes like timers and interpolators that assist in animation and a Script node that enables external access and manipulation of the generated 3d scene.

Years ago I used its fore runner VRML (virtual reality modelling language) to animate simple structures and my interest in Rubik Cubes led to an attempt at building and animating a cube.

I started with a “parent” centre black block and added “child” blocks with colour faces in tree like fashion to it. The process was one of translating (moving) the parent x,y,z coordinate system to new points and constructing child block on those new translated coordinate system. All child blocks were in this way located relative to their parent centre block and so they moved with it. This was fine for cube rotations but not for face rotations.

To animate cube face rotations I would remove the “child” cubie blocks, that were on the face to be turned, from their “parent” block and give them to another invisible centre block that I then turned through 90 degrees using a timer and interpolator. The face turned a treat but when I removed the child cubies from their temporary parent and gave them back to their original parent block they all went back to their built positions relative to the parent block.

Clearly to consolidate the face turn I needed to give each of the turned cubies new translation and rotation positions relative to their parent centre block. Changing and maintaining translations (cubie positions) would have been easy but not so orientations, so I cheated. What I did was change the colours of the face stickers so that it appeared as if the face turn had been established.

No one saw the colours change while the cubies went back to their previous locations because just as with video 3d animations are repetitive renderings of frames. All the changes happened between the drawing of one frame and that of the next. The changing of colours, the removal of child cubies from their temporary parent and return to their build parent and the rotation of the temporary centre block back for reuse all took place between two rendered frames.

The above change colour technique is used in the rubik cube available in the menu but I could equally have used unit quaternions which I later discovered could help. In my section on programming I include two programs, one in javascript and one in java that I wrote which will combine an X3D orientation and an applied rotation and deliver an X3D orientation result, all of which in X3D are describes as SFRotations.

Leave a Reply