scientific and technical website design projects news

Articles on 3D modelling

3D modelling of C60 in HTML/Javascript

With the expected demise of Flash as a vector graphics and animation platform for the web we have been looking at a few alternatives for some of our ‘fun’ projects. One of these was a simple 3D animator for Protein Data Base (.pdb) files. This widely used format provides XYZ coordinate data for molecules, and in our early Flash based models we translated these coordinates into something that sensibly fitted onto your display, and applied 3D transform matrices to allow you to manipulate the ‘molecule’, with each atom rendered as a simple disc.

Given the simplicity of the system, it seemed obvious to translate the code into Javascript. Indeed, we had the added advantage that we could render each ‘atom’ as a HTML primitive with CSS3 gradient shading to give it the appearance of 3 dimensions. As a result, there is no need for vector graphics or little .gif or .png images for each atom.

As you can see above, in our model of Buckminsterfullerene or C60, the process can be quite effective – simply roll your mouse across the model (or swipe your finger if you are on a mobile device) to rotate it. It has to be stated that this process is less effective for larger molecules. We could effectively animate and control molecules with up to 250 ‘atoms’ in Flash, the number is rather lower in HTML/Javascript, perhaps 100 atoms or points being a sensible practical limit, beyond which the model becomes unresponsive.

DNA structure

3D interactive model of DNA. Move your mouse over the model to rotate it. Sorry, your browser is not able to display the 3D interactive molecular model (requires Flash).

We’re currently working on a new site where our client wants a simplified DNA model (which we will probably build in HTML CSS3) but we wanted to check out a molecular model first to aid with design. The above is a fairly accurate molecular model rendered in Flash (so most visitors should be able to see the model without running Java). The perspective is slightly emphasised to give a greater feeling of depth as the molecule is rotated.

Sprucing up an old site – upgrading to HTML5/CSS3

The C60 model was first developed for the Nanotechnology Masters program in 2007. The course was run jointly by the Universities of Leeds and Sheffield, and is sadly no longer available. An updated model of C60 or Buckminsterfullerene, that is compatible with mobile browsers, is available in our post:

3D modelling of C60 in Javascript/HTML

3D interactive model of the structure of diamond

Sorry, there are no versions available for your browser, this interactive animation requires the Flash plugin.

The interactive animation to the right depicts the structure of diamond.

Diamond adopts a cubic lattice, but if you rotate the structure (run your mouse over it) so that one of the corners of the cube points upward, you should be able to see the tetrahedral relationship between closest neighbour carbon atoms quite clearly (I’ve re-drawn this below the animation so you know what to look for).

The semiconductors silicon and germanium adopt the same structure – but we are used to thinking of these as solid state structures rather than an over-bonded organic molecule, so the model is less of a surprise.

The side of the cube above is approximately 0.357nm and the space group is Fd3m(Oh7) (Space Groups for Solid State Scientists 2nd Edition, Burns and Glazer, Academic Press 1990, p152-4)

The structure is built in Flash using our molecular modeller (previous post); it was derived from a larger 3D diamond structure built for an update to What is Nanotechnology? for the Nanofolio MSc courses.

The new project calls for dynamic atoms within the structure, which we will use to explore the differences between matter in bulk (diamond) and ‘soft matter’, that is the basis of most molecular nanotechnology.

As a first stage towards this you might have noticed here that the atoms gently fade in when the structure first loads – the final animation has atoms appearing, disappearing and changing their nature on command – but more about that in a future post…

3D molecular structures in Flash

A number of years ago we created a simple website for the Polymers and Biomaterials Chemistry Laboratories research group, and as part of this we used Flash to show a chain of atoms that could be viewed from a restricted range of angles using our ‘pop-up’ 3D effect – much like the bathymetry of the Stirling Castle. As part of our recent update of this site we thought we’d go one better, and create a full 3D molecule of a real polymer chain…

3D molecule staticAbove, a still taken from the 3D interactive. Sorry, you really do need Flash to get much out of this!

