Tiled texture inside of mask

Allows you to tile a pattern inside of another texture acting as a mask (based on opacity). The pattern texture will scale from its center but you can always offset it using the offset uniform. 

HOW TO USE?

On a texture (TextureRect, Sprite, etc…) add a new ShaderMaterial and a new Shader and put the code below.

In the shader params, put the pattern texture you want to tile (make sure “repeat” is enabled in the import tab).

Play with the tile_factor and the offset, to obtain the result you desire! You can easily animate these values to make the pattern move.

Parameters

  • pattern: the tilable texture you want to use
  • tile_factor: the scaling factor, the bigger the more tilling
  • tile_offset: offset the texture from its center

 

Shoutout to Nekoto, for the help!

Shader code
shader_type canvas_item;

uniform sampler2D pattern;
uniform float tile_factor: hint_range(0.0, 10.0);
uniform vec2 tile_offset = vec2(0.0);

void fragment() {
	vec2 pattern_pixel_size = 1.0 / vec2(textureSize(pattern, 0));
	vec2 diff = pattern_pixel_size / TEXTURE_PIXEL_SIZE;
	
	vec4 in_tex = texture(TEXTURE, UV);
	
	// brings the uv to -1, 1
	vec2 centered_uv = UV * 2.0 - 1.0;
	vec2 tiled_uv = centered_uv * tile_factor * diff;
	
	// brings back the uv to 0, 1
	tiled_uv  = tiled_uv * 0.5 + 0.5;
	
	tiled_uv += tile_offset;
	vec4 pattern_tex = texture(pattern, tiled_uv);
	COLOR.rgb = pattern_tex.rgb;
	COLOR.a = pattern_tex.a * in_tex.a;
}
Tags
2d, masking, pattern, tiling
The shader code and all code snippets in this post are under CC0 license and can be used freely without the author's permission. Images and videos, and assets depicted in those, do not fall under this license. For more info, see our License terms.

More from mreliptik

Loading effect (color over grayscale)

2D simple animated flag shader

3D simple animated flag shader

Related shaders

Simple tiled texture scroll

Texture population using Texture

Hex Mask/Border/Outline

guest

0 Comments
Inline Feedbacks
View all comments