FDNavigate back to the homepage

Blender, Shader Nodes and Baking

Rick
July 11th, 2021 · 2 min read

This weekend I felt like I needed to do something productive other than a trip away! 

So its been a while and I thought Id take a look at baking the results of a shader node network in blender.

First of create a suzzanne monkey head (shift + a → mesh → monkey).

Creating the monkey head

Now you need to drag the bottom bar of blender window up. Click the icon and select the shader editor.

Dragging bottom panel of blender up.

and then..

Selecting shader editor.

Once these steps have been done make sure you you select the cycle render engine in render properties tab on the right.

We can get to work on the baking soon..

I don’t know yet how to do many things with this YET, but baking is a great way of getting something procedural and getting it into a texture you can use in your 3D applications.

Make sure you have selected the monkey head.

Select new on the top bar of the shader editor and delete the principledBSDF node:

Node setup.

and then select this brick texture node:

Brick texture node.

Join up the colour output to the input of the output material node. Then just because we can you should create an RGB node and connect the colour up with the colour input node on the brick texture.

RGB colour input node.

Now you should have something like this:

End setup in blender.

Now the key thing here is you have to create a image texture node and create a new standard image 1024x1024px. and connect it to the second colour input node of the brick texture node.

Image Texture node creation in blender.

This is what it should finally look like:

Final node setup.

Once this has been created, go to the render properties tab on the right hand side. Select bake (alittle way down the options) ensuring the image texture node in the shader editor has been selected aswell as the object in the viewport (the monkey head).

The actual baking in blender.

And if you export this model to GLTF (including textures - occurring by default) and import it into the GLTF online viewer then you will see the texture is loaded onto the model and there ya go, baked a shader node network into an image texture and used this in web 3D setting. As see in the GLTF online viewer:

More articles from theFrontDev

Post Processing In React Three Fiber - Depth Textures and World Coordinates In Fragment Shaders

A small walk through on how to utilise depth textures in postprocessing, using rendertargets. And then converting texture coordinates to world coordinates using this depth value. The end result allowing us to do postprocessing effects in 3D space rather than just basic filters.

May 8th, 2021 · 3 min read

Animated Camera from Blender to React Three Fiber

A proof of concept of animating a camera path in blender and exporting to a GLTF and using in a react-three-fiber project. Involving keyframes, baking the animation and using gltf to jsx to load the animation in R3F.

April 14th, 2021 · 4 min read
© 2021 theFrontDev
Link to $https://twitter.com/TheFrontDevLink to $https://github.com/Richard-ThompsonLink to $https://www.linkedin.com/in/richard-thompson-248ba3111/