Color Replace Filter

[ashenemy]

Hello
I'm trying to make a filter to replace the color in the image
Color replacement is fine here is an example

private _createColorFilter(shaderTexture, materialTexture) {
        const uniforms = {
            uTextureOne: {
                type: 'f',
                value: 0.1
            },
            uTextureTwo: {
                type: 'sampler2D',
                value : shaderTexture
            }
        };

        const shaderCode = `
            varying vec2 vTextureCoord;
            varying vec4 vColor;
            uniform sampler2D uTextureOne;
            uniform float customUniform;
            
            void main(){
                vec4 one = texture2D(uTextureOne, vTextureCoord);
               
                float percent = (one.r-one.g)/255.0;
                one.r = one.r + (254.0 - 255.0)*percent;
                one.g = one.g + 255.0 * percent;
                one.b = one.b + 47.0 * percent;
            
                gl_FragColor = one;
            }`;
        return new PIXI.Filter('', shaderCode, uniforms);
    }

I want to implement the same effect but now with the use of texture colors
Logically, I need to take the color from the texture and according to my algorithm, change it to suit the tone

But, does not go (((

private _createColorFilter(shaderTexture, materialTexture) {
        const uniforms = {
            uTextureOne: {
                type: 'f',
                value: 0.1
            },
            uTextureTwo: {
                type: 'sampler2D',
                value : shaderTexture
            }
        };

        const shaderCode = `
            varying vec2 vTextureCoord;
            varying vec4 vColor;
            uniform sampler2D uTextureOne;
            uniform sampler2D uTextureTwo;
            uniform float customUniform;
            
            void main(){
                vec4 one = texture2D(uTextureOne, vTextureCoord);
                var4 two = texture2D(uTextureTwo, vTextureCoord);
                float percent = (one.r-one.g)/255.0;
                one.r = one.r + (two.r - 255.0)*percent;
                one.g = one.g + two.g * percent;
                one.b = one.b + two.b * percent;
            
                gl_FragColor = one;
            }`;
        return new PIXI.Filter('', shaderCode, uniforms);

Color turns black

elp me please

[ivan.popelyshev]

texture2D returns normalized values, between 0.0 and 1.0, Also you are using filter but i dont see any samplers related to whatever you put in container that is filtered. Do you know the difference between a filter and renderer plugin?

[ashenemy]

thanks for your reply
I'm just beginning to study
Therefore, I may be wrong in something
Briefly,

const stage = new PIXI.Container();
        for (const component of this._carClass.activeComponents) {
            if (component.materials[component.currentSetMaterial]) {
                for (const frameItem of component.materials[component.currentSetMaterial].files) {
                    if (frameItem.index === frame && frameItem.camera === 0) {
                        if (frameItem.sprite) {
                            const addStage = frameItem.sprite;
                            addStage.x = frameItem.x;
                            addStage.y = frameItem.y;

                            stage.addChild(addStage);
                        }

                    }
                }
            }
        }
        const filter = this._createColorFilter(this._texture, '');
        stage.filters = [filter];
        this.app.render(stage);

Already existing texture

 let loader = new PIXI.loaders.Loader();

        loader.add('one', 'http://localhost:4200/RM3FqethC.jpg');
        loader.load(() => {
            this._texture = loader.resources['one'].texture;
        });

About the difference is not quite understood.
If it does not complicate you, can you elaborate more? or tell me where you can read about it.
Sorry for bothering.

[ivan.popelyshev]

stage has no elements and has zero area. filter will be applied to zero area.

If you want to make a custom renderer for a sprite take a look at https://github.com/pixijs/pixi-plugin-example

If you want more on filters, look at 1) filter examples 2) https://github.com/pixijs/pixi.js/wiki/v4-Creating-Filters

In any case, its not easy. Prepare for difficulties  It will take time to understand pixi architecture for that thing, but its still better than writing everything on your own.

Start with something simpler than color replace, dont use extra textures.

[ashenemy]

Yes, you were right
It is quite difficult
Can give directions on my task? How to do it better?
just do not understand why I get black as a result ((

[ivan.popelyshev]

Take something htat works and start changing it. https://pixijs.io/examples/#/filters/filter-mouse.js for starting filter.

[ashenemy]

4 minutes ago, ivan.popelyshev said:

Take something htat works and start changing it. https://pixijs.io/examples/#/filters/filter-mouse.js for starting filter.

I'm sorry to bother you,
I tried to start from scratch. to understand the whole process that occurs
if possible, help in this matter please, this will be a starting point for me
I do not understand what I'm doing wrong
See
I draw a box
this add a filter that takes 2 textures, and should kind of paint the box in the colors of one of them

 const box = new PIXI.Graphics();
                            box.width = frameItem.width;
                            box.height = frameItem.height;
                            box.x = frameItem.x;
                            box.y = frameItem.y;
                            if (this._texture) {
                                const filter = this._createColorFilter(this._texture, frameItem.texture);
                                box.filters = [filter];
                            }

                            stage.addChild(box);

 private _createColorFilter(texture1, texture2) {
        const uniforms = {
            uTextureOne: texture1,
            uTextureTwo: texture2
        };
        const shaderCode = `
            varying vec2 vTextureCoord;
		    
		    uniform sampler2D uTextureOne;
		    uniform sampler2D uTextureTwo;
            void main(){
                vec4 one = texture2D(uTextureOne, vTextureCoord);
                gl_FragColor = one;
            }
            `;
        return new PIXI.Filter('', shaderCode, uniforms);

I just can not understand why this happens

[ivan.popelyshev]

It should work.

[ivan.popelyshev]

First param should be undefined, not ''.

[ashenemy]

On 6/16/2018 at 10:44 PM, ivan.popelyshev said:

First param should be undefined, not ''.

Thany very match.

Can I ask you one more question?

this.app = new PIXI.Application({
            width: this._carClass.carData.size.width,
            height: this._carClass.carData.size.height,
            transparent: true,
            antialias: true,
            preserveDrawingBuffer: false,
            renderer: new PIXI.WebGLRenderer( this._carClass.carData.size.width, this._carClass.carData.size.height)
        });

In this case, the filters do not work, although the WEBGL Renderer

[ivan.popelyshev]

It should work. Give me more info.

[ashenemy]

On 6/19/2018 at 3:03 AM, ivan.popelyshev said:

It should work. Give me more info.

Excuse me, I was wrong.
thank you for your help