Cinema 4D Redshift to PBR .glTF Workflow

In this post I detail how to export materials from Redshift to textures that can be used to re-create the material for .glb / .glTF models using a PBR methodology in Three.js or elsewhere (live scene).

This is a follow up to my previous post where I discussed how to bake out your Redshift materials AND lighting from Cinema 4D to a .glb / .glTF file and import them into Three.js. That workflow is well-suited when you want to preserve the lighting created in Cinema 4D / Redshift, without having to replicate it in Three.js. An added bonus is that your lighting is not calculated in your Three.js scene, which should mean better performance. However, there are major drawbacks to that method, depending on your use case. Because the lighting is baked, the specularity won’t update based on the camera movement in Three.js, so for highly specular materials it will lack a certain realism. Additionally, that workflow will not look correct if you have animated items, as the objects will not be actively lit by the scene. So if you change the position, rotation, scale of the object (or some other type of vertex-based animation like a skin/morph) the shadow/ shading / lighting won’t update on the surface of the models. While you could maybe get away with subtle animations, large movements would look odd.

So what’s to be done?

Well, this post will cover a workflow for assets where you want to bake out the standard PBR channels (color, metalness, roughness) so that you can light the scene directly in Three.js (or elsewhere) and animate to your heart’s content! Note: I’m still developing a method for exporting tangent-space normal maps from Redshift and will follow up with a new post when it’s reliably working. As in the previous post, I’ll mainly be focused on the export process: how your C4D file and Redshift materials need to be setup in order for this work, how to export them as maps, how to color correct them, and how to export the models. Some of this information will be repeated if you’re familiar with my previous post about baking Redshift materials and lighting.

Acknowledgements

As always, I gotta give major props to Bruno Simon for all my Three.js knowledge — his ThreeJS Journey course is so well put together. It’s a must-have resource if you’re looking to get into development with Three.js or WebGL in general.

I also had a bit of an “A-ha!” moment while watching this video from the Maxon Training Team, at around 1:12:08, where Dustin Valkema uses a custom AOV to store the color information. I hadn’t ever seen the Store Color to AOV node before, and it got me thinking about how I could use that to separate the different maps for your typical PBR material representation. I also use the same After Effects color correct workflow from my previous post, which I learned from Lionel Vicidomini (also of the Maxon Training Team) in this video. I definitely recommend following their content — their whole team is pumping out exceptional tutorials, from quick tips to deep-dives into specific topics.

Let’s go!

1. Begin with any UV’d model(s).

Any model you want to export using this method will need to have UV’s. While you may be accustomed to just dragging Redshift materials onto your models without creating a proper set of UV’s first, we’ll need the UV’s in this workflow: Redshift will need to have a destination set of UV’s when it bakes out your maps, and Three.js will need the UV information to know how to apply those maps to your geometry. Unfortunately, I’m not a UV-pro, so if you have questions on this step, I’ll refer you to the copious amount of UV tutorials available online to get you up to speed.

As you’re making your models, remember to keep them (fairly) low-poly since this will ultimately be used in a Three.js scene.

Everything on my model has been UV’d. All three pieces of geo share the same UV/Texture space.

2. Create custom AOV’s for each channel.

In the Redshift AOV Manager, setup a custom AOV for each map you want to export (i.e. color, metalness, roughness). For each AOV, make the following settings updates:

1. Update the name (i.e. color, metalness, roughness).
2. Uncheck ‘ Multi-Pass.’
3. Check ‘Direct.’
4. In the ‘Direct Output’ section on the right, choose OpenEXR as your format, Float (32 bits) for bpc (because why not?), and under compression use DWAA.

Create 3 custom AOVs, re-name them to the corresponding maps you’ll need for your PBR material, and update the Direct Output settings.

3. Make your materials in Redshift, adding the Custom AOVs as you go.

Now that you’ve setup your custom AOV’s for the PBR maps we want, it’s time to create and apply your Redshift materials. There are some limitations to what you can do in Redshift if you’re using this method of export, but if you keep these limitations in mind and plan your materials with some forethought, you can get some nice results.

You’ll need to follow this rough setup:

