Transparent rendering mode not working in WebGL

Larper · January 3, 2021, 12:30pm

I am making a 3D puzzle video game and I wish to show a translucent copy of the puzzle piece on its original position when the puzzle piece is near its original position. In other words, to show the player that they are on the right track.

I have done so and it is working fine, here’s a 4 second quick gif for demonstration.

However, it does not work when I deploy the game to WebGL. The copy of the object which should be translucent simply isn’t.

Here is the function which I use to create a translucent copy of the object. I found the code in this forum thread.

Basically what I am doing is instantiating a copy, deleting uncecessary components, manually changing the material settings to make the object use the Transparent rendering mode, changing the opacity to 0, and then disabling the renderer because for some reason the object is not fully transparent when opacity is set to 0.

GameObject CreateHighlight(GameObject gameObject)
    {
        GameObject highlight = Instantiate(gameObject);
        Destroy(highlight.GetComponent<Rigidbody>());
        Destroy(highlight.GetComponent<MeshCollider>());
        Destroy(highlight.GetComponent<StayInside>());
        Destroy(highlight.GetComponent<ObjectControl>());

        // Change render mode to Transparent
        Material material = highlight.GetComponent<Renderer>().material;
        material.SetInt("_SrcBlend", (int)UnityEngine.Rendering.BlendMode.One);
        material.SetInt("_DstBlend", (int)UnityEngine.Rendering.BlendMode.OneMinusSrcAlpha);
        material.SetInt("_ZWrite", 0);
        material.DisableKeyword("_ALPHATEST_ON");
        material.DisableKeyword("_ALPHABLEND_ON");
        material.EnableKeyword("_ALPHAPREMULTIPLY_ON");
        material.renderQueue = 3000;
        // Change alpha to 0
        highlight.GetComponent<MeshRenderer>().material.color = new Color(1.0f, 1.0f, 1.0f, 0.0f);

        // Stop rendering the object because setting alpha to 0 does not make the object fully transparent
        highlight.GetComponent<MeshRenderer>().enabled = false;

        return highlight;
    }

I have stumbled upon this Reddit thread and the guy had the same problem as I did. He said he switched the rendering path from Deferred to Forward. I found somewhere one is supposed to change that setting in the MainCamera, so I did. Mine was set on Use Graphics Settings so I explicitly set it to Forward, but nothing changed.

Larper · January 9, 2021, 11:22am

OctangularPRISM Redditor saved the day on Reddit.

What he suggested was creating a new material, making it transparent and then in the code instantiating that material and applying it to the highlighted object instead of changing the rendering mode to Transparent as I tried.

Here are the steps in more detail:

I first created public Material matTransparentMat; as a public variable in my ObjectControl script. This means an additional menu to add a Material was created on all the objects that have the ObjectControl script.

Then, in the project window I created a new Material and made it transparent. You just go Right Click → Create → Material, and then choose the material and in the inspector press where it says Opaque and choose Transparent in the drop down menu, and then click the white color and change the alpha from 255 to 0.

Then, drag and drop that Material to the Mat Transparent Mat public variable in the editor.

Now, I changed the code which was changing the rendering mode to Transparent, to /u/OctangularPRISM’s code which will instantiate a new material and apply it to the copy of the object.

 public Material matTransparentMat;
 
 GameObject CreateHighlight(GameObject GO)
 {
 GameObject highlight = Instantiate(GO);
 Destroy(highlight.GetComponent<Rigidbody>());
 Destroy(highlight.GetComponent<MeshCollider>());
 Destroy(highlight.GetComponent<StayInside>());
 Destroy(highlight.GetComponent<ObjectControl>());
 
 Renderer targetRend = highlight.GetComponent<Renderer>();
 Renderer srcRend = GO.GetComponent<Renderer>();
 Material newMat = Instantiate(matTransparentMat);
 newMat.mainTexture = srcRend.material.mainTexture;
 targetRend.material = newMat;
 return highlight;
 }

Done!