Search the Community

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.