Repeating/tiling a texture from a texture atlas

[fenomas]

Hi,

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?

[fenomas]

Fluff: thanks for the reply, but I'm not using Blender or any other authoring story. I'm just applying textures manually and twiddling properties at runtime, like in the playground link.

With that said, if there's a way to do it from Blender, then maybe BJS already knows how to do this. Does anyone know?

[Wingnut]

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.

https://www.w3.org/TR/2dcontext/#drawing-images-to-the-canvas

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!

[fenomas]

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!

[NasimiAsl]

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

[jerome]

when I get some free time, I'll probably add the way for the user to set the UV in the mesh geometry at construction time (like it works for faceUV for boxes or cylinders)

What is the type of the mesh concerned ?

[fenomas]

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.

[Diaco]

Hi

@Wingnut 's idea leads me to this :

 http://codepen.io/MAW/pen/416c7b6f09db70d4da7b2006d3d76220?editors=0010

[NasimiAsl]

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 );

http://www.babylonjs-playground.com/#1ODVTX#1

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

 

[NasimiAsl]

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 

http://www.babylonjs-playground.com/#1ODVTX#6

http://www.babylonjs-playground.com/#1ODVTX#7

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

 

 

[fenomas]

Nasimi:

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?

[fenomas]

Does anyone know how this can be done generally? I sort of follow Nasimi's demo, but not enough to generalize it, or understand what the issue with the edges was or how to work around it. Thanks!

[NasimiAsl]

i read this Article but i cant make good sample

[NasimiAsl]

@fenomas if you accept my way to solve the edge problem i refactor the lash and make your wanted shader

[fenomas]

@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!