Using "Bloom", how would I create a UI slider to adjust brightness of a glowing mesh material?

I’m using the “UI Slider” that comes with “User Interface Helper (UI System”) by Snapchat, I just need the UI to connect to the brightness setting for my Bloom material. I hope this makes sense.

It seems to me that some scripting will be necessary. I’m new to this, so scripting is a bit beyond me, but if somebody does have some specific scripting instructions I’d be happy to attempt it.

Thanks in advance to anyone who tries to help out here

The script for this is fairly simple. You just need to get a reference to the bloom material and define a custom function for the slider change event.

I recommend installing the vscode plugin for lens studio - it’s how I generate the input definitions. It’s a lot of junk to remember, but with the plugin you can just type input_Material and it will give you a template.

//@input Asset.Material bloomMaterial
/** @type {Material} */
var bloomMaterial = script.bloomMaterial

script.api.onSliderChanged = function(value){
  bloomMaterial.mainPass.brightness = value * 7

You can see the shader property names by hovering over the title in the material’s graph parameters. I’m setting this up to control the brightness of the bloom by setting the brightness property on the material’s main pass.

The slider callback value is a normalized value (0-1), so I’m multiplying by 7 to shift the output range to 0-7.

Once you have the script attached to a scene object, you need to set some options on the UI slider instance to call your onSliderChanged function.

Here are the project files for reference, but I recommend doing this from scratch. The learning curve for scripting in lens studio is a little steep at first, but eventually it’s a lot of the same conventions. (7.2 MB)