Issue Setting Color of Thin Instance

Questions
1

How can I set the color of the thin instance while using this custom material to set the tile?

https://www.babylonjs-playground.com/#KWVY94#4

2

Also, how can I get this working when the texture is used for both diffuse and opacity?

https://www.babylonjs-playground.com/#KWVY94#6

Thanks

3

For the color part, I got it to green. https://www.babylonjs-playground.com/#KWVY94#7

There is a square character in line 52

4

I shouldve been more specific. I need to be able to color thin instances using the color attribute of the thin instance.

I think I need a different way of setting the uv offset, but my shaders skills are a bit lacking.

5

You can simply multiply baseColor by vColor:

https://www.babylonjs-playground.com/#KWVY94#8

1 Like
6

Thanks Evgeni. Is there a way to get that custom material to work when the texture is also set to the opacity texture?

https://www.babylonjs-playground.com/#KWVY94#9

7

Do I need add similar code to Fragment_Custom_Alpha?

8

This one is a little more involved because there’s no simple way to inject some code just after the alpha texture has been sampled.

You can use a feature that allows to tamper with the shader source code just before it is sent to the GPU to replace the alpha sampling code by your own (lines 51-64):

https://www.babylonjs-playground.com/#KWVY94#10

You can also write your own shader with ShaderMaterial but it’s even more involved.

You could also write a node material in the NME, using for eg uv2 to hold tileOffset.

1 Like
9

Man, you are a wizard. Thanks!

10

I think I need to use ShaderMaterial to make this work with the opacity texture. The solution above isn’t working on my older iPhone or Safari on mac mini. Anyone have an example that might be helpful?

11

After studying the solution some more I realized that texture() is not available in WebGL1. I fixed the issue by updating the solution to:

(<any>material)._saveCustomShaderNameResolve = material.customShaderNameResolve.bind(material);
        material.customShaderNameResolve = function(shaderName, uniforms, uniformBuffers, samplers, defines, attributes, options) {
            options.processFinalCode = (type, code) => {
                if (type === "vertex") {
                    return code;
                }
                code = code.replace(
                    /vec4 opacityMap=texture2D\(opacitySampler,vOpacityUV\+uvOffset\);/,
                    "vec4 opacityMap=texture2D(opacitySampler,uvCoord);"
                );
                return code.replace(
                    /vec4 opacityMap=texture\(opacitySampler,vOpacityUV\+uvOffset\);/,
                    "vec4 opacityMap=texture(opacitySampler,uvCoord);"
                );
            };
            return (<any>material)._saveCustomShaderNameResolve(shaderName, uniforms, uniformBuffers, samplers, defines, attributes, options);
        }

Thanks again @Evgeni_Popov

1 Like