Cinema 4D Redshift to Three.js Workflow
This post covers the export process, starting with a UV’d model in Cinema 4D to a final .glb/.gltf asset and texture files for use in a Three.js mesh that will rely on a MeshStandardMaterial to replicate what you saw in Redshift without any lighting handled by Three.js (running example). If you’re looking for a way to export .glb/.gltf assets with textures that can be actively lit in Three.js, check out my other post about baking PBR style maps from Redshift. Because this post is concerned primarily with the export process, I won’t go into things like how to UV a model (I’m no expert anyways) or how to import a .glb/.gltf into Three.js and assign textures. Future posts of this series will include important ways to optimize the process and your assets, shortcomings of this method (there are many!), and additional tips and tricks. If you have questions, notice errors, or have improvements, please feel free to let me know!
First though, acknowledgements:
Massive thanks to Bruno Simon. The info I learned in his Three-JS Journey course informed this workflow, although he details the workflow using Blender. But I don’t use Blender and needed to reverse engineer for Redshift / Cinema 4D. If you are interested in Three.js, his course is worth 100x what it costs — check it out!
And a thanks to this Maxon Training Team video that helped me figure out a color workflow from Redshift -> After Effects. They’re providing really great content, so def subscribe!
Okay, now let’s dig in..
1. Start with any UV’d model or model(s).
Any models you want to export will need to have a decent set of UV’s. While I know working with Redshift sometimes makes this process un-necessary for applying shaders, it’s imperative that a model you plan to export as a glb/gltf be UV’d. This is so C4D/Redshif knows how to bake out the materials / textures to a image, and so Three.js knows how to apply that texture to the model vertices. There are plenty of tutorials on the web about UV-ing, and I’m no expert, so I’ll leave you to do your own research if you need to level up before moving on.
Remember to keep your model’s geo fairly low-poly, this is a Three.js scene after all.
2. Add your Redshift materials (and/or textures) and light your scene.
Complete your scene by adding materials / textures / etc in Redshift and light your scene. Go wild and work how you normally would, but remember that in the end we’ll be baking out a single flat beauty pass to apply to the model without any lighting handled in Three.js, so some things won’t translate (i.e. bump/displacement will affect the appearance of the bake (i.e. crevasses will have shadows), but you won’t see any bump/displacement on the model itself.
3. Check your Redshift render settings and add an AOV.
When we bake out the textures, we want to use ACEScg and raw colors in an exr file, so we can be sure we maintain all the color information possible. Make a few adjustments to your Redshift Render settings in the Globals tab in the Color Management section:
- Make sure Rendering Color Space is set to ACEScg,
- Set the view to ‘Raw’
- Turn off ‘Compensate for View Transform’)
You’ll notice the color looks off if you have a Redshift RenderView/IPR open. That’s to be expected.
You also want to setup an AOV for the Beauty pass in the Redshift AOV Manager. Add the pass, then make sure ‘Direct’ is checked (you can uncheck ‘Multi-pass’), and under the Direct Output section on the right:
- Set the Format to ‘OpenEXR’,
- Set the Bits Per Channel to ‘Float (32 Bits)’ (probably overkill, but whatever)
- Set Compression to ‘DWAA.’
You can optionally export other AOV’s if you want, which will also be output into their own image files when we bake. However, since we’re just looking to get the exact results we see in Redshift into Three.js, we just need the Beauty.
4. Combine geo that uses the same UV/Texture space, add a RS BakeSet, and bake!
Because the tongs have three seperate pieces of geo, but I placed them on the same UV/Texture space, I want to temporarily combine them using this workflow:
- Duplicate the group.
- Turn off editor visibility / render visibility for the original group.
- Perform ‘Connect Objects and Delete’ on the duplicate. I renamed it to Tongs-Combined.
This will ensure that when we do the bake, it outputs the baked textures for all the tong geo into one image file instead of separate ones based on each piece of geo. While you could combine the files separately in Photoshop this will make it easier, and give you nice edge painting / UV edge expansion in the texture image.
Now create your RS BakeSet by:
- Select all the geometry you want to bake (mine is the Tongs-Combined, the GroundPlane and the CuttingBoard).
- Go to Redshift menu -> Tools -> Texture Baking -> Create BakeSet from Selection.
Now select the BakeSet in the outliner and update the width and height. I did 2K which is probably overkill, but you can always scale them down later based on the needs of the scene in Three.js. If you had another UV space set up that you wanted to bake to you could specify this in the UV source field, although since all of ours use a default one called UVW you can leave it blank. You can also verify that all the objects you want to bake are listed in the Objects field. If any are missing you can drag them here.
Now you can click the Bake Button on the BakeSet. It will give you a pop up where you can set:
- The Output Folder for your textures
- Uncheck the ‘Default Beauty AOV’ since we already configured one in the AOV Manager.
Click ‘Bake’ and it will take a while to render out your textures. You’ll have something like the below.
5. Color correct the textures (in After Effects).
Because we wanted all the color information we could get and we used the ACEScg color space in Redshift, we need to do some color conversion on our OpenEXRs so that they look correct in Three.js by making sure they’re in sRGB color space. The way I know how to do this is by using After Effects:
- Make sure your color settings in Project Settings use: 32 bps, sRGB, and check ‘Linearize Working Space.’ (see below)
- Import your OpenEXRs into After Effects as Compositions. Make sure to import as compositions, but there’s no need for a contact sheet. (see below)
- Put all of the OpenEXR’s into one composition. Trim them each to 1 frame, and offset their positions in time by 1 frame so you can see them all and scrub through them using the current time indicator. (see below)
- Now add an adjustment layer to the top of this comp and add the OpenColorIO effect (available here) to that layer. From the Configuration dropdown, add Redshift’s config file which is in the Applications/redshift/Data/OCIO directory and called config.ocio. (see below)
- Now set the OpenColorIO effect to ‘Display’ mode. Set the Input Space to ‘ACEScg’, and set the Display to ‘sRGB’. The color still won’t look right, we first need to add a Color Profile Converter effect below the OpenColorIO effect. Set the input profile to ‘sRGB.’ Finally, our colors should look exactly how they looked when we set up our materials and lights in Redshift! If you want to edit the textures you can, just add any adjustments BELOW that top Color Conversion layer to make sure you’re harnessing all the color information in the OpenEXRs.
- Next we can render our timeline (all three frames) as a PNG sequence, and we’ll have our texture files ready to use in Three.js. For now, render them with high bit depth and at full res (2048). Once they’re output you can down-res them or compress them to jpg, etc. They should look like the below.
6. Export your Cinema 4D scene as a glb/gltf.
Switch back to your Cinema 4D file, and get it ready to export to glb/gltf. You may want save your scene as a duplicate like ‘-JustGeo’ or something because we’ll be cleaning out the things we won’t need for Three.js.
Remove any lights, cameras, and the duplicate geo you made to facilitate the texture baking. The only thing left in your outliner should be Nulls, Geometry, and possibly Bones if you have something rigged (although there are a lot of intricacies for exporting a rigged/skinned object so do some experimentation before relying on this workflow for anything animated or rigged with bones). You can remove the material tags too, but leave the UV tags and the Phong tags in place.
Now go to File -> Export -> glTF and configure it with the following settings, and save it out.
7. Import your .glb and textures into Three.js
There are basically 4 things you need to do to get your scene working in Three.js
- Create a generic scene with basic boilerplate Three stuff (a canvas, a scene, a camera, orbit controls, a renderer, a resize event for the browser window, initialize a texture loader and a gltf loader, and add an animation loop).
- Load the three texture files from their URIs, update each of their encodings to be THREE.sRGBEncoding, and set each of their flipY properties to false.
- Create three MeshBasicMaterials (one for each texture) and set their map property to be the texture objects above.
- Load the gltf. During the loading, traverse the gltf and apply the correct material to each piece of geometry (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.
And boom — you’ll have your 3D model running in the browser with the same high quality look you developed in Redshift and Cinema 4D.
