CanvasMeshRenderer: display list transparency bug

[slavshik]

Hello there!

Looks like mesh on canvas inherits transparency from previously drawn sprite and can't be changed separately (works fine on WebGL though).

Can be reproduced on http://pixijs.io/examples/#/basics/textured-mesh.js

1. add forceCanvas: true into application
2. put some transparent object under the mesh:

var alphSprite = PIXI.Sprite.from(PIXI.Texture.fromImage('required/assets/snake.png'))
alphSprite.alpha = 0.5;
app.stage.addChild(alphSprite);
app.stage.addChild(strip); // mesh object (Plane or Rope)

As a result: the mesh becomes transparent as a sprite underneath.

[slavshik]

Have any workarounds on this? Sorry if it's wrong place to ask.

[ivanpopelyshev]

Seems like a bug.

https://github.com/pixijs/pixi.js/blob/dev/src/mesh/canvas/CanvasMeshRenderer.js#L28 It doesnt set alpha.

We need to add context.globalAlpha = (mesh.worldAlpha somewhere.

Workaround, just add it somewhere in your files:

PIXI.mesh.CanvasMeshRenderer.prototype.render = function(mesh)
    {
        var renderer = this.renderer;
        var context = renderer.context;

        var transform = mesh.worldTransform;
        var res = renderer.resolution;

        if (renderer.roundPixels)
        {
            context.setTransform(
                transform.a * res,
                transform.b * res,
                transform.c * res,
                transform.d * res,
                (transform.tx * res) | 0,
                (transform.ty * res) | 0
            );
        }
        else
        {
            context.setTransform(
                transform.a * res,
                transform.b * res,
                transform.c * res,
                transform.d * res,
                transform.tx * res,
                transform.ty * res
            );
        }

        renderer.setBlendMode(mesh.blendMode);
        context.globalAlpha = mesh.worldAlpha;

        if (mesh.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH)
        {
            this._renderTriangleMesh(mesh);
        }
        else
        {
            this._renderTriangles(mesh);
        }
    }

[slavshik]

Wow, thanks a lot. I'll give it a try

UPD: Solved! Thanks a lot.

[bigtimebuddy]

@ivanpopelyshev: maybe PR for this?

[ivanpopelyshev]

Try this one: pixijs.download/fix-canvas-mesh-alpha/pixi.js

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.