Perfect Tile System - Do you guys want this for the Marketplace?

UPDATE: Project will be released Wednesday, June 10 to the Marketplace

All further updates for this project will now take place on the thread in the Marketplace forum:

UPDATE: COMING SOON TO THE MARKETPLACE!!!

Thank you guys so much for voting for me! This system will be coming to the marketplace very soon! Obviously I’m very excited to be announcing this!

I have two people from this forum to thank for providing some of the advanced parallax code in this forum: Ehamloptiran for the parallax occlusion code, and caner_ozdemir for the iterative parallax material setup. Here’s the POM thread where they contributed. If you see these people, make sure to thank them!

Once again, thank you guys so much! I’ll be making a new thread in the Marketplace forum very soon and provide further updates over there! Peace!

Update - Voting on Trello happening now! Click the link below to go vote!


I’ve been working on a system to generate tile variations using a single tile mask and normal map at 2562 pixels each, and a noisy grayscale “tile map” at 2562 pixels (or less). The system has plenty of features, including a glass shader with Subsurface Scattering and parallax distortion on the grout texture, a dual-color algorithm that lets you turn one texture into two parameterized colors, emissive settings for glowing titles, tons of support for tiling options (including rectangular tiles, stretching, and dividing), and a cheap falloff occlusion to hide the grout lines at oblique angles. The entire system is scalable, so all of these features (and more to come) can be turned off to save instructions.

I’ve already made 20 presets with this system, but I plan on making at least 50 good ones before releasing it all on the marketplace. It will include all assets, including masks, normal maps, and uncompressed tile maps, as well as the master material and 50 preset instance materials. I’ll also include a user guide and tutorials to help you make your own tiles with this system. In the future, I plan to incorporate texture overlays for the tiles (useful for bricks and scratches), using maps to use solid and glass tiles, maps for metallic tiles, and more.

I’m thinking of selling this for $15. Are you guys interested?

http://s7.postimg.org/4tcxjwaqz/Shot1.jpg

http://s7.postimg.org/64kosd6cr/Shot2.jpg

http://s7.postimg.org/3oiveioa3/Shot3.jpg

http://s7.postimg.org/acfh147sb/Shot4.jpg

http://s7.postimg.org/ywrgbue0b/Shot5.jpg

Quick update: I got a few assets in here to generate tiling bricks. Right now the textures are very large: a 1kx512 mask for bricks, and 512x256 noise map for tiling variations, and it’s ridonckulous: these bricks are super sharp, and never appear to tile! You can use maps much smaller than this to achieve massive variation with just 32 square pixels. All of the assets and tile/noise maps are currently less than 1.5 MB.

This is just a stylized version of the shader. More are on the way! And YES, these are all using the same master material system.

Very nice and the price is good, too!

Thank you! I guess that means I should raise the price then, lol :stuck_out_tongue:

Ideally I’d like to sell the system and all the assets I made so far along with a DIY guide for a cheap price so more people can start fiddling with the system and getting used to it, then release further expansion packs with more presets, assets, textures, normal maps, and maybe even more features and more powerful versions of the master shader. I also want to test a model to get the effect of interscattering translucent glass that blurs the grout texture beneath it, among other things. But right now, the goals are getting the best visuals with the most variation for the smallest performance impact possible, and I’m close to reaching the limit with that. I don’t want to waste time on something nobody else wants, though. Let me know what you’d like to see, and I’ll do my best to make it happen!

Here is the current shader network in full:

Seems very cool! I’d be interested. I’m not sure what the right price is, since it’s hard to tell how often one would use it, but I love the proceduralism in it, so I’ll be keeping an eye out for it.

I think some of the prices in Marketplace have started out too high, which is natural, since we don’t yet know what the value is on a lot of this kind of stuff. I think over the next year, prices should come down a bit.

Thanks, 3dlight!

This system is intended to be used to handle any tiling textures you might have. Say you need a tilable brick surface the size of an airport runway, but you don’t want textures larger than what Photoshop can handle, you don’t want it to look like repetitive tiling to the player, and you want it all in a very high quality for little performance cost, because, this is gonna be used in production for a game. That is what this system does for you, easily!

A 512x256 Tile Map for bricks (included in this set) would generate the variation necessary for 131,072 bricks! If each brick is 8" long, that texture would cover 341x171 feet: such a large space, it would never appear to tile to the player. With a texture map of 512x256 for every 16 bricks, you can also get some nice detail in there. And since UE4 supports textures up to 8k in size, you could feasibly have a square mile of brick variations, with high detail up close, at a fraction of the cost if it were all just a flat out texture. And they can be much, much higher quality than what you’re seeing in this screenshot.

The system can also be re-purposed for other uses. With this shader, I’ve made matte solid tiles, glossy translucent glass tiles, metallic chrome tiles, grungy textured bricks, stylized bricks, a disco light-up dance floor, and more. Yes, that will all be included in the starter set, so you needn’t worry about how to make it!