• For each new material, you’ll add a ‘Store Color to AOV’ node. Take the output from your material and pipe it into the ‘Beauty’ input of the ‘Store Color to AOV’ node. Now take the output of your ‘Store Color to AOV’ node and pipe that into the ‘Surface’ input on your ‘Output’ node (see below).

Add a Store Color to AOV Node, and connect it between your material and output.

• For each channel (color, metalness, roughness) you’ll want to pipe it into the corresponding input of your material AND an ‘AOV Input’ input on the ‘Store Color to AOV’ node. Then edit your ‘Store Color to AOV’ node in the attribute editor and choose the appropriate custom AOV for that channel in the ‘AOV Name’ dropdown. What this means is that you shouldn’t control any of these channels from within the material node itself. For instance, even if you just want a flat 100% metalness value, you should create a ‘Color’ node, set it to 100% white and then pipe that color into your metalness channel on the material node (see below).

All your calculations for the color, metalness and roughness are done outside the material node, then piped into the corresponding channels on the material and the Store Color to AOV node. Notice the metalness gets a black color, since the eraser should be 0% metal.

• In the Redshift RenderView, you can change the pass dropdown from ‘Beauty’ to your custom AOV’s. This way you can preview how each isolated channel will be output onto your model and make sure all of the connections to your ‘Store Color to AOV’ nodes are correct. This is the color information that will be baked out to textures when we bake.

You can toggle the dropdown in the Redshift RenderView to preview what each of your AOVs will look like.

• Hone your material as you normally would (keeping the below limitations in mind).

Other notes / limitations:

• You can only use one material node per material (i.e. you can’t use a material blender). Any material blending that you’d want to do will have to be done in a much more labor-intensive way of mixing it down to one color output for each channel it affects (for instance, making use of a ‘Color Composite’ node) and then piping that into the appropriate channel on your single material node (and your ‘Store Color to AOV’ node).
• Similarly, you won’t be able to (easily) use the new stacked material method in Redshift where multiple materials affect the same geometry, because I don’t think you can have two materials export to one Custom AOV on the same piece of geo.
• You’ll want to use the new Standard node material, as this more closely conforms to the PBR channels (since it has a metalness channel).

4. Check your Redshift render settings.

Because we want to export the raw color data from Redshift, while using the ACEScg workflow, update the following in your Render Settings under Redshift -> Globals in the ‘Color Management’ tab:

• In the ‘View’ dropdown, select ‘Raw.’
• Uncheck the ‘Compensate for View Transform’ option.

Note: the colors in your Redshift RenderView will look off once you do this, so hone your materials prior to making this change (see below).

Once you make these changes, you’ll notice that the color in your RenderView drastically changes — this is to be expected.

5. Add your geo to a Redshift BakeSet.

Now that your material development is done, we can get ready for baking!

If you have multiple objects that will share the same UV/Texture space (and you already packed the UV’s appropriately), you should make a duplicate and ‘Connect Objects and Delete’ the duplicate. By connecting them into one object (with one UV tag), the BakeSet will bake them into on texture (per custom AOV), and give you that nice UV edge extension on the seams.

If multiple objects share the same UV/Texture space, duplicate them and merge one by using Connect Objects + Delete.

You can turn off the view and render visibility for the original goemetry and just keep the merged version visible. You can also turn off any lights in your scene (which will speed up the render when you go to bake) since Redshift won’t need lights to calculate your Custom AOV renders. Now select all the objects you want to bake out and go to Redshift -> Tools -> Texture Baking -> ‘Create BakeSet from Selection.’ This will add a Redshift BakeSet to your scene (see below).

You can turn off the visibility of the original version of your geometry and any lights or extra objects in your scene. Then select your merged geometry, and Create BakeSet from Selection.

6. Bake your texture maps!

In the ‘Object’ tab of your Redshift BakeSet, you can set the output resolution for your textures. If you had more than one UV tag on your geometry, you’d want to indicate the target UV’s for the bake in the ‘UV Source’ field. You can also add or remove objects from the bake in the ‘Objects’ field.

Click ‘Bake’ and in the dialogue box that appears, you can set the output folder for your baked textures. Also, go ahead and uncheck the ‘Default Beauty’ box (we don’t need a beauty pass for this method). Now click ‘Bake’ in the dialogue box and Redshift will start to render out your textures — it should be pretty quick since it’s just flat colors for each channel (color, metalness, roughness).

