FDNavigate back to the homepage

Height Dependant Node Based Shader Baked to a Textures for GLTF models

Rick
January 4th, 2022 · 3 min read

The file is below, haave a play around in the shader graph with the various options:

Blender File For height dependant mixture of textures, baked to a texture

There are three 4 moving parts to this:

  1. Node Graph in blender
  2. A texture from the internet simulating ground.
  3. A height dependant colour ramp for the lower parts of the model.
  4. The Material which will bring the end colour

Node Graph

What is the node graph in blender?

So usually there are 2 ways to do shaders either in a node graph like blender / houdini or coding with a shader language like GLSL.

With blenders node graph, you can load textures and map then to a mesh, you can do procedural textures and all sorts of other things.

The question is how can you use these effects in a GLTF model? Well there’s currently two ways in blender… either baking vertex colours or baking to a texture/image and using a UV map to map this to the model.

Vertex colours is very much dependant on the complexity of the texture and the amount of vertices, as it stores colour data per vertex. If there are few verticies it simply wont work effectively. You can also view this in the GLTF viewer (1st one whioch shows up on google).

Texture from the internet

This is the texture from the internet:

Image ground texture from internet

We load up a texture coordinate node and link the generated coordinates to the image texture node, with this texture/image loaded into it.

Height Dependant Colour Ramp

The second row of this image is the colour ramp texture:

Colour Ramp texture in blender node Graph

So as Im not an expert in blender Im not 100% sure why this works. I played around with this for about a day to try and get it working :/

I could hazard an educated guess that we are mixing two colours, a texture and a height dependant texture with a colour ramp, so we mix the top part of the model colour with the higher part of the colour ramp and the lower part of the colour ramp with what ever we set as the lower part of the height dependant texture.

This is why the top part appears as brown, the first colour in the colour ramp, and the bottom part of the model and colour ramp is black.

900 hours into blender but still a novice haha :) Alot to learn!!

The final part

The BSDF Principled material is a standard material in blender to use to show textures or colours on a mesh or model.

The key thing to understand here if you use the shader graph with basic colours, you can export them to a GLTF model and view in the gltf viewer. If you want to use noise nodes or anything more complicated then you have to bake the output.

This requires 2 things, and understanding of how to bake but also some kind of expertise in uv unwrapping.

I understand baking and textures but I am greatly lacking in uv unwrapping skills.

But this isnt suprising as model creation and uv unwrapping have entire industries behind it, and you could spend a whole career learning how to do this professionally to a treble A game standard.

This isnt to say that I wont stop trying it haha and Im sure for basic shapes it wont be to hard to master or follow tutorials.

And to note I tried this method on a more complicated procedural mesh but the baked texture looked horrednous or vertex colours were just black, so I assume its something to do with seams or the baked texture not respecting the uv map. Or one of the setting was wrong.

But this is what the baked texture looked like at the end of the day:

Baked Texture on icosphere node graph

Baked Texture on icosphere

All you need to bake is an image texture in the node graph not connected to anything and selected and then make sure you on cycles mode, then select render tab and then bake option. AS described in this article: Bake article.

Or use soime of the bake addons.

Baking

As previously described on this blog you need a image texture node on the node graph and have this selected when baking.

You can also use addons like these:

Baking addons

which make it abit easier to do… rather than rely on blenders limitted in built baking tab on the render panel.

Final Thoughts

This is a very powerful method to utilise blenders node graph to make procedural textures for game or web ready GLTF models.

There are some hard limitations to this, you can create very detailed and complex procedural textures but unless you use a 4k image/texture to bake to, then much of this will be lost, and obvbiously this

But one very important note to make is, you can bake roughness maps or specular maps and use this for various things like rivers or metalic like materials.

Or instead of baking to a texture, you can just use the principled BSDF Material and increase the metallic aspect option and make the model shiny and export to GLTF. I have tested this in exporting and viewing in the GLTF viewer!

Shiny BSDF Material exprted from blender

More articles from theFrontDev

Bloom and Chaining Effect Composers, Whilst Using Three's Layers

Bloom effect using R3F, three's layers and chaining effect composers. The end result being merging two renders into one and giving selective bloom.

December 30th, 2021 · 2 min read

Volumetric Rendering in R3F of 3D Noise in a 2D Texture

A proof of concept to render 3D noise sliced into rows of a 2D texture. For effects like fog, clouds sand storms etc. Have a play with the codesandbox and change the settings!

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