PixiJS 5.3.7

tiling sprite bleeding

by realhunts

HTML

<script src="https://pixijs.download/v6.2.2/pixi.js"></script>
<script src="https://rawcdn.githack.com/pixijs/examples/main/pixi-plugins/pixi-lights.js"></script>
<canvas id="pen-canvas"></canvas>

<img id="img-base64" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIBAMAAAA2IaO4AAAAGFBMVEUIFB4PKj8gOU/21r3Do4qZdXeBYnFOSV+z+1yeAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB+MKDQwmCs7PkK4AAAAdaVRYdENvbW1lbnQAAAAAAENyZWF0ZWQgd2l0aCBHSU1QZC5lBwAAABhJREFUCNdjMAYCBlcgYAgBAgZWIGDAAgBm7gNFyeujBAAAAABJRU5ErkJggg==" />

CSS

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#pen-canvas{
	width: 100%;
	image-rendering: pixelated;
	    position: fixed;
}

#img-base64{	
 position: fixed;
    left: 400px;
    top: 240px;
		    width: 67px;
    image-rendering: pixelated;
}

JavaScript

const imageBase64 = document.querySelector('#img-base64')

const app = new PIXI.Application({
antialias: false,
width:400,
height:400,
  view: document.getElementById("pen-canvas"),
});

const stage = app.stage;// = new PIXI.display.Stage();
const light = new PIXI.lights.PointLight(0xffffff, 1);

stage.addChild(new PIXI.display.Layer(PIXI.lights.diffuseGroup));
stage.addChild(new PIXI.display.Layer(PIXI.lights.normalGroup));
stage.addChild(new PIXI.display.Layer(PIXI.lights.lightGroup));

function createPair(diffuseTex, normalTex) {
    const container = new PIXI.Container();
    /* const diffuseSprite = new PIXI.Sprite(diffuseTex);
    diffuseSprite.parentGroup = PIXI.lights.diffuseGroup;
    const normalSprite = new PIXI.Sprite(normalTex);
    normalSprite.parentGroup = PIXI.lights.normalGroup;
    container.addChild(diffuseSprite);
    container.addChild(normalSprite); */
    return container;
}
const loader = PIXI.Loader.shared;

  loader.add('bg_diffuse', 'https://cdn.glitch.global/5f213d13-58a7-413c-8b35-1581eda02451/wall0.jpg?v=1645590932127').add('bg_normal', 'https://cdn.glitch.global/5f213d13-58a7-413c-8b35-1581eda02451/NormalMap%20(6).png?v=1645591261961')
        
  
        loader.load((loader, resources) =>{  
         
       

            const backgroundg = createPair(resources.bg_diffuse.texture, resources.bg_normal.texture);
          
         })
/*PIXI.settings.ROUND_PIXELS = true;
PIXI.settings.PRECISION_FRAGMENT = PIXI.PRECISION.HIGH;
 */