It all starts in Cinema4D. I’m using Cinema4D R11. Create a new project and start with a tube primitive.  Below are some of the parameters I used

Tube Properties

Then select the primtive and hit the “C” button. This will convert it to a polygon object. Your object manager should now look like this:

Now we will add a new material. I downloaded a metal texture off of CG Textures and reduced it’s size to 256 x 256.  In a 3d system inside flash the two biggest things that can quickly bring your project down are the number of vertices in your model and the dimensions of your texture. Some general numbers are that a scene can support around 6,000 vertices give or take. So it’s great for simple scenes but for anything larger you might want to try another 3d environment like unity3d.

and when you get prompted to copy a version of your texture file to the textures folder hit yes, it will save some hassle later with the file path. Also be sure to rename the texture to something recognizable like “RingMat” so that it can be identified later.

Now switch over to vertices mode and hit apple + a to select all the points. Then select functions > triangulate. In Cinema4D will default to drawing quads or units of 4 points. Inside Away3D it draws with triangles so we need to make this adjustment.

Now we switch over to BodyPaint UV Edit where we can quickly adjust the UV Map so it doesn’t look quite so hideous. If you are new to UV mapping and 3d in general UV mapping allows you to customize and control how your 2d texture appears on geometry and shapes in 3d. UV Mapping is an art in itself and can take weeks to do perfectly. For this exampl and for other simple tasks the UV Editor inside Cinema4D can take a lot of the work out of it.

Now select the UV Mapping wizard.

Now just have to go through all the steps of the wizard.

We will be using the object option.

There are multiple ways you can map coordinates to a texture. Cubic Mapping will work fine in this case. Cubic maps generally make simpler uv coordinate systems. Angle mapping by default will have a collection of smaller more precise parts.

Now select the color channel until it has a – through it’s check box. Otherwise the UV Wizard will overwrite the texture that we already set. If we had a more complicated texture scheme we’d want to map other channels too. But for now color will suffice. Now switch over to polygons mode. Hit cmd + a to select all the polygons. If the selected polygons are orange that means their normals are facing the correct direction.

For the non initiated when a 3d renderer draws all the vertices it draws them in order and this order determines which way it faces. The flat solid part drawn between them is also called a face. A 3d engine does not render faces that do not have their normals facing the camera. So they save on resources by only rendering half of what we need too.

Now the good part: we export! In this screenshot is also a rendering of what the new UV Map looks like.

Export the file in into your project. You will need to also copy the /tex folder into wherever you export your .dae ( collada ) file. This is because inside the Collada file it specifies a URL to it’s default material. Open up the Collada file in your preferred text editor. TextMate or BBEdit are popular choices: I’ll be using BBEdit.

A Collada file is basically a large XML File with specific nodes for a 3d scene including vertices, UV Coordinates, and texture parameters. Inside <libraray_image> there is the <init_from> that specifies the URL of a UV texture. If you are using Cinema4D 11.5 it will provide an absolute url but you can change it to relative like the screenshot above.

Inside the <library_materials> you can spot the texture we named inside Cinema4D. We will use “ID3″ inside Away3D to get the material info we need.

Now onto the code. The code is written with a .fla and a document class but it will work as pure actionscript. There is nothing linked in the library or any other dependencies. When I use Away3D in a project I usually place all the 3d information inside a seperate class but here the document class should be fine. I always make a createAway3D function()

In this function we create a test object to make sure our scene renders. Away3D is composed of a few basic parts. First we have the View3D: think of this as a sprite that will hold and render your 3d scene. The Camera is how the scene will be viewed: it’s the window to your 3d world. Views are also comprised of scenes which is a holder for all of your 3D Objects. The last component of a view is the renderer: this is what will actually rasterize your 3d scene into a 2d image every frame.  In Away3D when you create an 3d Object you pass in a separate object with all the properties that you want initialized. The x + y properties dictate where the center of the scene is. The view will automatically be full stage size.

To call the collada file you create a new Loader3D class and use the static Collada.load() method. In the document class you can see the onLoaderSuccess Method but it’s fairly straight forward. In a collada file we have to access the material through the MaterialData class. Here we plug in the ID3 that was identified in the Collada .dae file.

One last concept that I used in this code is Bitwise operations. Bitwise operations are quicker ways of doing simple operations. There are a whole slew of bitwise operations that can be quickly googled for. This bitwise operation will cycle through all the items in the array and when it reaches the end will return to zero.

That’s it! Full Collada model support. If you are having trouble seeing your model make sure that your normals are correct and try adjust the size drastically. Sometimes my models come out with .25 , 5 , or 90 for the scale. It’s all relative. The source code is available here.

Recently I had been wanting to do some more interactive 3D type of projects. I wanted to create something beyond just a pre-rendered sequence that simulated camera movement. I have previously been using papervision3D but wanted to expand my knowledge and check out the competition. Papervision X has been long expected but with Ralph Hauwert Unit Zero One leaving the team I thought it was time to move on. Away3D was very highly recommended by my colleague Kyle Beikirch for it’s more frequent updates to SVN and ease of interactivity. Since I was exactly sure what would be interactive when I started: I gave it a shot.

In what I did there wasn’t really a huge difference between the images but I did like how Away3D uses associative arrays much like Greensock Tweening platform instead of traditional constructors. If I didn’t want to pre-render as many assets as possible I would need an internet source to grab them from. I thought that combining the antics of twitter with somewhat related photos could yield some interesting results. At first I grabbed XML from the twitter time line, but I wanted to have more control over my results. I used the Tweetr Twitter API, and got a lot of code inspiration from Lindsey Burtner’s Word Feeder. Lindsey helped me last year when I first began mashing together the last.fm API, and proved an invaluable resource, so props to her.

