Allowing user color/brightness image customization?

Questions
,
1

I’m trying to allow a user to select the basic color of an RGB Texture (albedoTexture/diffuseTexture) without losing the detail in the original image.

I’ve done this before by desaturating the image of all color, then allowing the modification of albedoColor/diffuseColor. This method unfortunately limits the brightness of the image seemingly to the brightness of the desaturated image.

Are there any useful texture properties that would enable full color/brightness customization with textureColor?

Is there a different way to prepare the image so the addition of the textureColor allows maximum user-selectable range of color and brightness? I think if the brightness was shifted so the maximum is pure white then I could acheive this. I’m not sure if this is true nor how to do it.

The image I’m currently using is beige-birch-plywood and the desaturated image is here:

https://imgur.com/VhxPRB

The original image is from 3designer.app:

2

Answering my own question: with the desaturated image above, adding

material.albedoTexture.level = 10;

gives me the result I want.

The user can use ColorPicker to pick a wide gamut of colors and brightness all the way up to almost pure white (losing detail at the very brightest values, but I think that’s unavoidable).

Is there a formula for the correct value of the level property? Or a generally useful range (e.g. 0-100)?

1 Like
3

Regardless of what you’re doing if you want complete control over a material’s colors, you can make a material plugin.

In fact there’s an example that does exactly what you want (maybe)

what you’re doing looks a lot like post-processing? so maybe you can look into that

if you want artistic control maybe a color space like HSV or OKLAB seems more appropriate? since if you’re not messing w/ Luma directly there’s no loss in detail (even then you can prolly avoid losses in detail if you work with HDR, and then you can choose a tonemap you like)

1 Like
4

I agree that a material plugin is the next step if I want to give a user additional control and fine-tune that experience. I have found sufficient control (I think) in basic color picker and slider modification of StandardMaterial and PBRMaterial at this point.

I looked into alternate ColorPicker designs from the Babylon.js-provided one (which I think is HSL).

This is an excellent page of color picker technical detail along with javascript interactive implementation of variations.

I really like the second-row OKHSL (center) implementation because of the circle having visually-similar brightness throughout (with my eyes and my display) and the separate black to white vertical bar. If/when I get to the point of integrating JavaScript GUI controls into my Babylon.js scene, I will likely start with that OKHSL color picker.

Thank you for the Material Plugin and post-processing pointers.

1 Like
5

Glad you could find what you were looking for!

I really like the second-row OKHSL (center) implementation because of the circle having visually-similar brightness throughout (with my eyes and my display)

That’s what OKLAB was made to fix : D

I will likely start with that OKHSL color picker.

Lesgoooooo :3

Thank you for the Material Plugin and post-processing pointers.

yw!

6

It looks like I could desaturate a PBRMaterial’s albedoTexture prior to further proccessing in the material by using the material ImageProcessingConfiguration. Something like this:

      const material = new PBRMaterial("pbr");
      const ipc = new ImageProcessingConfiguration();
      ipc.colorCurvesEnabled = true;
      ipc.colorCurves = new ColorCurves();
      ipc.colorCurves.globalSaturation = -100;
      material.ImageProcessingConfiguration = ipc;
      // [optionally calculate level here]
      albedoTexture.level = 10

Also, I hadn’t noticed the proper use of “orm” image file provided in the downloaded texture. I think it’s this, right?

// ORM textures are compiled as follows: Ambient Occlusion is dedicated to the Red(R) channel, Roughness to the Green(G) channel, and Metallic to the Blue(B) channel of an RGB image.
// metallicTexture ← orm file
// useAmbientOcclusionFromMetallicTextureRed = true
// useRoughnessFromMetallicTextureGreen = true
// useMetallnessFromMetallicTextureBlue = true

AmbientOcclusion, Roughness, and Metalness are fully utilized (each) from a single channel?

7

by using the material ImageProcessingConfiguration

I had no clue that existed lmao

AmbientOcclusion, Roughness, and Metalness are fully utilized (each) from a single channel?

I guess so : O

1 Like
8

Testing ImageProcessingConfiguration on PBRMaterial shows that processing occurs after the assignmemt of albedoTexture and albedoColor.

Unfortunately, it doesnt work for my case of wanting to desaturate the Texture then apply the Color.

It does point the way towards a node material containing a PBRMetallicRoughnessBlock with the texture input from a texture with desaturation block between the two.

I can’t edit with NME on a tablet with touch (can’t add a block, which presumably requires a mouse click to add a selected block). I’ll give it a try when I can.

It’d be great if there were an NME that mimics PBRMetallicRoughness Material.

1 Like
9

For my own reference, this forum post discusses a custom material for the same purpose (desaturating an image texture before using it in a PBRMetallicRoughness-like material).

2 Likes