IC Microscopy

This is my first attempt at applying laser confocal microscopy to acquire 3D point clouds of integrated circuits and displaying them here in the browser. This post shows off some features of Google’s model-viewer library along with some custom JavaScript. Technical details on how to convert and process the data are discussed as well.

Showcase

A Philips BDX 67B NPN epitaxial base Darlington power transistor with integrated resistors to set the operating point and a freewheeling diode to protect it. The mesh has been heavily decimated and the optical image has been applied as a normal map to enhance the visibility of small features.

The model dimensions are accurate to the real world, but the height has been scaled to 4000 % of its actual size, exaggerating the chip’s features.

Data Conversion

The data is acquired on a Keyence microscope and packaged in their proprietary e.g. .vk6/.vk4 file format. The Keyence multifile analyzer software is used to export the microscopy data files to .stl or .step.

Note: Gwyddion can also open .vk6/.vk4 files, but I wasn’t able to export a valid stl file with it. The Keyence software simply works and is very easy to use. Windows 3D-Viewer can then open the stl and save it as .glb for the model-viewer.

FreeCAD can open some microscopy data formats (but not .vk4 or .vk6 files). It also officially supports exports to .glb (see FreeCAD wiki on glTF) but the mesh export function does not support it. I have noticed that stl provides better performance, while FreeCAD failed to open data saved as stp files. On a side note: it can export printable .3mf files even without increasing the scaling on the exported data, which then have to be scaled in the slicer e.g. Cura, Meshmixer, …

Online Converters

There are many online converters with varying robustness and file size support. While they can be easily reached with a simple web search I see no reason why I should trust them with my data when Windows 3D-Viewer can do the same for free with virtually unlimited file size support and also faster and more reliable. Nevertheless, here are some I have tried before switching over.

• 3dpea.com
  • Converter where you can also share files via link
  • This service worked. But the file size is limited to 500 MB.
• imagetostl.com
  • I managed to get a file displayed in model-viewer/editor/ after scaling all units by 1000 times and converting the stl to glb on this website. Unfortunately, even though the model is displayed in the editor, ACCESSOR_MIN_MISMATCH and ACCESSOR_ELEMENT_OUT_OF_MIN_BOUND error messages were generated.

Editing Models/Meshes

FreeCAD has a powerful Mesh Decimating function which can be used to minimize a model’s file size by reducing the number of faces. This will inadvertently alter the model and in many cases rip holes into it, which gets worse the stronger the mesh is decimated. These holes can then be repaired in Meshmixer manually or automatically which may further distort the model.

To change the appearance of the model e.g. its texture the modelviewer.dev/editor can be used to change it and save it in the .glb file, which is different to the Windows 3D-Viewer which saves it as an external .json file.

Challenges Providing Large Files

Serving files hundreds of MB in size over the web might generally not be the smartest idea, but apart from long loading times what is actually stopping you? - Let’s find out below.

Firefox can’t display models over 400 MB in its WebGL viewer.
Git doesn’t support files > 100 MB, but this can be circumvented by using the git lfs extension. However git lfs works by replacing the managed file in the repository with a link to an external storage location where the file is actually stored. Because of the browser’s CORS policy (learn more), this hasn’t worked for me either. Anyways, GitHub’s lfs storage limits are quite strict and anything above 1 GB of storage requires a monthly payment.

So a cheaper alternative is to upload it to a cloud storage provider like Nextcloud or the like. But accessing the resource will again be blocked by the browser’s CORS policy unless the file server provides the correct headers. Consequently, access to the server config is necessary to configure the headers correctly, which typically requires a self hosted instance.

So if you don’t want to host your own file server that is accessible from the internet (which comes with its own can of worms), what would be an actual solution?

Intercepting the browser’s request to the file server and adding the correct CORS headers. There are two ways to do this, an easy way and a hard way.

The easy way: Telling your visitors to install a browser plugin like Allow CORS: Access-Control-Allow-Origin (also available for chrome) which does this for you automatically. I have tested this myself and it works very well.

The hard way: Setting up your own service helper to do the same. This can either be a js script on your page or via a CDN (content distribution network) like Cloudflare which offers this service for free (as of 01/2025). Both solutions will require some setup and I can not guarantee that they work because I couldn’t get it to work myself.

Ideas

Adding the optical image as a normal map to the glb file greatly enhances visibility of small features:

• ✅ Add a fullscreen mode so larger models can be viewed without obstruction.
• ✅ Add dimensions
  • Part the scale into two parts so the actual feature size can be interpreted more easily (like in the MultiFile Analyzer)
• Add an animated or at least coloured texture to highlight certain parts of the ic.
• Add hotspots for base emitter source