Let’s dive into some of the key functions that make this work:

Once the Flickr and Twitter data has been collected we then insert it into a 2D MovieClip and prepare it for 3D.

Dynamic Draw of Movie Clip to Bitmap Material

We prepare it for 3D by simple flattening it with transparency.

Document Class creates Bitmap Material

I wanted to organize the planes in  a Helix and found this post from Lee Brimelow’s blog and modified it for my needs. The by rotating the scene 360 degrees we get this cool spin effect for the zoom out.

Make a Double Helix our of Shapes

Now we need a way to navigate between planes, at first it was very linear but that got boring quickly. So I added in a new random index each movement to make it feel more exploratory. Adding a mouse event to planes would have been the next logical step to give users some control.

Generating a Random Index from an Array

Now the fun part: the camera. First we get the distance to to the next target and tweak it so that that camera movement is smooth for all distances.

The Camera has two tweens:

1) To move away from the plane randomly around it in 3D space

2) To move towards the new target

We change the focus of the camera by tweening an empty displayObject3D this would be our “null object” in 3d or After Effects.

The bezier gives the tween a nice smooth and organic feel, something that is lacking with a lot of fully 3d sites.

The newY just calculates which direction the camera should swoop in depending if the target is above or below it.

Moving the Camera

We save the initial values of our current target so that we can return it to it’s rightful place the user is done looking at it. In our tweenCameraDone() function we save the coordinates of the camera in case we need to reset it.

Moving the Camera pt 2

That’s it! I had fun making it and mixing interactivity and 3d Camera. Play with it and let me know what you come up with!

Source Code is available here

1.Take a picture of a hallway.
a.Hallways are a good starting point for camera mapping, simple geometry to
project onto itʼs essentially 5 cubes: floor, ceiling, left wall, right wall, and the end
of the hallway.

Rendered QT Movie

Project Source Files

2.I ran some adjustment layers to stylize the photo a little bit

b.first I ran a black and white filter over it.

c.Then a hue/saturation layer to make it seem a little darker and creepier, I turned the
opacity on the adjustment layer down to get a more subtle effect than just colorizing
the layer.

d.a simple curves layer to bring out the shadows just a little more
e.duplicate the original photo and set the blending mode to overlay, this produces a
night effect for what weʼre going for a creepy hallway.

2.Now that we are done adjusting the photo save a of the photograph without layers
and bring that into photoshop.
b.split the photograph into layers based on the five peices of geometry that we will
be projecting this on, naming layers is important once we get into cinema.
ProjectionMan has the ability to read alpha channels so masking will work just
fine. Save this PSD file with layers to something you can remember like
“hallway_brokenup.psd”

3.Now into cinema4D. The first thing weʼre going to do is add a doodle object you can
do this via the menu tools > doodle > add Doodle Frame. Under load bitmap under
Doodle Object properties > then load the PSD broken up into layers.

4.Add a visibility tag under cinema4D tags and lower the visibility a little bit so you can
see the 3d viewport.

5.Alright now a little explanation as to how camera mapping works. Essentially you are
using a stationary camera to “project” textures onto simplistic models, allowing you to
do simple slow camera movements.

6.So we create five cubes and label them: floor, ceiling, right wall, left wall, and
backpane. Rotate and scale each cube until they visually line up with the walls in the
photograph. Donʼt worry about getting them exactly just yet weʼll have to do tweaking
once we project textures. Create a camera and position it so that it lines up with the
doodle object, this is camera weʼll be using to project textures. Here is the geometry I
came up with just by eyeballing it.

7.Now for texturing, add the PSD file to the luminance channel.

8.Apply the texture to any of the cubes and under projection select Camera Mapping
and select the “CameraMap” camera we created. Under size X, Y click calculate and
that will project the material at the correct resolution allowing for a little more
movement and detail.

9.Under window select “Projection Man” to bring up the new UI for Cinema R11. Drag
each of the cubes under the PSD, under the Camera projection. Select the correct
corresponding layers with their alpha channel IE backPane (cube) should be
assigned backpane (PSD layer), etc etc. Weʼre loading the luminance and alpha
channels for this example.

10. Now render a scene so we can see how everything meshes together, if there are
black streaks near the edges try readjusting the height, width, and depth of each
cube, surprisingly I found that the depth of a cube has the biggest impact in getting
those “stretch marks” around the edges to disappear. Because camera mapping
rendering is so quick, this is actually a relatively painless to make lots of little
adjustments and keep re-rendering the scene. Here is an example of stretching, this
was fixed by decreasing the width of the cube.

11.Now for the animation:
duplicate the camera mapping camera and rename it “moveCamera” or
something similar. Now weʼre just going to animate this camera slightly over 180
frames to get a nice smooth transition that still maintains that 3d feel.

12.You may experience more stretching as you animate forward, keep scaling and
changing the geometry, but remember that camera mapping has itʼs limits and can
only go so far with 1 photograph before quality starts to diminish.

13. Viola! Camera mapping using ProjectionMan and PSD layers.

Rendered QT Movie

Project Source Files

design tag squid

Building off of the whole underwater theme I had also really wanted to build a diver that could go deep sea mining and I eventually came up with this:

Dive Dive!

It made sense to bring these two things I love together: underwater deep sea mining + squids, so I quickly got together some style frames for overall look and feel.

styleframe

styleFrame

Tentacles!

The next major changes I made involved the global lighting, I ended up using a combination of fog/depth with visible/volumetric lights to simulate the caustics of the ocean. I ended up having to to do some more complex rigging for the tentacle using XPRESSO in cinema 4d. I also applied sub-surface scattering to the tentacles to give it a different look and feel that changed from low-light situations.

The final render is on my portfolio site.