Above: ‘Frogspawn’ or electron cloud molecular model, an early version of the 3D molecule we built for PBCL. Elements are not distinguished in this model (C, N and O are all represented by the same grey blob), and hydrogens have not been included, making the model rather smaller and easier to manipulate (see link at the foot of this story for the final version).

The modelling is done entirely in Flash, so unlike the existing Java-based molecular viewers such as Jmol and RasMol, there is no need to download an application before the molecule appears! For the site we used a molecule consisting of over 300 atoms, which seems to be a sensible upper limit, as older machines are beginning to gasp a bit at rotating the thing in real time! Clearly in creating this we’re using smoke-and-mirrors to keep the project manageable within the confines of the Flash environment. So, while the positions of the atoms are mapped in 3D, they are represented by 2D graphics. This results in a small amount of flicker as the molecule rotates, and atoms jump in front of each other along the z (out of plane) axis (the frogspawn model above was an early attempt we made to escape this effect, unfortunately plotting semi-transparent atoms takes more processing power, so we hit the molecular size limit sooner with this approach). In creating this molecular viewer as a one-off, we have unashamedly used artistic license to foreshorten the image to give it a more dramatic depth of field.

In the final version the XYZ information for the molecule is imported into Flash in a simple XML file, so whist the process is still restricted to molecules of small to medium size, we look forward to taking it further and seeing how well it can model a wider range of structures…

The final 3D structure can be found on the home page of the Polymer and Biomaterials Chemistry Laboratories website:

Polymer and Biomaterials Chemistry Laboratories

Is it a world first? – No, unfortunately not, see 3D crystal viewer !

Switchable adhesion

Polyelectrolyte chains for smart adhesion.

This research feature had rather a troubled gestation period. We started by preparing 3D models of the polyelectrolyte chains – shown right. These were animated to bring them together so that we could show salt formation between the poly(amine) and the poly(acid) at the interface. Unfortunately it was not at all clear what was going on, so we went back to the drawing board…

The final feature uses a single still graphic to show how the different polymers can attract each other at neutral pH, whilst having no affinity in either acid or base. We then illustrated this by re-producing one of the experiments described in the paper – which results in the two surfaces popping apart when they are immersed in acid.

Switchable adhesion is potentially very useful. Most things are made out of more than one material, and this makes recycling very difficult. Traditional glues are OK, but they usually require heat or organic solvents to break them up. This simple demonstration of a glue that stops being sticky in acidified water shows that this can be done easily, and in an environmentally friendly manner.

For the complete story see: Nanofolio research – switchable adhesion.

Salt melt processing of nanofibres

Doublewalled carbon nanotube - interactive version required Flash.

Carbon nanotubes (‘bucky tubes’ or nanofibres) are scarcely out of the scientific news these days, with claims of applications as diverse as plastic computers and indium-free touch screens for your iPhone (other touch screen devices are available!). While they have great potential, this can only be realised if they can be prepared reliably and in quantity. Unfortunately, most techniques yield carbon nano-tubes in miserably low yields. One of the high yield techniques, uses Catalytic Chemical Vapour Deposition (CCVD). In this, tiny molten drops of nickel serve as condensation nuclei for the carbon nanotube. While efficient, the product is contaminated with nickel, which is included within the carbon tubes, and extremely difficult to remove.

So, lots of carbon fibres, but of poor quality…

So what researchers at Nanofolio have done is work out a technique for cleaning up the tubes we can make. The technique is called salt melt processing, and involves soaking the carbon nano-tubes in a bath of molten salt – in an argon atmosphere to stop them catching fire! At 950DEG C, the molten salt breaks pen the ends of the nanotubes, liberating the nickel, which (after cooling) can be dissolved with dilute mineral acid and re-cycled.

This work is of critical importance to a wide range of nanotechnology applications, but it doesn’t lend itself easily to developing a feature, as we have done with earlier Nanofolio research (see all of our nanotechnology research features for Nanofolio). Here we simply don’t have a mechanism we can elucidate with moving interactive models. The work still deserves to stand out, however…

