This tool provides a performant, portable, and approachable way to visualize and browse chip layout data. It does so by translating the geometric shapes found in GDSII stream format into a self-contained HTML file that can be viewed in any modern WebGL-capable web browser. The generated view can be panned and zoomed similar to popular map services. The HTML designed to be served locally or via an HTTP server and to be viewed in all modern web browsers on PCs, Macs, as well as touch-enabled tablets and smartphones.

Interactive Demo

The structures in a VLSI chip are inherently 3D with a layer of transistors covered by several layers of interconnect. Especially for beginners, these structures are difficult to understand by looking at 2D top-down projections of all the layers with various colors and shades in tools like Magic VLSI, KLayout or OwlVision. GDS3D renders 3D views of the structures but also requires installation is not available on mobile platforms. GDS2WebGL generates a 3D top-down view into the layout structures with some perspective distortion to give good visual cues into the stackup.

The tool is a single python3 script. It requires the packages gdspy, pyclipper and mapbox_earcut. To translate a GDSII file, clone or download this git repo and call:

python3 gds2webgl.py -i file.gds -o file.html 

Currently, this script is a proof-of-concept. It works on small GDSII files generated by the openlane flow with the Skywater 130nm PDK. To be useful for other GDS files, the layer definitions contained in the script needs to be changed.

The gds2webgl.py script extracts the polygons from the GDSII file, merges all polygons on each layer (union operation) and splits the merged polygons into triangles. The vertex and face data is encoded into Javascript/JSON with Base64 strings. The encoded data can be dumped by using a file with .js suffix as output:

python3 gds2webgl.py -i file.gds -o data.js 

To generate the self-contained HTML file, the script combines the raw data with index.html and boilerplate Javascript code in bundle.js found in the same directory. During development, you can dump data.js and open index.html in a browser.

bundle.js contains all the browser-side code for initializing the WebGL canvas, importing the Base64-encoded geometry data and interacting with user events. It is generated from app.js and its dependent node.js packages with browserify. To change the browser-side code, install the dependencies (npm install) and call make or npm run build to make a new bundle.js from app.js.