OK, I updated the shader with two big features: one is the complete integration of metal+glass parallax+scattering surfaces. It was quite difficult to get these to play nicely with each other. You can now have a tile set that features solid color, translucent glass, semi-translucent scattering frosted glass, and metallic tiles, all in the same set! Just like those really expensive tiles you find at home improvement stores!

There is also one new feature that works great for rendering wooden panels, and I added some wood-related assets in the package! For wooden panels, it’s best not to have the wood appear like it’s tiling across each of the panels. So this new feature uses the Tile Map to distort the UVs in the texture, giving each wooden panel its own unique texture space! The Standard Wood preset is made with a 128x128 Tile Map, a 512x512 maple wood Texture Map, a 128x512 Normal map, and a 128x512 Tile Mask. Altogether, that’s 3/8 the texture space of a 1k map, and you get perfect tiling wooden floors!

THIS SCREENSHOT IS NOT FINAL. I will test out different assets, and hopefully they’ll look better as time goes on:
57ed1b6b5ae1d275e51f9f71dec519b89539ca43.jpeg

OK, I’m still working on the metal+frosted glass+glass parallax+scattering full-featured version of this material. The material graph has now become a tangleweb of togglable options. The shader is very powerful, densely packed with features, well optimized for game rendering, and easy to parameterize, customize, and use, but it’s also very complicated for me to continue building it up any further at this point. I successfully added support for parallax textures and a metallic texture that only appears over metallic tiles, but the full-featured shader is still a bit buggy.

Here is the current version of the shader. Not finished yet, but it will be soon! Once the shader is finished, I can make assets like ceramic tiles very easily. Stay tuned!

89699d4396d3c10573da9abd6f52839c588a76c5.jpeg

Iv’e gotta ask, how much are you thinking you might sell this for? Will it be relatively attainable for people with a small budget? It looks awesome, and if you can also do wood floors like you showed above it will be really useful.

Materials as a product is a no brainier and at 15 bucks should sell like hotcakes. I would buy it just on impulse but if you raise the price I would have to think twice and shop around.

The only suggestion that could make it better is to add the ability to bust stuff up and not look so computer perfect.

joshezzell - I was thinking $15. It will include the above Master material, all assets, about 50-100 presets to get you started, and a how-to guide that goes more in-depth to the process of creating your own assets. And yes, this shader system handles wooden panels fantastically! There is even specific code just for it, along with plenty of wood flooring presets+assets! The code in particular uses the Tile Map to shift the texture around per-panel, so you can have a relatively small 512x512 pixel wooden texture and the included 128x128 Tile Map generate enough surface to cover a square mile of unique wooden panels! I will also make expansion packs, but the basic set will be $15!

FrankieV - Yeah, I thought $15 would be good for indies, and people just trying to have fun with this stuff. But keep in mind, for that price you’re not just getting 50-100 preset materials and reusable assets, but also the entire system and the guide for making your own perfect tiling materials, easily! Not to mention, you can use the presets to get started with gritty realism to stylized to perfect clean tiling texture in a snap. I definitely plan on making some banged up assets for ceramic tiles, mosaics, some more messy bricks, old weathered wooden floors, and whatever old textures I happen to have lying around, and if it becomes popular enough, I will make expansion packs myself for the lowest price Epic will allow me. But here’s some of the current brick presets to get you excited:

2a90b37fb5d188ff388ec50fa2a55f0934612bbd.jpeg
7b20f6ad6870467adec744f5b8f5e0889e4837f3.jpeg

OK, huge update this time! The first screenshot is hands down the most difficult preset I’ve made so far, Plutonium: it’s intended to mimic the effects seen on the very expensive backsplash tiles in real life, which feature translucent glass, frosted scattering, metallic, and solid colored tiles all on the same sheet. This required a massive rewrite of the shader in order to handle such a heavy feature set, along with a couple neat features: scattering tiles, or frosted glass, will now be able to softly blur the underlying grout texture for a very neat effect! It uses a lower mip level on the grout texture in order to accomplish this, and the amount of scattering can be defined by a separate map. This heavy material is obviously intended for architectural visualization where the needs for quality trumps performance, but at 133 instructions in-development, it could run well in realtime once it’s compiled for release. If you want metallic tiles, you will also not be able to use the subsurface shader, so parts of the scattering effect are handled by emissive. And all these features and different sub-shaders are all toggleable and bug-free!

The next screenshot is of some rotten wood, and features two overlaid normal maps with tile distortion, as well as parallax mapping. Yes, you can make aged, weathered, and beaten up assets with this system! Note that these assets are not final, and can be changed or updated before the final release.

The next screenshot is the Neon preset, rendered entirely unlit, and perfect for rendering disco dance floors, or cool sci-fi pixel art!

Finally, you have the master shader network, near it’s ready to release state. If anything, I would like to work on an optimization pass to allow the use of textures that have been packed in channels over individual texture lookups. At the moment, the heaviest shader I made with this system uses 12 lookups (3 built in, 9 parameters), and the cheapest only uses 2 (the Tile Map, and Mask, required for the variation effect. A texture map and normal map require two new lookups, and on PC, 3 textures are required for calculating lighting). I would like to minimize this as much as possible for mobile developers.

