Forum Discussion

Sarah_Smiles's avatar
8 months ago

Tint and Color Accuracy

Hi all,

My team and I are working on a project where color matching is very important. As such, we have an RGB value (one example: 0.0078,0.5333,0.6470 in the blue image) that we are using across both game asset Tints and Custom UI elements.

On the custom UI, the color appears correct, but when used as a tint, it's a very different color. This is most noticeable with reds, which appear pink. All of our assets are unlit.

With red:

Is there a way to make "Tint" function more like a full recolor than whatever it's doing?

SpaceGlitterUnicornbecause 3D assets!

 

 

9 Replies

  • There's a couple things you could try:

    1) use a HEX code in both your UI and tintables.

            Image({
              source: imagebinding,
              style: {
                tintColor: "#d63737"
                tintOperation: "multiply" or "replace"
              }

    If you're rendered images for your UI then color pick directly from the exported image (example https://imagecolorpicker.com/) to get the final HEX.  I use Blender to gen my UI and sometime the shaders colors will be different from the final.

    2)  if you're tinting the preset Meta 3D shapes - I don't think any of those are "full bright" so you'll need to make adjustments to "tintstrength" and "brightness".

    with either 2D or 3D objects you could also replace the material with a fully white texture_BA with the material_UIO to get a better match.

    • Sarah_Smiles's avatar
      Sarah_Smiles
      Partner

      Thanks for your reply, but unfortunately does not seem to be the fix.
      As you can see from the image, here are the planes with tint VS. the UI element itself VS. the values in a color picker.

       

      • Exo_Guid's avatar
        Exo_Guid
        Partner

        How are you setting the colour for the planes?  could you share the code?

            this.entity.as(MeshEntity).style.brightness.set(.5);
            this.entity.as(MeshEntity).style.tintStrength.set(1);

         Should be able to tweak these values but the code will tell us more.

  • Can confirm all materials are unlit, and have a plain white texture each renamed appropriately per material type.


    Are you able to use your setup to reproduce (.85, .2, .2) / #d93333 as a mesh tint and send a screenshot? It would be much appreciated.

    • Exo_Guid's avatar
      Exo_Guid
      Partner

      I was mistaken.  My apologies. When I matched colour it was red (1,0,0) which was fine.

      I tried a couple different methods but to no avail.  The colours D63737 and #d73636 show up the same as well.  I think it's likely that HW is limiting the colour depth for efficiency.  Hard to say, sometimes when I paste a HEX into the desktop editor the hex is different from what I copied.

      Should file a bug report or maybe meta can jump in here to shed some light on this.  A possible workaround is to upload textures with the matching colours and just use them instead.  A pain, but if you're in a hurry...

       

      import { Entity, Asset, Color, Vec3 } from 'horizon/core';
      import { MeshEntity, MaterialAsset, Component, PropTypes } from 'horizon/core';
      
      class SetUIOMaterial extends Component<typeof SetUIOMaterial> {
        static propsDefinition = {
          materialAsset: { type: PropTypes.Asset }
        };
      
        start() {
          this.entity.color.set(Color.fromHex("d93333"));
          //const hsvColor = new Vec3(0,0.76,0.85)
          //this.entity.color.set(Color.fromHSV(hsvColor));
          //this.entity.color.set(new Color(.85,0.2,0.2))
          const material = this.props.materialAsset?.as(MaterialAsset)!;
          const mesh = this.entity.as(MeshEntity)!;
          mesh.setMaterial(material)
      
        }
      }
      
      Component.register(SetUIOMaterial);

       

      • Sarah_Smiles's avatar
        Sarah_Smiles
        Partner

        How weird! Yeah it looks like it is accurate when one of the color values is 1, ie pure R, G, B, white, yellow, etc.

        Thanks so much for your insight and time- seriously- and let's hope Meta has an answer.