[SOLVED] Color to Texture transition

Changing color using tween library was quite simple but what I need to do is changing color to texture, Like solid blue to a texture without making the material look transparent in between
Is there anyway to do that using material or shader?

Hi @AnasRahim,

Not sure if it can be done without a shader, here is my take by overriding the diffuse chunk:

const ColorChange = pc.createScript('colorChange');

// initialize code called once per entity
ColorChange.prototype.initialize = function() {
    const material = this.entity.model.material;

    material.chunks.diffusePS = 
        'uniform vec3 material_diffuse;\n'+
        'uniform sampler2D texture_diffuseMap;\n'+
        'uniform float transitionState;\n'+
        'void getAlbedo() {\n'+
        '    vec3 tintColor = material_diffuse.rgb;\n'+
        '    vec3 textureColor = gammaCorrectInput(addAlbedoDetail(texture2D(texture_diffuseMap, $UV).$CH));\n'+
        '    dAlbedo = mix(tintColor, textureColor, transitionState);\n'+
    const data = { state: 0 };

        .to({state: 1}, 3.0, pc.Linear)
        .on('update', function () {
            material.setParameter('transitionState', pc.math.clamp(data.state, 0.0, 1.0));

And an example project:


Sorry for the late reply but this worked perfectly, Thank you so much!

1 Like