UE4 style bloom workflow and way to customize shader material?

Hi guys, I’m new on BBL, I have 2 questions if someone have clues it will be really appreciated!

1, in UE4 all the colors I can adjust are HSV, which if I set a very high value for the V component than I’ll get a very bright area in the final output, I’m wondering is there similar option or workflow in BBL? because use V to control the light intensity is really convenience!

2, in UE4’s material editor the customized shader code are finally connected to the PBR slots, for example
float s = sin(iTime * n) + 1.;
// and this ‘s’ variable will be connected to the ‘emissiveColor’ slot to get a blink effect.
what is the right way to do this in BBL? should I use a dynamicTexture to draw things dynamiclly and set for pbr.emissiveTexture? but I think this way I can’t use shader code…
or I should combination all the exist PBR shader code with my own code to generate a complete new shader material? but this way I think it’s a bit complex and a lot work to do…

thanks!

1 Like

about the question2, I found the solution:
just use PBRCustomMaterial to generate your own shader.

but still qestion1.

hi. you can try different rendering pipelines e.g. Use the default rendering pipeline - Babylon.js Documentation maybe this helps you

Hello and welcome :slight_smile:

For 1: Do you want to change the exposure of the scene or just update a color using HSV? If it is the latter Color3 has this method: Color3 - Babylon.js Documentation

thanks for replying, yes I want to change the exposure of a mesh’s material (so that it will be more bright if bloom is enabled)

for example if I need to create a light ball in UE4:
1, sphere mesh + customize PBR material
2, in material editor, use unlit mode for the material (or other whatever modes as long as the emissive slot is available)
3, create vec3 -> connect to emssive slot
4, change V compoent of the vec3, you will get a light ball

the color components in UE4 can be exceeded from 1, personally I think the larger part will be considered as the exposure value of this material in the bloom shader to find bright area?
anyway this workflow is really really convenience.

here is a demo GIF:
GIF


oops seems the uploaded GIF gets a small size.
preview this one please: https://jc-space.com/bright.gif

You can directly change the exposure of the material by using the material.imageProcessingConfiguration: PBRMaterial - Babylon.js Documentation

3 Likes

OMG, this is true! brilliant web 3d framework ever! and actually this was what I think, and now I confimred it!
thanks so much! @Deltakosh

1 Like

Thanks for your kind words!

Hello, we are visiting this topic. The question I have regarding this is can we have the shader exposure value only affect the input texture for the bloom effect and not effect the rendered model? Would be have to essentially render two passes then, one for the base render and then an image to hand off to the bloom effect?

1 Like

Is it not equivalent to lowering the bloom threshold as well as increasing its intensity ?