# Sprite nosie adjusting camera radius

**URL:** <https://forum.babylonjs.com/t/sprite-nosie-adjusting-camera-radius/54437>\
**Category:** Questions\
**Created:** [October 30, 2024, 2:59am UTC](https://forum.babylonjs.com/t/sprite-nosie-adjusting-camera-radius/54437 "2024-10-30T02:59:32Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![lvjing1111122](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lvjing1111122/32/36450_2.png) [@lvjing1111122](https://forum.babylonjs.com/u/lvjing1111122)\
**Post date:** [October 30, 2024, 2:59am UTC](https://forum.babylonjs.com/t/sprite-nosie-adjusting-camera-radius/54437/1 "2024-10-30T02:59:32Z")

</div>

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/1/e/1e0fd1434bbca5da54402c04eb596bb475208932.jpeg)  
When scrolling the mouse wheel quickly， using SpriteMap, by adjusting the camera’s Radius, a white thin line will suddenly appear on the screen and disappear immediately  
Another way to reproduce this problem is to open a browser console and change the height of the current window to reproduce it  
Is there a way to avoid this kind of noise

2、There is also an additional question on how to optimize the clarity of sprites. Currently, the clarity is not the clearest, at least not comparable to the original image

---

<div class="post-metadata">

**Author:** ![lvjing1111122](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lvjing1111122/32/36450_2.png) [@lvjing1111122](https://forum.babylonjs.com/u/lvjing1111122)\
**Post date:** [October 30, 2024, 3:05am UTC](https://forum.babylonjs.com/t/sprite-nosie-adjusting-camera-radius/54437/2 "2024-10-30T03:05:51Z")

</div>

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

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

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

PG has also appeared, but in a different way. Here is the black line

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [October 30, 2024, 10:24pm UTC](https://forum.babylonjs.com/t/sprite-nosie-adjusting-camera-radius/54437/3 "2024-10-30T22:24:22Z")

</div>

cc @Pryme8 who built the spritemap 🙂

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [October 30, 2024, 10:31pm UTC](https://forum.babylonjs.com/t/sprite-nosie-adjusting-camera-radius/54437/4 "2024-10-30T22:31:50Z")

</div>

You need to have some sampling buffer around your sprites.

Here is the same PG but with a properly extended sprite set.

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

Notice how the artifact no longer is there.

 ![Legends_World_Atlas-0](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/4/8/48e4d6b6ef2a48194d981d32bdbb1bde67962f2d.png)

I think the setting in texture packer was set to 6 pixels of extrude. (To accommodate mipmapping if you are not using mipmapping you can probably just do 1 pixel).

this will also make some artifacts that you have to clean up by hand (see on the castles and houses in this example) but that is usually really easy.

This is what it looks like without:

 ![Legends_World_Atlas-0](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/d/8d222096bd578add4da12bd5fb8d11e4f28c4b97.png)

![{35D148AC-D538-48E7-B19F-65907E2D6921}](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/5/1/51a5dad8e99d867484a97a3195e045e4ba45f540.png)  
 ![{5A3539E3-DA87-4968-A7F2-F62D984AE7BA}](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/2/3/233d5e40b80a1960a8913d306547efd460ea30d5.png)

Also when you make the sprites take up about the same screen size they render at the same quality. Can you tell which one of these is from the 3d scene and which is from the flat image?

---

<div class="post-metadata">

**Author:** ![lvjing1111122](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lvjing1111122/32/36450_2.png) [@lvjing1111122](https://forum.babylonjs.com/u/lvjing1111122)\
**Post date:** [October 31, 2024, 1:00am UTC](https://forum.babylonjs.com/t/sprite-nosie-adjusting-camera-radius/54437/5 "2024-10-31T01:00:33Z")

</div>

Yes, it’s a perfect solution, but I still need to digest it