CustomMaterial colorMap, update rgb based on a variable threshold value

Hi,

Taking a dive into shader code and what you can do with custom materials. I’m trying to extend the idea from this post to use a variable threshold value, so that a user could manipulate it through a UI. The naive way I found to make it work is to add another attribute to the material called “thresholdVal”. When I want to set/change the value, I can then use updateVerticesData() and pass through an array holding the threshold value, repeated so that every vertex has one.

I’ve modified the playground to this to show the basic idea. So while it works, there probably is a better way. Is it possible to store a singular threshold value for all the vertices? My first thought was using addUniform(), but looking at the docs I can’t tell how you would update this value in the future after initially setting it.

Appreciate any help, thanks!

Yes, you can do it with a single uniform value like this:

2 Likes

Wonderful, ty.

How does this work if you want to tie Uniform values to things like react state variables? Something like this:

// example: react state var
const [threshVal, setThreshVal] = React.useState(0.5);

function materialCreator(args, thresholdToPass) {
  // create material and shader code

  // somewhere where I add the uniform, use the threshold Val passed in
  mat.addUniform("thresholdVal", "float", thresholdToPass)
}

// ex scene setup
var createScene = async function(args) {
  var scene = new BABYLON.Scene(engine); //etc

  // make custom materials w/params
  materialCreator(args, threshVal); //uses React state
}

My guess is that it will work fine, but I’m planning on tinkering with this regardless, so I’ll likely report back w/ my results