[SOLVED] Need help on transparent textures

Hi,

I am trying to create a decal with transparent areas but I am not having success. I followed the PBR material guide and also I have checked a vanilla car (burnside with taxi skin), but there are about 5 textures used, I am getting lost on how they are setup.

To make things esay to explain I created a sphere with two UV areas with dedicated material. The overall area I made it gold color and then there is a rectangular area on which I want to put a blue text, having the rest of the rectangular transparent.

For the text I thought I have to create two stages, one for the gold and one for the text with opacitymap, having the transparent part white:

Code:

{
  "Chrome": {
    "name": "Chrome",
    "mapTo": "Chrome",
    "class": "Material",
    "persistentId": "f37f5e40-57ef-43ca-8dbf-000000000001",
    "Stages": [
      {
        "baseColorFactor": [1.0,0.9,0.0,1],
        "metallicFactor": 0.8,
        "roughnessFactor": 0.2
      },      {},      {},      {}
    ],
    "dynamicCubemap": true,
    "translucentBlendOp": "None",
    "version": 1.5
  },

  "Text": {
    "name": "Text",
    "mapTo": "Text",
    "class": "Material",
    "persistentId": "f37f5e40-57ef-43ca-8dbf-000000000002",
    "Stages": [
      {
        "baseColorFactor": [1.0,0.9,0.0,1],
        "metallicFactor": 0.8,
        "roughnessFactor": 0.2,
      },
      {
        "opacityMap":  "/vehicles/Text_experiment/text_experiment_texture_white.png",
        "diffuseMapUseUV": 1,
        "instanceDiffuse": true,
        "metallicFactor": 0.8,
        "roughnessFactor": 0.2,
      },      {},      {}
    ],
    "activeLayers": 2,
    "dynamicCubemap": true,
    "translucentBlendOp": "None",
    "version": 1.5
  },
}

using this texture



It is wrong, because the result I get is this,



Can you help me?

Thanks!

 

Thank you Agent_Y. So for anyone may need the same, the steps to solve the issue where

1) define a material with two stages:
1.1) material #1 is the base color on which you want to apply a decal
1.1) material #2 is the one with the decal
2) for material #2
2.1) define an occlusionMap with a .png file with black areas you want to be transparent, meaning the material #1 will show in these areas. White areas where your decal will appear
2.2) define a baseColorMap with a .png with the actual decal corresponding to white areas of the occlusionMap
3) use *.color.png extensions so that the texture cooker will automatically bake them in .dds files the first time you run BeamNG with that material. You will find them in UserPath\0.24\temp\vehicles\<your vehicle> then you can replace your .png files with these .dds (and update material.json of course)

main.material.json:

Code:

{
  "Chrome": {
    "name": "Chrome",
    "mapTo": "Chrome",
    "class": "Material",
    "persistentId": "f37f5e40-57ef-43ca-8dbf-000000000001",
    "Stages": [
      {
        "baseColorFactor": [
          1,
          0.9,
          0,
          1
        ],
        "metallicFactor": 0.8,
        "roughnessFactor": 0.2
      },
      {},
      {},
      {}
    ],
    "dynamicCubemap": true,
    "translucentBlendOp": "None",
    "version": 1.5
  },
  "Text": {
    "name": "Text",
    "mapTo": "Text",
    "class": "Material",
    "persistentId": "f37f5e40-57ef-43ca-8dbf-000000000002",
    "Stages": [
      {
        "baseColorFactor": [
          1,
          0.9,
          0,
          1
        ],
        "metallicFactor": 0.8,
        "roughnessFactor": 0.2
      },
      {
        "baseColorMap": "/vehicles/Text_experiment/text_experiment_texture_trans_b.png",
        "opacityMap": "/vehicles/Text_experiment/text_experiment_texture_o.png"
      },
      {},
      {}
    ],
    "activeLayers": 2,
    "dynamicCubemap": true,
    "translucentBlendOp": "None",
    "version": 1.5
  }
}

occlusionMap

baseColorMap

result