# Sprites render pixels from cell next to it

**URL:** <https://forum.babylonjs.com/t/sprites-render-pixels-from-cell-next-to-it/53630>\
**Category:** Bugs\
**Tags:** sprite\
**Created:** [September 22, 2024, 1:05pm UTC](https://forum.babylonjs.com/t/sprites-render-pixels-from-cell-next-to-it/53630 "2024-09-22T13:05:34Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Terry\_Sznober](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/terry_sznober/32/19080_2.png) [@Terry\_Sznober](https://forum.babylonjs.com/u/Terry_Sznober)\
**Post date:** [September 22, 2024, 1:05pm UTC](https://forum.babylonjs.com/t/sprites-render-pixels-from-cell-next-to-it/53630/1 "2024-09-22T13:05:34Z")

</div>

There appears to be a rendering bug with sprites. It appears as though the sprite renderer is sampling pixels from the cell next to it. This is exhibited in all of the following documentation samples:

1. Sprites from different cells: [https://playground.babylonjs.com/#YCY2IL#3](https://playground.babylonjs.com/#YCY2IL#3)
2. Sprite animation: [https://playground.babylonjs.com/#YCY2IL#4](https://playground.babylonjs.com/#YCY2IL#4)
3. Slide show animation from JSON file: [https://playground.babylonjs.com/#YCY2IL#13](https://playground.babylonjs.com/#YCY2IL#13)
4. Pick And Rotate A Selected Sprite: [https://playground.babylonjs.com/#YCY2IL#9](https://playground.babylonjs.com/#YCY2IL#9)
5. Single Layer Sprite Map From A File: [https://playground.babylonjs.com/#YCY2IL#14](https://playground.babylonjs.com/#YCY2IL#14)
6. OutputSize Changes Size And Ratio Of Plane: [https://playground.babylonjs.com/#YCY2IL#17](https://playground.babylonjs.com/#YCY2IL#17)
7. Color Multipled By Red: [https://playground.babylonjs.com/#YCY2IL#19](https://playground.babylonjs.com/#YCY2IL#19)
8. Single Tile Animation: [https://playground.babylonjs.com/#YCY2IL#26](https://playground.babylonjs.com/#YCY2IL#26)
9. Far Distance Sprite Map: [https://playground.babylonjs.com/#YCY2IL#25](https://playground.babylonjs.com/#YCY2IL#25)

Here is a screenshot the bug in action:  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/6/5/65df0e6316057225f821384d40fd6c134fdf9720.png)

I was really hoping to use Babylon for a top-down pixel art survival-crafting-exploration game 🙂

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [September 22, 2024, 2:13pm UTC](https://forum.babylonjs.com/t/sprites-render-pixels-from-cell-next-to-it/53630/2 "2024-09-22T14:13:40Z")

</div>

Hi and welcome to the Community,

This looks to me like just a poorly designed spritesheet. The line you are seeing and qualify as’ a bug’ is simply the feets from the sprite above. Say you would change the size to 65px instead of 64px (it would of course mess everything horizontally). But the line is gone. So this is really just when designing your spritesheet. It’s important you create a grid and when working with pixels (obviously) remain consistent and precise (and leave at least 1px, possibly 2px to play it safe for resize/rescale, transparent on each cell). Else, I don’t see anything wrong with the sprite manager.

I hope this helps and reassures you towards your project and…meanwhile, have a great day 🕶

**Edit:** Since I don’t like answering by making just assumptions 😉 I quickly double-checked by opening the spritesheet in PSD. Turns out I was right (check out the rulers set at 64px in this SS below from PSD on the original spritesheet).

 ![Capture d’écran 2024-09-22 à 16.44.47](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/b/3/b3ec6ce9bcb5513189080dd46575a7afdab5c4fb.png)

Here’s a very rushed edited version.  
You can see the line is ‘gone with the wind’ 😁

[https://media-geneva.ch/demos/bjs/forum/spritesheet-debug.html](https://media-geneva.ch/demos/bjs/forum/spritesheet-debug.html)

---

<div class="post-metadata">

**Author:** ![Terry\_Sznober](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/terry_sznober/32/19080_2.png) [@Terry\_Sznober](https://forum.babylonjs.com/u/Terry_Sznober)\
**Post date:** [September 22, 2024, 10:36pm UTC](https://forum.babylonjs.com/t/sprites-render-pixels-from-cell-next-to-it/53630/3 "2024-09-22T22:36:32Z")

</div>

I created a repro PG that exhibits the bug I described earlier today.

> **[Babylon.js Playground](https://playground.babylonjs.com/?BabylonToolkit#YCY2IL%232217)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

Here is a screenshot showing the source image in Aseprite and the PG. The image is 224 x 96 pixels, and the tile size is 32 pixels. I drew lines one pixel outside the cell of each of the three colored circles. When rendered by the BJS sprite class, you can see these lines even though they should not be part of the sprite cell.

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/f/e/fe5553f490c4b9bb690d9e93f7681f1f408e921f.png)

In case that sprite sheet goes missing, I’m attaching it here.  
 ![sprite_224x96_px_7by3cells](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/3/3/333f08416817f45ee41d06eb6a6c32cbd3532d66.png)

My assumption is that only the pixels inside the tile cell should be rendered, not the pixels outside of it. Is that not correct?

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [September 23, 2024, 6:58am UTC](https://forum.babylonjs.com/t/sprites-render-pixels-from-cell-next-to-it/53630/4 "2024-09-23T06:58:01Z")

</div>

> [@Terry\_Sznober](#):
>
> the tile cell should be rendered, not the pixels outside of it. Is that not correct?

In essence, yes. Should be. In practice… Honestly, I also have the same issue with i.e. svg (non-related to BJS). When I draw a circle at zero pixel on the canvas and then import my svg (even in photoshop) I eventually get a bit of it that’s cropped. Reason why I always leave at least 1px transparent.

You can also see it flickering when zooming in or out. Eventually the line would disappear. I believe it’s because there must be some rounding operation made. Now, I’m shit with maths. May be this can be improved, ensuring it will never round higher than the limit. But that might also mean that the last bit could be cropped 1px (at least from my understanding).

Anyway, the Team will likely have a look at it today and answer. For whatever answer there is, I think I’m gonna stick with my way of leaving 1px transparent. As a designer, this sort of thing doesn’t really strike me 🤭. I just find a way to play it safe 😁 (but I do understand that it can strike a dev or eng since… as you say, this is just not entirely correct (at least in theory 😅)

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [September 23, 2024, 9:12am UTC](https://forum.babylonjs.com/t/sprites-render-pixels-from-cell-next-to-it/53630/5 "2024-09-23T09:12:21Z")

</div>

> [@mawa](#):
>
> You can also see it flickering when zooming in or out.

Here you can compare the sprite shader with a custom pixel perfect shader. The latter doesn’t flicker.

> **[Babylon.js Playground](https://playground.babylonjs.com/#5BQ0GN%2335)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

EDIT:  
With `pixelPerfect = true`, same result, flickers…

> **[Babylon.js Playground](https://playground.babylonjs.com/#5BQ0GN%2336)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

EDIT END

Original topic:

> [@Pixel perfect for plane with texture?](https://forum.babylonjs.com/t/pixel-perfect-for-plane-with-texture/52459):
>
> For sprites, there’s a pixel perfect mode that was added following this thread: [Sprite pixel art artifact issue?](https://forum.babylonjs.com/t/sprite-pixel-art-artifact-issue/39123) Is it possible to apply the same technique to a plane with a texture on it (which behaves like a billboarded sprite)? As you can see in this PG: [https://playground.babylonjs.com/#4G38H4#2024](https://playground.babylonjs.com/#4G38H4#2024) there’s artifacts visible when moving the camera. Updated: [https://playground.babylonjs.com/#4G38H4#2027](https://playground.babylonjs.com/#4G38H4#2027) Here is a comparison of the plane with texture, and a sprite that has pixelperfect enab…

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [September 23, 2024, 10:47am UTC](https://forum.babylonjs.com/t/sprites-render-pixels-from-cell-next-to-it/53630/6 "2024-09-23T10:47:17Z")

</div>

The problem comes from the fact that the default blending for sprites is “combine”. If your sprite is alpha-tested only and you don’t want to blend with the screen, you can disable alpha blending (see line 14):

> **[Babylon.js Playground](https://playground.babylonjs.com/#5BQ0GN%2343)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

You can check that turning alpha blending for the shader material makes the artifacts appear:

> **[Babylon.js Playground](https://playground.babylonjs.com/#5BQ0GN%2344)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [September 23, 2024, 11:02am UTC](https://forum.babylonjs.com/t/sprites-render-pixels-from-cell-next-to-it/53630/7 "2024-09-23T11:02:13Z")

</div>

This has me confused. Not speaking about the shader, if I use pixelperfect and bilinear sampling with alpha disable, I still have the lines. Not to mention I lost the alpha of course.

> **[Babylon.js Playground](https://playground.babylonjs.com/?BabylonToolkit#YCY2IL%232219)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

Though, I’m not even sure why I bother. As said, I always leave at least 1px transparent when working with the alpha. This way, there’s absolutely zero issue, so I really don’t see the point… I must be missing something?!

---

<div class="post-metadata">

**Author:** ![Terry\_Sznober](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/terry_sznober/32/19080_2.png) [@Terry\_Sznober](https://forum.babylonjs.com/u/Terry_Sznober)\
**Post date:** [September 23, 2024, 11:38am UTC](https://forum.babylonjs.com/t/sprites-render-pixels-from-cell-next-to-it/53630/8 "2024-09-23T11:38:00Z")

</div>

Good morning everyone. Thanks for chiming in on this issue.

The original point of my thread here is that I was expecting to have 3 separate sprites rendered on screen, but WITHOUT the lines surrounding them because they are NOT part of the sprite cell. I created the sprite sheet very specifically to show that the inner 3 cells only have filled circles, and the cells adjacent to them have content in them (lines in this case, and they very intentionally are butted up against the cells that I intended to render).

```auto
---------------------------------------------------------------------------------------------------
| empty cell | empty cell | empty cell | empty cell | empty cell | empty cell | empty cell |
---------------------------------------------------------------------------------------------------
| empty cell | first sprite | empty cell | second sprite | empty cell | third sprite | empty cell |
---------------------------------------------------------------------------------------------------
| empty cell | empty cell | empty cell | empty cell | empty cell | empty cell | empty cell |
---------------------------------------------------------------------------------------------------

```

It should not matter if the cells I marked as “empty cell” actually have any content in them. The problem is if the they do have content that is directly adjacent to the sprite cells in the sprite sheet, they are getting incorrectly rendered. I should only see filled circles on the screen, no lines. Does that make things clearer?

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [September 23, 2024, 12:21pm UTC](https://forum.babylonjs.com/t/sprites-render-pixels-from-cell-next-to-it/53630/9 "2024-09-23T12:21:19Z")

</div>

> [@Evgeni\_Popov](#):
>
> The problem comes from the fact that the default blending for sprites is “combine”

I’ve figured this one also, however ran into the issue as @mawa did:

> [@mawa](#):
>
> if I use pixelperfect and bilinear sampling with alpha disable, I still have the lines. Not to mention I lost the alpha of course.

I came to a solution by turning out sprite instancing and always applying the epsilon for the offsets:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/0/8/082e82e6cc95f861b0a372dabf0e1554e7588247.png)

EDIT:

I’ve added inner borders to test the solution w/o sprite instancing:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/d/a/daf18cb09f8936c3e7f4a18ea4105f29123ca3d0.jpeg)

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/3/f/3f86c9ef93006c707bec3d2ce8a61600bdf8ba39.png)

---

<div class="post-metadata">

**Author:** ![Terry\_Sznober](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/terry_sznober/32/19080_2.png) [@Terry\_Sznober](https://forum.babylonjs.com/u/Terry_Sznober)\
**Post date:** [September 23, 2024, 12:48pm UTC](https://forum.babylonjs.com/t/sprites-render-pixels-from-cell-next-to-it/53630/10 "2024-09-23T12:48:48Z")

</div>

Do you have a PG link for your final solution? It looks promising!

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [September 23, 2024, 12:52pm UTC](https://forum.babylonjs.com/t/sprites-render-pixels-from-cell-next-to-it/53630/11 "2024-09-23T12:52:44Z")

</div>

It requires changes to the core library so I have to create a draft pull request. It will trigger a creation of a snapshot build. Once it’s ready, I’ll send you the link to the snapshot.

Wait a minute… or 45 while it builds the snapshot 😂

---

<div class="post-metadata">

**Author:** ![Terry\_Sznober](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/terry_sznober/32/19080_2.png) [@Terry\_Sznober](https://forum.babylonjs.com/u/Terry_Sznober)\
**Post date:** [September 23, 2024, 12:55pm UTC](https://forum.babylonjs.com/t/sprites-render-pixels-from-cell-next-to-it/53630/12 "2024-09-23T12:55:41Z")

</div>

Thanks Roland. I’m at work for the day so will have to wait till this evening to try it out. I very much appreciate your help. Also thanks to everyone else on this thread.

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [September 23, 2024, 1:54pm UTC](https://forum.babylonjs.com/t/sprites-render-pixels-from-cell-next-to-it/53630/13 "2024-09-23T13:54:55Z")

</div>

> [@Terry\_Sznober](#):
>
> Thanks Roland

You are welcome!

I had to introduce a new property called `pixelPerfect` to the `cellSize` options. I need to disable sprite instancing in the constructor of the `SpriteManager`. This is of of course subject to change. This is just a proposal so actually every change is subject to change 😉

Modifying the `pixelPerfect` property after creating the `SpriteManager` does not turn on sprite instancing for now.

> **[Babylon.js Playground](https://playground.babylonjs.com/?snapshot=refs%2Fpull%2F15610%2Fmerge#YCY2IL%232224)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [September 23, 2024, 1:56pm UTC](https://forum.babylonjs.com/t/sprites-render-pixels-from-cell-next-to-it/53630/14 "2024-09-23T13:56:21Z")

</div>

You can disable sprite instancing by doing `engine._features.supportSpriteInstancing = false;`:

> **[Babylon.js Playground](https://playground.babylonjs.com/?BabylonToolkit#YCY2IL%232226)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

The offset (0.01 - default value if you don’t pass a parameter for the 6th parameter of `SpriteManager` constructor) seems to help, although I guess the right value to use will depend on the texture/sprite sizes…

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [September 23, 2024, 2:00pm UTC](https://forum.babylonjs.com/t/sprites-render-pixels-from-cell-next-to-it/53630/15 "2024-09-23T14:00:54Z")

</div>

> [@Evgeni\_Popov](#):
>
> You can disable sprite instancing by doing `engine._features.supportSpriteInstancing = false;`:

Thanks, I traced back the source where it is read from, however it would be more convenient to turn it of just for a single `SpriteManager` instance.

Would you please have a look at the draft PR and express your thoughts? I must confess, I didn’t really think through the condition when to apply a positive or negative `epsilon` so that part might be not exactly correct.

Another thing is how are we gonna deal with the `pixelPerfect` setter.

> [@Evgeni\_Popov](#):
>
> although I guess the right value to use will depend on the texture/sprite sizes…

Correct.

Thanks a lot!

> <https://github.com/BabylonJS/Babylon.js/pull/15610>
>
> Trying to fix this issue:
> https://forum.babylonjs.com/t/sprites-render-pixels-f…rom-cell-next-to-it/53630

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [September 23, 2024, 6:41pm UTC](https://forum.babylonjs.com/t/sprites-render-pixels-from-cell-next-to-it/53630/16 "2024-09-23T18:41:28Z")

</div>

Guys, @Evgeni_Popov came with a much more elegant solution which I have implemented. You can read about the details in the pull request comments

> <https://github.com/BabylonJS/Babylon.js/pull/15611>
>
> https://forum.babylonjs.com/t/sprites-render-pixels-from-cell-next-to-it/53630
> …
> Implementation of @Popov72 's suggestion:  
> \> My opinion is that what "fixes" the problem is the epsilon applied to the uv coordinates, not the fact we don't use instancing. It happens that in instanced mode, epsilon is not applied, which is why you have to revert to non-instanced mode, but it looks like a bug to me, because it means the output for sprites may be different depending on your computer/browser (if it supports instancing or not). So, I would fix this problem by applying the epsilon in instanced mode too.
> \> 
> \> It can't be done the same way than in the non-instanced mode (which is probably why it wasn't implemented), but you could do it roughly like this:
> \> 
> \> \* add a uniform to the shader, to pass the epsilon value (feel free to use the names you want for the define/uniform!):
> \> 
> \> \`\`\`glsl
> \> #ifdef SPRITE\_APPLY\_EPSILON\_CORRECTION
> \> uniform float epsilon;
> \> #endif
> \> \`\`\`
> \> 
> \> \* apply the epsilon:
> \> 
> \> \`\`\`glsl
> \> ...
> \> vec2 offset = offsets.xy;
> \> #ifdef SPRITE\_APPLY\_EPSILON\_CORRECTION
> \> if (offset.x == 0.) offset.x += epsilon;
> \> if (offset.x == 1.) offset.x -= epsilon;
> \> if (offset.y == 0.) offset.y += epsilon;
> \> if (offset.y == 1.) offset.y -= epsilon;
> \> #endif
> \> ...
> \> \`\`\`
> \> 
> \> \* in the JS code, define \`SPRITE\_APPLY\_EPSILON\_CORRECTION\` when in instanced mode, and pass the value of epsilon to the shader
> \> 
> \> I think that should do it.

Test PG:

> **[Babylon.js Playground](https://playground.babylonjs.com/?snapshot=refs%2Fpull%2F15611%2Fmerge#YCY2IL%232229)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

---

<div class="post-metadata">

**Author:** ![Terry\_Sznober](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/terry_sznober/32/19080_2.png) [@Terry\_Sznober](https://forum.babylonjs.com/u/Terry_Sznober)\
**Post date:** [September 23, 2024, 7:04pm UTC](https://forum.babylonjs.com/t/sprites-render-pixels-from-cell-next-to-it/53630/17 "2024-09-23T19:04:27Z")

</div>

Awesome! This is exactly what I was looking for! Hopefully the documentation samples work with this fix as well.

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [September 24, 2024, 8:31am UTC](https://forum.babylonjs.com/t/sprites-render-pixels-from-cell-next-to-it/53630/18 "2024-09-24T08:31:39Z")

</div>

> [@Terry\_Sznober](#):
>
> Hopefully the documentation samples work with this fix as well

Yes, would be great to check on that. I can review them if needed…

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [September 24, 2024, 12:51pm UTC](https://forum.babylonjs.com/t/sprites-render-pixels-from-cell-next-to-it/53630/19 "2024-09-24T12:51:06Z")

</div>

Guys, there was another pro tip from @Evgeni_Popov. The final solution was pretty simple:

> <https://github.com/BabylonJS/Babylon.js/pull/15615/files>

Thanks goes to @Evgeni_Popov for letting me to do the PR despite he literally wrote all the necessary code in the comments section of the PRs 🙏

---

<div class="post-metadata">

**Author:** ![Terry\_Sznober](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/terry_sznober/32/19080_2.png) [@Terry\_Sznober](https://forum.babylonjs.com/u/Terry_Sznober)\
**Post date:** [September 25, 2024, 1:02am UTC](https://forum.babylonjs.com/t/sprites-render-pixels-from-cell-next-to-it/53630/20 "2024-09-25T01:02:36Z")

</div>

Unfortunately, it looks like the bug is still in BJS v7.26.3. PG:

> **[Babylon.js Playground](https://playground.babylonjs.com/?BabylonToolkit#YCY2IL%232229)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

You can still see that the pixels outside the cell are still being rendered.

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/d/a/da87619e13b288eb6fe3f4d25f3255679a12072c.png)

This earlier PG worked correctly:

> **[Babylon.js Playground](https://playground.babylonjs.com/?snapshot=refs%2Fpull%2F15611%2Fmerge#YCY2IL%232229)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

Hmm, when you view them in different browser tabs and flip back and forth, you can also see that the pixels from the cell you do want to render is being possibly cropped (looks like its being shrunk).

[Next page](https://forum.babylonjs.com/t/sprites-render-pixels-from-cell-next-to-it/53630.md?page=2)