View Issue Details

IDProjectCategoryView StatusLast Update
0001291NoesisGUIC# SDKpublic2020-12-07 10:41
Reporterai_enabled Assigned Tosfernandez  
PrioritynormalSeverityminorReproducibilityalways
Status resolvedResolutionno change required 
Product Version2.1.0f1 
Target Version3.0.9Fixed in Version3.0.9 
Summary0001291: Textures rendering issues (unexplainable seams)
DescriptionHi guys,

the problem is presented in the attached screenshots:
screenshot #1 - how it looks in our game (when each rectangle has a 40x40 pixels simple white texture)
screenshot #2 - the issue is more obvious and perhaps give you some ideas... (I'm using an image #4 (TestWhiteRect) as a Texture Brush)
screenshot #3 - I've replaced texture brush everywhere with Brushes.White

As you can see the background visible through seams between rectangle elements:
1. But there are should be no seams. I've tried assigning Brushes.White instead of my texture brush and indeed there are no seams! So this is related to how you render textures, not the positioning/render meshing of the rectangles.
2. I've verified that it's the background permeating in seams (as I tried a different color for the background element and can see this color permeating).
3. The issue is visible even if zoom-in (with transform, very closely). It's still a small seam between elements. UPD. See my comment below!
4. RenderOptions.SetBitmapScalingMode(rectangle, BitmapScalingMode.NearestNeighbor) disables linear texture filtering but the issue still appears (all the screenshots with seams are made with the NearestNeighbor mode).
5. UseLayoutRounding is false for every rectangle and their parent panel control (which is a canvas).

I think it might be related to how you perform UV mapping or wrapping mode/bordering mode during texture rendering... however I'm really not sure how a semi-transparent pixel might appear in that case.

Regards!
TagsNo tags attached.
PlatformAny

Relationships

related to 0000916 feedbackjsantos Black lines between elements in Canvas 

Activities

ai_enabled

ai_enabled

2018-04-17 15:43

updater  

1.Problem.png (4,911 bytes)   
1.Problem.png (4,911 bytes)   
2.ProblemHowItRendered.png (5,405 bytes)   
2.ProblemHowItRendered.png (5,405 bytes)   
4.TestWhiteRect.png (17,733 bytes)   
4.TestWhiteRect.png (17,733 bytes)   
ai_enabled

ai_enabled

2018-04-17 15:55

updater   ~0005192

