TextLayer fragment shader override not working in v9

[ioanis]

Hi, I'm using a textlayer where I'm overriding the _TextBackgroundLayer fragment shader, in order to have rounded corners on the text background. The example code I used can be found in the following codepen which works fine on versions 8.x, but breaks on v9

After updating to v9, the visualization breaks (the background won't render at all) and i'm getting the following error
Error during linking: Fragment shader is not compiled

Could you provide an updated example on how to achieve rounded corners on the TextLayer background using v9?
Thanks in advance!

[Pessimistress]

All v9 shaders have been updated to use glsl es 300, so gl_FragColor is no longer the shader output.

You can set luma.log.level = 1 to see the compilation error.

[ioanis]

Thank you for the swift reply!
I know that this is probably not the place to troubleshoot this, but since I'm very new to GLSL (this is the first time I ever had to do something like this) I'd appreciate any additional pointers.

From what I've read, the default output variables like gl_FragColor have been removed in GLSL 300 and I need to declare my own
So I updated the example and here's what I did:

• I've declared out vec4 fragColor in the fs:#decl block
• I've renamed gl_FragColor to fragColor in the fs:#main-end block.

I must be missing something, because the background still won't render and the compilation error I'm getting from luma is the following:
ERROR: 'fragColor' : must explicitly specify all locations when using multiple fragment outputs

[ibgreen]

Looks like you have multiple output declarations from your fragment shader.

Since you are just adding to an existing shader I don't think you have to (re)declare out vec4 fragColor that would be the default fragment color declaration most luma.gl shaders.

[ioanis]

Thank you both! It worked when I removed the declaration out vec4 fragColor