Jump to content

Can I access not premultiply color from renderer's shader


Recommended Posts

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'

            // draw circle graphics with red and alpha 0.5 ( drawn at display left )
            var graphic = new PIXI.Graphics();
            graphic.alpha = 0.5;

            // use graphics as a texture ( drawn at display right )
            var mesh = new PIXI.mesh.Mesh( graphic.generateCanvasTexture() );

            // replace MeshRenderer shader for test premultiply effect
            app.renderer.plugins.mesh.shader = new PIXI.Shader(
                // 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.


The execution result 



Ideal result is like this. 


Link to comment
Share on other sites

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" ?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...