View Your PCB Design in 3D Online for Free

Intro: View Your PCB Design in 3D Online for Free

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!

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.

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!

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.

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!

Comments

[e5frog]

Doesn't currently work with the cam-file provided, hole coordinates are sized up maybe 10 times. If changing cam for drills to EXCELLON_24 instead of EXCELLON it works fine from EagleCAD 7.6.
It doesn't seem to do the outline board is just rectangualr, if selecting Outline it just shows the inside of the holes. Pretty nice anyway.

[Clomifuge]

Hi I have the same problem, The solution will to check the GERBER file the website use for the demo, because them works very well..

[mattfd]

Does this viewer handle also milling layer? Or just holes and drills?

[JustnTheNick]

This is awesome

[pankaj.barna]

can we use it with Orcad ?

[lookwhatjoeysmaking]

sooo awesome

[dustinandrews]

+1

[bill2009]

This is just outstanding, I have so much more confidence after doing this. I'll definitely look at your pcb service. Thank you for an amazing piece of work and please pass on my compliments to the developer.

[samurai1200]

Brilliant! Using eagle for design and Viewmate for gerber viewing/editing, this tool is invaluable for catching things that one can miss when blinded by standard superman x-ray views.

Keep developing!

[kozzito]

Hi there!

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!

[Mayhew Labs]

The error should be resolved now. Let me know if you have any other problems.

Thanks for the feedback!

[kozzito]

Hi!

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!

[JamesNewton]

Can I suggest that it might be cool to have a sort of "transparent" mode where the PCB substrate isn't totally opaque so you can see the bottom layer traces from the top layer? That is actually more realistic since with a real board, you CAN see through the FR4.

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!

[JamesNewton]

I was soooo hoping this would work, as I think it's one of the coolest things I've ever seen, but at this step, I get an error: "Reference error: hasY is not defined" but my gerbers came from Protel 99se so maybe they have a slightly different format? Just in case you want to support more formats, here is the start of my top layer file:

%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*

[Mayhew Labs]

The error should be resolved now. Let me know if you have any other problems.

Thanks for the feedback!

[JamesNewton]

Excellent! Yes that did allow my gerbers to be viewed. There are some other issues now, but I've sent an email via your feedback form with all the files so you can reproduce and hopefully expand the program to work with Gerbers from other programs. Just a cool thing.

[joaf]

It is the coolest thing you've ever seen.  Go get a copy of gerbv, load your layers and export as rs247x.  You have to export each layer individually but it's worth it.  This is the best viewer yet!  



Nice job, Mayhew!

[Mayhew Labs]

I've received word of the same error for some other people's files. We'll check it out and resolve it! Thanks for the info!

[w2sqr]

This would be fantastic, but I'm having the HasY probelm also.

[Mayhew Labs]

The error should be resolved now. Let me know if you have any other problems.

Thanks for the feedback!