Jump to content

Repeating/tiling a texture from a texture atlas


Recommended Posts


How impossible would it be for the standard shader (or a fork of it?) to make it possible to repeat or tile a given section of a texture, as for example a sprite taken from a texture atlas?

In other words, start with something like this example scene. I've assigned a texture to a mesh, and set the uv scale/offset to display a single sprite out of the sheet. What I'd like to do is to further modify this, so that particular sprite repeats several times across the geometry.

Notionally, I think this would mean something along these lines:

texture.localUScale = 2
texture.localVScale = 5

and then sprite defined by the current scale/offset would then tile 2 times horizontally and 5 times vertically. Note that this is not what would happen if I changed the existing scale/offset properties - that would make several different sprites appear, instead of the same one repeated.

Currently I think this is impossible without editing the texture or the mesh geometry. Is this something that could feasibly be supported?

Link to comment
Share on other sites

Boy, its late, but I have an idea.  Let's pretend... your objective... is a dynamicTexture.  It can tile easily just like the grass in the PG's materials demo.


Notice the 3rd usage:  drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

This is a cropper, that works with context2D canvai.  Here's an ad-infested web site that talks about it.  http://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/

Babylon dynamicTextures... are canvas-based things.  You could make a new canvas, crop-out the sprite from the sprite atlas, buffer it up, (and paint it on a new canvas if you wish), and then make a dynamicTexture from that cropping/buffer data.  Then use it like any other texture. 

I don't know exactly how to use the cropped-image (its buffer)... AS a dynamicTexture, though.

Okay, that was my idea.  I think it will work.  I use it to steal VIP signatures from scanned documents... for fun and profit.  ;)  Be well, party on!

Link to comment
Share on other sites

Thanks for the reply Wingy. I know that this can be done by editing the texture, but as I understand it that would remove the benefits of using an atlas in the first place (being able to render multiple meshes without re-binding the texture).

So my question here is whether it can be done with a texture from an texture atlas. Any further ideas appreciated!

Link to comment
Share on other sites

2 hours ago, NasimiAsl said:

hi you say in Standard material can you change it to Shader Material :)

Hi. Do you mean what I'm asking about would be possible with a custom shader? 


2 hours ago, jerome said:

What is the type of the mesh concerned ?

I'm not using any of the default types, I'm constructing various arbitrary shapes dynamically. So I think that would be a useful feature, but it wouldn't affect what I'm doing.

Link to comment
Share on other sites

16 hours ago, fenomas said:

Hi. Do you mean what I'm asking about would be possible with a custom shader?  

yes you can do it in custom shader  ( and standard material too with add special uv  and make that)

vec2 newUV = vec2( mod(  uv.x*AreaWidth ,1.0)/AreaWidth +AreaLeft/TextureWidth , mod(  uv.y*AreaHeight ,1.0)/AreaHeight +AreaTop/TextureHeight );


just have little problem in texture border i am work for solve that


Link to comment
Share on other sites

hi again :) border problem can be fix if you use the special tiled pic  


like this if you look that pic you see 4 tiled pic and we can get borders color from center of area 



if you think that can be solve that problem tell me i refactor code and make that for general textureAtlas



Link to comment
Share on other sites


Wow, that looks awesome! Though I don't really understand any of it :)  I guess the "ShaderBuilder" bit is taking some basic shader and adding extra logic to it, right? I've never touched custom shaders before.

As for the edges, I found this article discussing the topic. Perhaps what he says about mip-mapping is the issue?

Link to comment
Share on other sites

  • 3 weeks later...

@NasimiAsl that would be really great. I think maybe I can hack on it and find a solution, but I don't know how to go about using a custom shader in BJS, or how to pass in extra texture properties, and where in the shader to use them, etc.

Also, about the edge issue, can you say a few more words about what the issue is? Do you think it's the same issue as in the article I linked (i.e. caused by mipmapping), or something different?

In my case I am building my own texture atlas dynamically, so I can structure it however it needs to be. But I don't quite follow what the problem was and why the atlas you posted works around it.

Thanks for your help!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...