HTML materials are not rendered on a transparent white background

[TimGoll]

When adding SVG support to generate dynamic materials in GMod I ran into an issue with html materials. While it is working to generate materials with mipmapping, html elements render these on a transparent black background.

Here's some theory on the issue: https://www.adriancourreges.com/blog/2017/05/09/beware-of-transparent-pixels/

This is how my code is basically working:

• I create a DHTML with visibility set to false where I render a svg and update the HTML element: :UpdateHTMLTexture()
• I then extract the panel material with GetHTMLMaterial and store the result in a table
• My custom mipmapping is not important here
• when rendering, I chose the icon with the size that is closest to the required size, push the filter, render the icon in the desired size (that might be smaller than the actual icon size) and then pop the filter

The result can be seen here:

1. rendered from an external vtf material where I made sure that the background is transparent white:
2. rendered from an svg:
3. Image rendered with a html body background color does not have the described artifacts, supporting my assumption:

As you can see the svg has a hint of a black outline. This is most likely due to the background being rgba(0,0,0,0) which sounds fine on first though, but actaully should be rgba(255,255,255,0)

Current state of the svg renderer: https://github.com/TTT-2/TTT2/blob/541390f14a9e4cd5068971a71d101f74a8def1e2/lua/ttt2/libraries/svg.lua

[robotboy655]

Have you tried testing x86-64 beta vs no beta?

[TimGoll]

Have you tried testing x86-64 beta vs no beta?

no I only used the main branch, so I should give the 64bit beta a try?

[robotboy655]

Yeah

[TimGoll]

Hm, I tried the 64 bit version of GMod and then TTT2 and all its addons are so broken nothing works at all. So I can't test it I guess

[TimGoll]

I just verified that the same TTT2 branch ist working perfectly fine in the normal GMod version. I tested x64 and Garrys Mod in the x86_x64 beta branch. Do I have to switch the server to the same branch as well? Because I kept the main release version on the server

[TimGoll]

tested it with beta server and beta client, still not working. Not even ulx is working. I'm a bit lost right now - is this a known problem?

[robotboy655]

It is generally helpful to post errors that you are getting, but I will try running your gamemode myself.

[TimGoll]

It is generally helpful to post errors that you are getting, but I will try running your gamemode myself.

These aren't helpful, they are all TTT2 related, most of them are because something is nil that shouldn't be nil. I asked on our discord and there are quite a few people using the 64bit branch. So the issue seems to be on my side. I will try to find a solution. But thank you!

[TimGoll]

Further investigation shows that our gamemode is indeed working in the 64 bit branch, but my svg branch does not work. I will try to get to the bottom of the issue and report back

[TimGoll]

I guess this has something to do with the chromium update? But it seems like it is an issue in GMod itself.

local function GenerateHTMLElement(width, height, padding, strSVG)
    -- make sure svg file has opening and closing tag
    local open = stringFind(strSVG, "<svg%s(.-)>")
    local _, close = stringFind(strSVG, "</svg>%s*$")

    if not open or not close then return end

    strSVG = stringSub(strSVG, open, close)

    -- todo make sure that the svg size in combination witht the padding works here
    strSVG = SetIfEmpty(strSVG, "width='(.-)'", 5, "width='' ")
    strSVG = SetIfEmpty(strSVG, "height='(.-)'", 5, "height='' ")

    strSVG = stringGSub(strSVG, "width='(.-)'", "width='" .. width - 2 * padding .. "'")
    strSVG = stringGSub(strSVG, "height='(.-)'", "height='" .. height - 2 * padding .. "'")

    local htmlElement = vgui.Create("DHTML")
    htmlElement:SetVisible(false)
    htmlElement:SetSize(width, height)
    htmlElement:SetHTML(stringFormat(svgTemplate, padding, strSVG))

    return htmlElement
end

local function GenerateHTMLMaterial(width, height, padding, strSVG)
    width = math.floor(width)
    height = math.floor(height)

    local htmlElement = GenerateHTMLElement(width, height, padding, strSVG)

    if not htmlElement then return end

    -- the HTML element texture has to be updated once to generate a material
    htmlElement:UpdateHTMLTexture()

    -- then the material can be extracted from the HTML element
    local materialInternal = htmlElement:GetHTMLMaterial()
    local material = SetupMaterial(materialInternal:GetName(), width, height)

    --htmlElement:Remove()

    return material
end

This works in the GMod main release. In the 64 brach it throws the following error:

[ttt2] addons/ttt2/lua/ttt2/libraries/svg.lua:111: attempt to index local 'materialInternal' (a nil value)
  1. GenerateHTMLMaterial - addons/ttt2/lua/ttt2/libraries/svg.lua:111
   2. CreateSVGMaterial - addons/ttt2/lua/ttt2/libraries/svg.lua:144
    3. SetupData - addons/ttt2/lua/ttt2/libraries/roles.lua:165
     4. OnLoaded - addons/ttt2/lua/ttt2/libraries/roles.lua:242
      5. Run - addons/ttt2/gamemodes/terrortown/gamemode/shared/sh_main.lua:163
       6. unknown - addons/ttt2/gamemodes/terrortown/gamemode/client/cl_main.lua:153

This means that GetHTMLMaterial() returns nil, while it returns a material on the GMod Release branch.

[robotboy655]

Could it be that you are trying to run GetHTMLMaterial too early? Try waiting for https://wiki.facepunch.com/gmod/PANEL:OnDocumentReady or https://wiki.facepunch.com/gmod/Panel:OnFinishLoadingDocument

[TimGoll]

I can give it a try, thanks. Maybe this is the cause, but I want to note that my implementation does work on the main release