Siddi Posted January 21, 2020 Share Posted January 21, 2020 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: 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/[email protected]/dist/pixi.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/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 ivan.popelyshev 1 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted January 21, 2020 Share Posted January 21, 2020 (edited) you guessed right, its related to texture options. Its about REPEAT Switch it off. "baseTexture.wrapMode = PIXI.WRAP_MODES.CLAMP" with LINEAR, edge pixels when scaled are interpolated with pixels from opposite edge. Edited January 21, 2020 by ivan.popelyshev Quote Link to comment Share on other sites More sharing options...
Siddi Posted January 21, 2020 Author Share Posted January 21, 2020 (edited) 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/[email protected]/dist/pixi.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/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 January 21, 2020 by Siddi Quote Link to comment Share on other sites More sharing options...
Siddi Posted January 22, 2020 Author Share Posted January 22, 2020 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. <!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/[email protected]/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> Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted January 22, 2020 Share Posted January 22, 2020 > Unfortunately both the global setting of WRAP_MODE and the setting of WRAP_MODE on a texture have no effect: It should work. At this point i have to ask you to send me your demo. Quote Link to comment Share on other sites More sharing options...
Siddi Posted January 22, 2020 Author Share Posted January 22, 2020 This is the whole application, just one html file plus two dds-files: dds-demo.zip ivan.popelyshev 1 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted January 22, 2020 Share Posted January 22, 2020 (edited) 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 January 22, 2020 by ivan.popelyshev Siddi 1 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted January 22, 2020 Share Posted January 22, 2020 OK, done, npm 2.0.5 , or "dist" folder of the repo. Siddi 1 Quote Link to comment Share on other sites More sharing options...
Siddi Posted January 22, 2020 Author Share Posted January 22, 2020 (edited) Cool, thank you very much. Works perfect!! Edited January 22, 2020 by Siddi Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.