StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POWhen transforming textures (drawn as flat 3D objects) to mimic depth, black lines appear randomly
text
Body
copied!<p>We are developing a top-down RPG using XNA. Recently we bumped into a setback when writing the code to display our maps. When drawing the map, top-down view with a normal transformation matrix, everything seems to be fine. When using a non-flat transformation matrix, such as squeezing the top or bottom to mimic depth, black lines (rows when top or bottom, column when left or right is squeezed) that move around when the camera changes position, appear. The movement and placement appear to be random. (Image provided further down.)</p> <h1><strong>Background information</strong></h1> <p>The maps consist of tiles. The original texture has tiles consisting of 32x32 pixels. We draw the tiles by creating 2 triangles and displaying part of the original texture on these triangles. A shader does this for us. There are three layers of triangles. First we draw all the opaque tiles and all opaque pixels of all semi-opaque and partial-transparent tiles, then all the semi-opaque and partial-transparent tiles and pixels. This works fine (but when we zoom by a floating point factor, sometimes color-blended lines are in between tile rows and/or columns). </p> <h2><em>Renderstates</em></h2> <p>We use the same rasterizerState for all tiles and we switch between two when drawing solid or semi-transparent tiles. </p> <pre><code>_rasterizerState = new RasterizerState(); _rasterizerState.CullMode = CullMode.CullCounterClockwiseFace; _solidDepthState = new DepthStencilState(); _solidDepthState.DepthBufferEnable = true; _solidDepthState.DepthBufferWriteEnable = true; _alphaDepthState = new DepthStencilState(); _alphaDepthState.DepthBufferEnable = true; _alphaDepthState.DepthBufferWriteEnable = false; </code></pre> <p>In the shade we set the SpriteBlendMode as follows:</p> <p>The first solid layer 1 uses </p> <pre><code>AlphaBlendEnable = False; SrcBlend = One; DestBlend = Zero; </code></pre> <p>All the other solid and transparent layers (drawn later) use </p> <pre><code>AlphaBlendEnable = True; SrcBlend = SrcAlpha; DestBlend = InvSrcAlpha; </code></pre> <p>Other shaders use this too. The <code>SpriteBatch</code> for the <code>SpriteFonts</code> used, uses default setting.</p> <h2><em>Generated Texture</em></h2> <p>Some tiles are generated on the fly and saved to file. The file is loaded when the map is loaded. This is done using a <code>RenderTarget</code> created as follows:</p> <pre><code>RenderTarget2D rt = new RenderTarget2D(sb.GraphicsDevice, 768, 1792, false, SurfaceFormat.Color, DepthFormat.None); sb.GraphicsDevice.SetRenderTarget(rt); </code></pre> <p>When generated, the file is saved and loaded (so we don't lose it when the device resets, because it no longer will be on a <code>RenderTarget</code>). I tried using mipmapping, but it is a spritesheet. There is no information on where tiles are placed, so mipmapping is useless and it didn't solve the problem.</p> <h2><em>Vertices</em></h2> <p>We loop through every position. No floating points here yet, but position is a Vector3 (Float3).</p> <pre><code>for (UInt16 x = 0; x < _width; x++) { for (UInt16 y = 0; y < _heigth; y++) { [...] position.z = priority; // this is a byte 0-5 </code></pre> <p>To position the tiles the following code is used:</p> <pre><code>tilePosition.X = position.X; tilePosition.Y = position.Y + position.Z; tilePosition.Z = position.Z; </code></pre> <p>As you know, floats are 32 bit, with 24 bits for precision. The maximum bit value of z is 8 bits (5 = 00000101). The maximum values for X and Y are 16 bits resp. 24 bits. I assumed nothing could go wrong in terms of floating points.</p> <pre><code>this.Position = tilePosition; </code></pre> <p>When the vertices are set, it does so as follows (so they all share the same tile position)</p> <pre><code>Vector3[] offsets = new Vector3[] { Vector3.Zero, Vector3.Right, Vector3.Right + (this.IsVertical ? Vector3.Forward : Vector3.Up), (this.IsVertical ? Vector3.Forward : Vector3.Up) }; Vector2[] texOffset = new Vector2[] { Vector2.Zero, Vector2.UnitX, Vector2.One, Vector2.UnitY }; for (int i = 0; i < 4; i++) { SetVertex(out arr[start + i]); arr[start + i].vertexPosition = Position + offsets[i]; if (this.Tiles[0] != null) arr[start + i].texturePos1 += texOffset[i] * this.Tiles[0].TextureWidth; if (this.Tiles[1] != null) arr[start + i].texturePos2 += texOffset[i] * this.Tiles[1].TextureWidth; if (this.Tiles[2] != null) arr[start + i].texturePos3 += texOffset[i] * this.Tiles[2].TextureWidth; } </code></pre> <h2><em>Shader</em></h2> <p>The shader can draw animated tiles and static tiles. Both use the following sampler state:</p> <pre><code>sampler2D staticTilesSampler = sampler_state { texture = <staticTiles> ; magfilter = POINT; minfilter = POINT; mipfilter = POINT; AddressU = clamp; AddressV = clamp;}; </code></pre> <p>The shader doesn't set any different sampler states, we also don't in our code. </p> <p>Every pass, we clip at the alpha value (so we don't get black pixels) using the following line </p> <pre><code>clip(color.a - alpha) </code></pre> <p>Alpha is 1 for solid layer 1, and <em>almost</em> 0 for any other layer. This means that if there is a fraction of alpha, it will be drawn, unless on the bottom layer (because we wouldn't know what to do with it).</p> <h2><em>Camera</em></h2> <p>We use a camera to mimic lookup from top down at the tiles, making them appear flat, using the z value to layer them by external layering data (the 3 layers are not always in the right order). This also works fine. The camera updates the transformation matrix. If you are wondering why it has some weird structure like this.AddChange - the code is Double Buffered (this also works). The transformation matrix is formed as follows:</p> <pre><code>// First get the position we will be looking at. Zoom is normally 32 Single x = (Single)Math.Round((newPosition.X + newShakeOffset.X) * this.Zoom) / this.Zoom; Single y = (Single)Math.Round((newPosition.Y + newShakeOffset.Y) * this.Zoom) / this.Zoom; // Translation Matrix translation = Matrix.CreateTranslation(-x, -y, 0); // Projection Matrix obliqueProjection = new Matrix(1, 0, 0, 0, 0, 1, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1); Matrix taper = Matrix.Identity; // Base it of center screen Matrix orthographic = Matrix.CreateOrthographicOffCenter( -_resolution.X / this.Zoom / 2, _resolution.X / this.Zoom / 2, _resolution.Y / this.Zoom / 2, -_resolution.Y / this.Zoom / 2, -10000, 10000); // Shake rotation. This works fine Matrix shakeRotation = Matrix.CreateRotationZ( newShakeOffset.Z > 0.01 ? newShakeOffset.Z / 20 : 0); // Projection is used in Draw/Render this.AddChange(() => { this.Projection = translation * obliqueProjection * orthographic * taper * shakeRotation; }); </code></pre> <h1><em>Reasoning and Flow</em></h1> <p>There are 3 layers of tile data. Each tile is defined by <code>IsSemiTransparent</code>. When a tile is <code>IsSemiTransparent</code>, it needs to be drawn after something not <code>IsSemiTransparent</code>. Tile data is stacked when loaded on a <code>SplattedTile</code> instance. So, even if layer one of tile data is empty, layer one of the <code>SplattedTile</code> will have tile data in the first layer, (given that at least one layer has tile data). The reason is that the <code>Z-buffer</code> doesn't know what to blend with if they are drawn in order, since there might be no solid pixels behind it. </p> <p>The layers do NOT have a z value, individual tile data has. When it is a ground tile, it has <code>Priority = 0</code>. So tiles with the same <code>Priority</code> we be ordered on layer (draw order) and opaqueness (semi-transparent, after opaque). Tiles with different priority will be drawn according to their priority.</p> <p>The first solid layer has no destination pixels, so I set it to <code>DestinationBlend.Zero</code>. It also doesn't need <code>AlphaBlending</code>, since there is nothing to alphablend with. The other layers (5, 2 solid, 3 transparent) might be drawn when there is already color data and need to blend accordingly.</p> <p>Before iterating through the 6 passes, the <code>projection matrix</code> is set. When using no taper, this works. When using a taper, it doesn't.</p> <h1><strong>The Problem</strong></h1> <p>We want to mimic some more depth by applying the taper, using the some matrix. We tried several values but this is an example:</p> <pre><code>new Matrix(1, 0, 0, 0, 0, 1, 0, 0.1f, 0, 0, 1, 0, 0, 0, 0, 1); </code></pre> <p>The screen (everything with height value 0, all flat stuff) will be squeezed. The lower the y (higher on the screen), the more it's squeezed. This actually works, but now random black lines appear almost everywhere. It seems to exclude a few tiles, but I don't see what's the correlation. We think it might had something to do with interpolation or mipmaps. </p> <p>And here is an image to show you what I am talking about: <img src="https://dl.dropbox.com/u/613990/ImageHost/3RA/StackOverflow/Screenshot_9-5-2011.png" alt="Screenshot with lines">.</p> <p>The tiles not affected seem to be static tiles NOT on the bottom layer. <strong>However, transparent tiles on top of those show other graphical artifacts. They miss lines (so rows just get deleted).</strong> I marked this text because I think it is a hint to what's happening. The <strong>vertical</strong> lines appear if I put the <code>mip mag and minfilter</code> to <code>Linear</code>.</p> <p>Here is an image zoomed in (in game zoom), showing the artifact on tiles on layer 2 or 3 <img src="https://dl.dropbox.com/u/613990/ImageHost/3RA/StackOverflow/Screenshot_10-5-20111.png" alt="Screenshot with lines, zoomed in"></p> <h1><strong>We already tried</strong></h1> <ul> <li><code>mipfilter</code> on <code>Point</code> or <code>Linear</code> </li> <li>Setting <code>GenerateMipMaps</code> on the original textures </li> <li>Setting <code>GenerateMipMaps</code> on the generated textures (true flag constructor of <code>RenderTarget</code>) </li> <li>Turning on mipmapping (only gave more artifacts when zoomed out, because I was <a href="http://blogs.msdn.com/b/shawnhar/archive/2009/09/08/texture-filtering.aspx" rel="nofollow noreferrer">mipmapping a spritesheet</a>.</li> <li>Not drawing layer 2 and 3 (this actually makes ALL the tiles have black lines) </li> <li><code>DepthBufferEnable = false</code> </li> <li>Setting all solid layers to <code>SrcBlend = One;</code> <code>DestBlend = Zero;</code></li> <li>Setting all solid layers to <code>ScrBlend = SrcAlpha;</code> <code>DestBlend = InvSrcAlpha;</code></li> <li>Not drawing transparent layer (lines are still there).</li> <li>Removing <code>clip(opacity)</code> in the <code>shader</code>. This only removes some lines. We are investigating this further.</li> <li>Searching for the same problem on msdn, stackoverflow and using google (with no luck).</li> </ul> <p>Does anyone recognize this problem? On a final note, we do call the <code>SpriteBatch</code> AFTER drawing the tiles, and use another <code>Shader</code> for avatars (show no problems, because they have height > 0). Does this undo our <code>sampler state</code>? Or...?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload