3d models with x3dom

I was looking for a way to bring existing 3d models that I’d created in other programs into webpages so that they could be rotated and manipulated without the need for the original software. There are solutions out there but they are not always very helpfully documented, so I thought I’d summarise what I’ve learned so far!

There are two main approaches to 3d graphics for the web, declarative and imperative. Essentially, as far as I understand it, the declarative approach (SVG for 2d, X3Dom for 3d) simply declares the object and lo! it appears, whereas in the imperative approach (canvas for 2d, WebGL for 3d) objects are created via JavaScript functions. Of course the reality and the pros and cons of each approach are clearly more complicated than this, but for a relatively simple model, and where functions are not going to be re-used, the declarative approach is certainly appealing. The crystallographic programs VESTA and KrystalShaper, in which I had created many models, export in the VRML format, which has been superseded by X3D, the language that is used by X3Dom. The 3D modelling program Art of Illusion, in which I had created a small number of models, exports in VRML as well as two other formats, while Blender has a wide variety of import and export formats. The workflow for making the models ready for use in webpages therefore consisted of importing the VRML files in Blender and re-exporting in X3D format, which could be inserted into HTML code with minor modifications. The X3Dom approach involves the use of a JavaScript file and a CSS file. These can either be downloaded and stored in local folders or called directly from the x3dom.org server. There is some sample code on the x3dom.org tutorial page. Documentation for X3Dom exists but there appears to be a pretty steep learning curve between including simple primitives and importing and manipulating complex models built in other programs. Perhaps the expectation is that most of the modelling work will have been done elsewhere. However, from my own experience, the models cannot be used exactly as-imported; instead, they do need some manipulation, and hence some understanding of x3d syntax is necessary. One of the main difficulties I had was finding out which primitives can be used, hence this post! The picture below shows the five primitives: cylinder (yellow), box (red), sphere (blue), plane (green) and cone (magenta). More complex shapes can be specified as “indexed face sets”. The code required to generate the image above is as follows:

<x3d width=”1200px” height=”700px”>
<scene>
<shape>
<appearance>
<material diffusecolor=”1 0 0″></material>
</appearance>
<box></box>
</shape>
<transform translation=”-3 0 0″>
<shape>
<appearance>
<material diffusecolor=”0 1 0″></material>
</appearance>
<plane solid=”false”></plane>
</shape>
</transform>
<transform translation=”3 0 0″>
<shape>
<appearance>
<material diffusecolor=”0 0 1″></material>
</appearance>
<sphere></sphere>
</shape>
</transform>
<transform translation=”0 -3 0″>
<shape>
<appearance>
<material diffusecolor=”1 1 0″></material>
</appearance>
<cylinder></cylinder>
</shape>
</transform>
<transform translation=”0 3 0″>
<shape>
<appearance>
<material diffusecolor=”1 0 1″></material>
</appearance>
<cone></cone>
</shape>
</transform>
</scene>
</x3d>

Note the similarity to HTML and that the ordering of items (“nodes”) is somewhat counterintuitive – we first have to open a tag declaring where an item will be translated to, then open a second tag declaring that a shape is present, then describe its appearance and only then declare what sort of shape it is!

Many aspects, for example the size of the elements and the position of the viewport, are set by default, allowing us to set up an initial scene with very few lines of code and then subsequently to refine it.

Another aspect of note is that, by default, the plane element, as obtained by simply using <plane></plane>, has the property ‘solid=”true”‘. This means that is we rotate to look at the reverse side of the plane, it will no longer be visible. To make the plane visible from both sides, set its property to <plane solid=”false”></plane>.

A  screenshot of one of the crystallographic models exported from VESTA can be seen below:


Close-packing models (part 2)

As mentioned in Part 1, the Balls and Sticks software can be used to create attractive models to illustrate the two common close-packed structures as well as more complex models based on these. For functionality that is not available in Balls and Sticks, such as plotting lattice planes and crystal faces or exporting vector graphics or three-dimensional data, the .CIF files exported from Balls and Sticks can be imported into VESTA. Note that the colour and atomic radius data used for the elements in Balls and Sticks is not preserved in VESTA, and these must be manually set up if required. Using VESTA you can add lattice planes as shown to illustrate where the close-packed planes are: and you can export data in the 3D format .wrl which can (with some conversion and manipulation) be used to make rotatable 3D models that can be used in other applications (including directly in web pages – more on this in a subsequent post).

