New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CanvasMeshRenderer: display list transparency bug #4534

Closed
kvint opened this Issue Dec 13, 2017 · 5 comments

Comments

Projects
None yet
3 participants
@kvint
Copy link

kvint commented Dec 13, 2017

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.
preview

@kvint

This comment has been minimized.

Copy link

kvint commented Dec 13, 2017

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

@ivanpopelyshev

This comment has been minimized.

Copy link
Member

ivanpopelyshev commented Dec 13, 2017

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);
        }
    }
@kvint

This comment has been minimized.

Copy link

kvint commented Dec 13, 2017

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

UPD: Solved! Thanks a lot.

@bigtimebuddy

This comment has been minimized.

Copy link
Member

bigtimebuddy commented Dec 13, 2017

@ivanpopelyshev: maybe PR for this?

ivanpopelyshev added a commit that referenced this issue Dec 13, 2017

@ivanpopelyshev

This comment has been minimized.

Copy link
Member

ivanpopelyshev commented Dec 13, 2017

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

bigtimebuddy added a commit that referenced this issue Dec 14, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment