What is a Seamless Texture (3D Texture, Tileable Texture)

This article describes what seamless textures are, how they are created, and what they are used for.  Other terms for seamless textures include 3D textures, tileable textures, and texture fills.

What's a Seamless Texture?

A seamless texture is an image that can be placed side-by-side with itself without creating a noticeable boundary between two copies of the image.  Consider the following seamless texture.

If the seamless texture were repeated four times, it would create a continuous pattern without it being obvious where one copy of the image began and another one ended.  This is demonstrated below.

By contrast, consider the following texture photo that the seamless texture had been based on.

When repeated four times, visible seams form at the image boundaries.  These seams mean the image is not seamless.

How Are Seamless Textures Made?

Seamless textures can be made with a variety of software.  Many artists use generalist applications such as Photoshop, where seams can be carefully painted away.  Others prefer applications like Genetica which are specifically created for seamless texture artists and automate much of the process.  A tutorial for creating seamless textures with Genetica can be found here.

Why do People Care?

Seamless textures are especially important in 3D computer artwork, where arbitrarily large surfaces can be covered by a seamless texture without the appearance of distracting seams.  The texture presented at the beginning of this article, for example, could be turned into a large floor.

Continue reading . . .

Create Custom Brick and Tile Patterns

In this tutorial we'll examine how to create custom brick and tile patterns in Genetica.  Genetica can be downloaded here.

Making a brick wall or a tile floor in Genetica is fairly straightforward.  To get started, combine a Synthesis node and a Cut & Tile Lab as shown below.

After you insert the nodes into a new document, double-click each node to customize it.  When customizing the Cut & Tile Lab you'll find dozens of built-in brick or tile patterns to choose from.

To create a custom pattern, begin by selecting "Use Input" as the pattern type.

Then insert a Canvas node into the Cut & Tile Lab's second input.  As shown below, the Cut & Tile Lab is no longer making a tile pattern.  That's because we told it to check its input for the pattern to use, but haven't yet drawn the pattern we want.

Double-click the Canvas node to edit it.  From there you can start laying down bricks using standard drawing tools, such as the Shape tool which will allow you to create rectangles.

More exotic brick shapes can be created with the Edit tool.  With an existing shape selected, choose the Edit tool and then click the Convert button.  This will reveal handles that can be dragged to manipulate the brick's shape.

Cut down on drawing time by activating the symmetry option.  Make sure that all brick shapes are placed within the same layer in the Canvas node so that the symmetry gets applied to your entire design.

Following is the pattern I created, but just about any pattern will do as long as some space has been left between the pieces.  You can get a lot fancier than I did by using curved brick pieces.  I chose to use the symmetry option so that I'd only need to draw the top half of the pattern.

At first our pattern won't be interpreted correctly by the Cut & Tile Lab.  This can be fixed by setting the layer's style as shown below.

When you click the final Edit button, following the steps in the above illustration, the Gradient dialog will open.  Here you need to appropriately position the two gradient handles by dragging them.  There's no specific place where these need to be placed.  Just move them until the brick pattern appears in the small preview, as shown below.

You should now have a brick or tile seamless texture that uses your custom pattern.

That concludes the primary focus of this tutorial.  But as a final treat, here's an even more sophisticated brick texture that I put together using the principles discussed in this article.

The Genetica file for the above texture can be downloaded here.  Open it in Genetica to explore how it was put together and to customize it.  You'll see that this texture was made from two separate brick patterns, each of which can be easily modified by double-clicking the respective Canvas node.

And of course don't forget to double-click the Synthesis node to change the material that the bricks are made out of.  With just a few changes, countless variations are possible!
Continue reading . . .

How to Import Models and Textures into Unity

In this tutorial we'll examine how models can be imported into the Unity 3D game engine, along with some of the pitfalls you may run into along the way.

We'll be using a Creative Commons model by artist Nobiax that can be downloaded by clicking the Download File button on this page.  The file is a ZIP archive that can be unpacked to reveal color, specular, and normal maps, in addition to the 3D model itself.

The Model

In Unity, open the Assets menu and then select the Import New Asset command.

Find the plastic_barrel.obj file from the unpacked ZIP file and double-click it.

Drag the plastic_barrel object from the Project panel into the viewport to create an instance of the object in your scene.

The Texture

Again select the Import New Asset command as we had done to import the model, but this time choose the diffus.png file.

Select the plastic_barrel-plastic_barrelmat entry from the Project panel, and with that still selected, drag the diffuse image into the Base slot as shown below.

The Normal Map

To open up slots for the additional material channels, click the Shader dropdown in the Inspector panel, and select Bumped Specular.

Import the normal.png file following the example of the last few steps.  Then drag it into the Bumpmap slot of the material.

The normal map has loaded in, but there's something strange about that shading when the viewport is rotated.  Additional clues that something has gone amiss can be found by comparing our version with the artist's original depiction.

The trouble comes from there being two prevalent normal map conventions, each of which interprets the green channel of the normal map in the opposite way.  In this case the artist and Unity happen to use different normal map conventions.

The normal map can be fixed by flipping its green channel.  This is a job that can be done in most image editors, but we'll do it in Genetica.  Genetica is nice for these kinds of jobs because each action taken is represented visually by a node.  The node graph can then be saved for easy reuse if we ever need to manipulate a future image in the same way, or if we simply want a reminder of exactly what was done to the image.  Download Genetica here.

In Genetica, start a new document and drag an Imported Image node into the empty slot in the middle of the workspace.  In the dialog that pops up select the normal.png file

Next drag an Invert node onto the Imported Image node, and then select Insert Below in the little menu that pops up.

We only want to invert the green channel of the normal map, so set the Invert node's Affect Red and Affect Blue properties to No.