Initially we thought we’d have to prepare general art-work based on idealised carbon nano-tubes of the sort that usually illustrate work in this area (see, for example Wikipedia). These things are ubiquitous, however, and don’t address our story. When we reviewed the publications on the topic, however, we realised that we had some good scanning electron micrographs (SEM’s) following the processing history.

SEM’s are beautiful, but very common in the scientific literature, so we wanted to do something to make them stand out a bit. Fortunately, the final processed product has a uniform electrical conductivity, and this means that it has a nice even illumination under the electron gun – the tube appears at a uniform brightness, dependent only upon the distance from the electron gun in the microscope.

In short, we could extract depth information from the SEM using a standard graphics package. This allowed us to prepare contoured images, and using the simple ‘pop-up 3D’ technique we’ve reported previously we could get workable 3D images. Given that we could extract depth information automatically, we were able to illustrate this feature with three 3D images – a bit of a first (you’ll se very few sites sporting more than one 3D image – and that usually on the home page for impact!)

Processing carbon nanofibres on the Nanofolio website


We’re currently working on a new website for ScapaMAP, documenting the remaining wrecks of the German High Seas Fleet scuttled at Scapa Flow at the end of the First World War. The latest additions to the site are 3D files for each of the warships still in the Flow. These are based on the acoustic surveys carried out by the ScapaMAP project.

The 3D models were created in Fledermaus by the project team. This format does not run as a browser plugin, so we can only offer them as downloads, though there is a free player. In an effort to make the survey work more approachable to all visitors, we’ve been looking at creating some simple 3D environments in Flash to compliment these.

One of these is the 3D image of the light cruiser SMS Köln, shown above. This is based on the contour data from the multibeam survey, which is sliced into a series of layers depending upon their relative depths. Each layer moves independently, controlled by your mouse position over the model. Your mouse position acts as a viewpoint for this simple model, which still shows clearly how the hull encloses a mass of salvage debris, where salvors have broken into the engine room, to remove the condensers and other fittings that were made out of copper alloys.

With only a limited range of viewing angles, the model of the Köln, (above) is not nearly as impressive as the Fledermaus 3D model, but at the same time it will run on most people’s browsers without problem…

‘Pop-up 3D’ with Flash

One of the simplest 3D modelling techniques that can be used with the Flash is something I call ‘Pop-up 3D’ – as it works in a very similar way to old children’s pop-up story books. The structure that you want to give a 3D appearance to is distributed across a number of layers – with the top layers having the parts of the structure that would be closest to the viewer.

Bathymetry round the Stirling Castle site

In the final movie the layers are moved according to your mouse position, with the top layers moving with the mouse, and the bottom layers moving away. If you place your mouse cursor to the top right of the movie, therefore, the top layer will be displaced to the maximum extent in this direction, while the bottom layer is displaced to the maximum extent towards the bottom left corner of the movie frame. Intermediate layers move proportionately smaller distances in the appropriate direction – it is quite a lot of fun setting the scaling of the movement to give a believable 3D effect.

This technique gives allows a model to be viewed from a limited range of viewing angles, and works best where this would be a ‘natural’ situation. One example is for maps – and the model displayed here is an early draft of a contour map showing sediment errosion from around the Stirling Castle, a shipwreck dating from 1703. Each contour height has been separated onto a new layer, clearly demonstrating the technique.

In the final version, which can be seen on the RASSE project website, the contour areas have been replaced with a multibeam image of the seabed, which gives the model a startlingly realistic 3D effect. In the final version I have also added data from all three survey years, showing how sediment is currently being deposited around the wreck site.

RASSE website, final 3D model

Protein fibrils

This is a short movie based on a 3D model of a protein fibril created for Nanofolio, if your browser supports flash, move your mouse over the image to rotate the model.

The fibril is composed of four ribbons, each of which is in turn composed of two tapes joined back to back. The tapes are composed of peptide molecules sitting side by side. Peptides are just visible in the model as rectangular blocks or steps in each of the four ribbons.