Yet, if you’re new to ThreeJS (or WebGL) it can help to start with a tool you’re familiar with. I’m super familiar with Illustrator…it’s my go-to design tool. In this post I’m going to explore an Illustrator to WebGL workflow.

What do I need?

Before you get started you’ll need a couple of things:

Adobe Illustrator — You probably know this but…Illustrator is a vector-based illustration program. It uses lines, paths, and bezier curves to render your artwork. Since it uses Maths to generate what’s on screen it’s an ideal candidate for exporting to WebGL

Ai->Canvas Plugin — This is an awesome (life-saving) plugin that exports Illustrator artwork directly to HTML5 2D Canvas. The creator, Mike Sawnson, has recently updated this plugin to work with Illustrator CC and CS6. Grab it here.

ThreeJS — ThreeJs is a library created to make working with WebGL easier. For ease I’ve created a super basic starter site. Download it here.

Get Some Artwork

After you’ve got everything set up the next step is to create some artwork in Illustrator. For this example I’m using some graffiti-ish lettering. You can use any vector-based artwork, but basic line-work or 2-color artwork seem to have the best results.

Export to Canvas

After you’re happy with the artwork go to the File->Export menu in Illustrator. Then click the “<canvas> (html)” option in the save dialog.

This should kick you over to a web browser displaying your artwork. If you right-click the page and click “inspect element” then browse the source code in the <script> tag you’ll see the code that is generating your artwork. It should look something like this:

Port to ThreeJS

So far we’ve managed to export our artwork out of illustrator and into HTML5 Canvas code. The next step is to make it 3D. For that, we’ll need to modify the 2D Canvas code and make it ThreeJS-friendly. This is actually pretty easy to do, it just so happens that ThreeJS uses the same drawing methods methods as the native 2D canvas. We just need to extrude the paths and give it some materials to make it look, well, 3D. For brevity, I’ll use basic rectangle to show the porting process:

Step 1

Copy the code inside the “draw” function in the exported .html file and paste it into the “init” function within your ThreeJS website.

Step 2

Remove all instances of “ctx.save(), ctx.beginPath(), ctx.closePath(), ctx.Fill(), and ctx.restore(). These are specific to the 2D drawing canvas and aren’t needed for our purposes. Then create a Three.Shape() and assign it to a variable. Here I’ve created a variable called “Cube”.

Step 3

Next we need to extrude the basic shape to give it some depth. To do this we’ll use the Extrude Geometry built into ThreeJS. You can use the Extrude Geometry to add depth to the shape and give it a beveled edge:

All together we have successfully taken our 2D graphic from illustrator and made it 3D.

Wrapping it up

Back to my graffiti example, I’ve followed the same steps from above to extrude the base artwork and add it to a scene. Then I added some additional elements like a grid and background gradient to give the scene some visual interest. Lastly, I added some post-processing effects to make it look a bit more cinematic. You can see the final product here or download the source code

Parting Thoughts

Wrapping your mind around new tech is the biggest hurdle when learning a new skill. Being able to start with a familiar tool and work it into a productive workflow can go a long way in getting ideas off the ground. This Illustrator->WebGL workflow has come in handy for me a bunch of times now. Hopefully you’ll find some great uses for it too.

Best,
Erik

Originally published at blogs.truthlabs.com on November 12, 2013.