We want to recolor the individual pixels of the normal map without resampling the image in any way, so make sure the Anti-Alias button is not pushed, and that the render resolution is set identically to the original image that was imported into Genetica (1024 x 1024 in this case).  Then render the image and export it as a PNG file named "normal inverted".

Import the inverted normal map and apply it to the model in the usual way.

The middle strip of the barrel is now indented as expected.

The Specular Map

The artist has also supplied a specular map, but there's no image slot to import it into our material in Unity.  The label "Gloss (A)" is our clue that Unity is looking for the specular data in the alpha channel of our main color map.  Because the artist has supplied the specular information in a separate image, we must combine them in Genetica.

Start a new document in Genetica and then drag an A + B node into the empty slot.  This node can be found in the Combine category of the Library panel.  Then insert an Imported Image node into each of the A + B's two empty inputs.  In the first Imported Image load diffus.png, and in the second one load specular.png.

Drag a Colorize node over the second Imported Image, and select Insert Below in the little menu that pops up.  Then click the Edit button appearing in the properties panel.

Delete the two color handles on the gradient by selecting each one and tapping the delete key on your keyboard.

Then create two handles on the transparency bar.  Drag one handle to the leftmost position and give it a maximum value.  Drag the other handle to the rightmost position and set it to zero.  Close the dialog by clicking OK.

The color and specular maps are now properly combined into a single image.  Don't worry about the combined map looking semi-transparent.  Unity won't make the barrel transparent, but instead will interpret the transparency as glossiness or specularity.

Back in Unity, import our combined map and apply it to our material.  Also make the Main Color and Specular Color properties of the material pure white in order to increase the vibrancy of the material.

The model and its material channels have now been successfully imported into Unity.  Woo!

Continue reading . . .

How to Make a Checkered Tile Floor Texture

In this tutorial we'll learn how to make the following checkered tile floor seamless texture.

Step 1

Load Genetica and then start a new document.  If you don't have Genetica already, download it here.

  

Step 2

Genetica will automatically switch to the Nodes tab.  With the Advanced Nodes category selected, drag a Synthesis node into the empty slot that can be found in the middle of the workspace.

The Synthesis node is the quickest way to get a texture started since it will automatically make seamless textures from photographs.

With our newly-created Synthesis node still selected, click the Edit button in the Properties panel.

  

Step 3

The Texture Synthesis dialog that pops up is a lot of fun.  With it you can create countless seamless textures from photographs, many of which take just a few seconds to create.

For this tutorial we’ll just pick one of the ready-made presets.  From the Rock category, select the Red Mottled Rock preset, and then close the dialog by clicking OK. 

Step 4

If you look closely at the texture we're creating, you’ll notice that the different tiles use the same base texture, but are colored differently.

Although we could copy and paste the Synthesis node, that would create an inefficient texture because the material would need to render twice.  Instead, drag the node to a blank spot in the workspace while simultaneously holding the Ctrl key.

This results in two Reference nodes being created, both of which refer back to the original texture.  A more detailed explanation of how this works is available here.

Step 5

Let’s modify the color of the second Reference node.  With the Color section of the Library panel selected, drag a Change HSB onto the Reference node.  In the menu that appears, select Insert Below.

This causes the output of the Reference node to be passed into the Change HSB node for further modification.  But the Change HSB won't actually do anything until its properties have been adjusted, so set its Hue property to -42.

Step 6

Repeat the process, this time dragging a Change BCI node from the Library panel onto our newly created Change HSB, remembering to select Insert Below in the little menu that pops up.  Set the Change BCI node’s Brightness property to -20, and its Contrast property to 13.

Step 7

Now that we’ve created the two differently colored versions of the texture, it’s time to combine them.  Insert a Combine node below the first Reference node.

Then drag the disconnected branch into the Combine node's second input.

Your node tree should now look like this:

Step 8

We need to tell the Combine node how to mix the two versions of the material together.  To do that, drag a Gradient node into the Combine’s third slot.  Then set the Gradient node’s Size property to 2 x 2, and its Gradient Type property to Dimples.

At any time during the tutorial you can click the Render Texture button to see how our texture is coming along.

Step 9

The checker pattern has started to take shape, but it needs to be sharpened.  Insert a Change BCI node below the Gradient node, following the example of step 5.  Then, set the Change BCI's Contrast property to 3000.

Step 10

Now that our checker pattern has been created, let's accentuate the effect by adding thin lines between the checker squares.  Start by inserting a second Combine node below the existing one.

Step 11

Insert a Gradient node into the newly-created Combine node's last input.  Set the Gradient's Size to 4 x 4, and its Gradient Type to Pyramidal.

Step 12

Again we want to sharpen the Gradient node that we just created.  Insert a Change BCI node below it, and set the Change BCI's Brightness to 49, and its Contrast to 3000.

Step 13

Select the final Combine node by clicking it, then set its First Input property to Input 2, and its Opacity property to 0.4.

Step 14

Here's the texture that we have so far:

If you want a newer-looking version of the texture you can stop here.  Otherwise, insert a Weather Lab below the final Combine node.  The Weather Lab can be found in the Advanced Nodes category of the Library panel.  Next, click the Edit button appearing over the Weather Lab, which will take you to a special tab containing the node's properties.

First, select the Adjust Color section and set the New Color Strength property to 80.  This will give some parts of the texture a dirty, greenish tinge.  If you'd like to change the color of the dirty areas, experiment with the New Color property that is also found in this section.

In the Indent section of the Weather Lab, set the Depth property to 30.  This will give our texture a pitted appearance.  To change the shape or frequency of the pits, experiment with the properties found in the Area Selection section.

Step 15

Our texture's complete!  All that remains is to select our desired render size, to render the texture, and to export it.

Continue reading . . .