Though to consider - the size of seam is independent from the zoom (which is performed using ScaleTransform) and always about 1 device pixel. See the attached screenshot (remember that visible magenta rectangle is formed by four neighboring magenta pixels of the test texture (image #4 above)).
Screenshot at 20-53-21.png (10,005 bytes)   
Screenshot at 20-53-21.png (10,005 bytes)   
jsantos

jsantos

2018-04-18 19:37

manager   ~0005193

Thanks for all this information! Could you also please attach a frame snapshot using the D3D frame debugger? (visual studio -> Debug -> Graphics -> Start Graphics Debugging)
jsantos

jsantos

2018-06-01 22:33

manager   ~0005207

Thanks for the debug session!

And congrats for the momentum you are talking about. You deserve it!
ai_enabled

ai_enabled

2020-12-04 01:13

updater   ~0006860

Last edited: 2020-12-04 01:13

I still wonder what's causing this issue when using a texture brush yet it's not reproducible with a solid color brush.

sfernandez

sfernandez

2020-12-04 12:01

manager   ~0006861

Last edited: 2020-12-04 12:02

This problem can also be reproduced in WPF and the source of it is that contiguous rectangles don't share the same vertices, so imprecisions can leave small holes between them letting the background be visible sometimes (you can resize the window and holes appear and disappear).
<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  UseLayoutRounding="False"
  Background="Black">
  <Grid.Resources>
    <ImageSource x:Key="whiteImg">white.png</ImageSource>
    <ImageBrush x:Key="whiteImgBrush" ImageSource="{StaticResource whiteImg}" Stretch="None" TileMode="FlipXY"/>
  </Grid.Resources>
  <Canvas Width="400" Height="400">
    <Canvas.RenderTransform>
      <TranslateTransform X="0.5" Y="0.5"/>
    </Canvas.RenderTransform>
    <Rectangle Canvas.Left="000" Canvas.Top="000" Width="100" Height="100" Fill="{StaticResource whiteImgBrush}"/>
    <Rectangle Canvas.Left="100" Canvas.Top="000" Width="100" Height="100" Fill="{StaticResource whiteImgBrush}"/>
    <Rectangle Canvas.Left="200" Canvas.Top="000" Width="100" Height="100" Fill="{StaticResource whiteImgBrush}"/>
    <Rectangle Canvas.Left="300" Canvas.Top="000" Width="100" Height="100" Fill="{StaticResource whiteImgBrush}"/>
    <Rectangle Canvas.Left="000" Canvas.Top="100" Width="100" Height="100" Fill="{StaticResource whiteImgBrush}"/>
    <Rectangle Canvas.Left="100" Canvas.Top="100" Width="100" Height="100" Fill="{StaticResource whiteImgBrush}"/>
    <Rectangle Canvas.Left="200" Canvas.Top="100" Width="100" Height="100" Fill="{StaticResource whiteImgBrush}"/>
    <Rectangle Canvas.Left="300" Canvas.Top="100" Width="100" Height="100" Fill="{StaticResource whiteImgBrush}"/>
    <Rectangle Canvas.Left="000" Canvas.Top="200" Width="100" Height="100" Fill="{StaticResource whiteImgBrush}"/>
    <Rectangle Canvas.Left="100" Canvas.Top="200" Width="100" Height="100" Fill="{StaticResource whiteImgBrush}"/>
    <Rectangle Canvas.Left="200" Canvas.Top="200" Width="100" Height="100" Fill="{StaticResource whiteImgBrush}"/>
    <Rectangle Canvas.Left="300" Canvas.Top="200" Width="100" Height="100" Fill="{StaticResource whiteImgBrush}"/>
    <Rectangle Canvas.Left="000" Canvas.Top="300" Width="100" Height="100" Fill="{StaticResource whiteImgBrush}"/>
    <Rectangle Canvas.Left="100" Canvas.Top="300" Width="100" Height="100" Fill="{StaticResource whiteImgBrush}"/>
    <Rectangle Canvas.Left="200" Canvas.Top="300" Width="100" Height="100" Fill="{StaticResource whiteImgBrush}"/>
    <Rectangle Canvas.Left="300" Canvas.Top="300" Width="100" Height="100" Fill="{StaticResource whiteImgBrush}"/>
  </Canvas>
</Grid>


You can see the attached images produced by that xaml in Blend. The last one is using a SolidColorBrush, so you can see it is not a problem with textures.

The only way to avoid those holes is by using a single mesh (Rectangle) and tile the texture.

wpf-blackbg.png (19,009 bytes)   
wpf-blackbg.png (19,009 bytes)   
wpf-redbg.png (20,153 bytes)   
wpf-redbg.png (20,153 bytes)   
wpf-solidwhite.png (16,490 bytes)   
wpf-solidwhite.png (16,490 bytes)   
ai_enabled

ai_enabled

2020-12-05 01:28

updater   ~0006871

Last edited: 2020-12-05 01:29

Hi Sergio,
thank you for your response and time spent to make a sample. I've totally forgotten that WPF exists when reported this! :-)

That's what I've suspected based on my previous experience by rending tiled terrain in CryoFall. After that, we've switched to a shader-based approach to draw a properly tiled terrain.

I was surprised I cannot see the seams when rendering tiles with SolidColorBrush though...In WPF there are indeed seams in either case.

I'm reworking the map to use large chunks with render textures, and will add a coordinate grid to hide the stitches! :-)
Please close this ticket.

Regards!

Issue History

Date Modified Username Field Change
2018-04-17 15:43 ai_enabled New Issue
2018-04-17 15:43 ai_enabled File Added: 1.Problem.png
2018-04-17 15:43 ai_enabled File Added: 2.ProblemHowItRendered.png
2018-04-17 15:43 ai_enabled File Added: 3.WhenRenderingWithoutTextureBrush.png
2018-04-17 15:43 ai_enabled File Added: 4.TestWhiteRect.png
2018-04-17 15:44 ai_enabled Summary Textures rendering issues (seams!) => Textures rendering issues (unexplainable seams)
2018-04-17 15:44 ai_enabled Description Updated
2018-04-17 15:45 ai_enabled Description Updated
2018-04-17 15:46 ai_enabled Description Updated
2018-04-17 15:47 ai_enabled Description Updated
2018-04-17 15:55 ai_enabled File Added: Screenshot at 20-53-21.png
2018-04-17 15:55 ai_enabled Note Added: 0005192
2018-04-17 16:00 ai_enabled Description Updated
2018-04-18 19:36 jsantos Assigned To => jsantos
2018-04-18 19:36 jsantos Status new => assigned
2018-04-18 19:37 jsantos Note Added: 0005193
2018-04-18 19:37 jsantos Status assigned => feedback
2018-05-29 15:06 ai_enabled Status feedback => assigned
2018-06-01 22:33 jsantos Note Added: 0005207
2018-11-01 02:14 jsantos View Status public => private
2018-11-21 16:41 jsantos Target Version => 2.2.0
2018-11-21 16:41 jsantos View Status private => public
2018-11-21 16:41 jsantos Platform => Any
2019-03-06 18:03 jsantos Relationship added related to 0000916
2019-03-18 22:09 sfernandez Target Version 2.2.0 => 2.2.1
2019-04-05 12:04 sfernandez Target Version 2.2.1 => 2.2.2
2019-04-30 10:14 sfernandez Target Version 2.2.2 => 2.2.3
2019-06-18 16:54 sfernandez Target Version 2.2.3 => 2.2.4
2019-08-26 15:25 jsantos Target Version 2.2.4 => 2.2.5
2019-12-30 10:33 sfernandez Target Version 2.2.5 => 3.0.0
2020-04-13 14:41 jsantos Target Version 3.0.0 => 3.0
2020-12-04 01:13 ai_enabled Note Added: 0006860
2020-12-04 01:13 ai_enabled Note Edited: 0006860
2020-12-04 10:42 jsantos Target Version 3.0 => 3.0.9
2020-12-04 10:43 jsantos Assigned To jsantos => sfernandez
2020-12-04 12:01 sfernandez File Added: wpf-blackbg.png
2020-12-04 12:01 sfernandez File Added: wpf-redbg.png
2020-12-04 12:01 sfernandez File Added: wpf-solidwhite.png
2020-12-04 12:01 sfernandez Note Added: 0006861
2020-12-04 12:02 sfernandez Note Edited: 0006861
2020-12-04 12:03 sfernandez Status assigned => feedback
2020-12-05 01:28 ai_enabled Note Added: 0006871
2020-12-05 01:28 ai_enabled Status feedback => assigned
2020-12-05 01:29 ai_enabled Note Edited: 0006871
2020-12-07 10:41 sfernandez Status assigned => resolved
2020-12-07 10:41 sfernandez Resolution open => no change required
2020-12-07 10:41 sfernandez Fixed in Version => 3.0.9