Using RGB channels with Spine-Widget / WebGL

tehdoctor

Hello,

We are making a character customizer using the experimental spine-widget located on this branch.
EsotericSoftware/spine-runtimestree/ts-webgl-overlay

Coming from a game development background (Unity and Unreal primarily) I am fairly familiar with the concept of using RGB channels for layering multiple custom color selection channels to be split out by a shader that can then multiply each unique channel by a color that we feed in. I know we will likely have to modify the spine runtime on our own to accomplish this and it is something I had to do a few years ago on a different Unity project with Spine funnily enough.

I just wanted to see if anyone had any knowledge on where best to look for this in a web setting since it is a bit more of an experimental branch of the webgl runtime that I know isn't officially released yet.

Thank you for all your help

Brandon

Davide

tehdoctor

Hello Brandon and welcome to our forum 🙂

If you just want to multiply a colors, you can use the skeleton.color. Just access the skeleton and use the set method of color: skeleton.color.set(1, 0, 0, 1) to color the skeleton in red.

If this is not enough, currently there is no clean method to customize the shader since all accessors to the instantiated shader are private.
The only thing you can do is to monkey patch the shader used by the widget.

Before the widget is initialized you can do something like this:

const myShader = (context: ManagedWebGLRenderingContext | WebGLRenderingContext): Shader => new Shader(context, vs, fs);
Shader.newTwoColoredTextured = myShader;

However, you cannot pass additional attributes/uniforms since there's no way to provide them later.

Mario

@Davide Sounds like a nice feature request to me 🙂 While making vertex attributes customizable would be challenging, making shaders + uniform access customizable seems straight forward.

tehdoctor

Ok awesome! Thank you both for the quick response! Will keep you updated with any progress I make on this.

I will probably need some way of finding a way to bring that to a public accessor or re-instantiate the spine skeleton upon a color change. I think that should be a rare occurrence though that only really happens during the "Character customization" stage not something that happens frequently.

To give you full context on the scope of what we are trying to do, imagine the mix and match template but for each of the attachments, users can customize 3 colors based on what we bake into the red green and blue channels of the textures.

Thanks again for your help!

Davide

tehdoctor

To give you full context on the scope of what we are trying to do, imagine the mix and match template but for each of the attachments, users can customize 3 colors based on what we bake into the red green and blue channels of the textures.

I'm sorry, but I didn't understand what you meant. Can't you just select the desired attachments and change their color property based on the customized colors (or into their slots)?
Or you have a custom formula to determine the final color?

Mario

Indeed, what @Davide said should just work. No need to reinstantiate anything. Similarly, if you have a custom shader, just outfit it with uniforms and change the uniforms. No need to reinstantiate anything in that case either.

tehdoctor

Hello all,

Thanks for your help. We are making some progress on this, already have a working version in unity with the following shader code: (Overwrites texColor in frag)

#if defined(_USE_RGB)
float4 originalColor = texColor;

texColor.rgb = originalColor.r * _RedTint;
texColor.rgb += originalColor.g * _GreenTint;
texColor.rgb += originalColor.b * _BlueTint;
#endif

Another eng on my team who is much more familiar with WebGL has been plugging away at the web implementation and making some progress, we noticed you had started a new branch as well which I think we were able to take note for a jumpstart so I appreciate that! I will keep you updated on the progress on that front once we have something to note, but I think it looks pretty promising based on your suggestions!

===

The last piece of the puzzle here is integrating with the iOS library (Sorry if I should make a new thread, didnt want to spin up a bunch regarding the same topic) and I was able to add in the functionality I needed into your metal shader, however I noticed it looks like since the iOS library is more of just a thin wrapper around your C++ library, it doesn't actually look like it is really possible to split out custom shader parameters on a per skin attachment (think a mix and match piece/backpack/etc) and instead the entire skeleton shares a single metal shader. I could probably tinker with modifying the C++ to add in the functionality I needed and have it so it would split out a custom Metal shader per attachment, but actually I feel like this would be the wrong solution if the end goal here is Optimization by texture packing and might actually cause an overall net performance loss.

Thanks again!