Configure the width and height of your texture in the BakeSet attributes. Clicking bake will bring up a dialog box. Uncheck the Default Beauty box as we won’t need it for this method.

Great, now we have our three maps as OpenEXRs.

7. Color correct your textures in After Effects.

Because we were using the ACEScg color space, we want do some conversions to make sure the color will be right when we go into Three.js. The way I know how to do this is in After Effects. Do the following:

• Set your project to: 32 bpc, Working Space: ‘sRGB…’, and check ‘Linearize Working Space’

Update your project settings in After Effects.

• Import your OpenEXRs. Choose ‘Import As’: ‘Composition — Retain Layer Sizes’, and check ‘Create Composition.’ In the pop-ups that appear, keep ‘Import As: Composition’ selected, check ‘Pre-compose layers’, and uncheck ‘Contact sheet,’ then click OK (see below).

I like to add all of my OpenEXRs to one comp, trim them to one frame each, and then offset them by one frame, and trim the comp to this length so that when I want to export them I can just go ahead and render that one comp.

Put all your EXRs into one comp on different frames so you can just render the entire comp when you’re ready to export as pngs.

Before we render though, we need to make some adjustments. While our metalness and roughness maps can be exported as is (to .png or .jpg), we need to do some work on the color map to make sure it’ll match what we saw in Redshift:

• Add an adjustment layer on top of the color texture (trim to just be over this texture) and addd the OpenColorIO effect to the Adjustment layer (available here). (see below).

Create an adjustment layer over just your color texture, install the OpenColorIO effect, apply it to the adjustment layer.

• In the ‘Configuration’ dropdown, find Redshift’s ‘config.ocio’ file in the Applications/Redshift/Data/OCIO directory.

Navigate to the OpenColorIO config file from Redshift.

• Click the ‘Display’ button, then in the ‘Input Space’ dropdown select ‘ACES -> ACEScg’. Below the OpenColorIO effect, add a Color Profile Converter effect to the Adjustment Layer and from the ‘Input Profile’ dropdown, select ‘sRGB …’. Your color texture should look correct now (see below).

Now render out your textures as a png image sequence. And you can down-res or compress these to .jpgs, etc before you go live.

Great, now we have some high quality PNGs. You can further down-res or compress them as needed.

8. Export your model as .glb / .glTF

So we have our texture files ready, now we just need to export our model from Cinema 4D.

If you combined multiple pieces of geo into one object by using the ‘Connect Objects and Delete’ method for baking (in step 5), you can remove that version, and turn back on the render and editor visibility for the original copy. You can delete all other objects, including cameras and lights, so that you just have your geo in your outliner. You can also remove your materials, although make sure to keep your UV tags and Phong tags. Now go up to File -> Export -> glTF and configure it with the settings below.

The only thing left in the scene is the geometry (can be grouped under Nulls if you want), phong tags and UV tags. Export as .glb, and include the Normals, UVs, and Flip the Z.

9. Import your .glb file into Three.js and re-link your maps.

Great! All that’s left is to import your maps, create a material that makes use of them in the appropriate channel, import your .glb, and apply that material to your .glb’s mesh! Here’s the general overview:

1. Create a generic scene with basic boilerplate Three stuff (a canvas, a scene, a camera, lights, an environment map, orbit controls, a renderer, a resize event for the browser window, initialize a texture loader and a gltf loader, and add an animation loop).
2. Load the texture maps from their URIs, update your color’s encoding to be THREE.sRGBEncoding, and set each of their flipY properties to false.
3. Create a MeshStandardMaterial and link the appropriate texture above to the appropriate channel. Add the environment map to the envMap attribute and set it’s intensity.
4. Load the gltf. During the loading, traverse the gltf and apply the correct material to the mesh (the naming from the Cinema 4D export will remain, so just search for meshes with those names). And add the gltf to the Three.js scene.
5. Optimize / tweak to your heart’s content.

And voila! A material made in Redshift that now uses PBR maps applied to a model made in Cinema 4D and running in the browser at 60 fps!+

Just a nice simple PBR pencil being actively lit by Three.js with soft shadows and running at 120 FPS.