[SOLVED] Color to Texture transition

Help & Support
1

https://playcanvas.com/editor/scene/1196187
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?

2

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'+
        '\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'+
        '}';
    material.update();    
        
    const data = { state: 0 };

    this.app
        .tween(data)
        .to({state: 1}, 3.0, pc.Linear)
        .loop(true)
        .yoyo(true)
        .on('update', function () {
            material.setParameter('transitionState', pc.math.clamp(data.state, 0.0, 1.0));
        })    
        .start();
};

And an example project:
https://playcanvas.com/editor/scene/1196195

5 Likes
3

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

1 Like