pixi.js Can I access not premultiply color from renderer's shader

[Mutsu]

I'm using pixi.js ver 4.8.2.

I want access not premultiply color from renderer's shader in pixi.js application.

I set transparent is 'notMultiplied' , but I can olny access premultipilied rgb color...

Is there way to access not multiplied color ?

I put code and result here.

            // init with not multiply mode 
            var app = new PIXI.Application(800, 600, {
                backgroundColor : 0xcccccc,
                transparent: 'notMultiplied'
            });
            document.body.appendChild(app.view);

            // draw circle graphics with red and alpha 0.5 ( drawn at display left )
            var graphic = new PIXI.Graphics();
            graphic.alpha = 0.5;
            graphic.beginFill(0xff0000);
            graphic.drawCircle(100,100,100);
            graphic.endFill();
            app.stage.addChild(graphic);

            // use graphics as a texture ( drawn at display right )
            var mesh = new PIXI.mesh.Mesh( graphic.generateCanvasTexture() );
            mesh.position.set(300,100);
            app.stage.addChild(mesh);

            // replace MeshRenderer shader for test premultiply effect
            app.renderer.plugins.mesh.shader = new PIXI.Shader(
                app.renderer.gl,
                // vertex shader is same as original MeshRender's one
                ` 
                    attribute vec2 aVertexPosition;
                    attribute vec2 aTextureCoord;

                    uniform mat3 projectionMatrix;
                    uniform mat3 translationMatrix;
                    uniform mat3 uTransform;

                    varying vec2 vTextureCoord;

                    void main(void) {
                        gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
                        vTextureCoord = (uTransform * vec3(aTextureCoord, 1.0)).xy;
                    }
                `,

                // I changed change fragment shader for test
                `
                    varying vec2 vTextureCoord;
                    uniform vec4 uColor;
                    uniform sampler2D uSampler;

                    void main(void) {
                        //gl_FragColor = texture2D(uSampler, vTextureCoord) * uColor; <- remove
                        gl_FragColor = vec4(texture2D(uSampler, vTextureCoord).rgb, 1.0); 
                    }
                `
            );

            // render graphics and mesh.
            app.render();

 

The execution result 

 

Ideal result is like this. 

[ivan.popelyshev]

You can upload non-premultiplied version instead, but that will require hacking pixi TextureManager. It will be easier in future versions (v5.0.0-alpha3). 

The easiest approach is to add line "if (color.a>0) { color.rgb /= color.a }" in the shader.

[Mutsu]

46 minutes ago, ivan.popelyshev said:

You can upload non-premultiplied version instead, but that will require hacking pixi TextureManager. It will be easier in future versions (v5.0.0-alpha3). 

The easiest approach is to add line "if (color.a>0) { color.rgb /= color.a }" in the shader.

Thank you for your answer!!

I understand pixi.js officialy attach premultiplied texture to shader.

I develop with typescript so I can't use v5 yet. (I can't found definition file of v5)

I already tried your easiest approach, it's good for display. But if use texture for GPGPU, it's become precision is lower and I can't use it for GPGPU.

" You can upload non-premultiplied version instead, but that will require hacking pixi TextureManager." means there is way to using non-premultiplied texture if I hack TextureManager of "v4.8.2" ?

[Mutsu]

I edit TextureManager.js

from 

glTexture.premultiplyAlpha = true;

to

glTexture.premultiplyAlpha = false;

and I can get ideal texture.

Thanks.

[ivan.popelyshev]

Pixi v4 supports non-premultiplied-alpha in sprites, it changes blendMode automatically. I hope that you know that it will screw the "LINEAR" scaleMode, apply it to texture that you want. Take that flag from baseTexture or something like that.