# Frac artifacts on a tiled flipbook texture: how to remove them? **URL:** \ **Category:** Rendering\ **Tags:** unreal-engine\ **Created:** [April 4, 2016, 6:25am UTC](https://forums.unrealengine.com/t/frac-artifacts-on-a-tiled-flipbook-texture-how-to-remove-them/60121 "2016-04-04T06:25:07Z")\ **Posts on this page:** 15\ **Page:** 1
**Author:** ![anonymous\_user\_d9a669e1](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@anonymous\_user\_d9a669e1](https://forums.unrealengine.com/u/anonymous_user_d9a669e1)\ **Post date:** [April 4, 2016, 6:25am UTC](https://forums.unrealengine.com/t/frac-artifacts-on-a-tiled-flipbook-texture-how-to-remove-them/60121/1 "2016-04-04T06:25:07Z")
Hi, In order to improve a water shader, I’m using a flipbook to have the water surface animated. And I get this: ![Frac_Artifacts.png](https://d3kjluh73b9h9o.cloudfront.net/original/3X/d/0/d08942b5832186254b5de171196925dc14f1679b.png) From other posts about this problem, it is usually called “frac artifacts” as it is due to the use of a frac node in the material. With this frac node the texture displays correctly but the downside is these visible seams. A few tricks seems available to remove them: [http://oliverm-h.blogspot.fr/2014/12/ue4-quick-tip-removing-frac-artifacts.html](http://oliverm-h.blogspot.fr/2014/12/ue4-quick-tip-removing-frac-artifacts.html) [https://forums.unrealengine.com/showthread.php?30721-Texture-atlas-Frac-pixel-artifacts](https://forums.unrealengine.com/showthread.php?30721-Texture-atlas-Frac-pixel-artifacts) and I tried to use them, without success, due to the fact I’m using the flipbook node and I don’t know how to implement them in my setup or even if it can be done. Here is my setup: ![Water_Setup.jpg](https://d3kjluh73b9h9o.cloudfront.net/original/3X/c/6/c6de8ad4460a5ca664c4844aa1f02651e7013535.jpeg) (Tiling parameters are set to 1 by default but are increased in a material instance). So: any help appreciated. Cheers. ---
**Author:** ![Arnage](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/arnage/32/1020127_2.png) [@Arnage](https://forums.unrealengine.com/u/Arnage)\ **Post date:** [April 4, 2016, 9:31am UTC](https://forums.unrealengine.com/t/frac-artifacts-on-a-tiled-flipbook-texture-how-to-remove-them/60121/2 "2016-04-04T09:31:08Z")
The flipbook node is a material function. So you can go inside and adjust the texture sampling yourself. (Make sure to make a copy of the node first though) ---
**Author:** ![TK-Master](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@TK-Master](https://forums.unrealengine.com/u/TK-Master)\ **Post date:** [April 4, 2016, 2:41pm UTC](https://forums.unrealengine.com/t/frac-artifacts-on-a-tiled-flipbook-texture-how-to-remove-them/60121/3 "2016-04-04T14:41:07Z")
Here you go: ![92debe933af62904c76dbaaeef7a197300285e74.jpeg](https://d1ap1mz92jnks1.cloudfront.net/images/transparent.png) The custom node is from that guy’s blog you mention but he had a small typo… make sure DDX and DDY are with capitals! ```auto return Tex.SampleGrad(TexSampler,UV,DDX(UV1),DDY(UV1)); ``` Default flipbook result: ![3f176367065c994f28af6dc83020050f01214f15.jpeg](https://d1ap1mz92jnks1.cloudfront.net/images/transparent.png) With custom node: ![d0f0c0cf605611883f23cd6cbbe73e893d2b01e1.jpeg](https://d1ap1mz92jnks1.cloudfront.net/images/transparent.png) ---
**Author:** ![Yura\_s](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@Yura\_s](https://forums.unrealengine.com/u/Yura_s)\ **Post date:** [April 4, 2016, 7:15pm UTC](https://forums.unrealengine.com/t/frac-artifacts-on-a-tiled-flipbook-texture-how-to-remove-them/60121/4 "2016-04-04T19:15:50Z")
> [@TK-Master;505839](#): > > … make sure DDX and DDY are with capitals! Few months ago I’ve spent 5 hours at least, trying to fight with SampleGrad error. And felt like a fool when found that solution was so simple. ---
**Author:** ![anonymous\_user\_d9a669e1](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@anonymous\_user\_d9a669e1](https://forums.unrealengine.com/u/anonymous_user_d9a669e1)\ **Post date:** [April 4, 2016, 7:39pm UTC](https://forums.unrealengine.com/t/frac-artifacts-on-a-tiled-flipbook-texture-how-to-remove-them/60121/5 "2016-04-04T19:39:54Z")
Thanks for your answers, guys! : I reproduced your setup with the default flipbook and it works, connected to Base Color. But with mine, connected to normals, it doesn’t. Seems are a bit reduced but are not completely removed. Also, when rotating the cube in the material editor viewport, it doesn’t display in all angles. Some faces remind black. And when I use this material in a level, the water surface is black. On this one, if I go on rotating the cube, normals will disappear as they already did on the left part of the face. ![4664e36bd7c1b9b9a031ce6fd778e5a29de07302.jpeg](https://d3kjluh73b9h9o.cloudfront.net/original/4X/4/6/6/4664e36bd7c1b9b9a031ce6fd778e5a29de07302.jpeg) On this one, you can see normals aren’t displayed on 2 faces. ![f4097751a662e260232904997cd4f57f188fac2a.jpeg](https://d3kjluh73b9h9o.cloudfront.net/original/4X/f/4/0/f4097751a662e260232904997cd4f57f188fac2a.jpeg) So it seems to work for diffuse but not for normals. ---
**Author:** ![TK-Master](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@TK-Master](https://forums.unrealengine.com/u/TK-Master)\ **Post date:** [April 4, 2016, 8:51pm UTC](https://forums.unrealengine.com/t/frac-artifacts-on-a-tiled-flipbook-texture-how-to-remove-them/60121/6 "2016-04-04T20:51:43Z")
Yeah you are right, SampleGrad doesn’t seem to work with normals (it returns wrong color values or something). You can try this instead of the custom node: ![Frac-Normals.jpg](https://d3kjluh73b9h9o.cloudfront.net/original/3X/4/2/425eba10a9d9ff74062e274246252c2d3b8ac151.jpeg) You will still be able to see some minor artifacts depending on the pixel distance but once you put diffuse on top and if your normal is detailed enough then you won’t be able to see them. ![Frac-Normals2.jpg](https://d3kjluh73b9h9o.cloudfront.net/original/3X/a/a/aae83f21428d015063d62af055b3044be0aac041.jpeg) ---
**Author:** ![anonymous\_user\_d9a669e1](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@anonymous\_user\_d9a669e1](https://forums.unrealengine.com/u/anonymous_user_d9a669e1)\ **Post date:** [April 5, 2016, 7:21am UTC](https://forums.unrealengine.com/t/frac-artifacts-on-a-tiled-flipbook-texture-how-to-remove-them/60121/7 "2016-04-05T07:21:02Z")
Yes, this one works well and seems are very softened. However, they are still visible, even with a diffuse, as my normals are not as strong as yours. I wanted to make something like a calm lake surface, not something as “frosted” as the one in your screenshot. I suppose I have to come back to panning normal maps. Anyway, thanks for your help. At least I learned some tips! Could be useful in other cases. ---
**Author:** ![TK-Master](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@TK-Master](https://forums.unrealengine.com/u/TK-Master)\ **Post date:** [April 5, 2016, 11:13am UTC](https://forums.unrealengine.com/t/frac-artifacts-on-a-tiled-flipbook-texture-how-to-remove-them/60121/8 "2016-04-05T11:13:12Z")
Is it that visible with your normal? Well I will let you know if I find a cleaner method :p, I have a few things left to try. Could you send me your normal by any chance? (in pm if you have to). ---
**Author:** ![anonymous\_user\_d9a669e1](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@anonymous\_user\_d9a669e1](https://forums.unrealengine.com/u/anonymous_user_d9a669e1)\ **Post date:** [April 5, 2016, 5:25pm UTC](https://forums.unrealengine.com/t/frac-artifacts-on-a-tiled-flipbook-texture-how-to-remove-them/60121/9 "2016-04-05T17:25:04Z")
I got the normal here: [http://www.graphicall.org/yofrankie/game/textures/](http://www.graphicall.org/yofrankie/game/textures/) A the bottom of the list, you have 2 .png: water\_nor & watermap. It’s one of those 2, don’t remember which one, I renamed it. ---
**Author:** ![RyanB](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@RyanB](https://forums.unrealengine.com/u/RyanB)\ **Post date:** [April 5, 2016, 5:28pm UTC](https://forums.unrealengine.com/t/frac-artifacts-on-a-tiled-flipbook-texture-how-to-remove-them/60121/10 "2016-04-05T17:28:21Z")
Just looked at the link, that normal map has seams all over the place. I see 9 seams which looks like somebody tiled a non tiling pattern 10x10. ---
**Author:** ![TK-Master](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@TK-Master](https://forums.unrealengine.com/u/TK-Master)\ **Post date:** [April 5, 2016, 6:13pm UTC](https://forums.unrealengine.com/t/frac-artifacts-on-a-tiled-flipbook-texture-how-to-remove-them/60121/11 "2016-04-05T18:13:13Z")
Lol yup… that normal is not seamless at all 😛 So your first step should be to make a better normal flipbook, it seems too low res anyway. Edit: actually the normal is probably fine… it’s supposed to be animated right? so the frames shouldn’t really need to be seamless between them but only with themselves (if that makes sense lol). But I have also found a way to further eliminate the frac artifacts to the point where I can literally not see them at all. ![e4291b140a2dad4442576f210f5e44de7ad30cc1.jpeg](https://d1ap1mz92jnks1.cloudfront.net/images/transparent.png) Now it also calculates correct mip map level so it looks smoother at distance. There is probably a better and more optimized way of doing it but at least this pretty much works perfectly for me. Edit: you might wanna change the Divide by 2 node (after GetDimensions V2) to the number of rows of your texture or so (play around with that value I guess). ---
**Author:** ![RyanB](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@RyanB](https://forums.unrealengine.com/u/RyanB)\ **Post date:** [April 5, 2016, 6:33pm UTC](https://forums.unrealengine.com/t/frac-artifacts-on-a-tiled-flipbook-texture-how-to-remove-them/60121/12 "2016-04-05T18:33:32Z")
looks like you grabbed that math from ComputeMipLevel instead of just showing the ComputeMipLevel material function being used. Any particular reason, was there a problem with the function by default? fwiw, computemip gives you only bilinear filtering which will never look quite as good as either trilinear or anisotropic. So you will see feint seams between the mip levels. For water which is usually viewed right along the surface this may pose a quality issue. ---
**Author:** ![TK-Master](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@TK-Master](https://forums.unrealengine.com/u/TK-Master)\ **Post date:** [April 5, 2016, 6:54pm UTC](https://forums.unrealengine.com/t/frac-artifacts-on-a-tiled-flipbook-texture-how-to-remove-them/60121/13 "2016-04-05T18:54:17Z")
> [@RyanB;506686](#): > > looks like you grabbed that math from ComputeMipLevel instead of just showing the ComputeMipLevel material function being used. Any particular reason, was there a problem with the function by default? > > fwiw, computemip gives you only bilinear filtering which will never look quite as good as either trilinear or anisotropic. So you will see feint seams between the mip levels. For water which is usually viewed right along the surface this may pose a quality issue. It’s a slightly edited ComputeMipLevel function which blends a different mipmap based on camera/vertex dot product but now that I’m re-testing it cant find the difference tbh, it could be placebo effect 😛 Anyways it’s still not perfect, I can still see seams at some angles (with a perfectly seamless normal flipbook) :\ any further ideas? Btw I analyzed that normal map a little bit and there are many problems with it… first of all it’s a 1024 texture with 10x10 tiles but 1024 / 10 = 102.4 so the tiles are not the same pixel size (therefore more seams). ---
**Author:** ![anonymous\_user\_d9a669e1](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@anonymous\_user\_d9a669e1](https://forums.unrealengine.com/u/anonymous_user_d9a669e1)\ **Post date:** [April 5, 2016, 8:13pm UTC](https://forums.unrealengine.com/t/frac-artifacts-on-a-tiled-flipbook-texture-how-to-remove-them/60121/14 "2016-04-05T20:13:12Z")
> [@](#): > > Edit: actually the normal is probably fine… it’s supposed to be animated right? so the frames shouldn’t really need to be seamless between them but only with themselves (if that makes sense lol). Yes, it’s fine as it’s a flipbook. With tex coord (1,1), it loops correctly. That said, a little bit low res, I agree but fine for testing purposes. I’ll try your new setup and give you feedback. > [@](#): > > it’s a 1024 texture with 10x10 tiles but 1024 / 10 = 102.4 so the tiles are not the same pixel size (therefore more seams) For 10x10 tiles, which perfect size(s) should be this flipbook? ---
**Author:** ![RyanB](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@RyanB](https://forums.unrealengine.com/u/RyanB)\ **Post date:** [April 5, 2016, 8:23pm UTC](https://forums.unrealengine.com/t/frac-artifacts-on-a-tiled-flipbook-texture-how-to-remove-them/60121/15 "2016-04-05T20:23:33Z")
ok here is what I meant: So the seams you are seeing are because the mips are mipping to the neighbor frame which does not tile with the current frame. Mips that smoothly blend the side of one frame to another simply do not exist. With ddx/ddy you have simply removed the problem where its trying to blend to a different mip level across borders since the GPU saw a huge jump from 0 to 1 happening in 1 pixel so assumes it must be super far away. Now that is fixed but you still are seeing mips that blend to incorrect data. To get completely smoothed tiling flipbooks I believe you need to sub-tile each frame within itself so that it has at least 1-2 border pixels of the other side, and then shrink the UVs of each frame by that amount. The last time I had to do something like that was back in 1999 for monster truck madness 2 when all tiling textures needed that done. It was a huge pain when making giant turn textures since they would be grids of like 12x12 textures. Back then somebody made a script to automate it but I don’t know of anything that works like that anymore. Perhaps a photoshop action sequence can automate it if you do it for one frame and then record your actions?