How to Fix Mask Element Pixelation

Help & Support
1

image
image1671×930 162 KB

Is there any way to prevent this pixelation when using mask elements, I use skewed shape texture in Parent Mask Element and That Gradient Texture as child as background

2

Anyone ???

3

Can you use alpha transparency instead of masking?

4

Thanks for replying @mvaligursky , did you mean to use a material ?

image
image1561×928 70.8 KB

yeah it’s much better, but one thing it looks a bit darky, is there way to fix that too, if so that will be perfect !

5

I wonder if you need to set gamma / sRGB flag on that texture - check the settings on that texture.

6

sRGB is true, btw I found other method not 100% perfect

if (!pc.ImageElement.prototype._originalUpdateMesh) {
    pc.ImageElement.prototype._originalUpdateMesh = pc.ImageElement.prototype._updateMesh;

    pc.ImageElement.prototype._updateMesh = function (mesh) {
        this._originalUpdateMesh(mesh);

        if (this._element && this._element.entity && this._element.entity.script && this._element.entity.script.skewImage) {
            if (!this.sprite || (this.sprite.renderMode !== pc.SPRITE_RENDERMODE_SLICED && this.sprite.renderMode !== pc.SPRITE_RENDERMODE_TILED)) {
                const skew = this._element.entity.script.skewImage.skewAmount || 0;

                const vb = mesh.vertexBuffer;
                const vertexDataF32 = new Float32Array(vb.lock());

                vertexDataF32[8] += skew;
                vertexDataF32[24] += skew;

                vb.unlock();
            }
        }
    };
}

this._element.entity.script.skewImage will store and set skew amount

don’t know what are the edge causes but for now this is fine