Whether you're a first-time circuit board designer or you've been doing it for years, you know how difficult it can be to visualize layout, spacing, and relative size in PCB layout software. You might have also experienced that uneasy "I hope everything is right" feeling when you submit your design files for manufacturing. You're not alone! I've ordered boards with silkscreen text way too small to read, components on the wrong side of the board, and even had my silkscreen and soldermask layers reversed by mistake! Each of these times, the real problem was not having a good view of the design.
I came up with a solution to these problems and designed (with the help of a web developer) an online 3D Gerber viewer that anyone can use. If you're not familiar with Gerber files, they are the files that layout software (like Eagle, Altium, etc) export for manufacturing. They describe everything pertinent about your board that will be required to actually create your PCB.
With the 3D Gerber Viewer, you'll be able to upload your Gerber files and zoom, pan, and rotate your board to have a realistic view of your PCB and all of the layers that it contains. You can use this viewer as you develop your board and also before you ship your final CAD files off to be manufactured.
Using the 3D Gerber Viewer is pretty straightforward, but the following steps will take you through the process and at the end, you'll have some images of your PCB that you can post somewhere or use to show off. More importantly, you'll be confident that your design is exactly what you had in mind!
I came up with a solution to these problems and designed (with the help of a web developer) an online 3D Gerber viewer that anyone can use. If you're not familiar with Gerber files, they are the files that layout software (like Eagle, Altium, etc) export for manufacturing. They describe everything pertinent about your board that will be required to actually create your PCB.
With the 3D Gerber Viewer, you'll be able to upload your Gerber files and zoom, pan, and rotate your board to have a realistic view of your PCB and all of the layers that it contains. You can use this viewer as you develop your board and also before you ship your final CAD files off to be manufactured.
Using the 3D Gerber Viewer is pretty straightforward, but the following steps will take you through the process and at the end, you'll have some images of your PCB that you can post somewhere or use to show off. More importantly, you'll be confident that your design is exactly what you had in mind!
Step 1: Export Gerber CAD Files From Your Layout Software
Before you can visualize your PCB design, you'll need to generate the Gerber files needed. There are a lot of PCB design programs out there, but one of the more common free programs is CadSoft Eagle. I will describe how to output Gerber files from Eagle; If you are using another program, you will have to find directions elsewhere. Regardless of the program you use, the 3D Gerber Viewer will handle your files.
Steps to generate Gerber files in Eagle:
1. Eagle creates the necessary Gerber files with its 'Cam Processor'. To launch it, go to File -> Cam Processor.
2. You will now need to give the Cam Processor directions on which layers mean what. To simplify this, I created a CAM job file.
a. Download this file and put it in you Eagle installation directory inside the folder 'cam' (on a Mac: Applications->Eagle->cam)
b. Back in Eagle, with the Cam Processor pulled up, go to File ->Open->Job. Load in the file you just downloaded
c. Look through each tab and verify that the layers you have used are included (for example, if you used layer 200 for extra silkscreen, you will need to include it on one of the silkscreen tabs).
d. Click 'Process Job' at the bottom of the Cam Processor window
3. Go look in your Eagle design folder (typically in Documents). You should see some new files that were just created.
If this explanation doesn't do it for you, check out this Sparkfun tutorial on Eagle. About halfway down the page there is a detailed explanation of generating Gerbers and what each file represents.
Steps to generate Gerber files in Eagle:
1. Eagle creates the necessary Gerber files with its 'Cam Processor'. To launch it, go to File -> Cam Processor.
2. You will now need to give the Cam Processor directions on which layers mean what. To simplify this, I created a CAM job file.
a. Download this file and put it in you Eagle installation directory inside the folder 'cam' (on a Mac: Applications->Eagle->cam)
b. Back in Eagle, with the Cam Processor pulled up, go to File ->Open->Job. Load in the file you just downloaded
c. Look through each tab and verify that the layers you have used are included (for example, if you used layer 200 for extra silkscreen, you will need to include it on one of the silkscreen tabs).
d. Click 'Process Job' at the bottom of the Cam Processor window
3. Go look in your Eagle design folder (typically in Documents). You should see some new files that were just created.
If this explanation doesn't do it for you, check out this Sparkfun tutorial on Eagle. About halfway down the page there is a detailed explanation of generating Gerbers and what each file represents.
Step 2: Drag & Drop Your Files in the Viewer
At this point, you should have a set of Gerber files for your PCB design. You are now ready to upload these files to the online viewer. Launch the viewer from this page: www.mayhewlabs.com/3dpcb
The 3D viewer uses some fairly new rendering tools, so you will have to use either Google Chrome (preferably) or Firefox (may require force-enabling WebGL).
Once you've launched the viewer, you will see a place to drag and drop your Gerber files. Outside your browser, open the folder on your computer where the Gerber files are located and drag them onto the browser window. Once you have done this, the file names will be displayed. At this point, you must tell the viewer what the files represent. If you used any of the more common Gerber extensions, there is a good chance that the viewer will automatically detect what your files are. If there are any files that it does not know what to do with, use the drop-down menus to inform it of what each file is.
The viewer supports any decimal precision, with or without zero suppression, in inches or millimeters (don't worry if you don't understand this). The following Gerber files are supported for rendering:
- Top and Bottom Copper
- Top and Bottom Silkscreen
- Top and Bottom Soldermask
- Top and Bottom Paste
- Board Outline
- Drill File (really an Excellon file) - all holes show up as plated holes
Once your files have been identified for the viewer, click the Done button. At this point, the viewer parses each file and creates a rendering. This may take some time for complex boards, so please be patient!
The 3D viewer uses some fairly new rendering tools, so you will have to use either Google Chrome (preferably) or Firefox (may require force-enabling WebGL).
Once you've launched the viewer, you will see a place to drag and drop your Gerber files. Outside your browser, open the folder on your computer where the Gerber files are located and drag them onto the browser window. Once you have done this, the file names will be displayed. At this point, you must tell the viewer what the files represent. If you used any of the more common Gerber extensions, there is a good chance that the viewer will automatically detect what your files are. If there are any files that it does not know what to do with, use the drop-down menus to inform it of what each file is.
The viewer supports any decimal precision, with or without zero suppression, in inches or millimeters (don't worry if you don't understand this). The following Gerber files are supported for rendering:
- Top and Bottom Copper
- Top and Bottom Silkscreen
- Top and Bottom Soldermask
- Top and Bottom Paste
- Board Outline
- Drill File (really an Excellon file) - all holes show up as plated holes
Once your files have been identified for the viewer, click the Done button. At this point, the viewer parses each file and creates a rendering. This may take some time for complex boards, so please be patient!
Step 3: Rotate, Zoom, and Pan to Explore Your Board
At this point, you should see a rendering of your board along with some controls on the right side of the window. If you don't see anything or if the rendering you see is just plain wrong, please let us know with the form at the bottom of this page.
You can now explore the design with the following operations:
- Rotate: Left mouse click, then drag
- Zoom: Scroll wheel
- Pan: Right mouse click, then drag
The Control section on the right side has some features you might want to use:
- 'Hide controls' minimizes the control section
- 'Load other files' returns you back to the file upload system
- 'Layers' section lets you hide or display individual layers in your design
- 'Show Outline' displays the board edge in case you have a non-rectangle shaped board
*Note: the outline tool works best when a board outline Gerber is uploaded, but if not supplied, will attempt to determine the board edge from other layers (this isn't always successful).
- 'Area' shows the billable area (rectangle encompassing your design)
- 'Save current view as image' export what you see in the browser window as a .PNG image file
- 'Mouse Controls' shows how to interact with the 3D viewer
If you like what you see and want to save the current view, continue on to the next step.
You can now explore the design with the following operations:
- Rotate: Left mouse click, then drag
- Zoom: Scroll wheel
- Pan: Right mouse click, then drag
The Control section on the right side has some features you might want to use:
- 'Hide controls' minimizes the control section
- 'Load other files' returns you back to the file upload system
- 'Layers' section lets you hide or display individual layers in your design
- 'Show Outline' displays the board edge in case you have a non-rectangle shaped board
*Note: the outline tool works best when a board outline Gerber is uploaded, but if not supplied, will attempt to determine the board edge from other layers (this isn't always successful).
- 'Area' shows the billable area (rectangle encompassing your design)
- 'Save current view as image' export what you see in the browser window as a .PNG image file
- 'Mouse Controls' shows how to interact with the 3D viewer
If you like what you see and want to save the current view, continue on to the next step.
Step 4: Save Images of Your Board
Whether you need some proof of concept or just want a way to show off your hard work before the manufactured PCBs get delivered, you might want to generate images of what you see in the 3D Gerber Viewer. To do this, click Save current view as image. A new window or tab will open with an image that is the same as the viewer. Right click and save the image to your computer.
The image that you will get is in .PNG format. This format is useful because it has a transparent background. Using a tool like Adobe Fireworks, you can add a shadow or background color.
Thanks for checking out this tutorial! I hope you get a lot of use from this tool; let me know if you experience any problems!
The image that you will get is in .PNG format. This format is useful because it has a transparent background. Using a tool like Adobe Fireworks, you can add a shadow or background color.
Thanks for checking out this tutorial! I hope you get a lot of use from this tool; let me know if you experience any problems!
Visit Our Store »
Go Pro Today »
sooo awesome
Keep developing!
Wow, really nice idea! I use Altium, so i have good 3D view already, but sometimes (ok, almost always) could be good to take a final look on the gerber in 3D before send to manufacture (maybe my last mistake with a coil without solder mask could be revealed in time...). But, now i get an error (?) message after i try an Altium(10.5) built CAM to make live.
It sounds: "Error with loading xxxxxx.CAM
Reference error: hasY is not defined"
Im not sure its not my fault :) Its after i drag the CAM into the area, and rty to assign layers. After the first "done" i got this. No further progress allowed.
Keep up anyway! I made a very important bookmark for myself.
THX!
Thanks for the feedback!
Thx, You doing great job, it actually works!! :)
One question. I made 2 shots. On the first, You can see, everything is fine. No special things on that, nor extra pads. On the second pic, You can see the other side of the panel, with QFN and SO footprints, and via-s. My eyes got a glitch, and again, i dont know i made something differently in my gerber, but all the fottprints distorted (curved).
http://dl.dropbox.com/u/46856621/Trial%201.jpg
http://dl.dropbox.com/u/46856621/Trial%202.jpg
You"re welcome, glad to provide feedback for a great project!
Actually, even making the top copper a bit transparent so you can see the bottom traces even though area fills would be nice, if not totally real. Maybe as a second option?
I think it's just a single property in the WebGL object so that should be easy to implement. (says the guy who isn't doing the work) ,o)
This is just a totally excellent viewer even as it is. Nice work!
%FSLAX23Y23*%
%MOIN*%
G70*
G01*
G75*
%ADD10R,0.035X0.031*%
%ADD11R,0.031X0.035*%
%ADD12O,0.145X0.050*%
%ADD13R,0.145X0.050*%
%ADD14O,0.080X0.013*%
%ADD15R,0.080X0.013*%
%ADD16C,0.013*%
%ADD17C,0.015*%
%ADD18C,0.008*%
%ADD19C,0.010*%
%ADD20C,0.005*%
%ADD21O,0.075X0.065*%
%ADD22O,0.070X0.065*%
%ADD23C,0.045*%
D10*
X10259Y8778D02*
D03*
X10259Y8715D02*
D03*
X10329Y8778D02*
D03*
Thanks for the feedback!
Nice job, Mayhew!
Thanks for the feedback!