Material with a opacity map - strange white outlines

Help & Support
#1

Hello,
I have a problem with a material which uses a texture for it’s opacity map. I made a simple example and this the result (THERE IS A WHITE OUTLINE AROUND THE CIRCLE WHICH SHOULDN’T BE THERE):
image

There are two planes. One for the floor:

        let mat = new pc.StandardMaterial();
        mat.diffuse.set(0, 0, 0);
        mat.emissive.set(0.75, 1, 1);
        mat.useLighting = false;
        mat.update();

        let floor = new pc.Entity();
        floor.addComponent("mode", {
            type: "plane",
            material: mat
        });
        floor.setLocalScale(4, 1, 4);
        app.root.addChild(floor);

And one for the circle:

        mat = new pc.StandardMaterial();
        mat.blendType = pc.BLEND_NORMAL;
        mat.diffuse.set(0, 0, 0);
        mat.emissive.fromString("#99cccc");
        mat.opacityMap = texture;
        mat.useLighting = false;
        mat.update();

        let circle = new pc.Entity();
        circle.addComponent("model", {
            type: "plane",
            material: mat
        });
        circle.setPosition(0, 0.015, 0);
        circle.setLocalScale(0.75, 1, 0.75);
        app.root.addChild(circle);

The material for the circle use a texture as it’s opacity map. The texture is just a 64x64 black circle with smooth edge.

image

I do not use Playcanvas Editor. I use just the engine. If I do the same inside the editor, the white outline around the circle will disappear.

I tried to download the material from the editor and load it as an asset and use it instead of my own coded material, but the result is exactly the same.

This the result from the editor (as you can see there isn’t the white outline around the circle):
image

Does anybody know why there is a white outline around the circle? Thanks.

#2

it may be the model itself, see if that ring is not flat then let me know.

#3

The model is just a plane. The circle is drawn by the material.

#4

Can you share your engine repo for people to look at please?

#5

wait, is around the circle transparent? if not, then that white exists in the image itself.

#6

Hi Yaustar,

here is the repo: https://github.com/NokFrt/PlaycanvasMaterialOpacityMap. It’s written in Typescript but the example is super simple.

Running build is here: http://games.1-easysoft.com/opacityTest/

It seems to me that pixels in the source texture with alpha < 1 is blended with white color. But why?

#7

Currently looking at this. I’m in the Editor with the texture from the GitHub repo (thanks for that!) and I get the same white outline:

image
image1966×1032 148 KB

Edit: Ignore me, I was using the wrong diffuse texture.

#8

Okay, managed to replicated this in the Editor

image
image1834×1370 96.2 KB

It’s related to the canvas and clear colour of the camera. Still looking at the fix.

#9

Thank you for the efforts.
How did you manage to reproduce that in the Editor?

#10

I enabled the transparent canvas and changed the background colour of the body to white on the HTML document. We had a similar issue with another project where something similar happened. I also saw in Spector.js when I had transparent canvas enabled, this was rendered:

image
image1048×552 39.6 KB

Which meant that the background colour of the HTML was leaking through.

The fix is to change your app creation to the following:

        // Create the app and start the update loop
        let canvas = document.getElementById(canvasID) as HTMLCanvasElement;
        let app = new pc.Application(canvas, {
            graphicsDeviceOptions: {
                alpha: false
            }
        });

image
image1578×862 11.7 KB

1 Like
#11

Thank you very much.

#12

For reference, this is because canvas’ are transparent by default but PlayCanvas Editor options have it disabled by default and we have a darker body background colour which makes these issues less obvious.