793920faae9a14ef08ce3ee98eff59de0100bf9e.jpeg
bb499aac8ca3614f426a6eaa2fff9826982b69cc.jpeg


f5c716173e5bc6e37f36ccec3732faf9098ed780.jpeg

Alright, still adding features to this thing… that will never end. Adding features has slowed me down from making more assets and presets, but I’m happy to report that so far I have completed a total of 36 presets, ranging from expensive and fancy tiles suitable for architectural visualization to temple stones, brickwork, and wooden flooring. I’m trying to individualize the presets so they are all distinct, so I think 100 presets would be overkill for a starter set. I think I’ll cap off the starting system at 50, and focus on higher quality/more distinctive features. I also pulled up all the presets and assets in the screenshots so you can take a gander at it. Let me know what you think!:

71d115bab40f6db91144bc88dcae8ac868f904c8.jpeg
de44e89347a5fd437f914d55cdb1fb5aefc4b5c1.jpeg

All this shader stuff is getting exhausting. I’ll do my best to wean off the features, but there’s a lot of work that needs to be done before this is ready for release. At the moment, you have access to features that you really should never have access too unless other features are toggled first. Once everything is set up properly, the interface should look much cleaner than it is now. In the meantime, here are some more of the fancy tile presets this shader was inspired by, and another stone preset! More Archvis people should check this out!

55f205db898421427ba6d1c0c48e7dfd3d66a962.jpeg


2eb586711e2218b8a2aa3e5c51bdddd04728d81a.jpeg
214e2c40fa085bf466bec2f076335eb9e962c96b.jpeg

Very nice it’s impressive. I had already been thinking of doing this kind of thing for myself but I’ll see… Maybe I’ll change my mind lol.

I like this, quick question can you change the gap size?

GregBlast: I’m definitely in the process of finalizing the assets and making the material user friendly, so you can get your hands on it very quickly. Don’t worry, the hardest part is over! The biggest problem I had with making this shader is getting the multiple shader features to behave nicely with each other in a togglable fashion. The Plutonium and Iridium presets are effectively 5 unique shaders in one system, but even they are not using all the features this system has to offer. It’s important to not have any loose ends, and to be as optimized as possible for game performance. If you want to make something like this, I’d suggest working on a simpler version of the shader before moving on to the complex toggling shown here.

Sanjshah: At the moment, the gaps are determined by a texture mask, and it’s intended to be a very sharp black and white mask. For the sake of performance, it’s always best to use assets that closely match your desired results because that will be less work the shader will have to perform in order to achieve the results you want in realtime. So I suggest making your own mask that contains the grout gap sizes you’re looking for. But per your request, I’ve added an Anti-Aliased Texture Mask option that can takes in a blurrier mask asset and allows you to set the cutoff value to whatever you want! Just know that using this feature adds 6 extra instructions to the overall shader, and requires a larger, blurrier mask in order to hard-calculate the rounded edge. While it looks great, it’s not recommended for performance.

I also added some more metallic settings, options for dual-roughness, and the ability to use tessellated displacement maps. Tessellation is extremely difficult for hardware to render, so I recommend using it only for very large surfaces with soft displacement. I also added some advanced image adjustment features to let you control hue shift, saturation, contrast, and rotation of the textures entirely within the shader, but use of this feature is extremely inefficient. For game developers, you can use these settings to improve your workflow while staying within the Unreal Engine all the time, without the need to link to an external application like Photoshop to keep exporting/reimporting assets. After getting the results you want, you can then go into Photoshop and make the same adjustments, reimport the new assets, and turn off the adjustments feature from the final build of the shader to speed up your polish and iteration time. I also managed to find a cheap math technique that blends the grout by falloff to mimic the effects of grout occlusion with only 10 extra pixel shader instructions, and it’s fully compatible with all the parallax and normal mapping options.

This shader is in its final stages of completion! I plan on adding some more image adjustment features throughout the shader network to improve iteration at all levels, and I will be wiring more stops in the features to make the list less confusing (ideally, you should not be able to see the plethora of glass options if you’re not using the glass feature at all). Once that’s done, then I’ll go ahead and call the whole thing done for now. I know some people are anxious to use it, and I want to send it to Epic within a week! I’m also in the process of writing a basic notepad guide to help make your own assets from scratch. There’s so much that I want to do with this system: I really don’t want to sell an unfinished product to anyone.

Sorry for the hiatus, I had some life matters to attend to which delayed my release of this system. I was working on some new ceramic tile assets and some crazy modern designs, but more importantly, I was busy working on a PDF guidebook to aid you in using this system to create your own materials. The PDF book will be included with the rest of the assets and materials. At the moment, it is 11 pages long. You can take a sneak peek of it right here, along with the new ceramic preset. It’s in the finishing stretch now, but there’s a lot to finalize and finish up before I send it to Epic:


These pics make me wish I were making a game that could use them. :stuck_out_tongue:

What kind of game are you making? Is there a specific kind of texture or look you’d like to see that isn’t included?