Siddi

Compressed textures bleeding edges

Recommended Posts

Hi,

I am using PixiJS version 5.2.0 with the compressed-textures plugin version 2.0.3:

If two dds-images are placed directly next to each other in a container and the container is scaled, a thin strip appears between the two images:

image.thumb.png.b6d4774c22bd773934a770c88a0fadc2.png

If the scale of the parent container is exactly 1, no stroke is visible. With PixiJS 4.8.8 and compressed-textures-plugin 1.1.8 it works correctly and no stroke is visible. When the PixiJS scale mode is set to nearest (PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST) no stroke is visible (but the images becomes a little bit blurry). I suspect this is related to the interpolation constraint of the scale mode LINEAR, but I'm not sure if this is a PixiJS problem or a compressed-textures-plugin problem ...

This is the complete code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>PixiJS v5 Compressed Textures Bleeding</title>
        <script src="https://cdn.jsdelivr.net/npm/pixi.js@5.2.0/dist/pixi.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/pixi-compressed-textures@2.0.3/dist/pixi-compressed-textures.min.js"></script>
    </head>
    <body>
        <script>
            //PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST
            
            const app = new PIXI.Application({
                width: 1024,
                height: 512
            })
            document.body.appendChild(app.view)

            new PIXI.Loader()
                .add('photo1', './1.dds')
                .add('photo2', './2.dds')
                .load((loaderInstance, resources) => {
                    const sprite1 = new PIXI.Sprite(resources.photo1.texture)
                    const sprite2 = new PIXI.Sprite(resources.photo2.texture)
                    sprite1.width = sprite1.height = sprite2.width = sprite2.height = 512
                    sprite2.x = 512
                    app.stage.addChild(sprite1, sprite2)
                
                    app.stage.scale.set(.8, .8)
                })
        </script>
    </body>
</html>

 

Has anyone a good idea?

Siddi

Share this post


Link to post
Share on other sites

Unfortunately both the global setting of WRAP_MODE and the setting of WRAP_MODE on a texture have no effect:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>PixiJS v5 Compressed Textures Bleeding</title>
        <script src="https://cdn.jsdelivr.net/npm/pixi.js@5.2.0/dist/pixi.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/pixi-compressed-textures@2.0.3/dist/pixi-compressed-textures.min.js"></script>
    </head>
    <body>
        <script>
            //PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST
            PIXI.settings.WRAP_MODE = PIXI.WRAP_MODES.CLAMP
            
            const app = new PIXI.Application({
                width: 1024,
                height: 512
            })
            document.body.appendChild(app.view)

            new PIXI.Loader()
                .add('photo1', './1.dds')
                .add('photo2', './2.dds')
                .load((loaderInstance, resources) => {
                    const texture1 = resources.photo1.texture
                    const texture2 = resources.photo2.texture
                    texture1.baseTexture.wrapMode = PIXI.WRAP_MODES.CLAMP
                    texture2.baseTexture.wrapMode = PIXI.WRAP_MODES.CLAMP
                    const sprite1 = new PIXI.Sprite(texture1)
                    const sprite2 = new PIXI.Sprite(texture2)
                    sprite1.width = sprite1.height = sprite2.width = sprite2.height = 512
                    sprite2.x = 512
                    app.stage.addChild(sprite1, sprite2)
                
                    app.stage.scale.set(.8, .8)
                })
        </script>
    </body>
</html>

 

Edited by Siddi

Share this post


Link to post
Share on other sites

If I do not use the compressed-texture-plugin, but only PixiJS version 5 and use png files instead of the dds files, the problem does not occur.

image.thumb.png.1a27b95bbf7cad12384e7a7d1fafdec2.png

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>PixiJS v5 Compressed Textures Bleeding</title>
        <script src="https://cdn.jsdelivr.net/npm/pixi.js@5.2.0/dist/pixi.js"></script>
    </head>
    <body>
        <script>
            const app = new PIXI.Application({
                width: 1024,
                height: 512
            })
            document.body.appendChild(app.view)

            new PIXI.Loader()
                .add('photo1', './1.png')
                .add('photo2', './2.png')
                .load((loaderInstance, resources) => {
                    const texture1 = resources.photo1.texture
                    const texture2 = resources.photo2.texture
                    const sprite1 = new PIXI.Sprite(texture1)
                    const sprite2 = new PIXI.Sprite(texture2)
                    sprite1.width = sprite1.height = sprite2.width = sprite2.height = 512
                    sprite2.x = 512
                    app.stage.addChild(sprite1, sprite2)
                
                    app.stage.scale.set(.8, .8)
                })
        </script>
    </body>
</html>

 

Share this post


Link to post
Share on other sites

Congratulations, you've found a bug!

https://github.com/pixijs/pixi-compressed-textures/blob/6fa56acaa6a98863f3f00bdf2ed2be16f864f42d/src/CompressedImage.ts#L125 - compressed textures didnt handle CLAMP/REPEAT at all :)

Edited by ivan.popelyshev

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.