Close-packing models (part 1)

Many metals have either a hexagonal or cubic close-packed structure. To illustrate how this structure is made up, I constructed models in which the two or three different close-packed layers, in hexagonal and cubic close-packed structures, respectively, are displayed in different colours. The models are created using “Balls and Sticks” (see this post). In order to obtain these colours, a different, larger unit cell must be used instead of the conventional cell, and two different elements are needed in the case of HCP, or three in the case of CCP. I used Mg, Co and Ti to obtain the colours in these images. The images above are obtained by increasing the values of the “boundaries” in the x, y and z directions so that the unit cell is repeated. Models for the structures above can be obtained in the Balls and Sticks native file format here: http://eutextik.one/resources/CCP_model.BS http://eutextik.one/resources/HCP_model.BS or in the universal CIF file format (which can be opened with other programs) here: http://eutextik.one/resources/CCP_model.CIF http://eutextik.one/resources/HCP_model.CIF You can use the same type of procedure (with a much more complex and larger unit cell in the z-direction!) to produce models of  ccp-hcp martensitic transformation and twinning: Advantages of Balls and Sticks are that it is easy to to learn and produces high-quality, aesthetically pleasing graphics. However, it lacks certain functionality that is provided by other programs such as VESTA (of which more later).

X-rays of flowers – weird, beautiful, weirdly beautiful

I found this set of X-ray photos of flowers by Hugh Turvey on the Telegraph website: http://www.telegraph.co.uk/news/science/picture-galleries/7922343/X-rays-of-flowers-by-Hugh-Turvey.html It turns out that Turvey is not the only person who has taken flower X-rays. Here is a set by Brendan Fitzpatrick:
Floral X-Rays by Brendan Fitzpatrick
and a set by Steven N. Meyers: http://www.xray-art.com/ but people had already thought of taking this sort of photos back in the 1930s:
A Radiologist’s X-Ray Photographs of Flowers from the 1930s
X-Ray Photographs From the 1930s Expose the Delicate Details of Roses and Lilies

Wallpaper groups: a drawing tool

Martin von Gagern (see post on The Grammar of Ornament) has made a tool for drawing patterns with different wallpaper groups. It’s cross-platform and very intuitive and I’ve used it successfully with students in examples classes. Below is a screenshot of the drawing area with default settings: and the following image is a screenshot with the cell and symmetry elements marked:

The Grammar of Ornament

“The Grammar of Ornament” by Owen Jones (1809 – 1874) is a work in which the author collects elements of design and typical motifs from a wide range of cultures. A site dedicated to the book can be found here and a full digitised version at The Grammar of Ornament: University of Wisconsin Digital Library. There is a also set of images from The Grammar of Ornament on Flickr. Since many of the designs are repeating patterns, they can be used to teach the concept of wallpaper group symmetry (and, by extension, space group symmetry); Martin von Gagern has used them to make some very beautiful illustrations of these groups on his Morenaments page. Some of the motifs are also used to illustrate the Wikipedia entry on wallpaper groups. I have used an Egyptian design from The Grammar of Ornament to illustrate the concept of primitive and non-primitive unit cells. Lattice points (those points in identical environments, assuming that the pattern extends infinitely) are marked using blue dots. A primitive unit cell (or, more properly, unit mesh) contains only one unique lattice point, whereas a non-primitive cell contains more than one lattice point. The choice of a non-primitive cell usually reflects the overall symmetry of the structure; here, for example, the square shape of the overall pattern can be seen more clearly from the non-primitive cell. One of the great advantages of using The Grammar of Ornament for teaching is that the patterns come from so many different ages and cultures, making it a great inclusive tool for international and multicultural classes.

Repper patterns

The tiling patterns above were produced using Repper, a patterning/tessellation program that has a selection of wallpaper groups available (as well as some other effects). The program allows you to load an image and select part of it, to which it applies its symmetry transforms. As well as some very straightforward symmetry groups with visible edges (p1, pm, pg, cm and others), there are a set of ‘seamless’ groups that give much prettier results as can be seen above. The original image was of a forget-me-not flower and the various patterns were produced by moving the selection window and changing the symmetry. There’s a limited, trial version of the software available on the Web here. Repper isn’t primarily intended as a tool for teaching symmetry but it does give aesthetically very appealing results which can help in gaining students’ attention and interest at the beginning of a course or unit. Also, it’s great fun for anyone who has ever enjoyed playing with a kaleidoscope!