Tiling a texture with a custom sprite based shader

Questions
1

Any of you shader wizards know how to make a texture tiled in a custom shader, which already has set the correct uv data in the vertex shader. Would I need to change the calculation in the vertex shader or is there a way to do it in the fragment shader?

Example is in playground below, basically it’s displaying 5 meshes with the numbers 1-5 currently, all from my texture atlas shader – I’m trying to make the 5 meshes repeat the numbers displayed in a tiled manner. The main problem I’m having is, I can sort of make it “tile” in the fragment shader, but then it breaks the bounds set by the vertex shader - (1320 and 1333 are relevant line numbers. Change repeat to 2.0 on 1320 to see it tile, but also break its bounds, and show incorrect numbers). – So I’m thinking maybe I need to do it in the vertex shader, some sort of modulo operation there to start the coordinates over at a certain scale? IDK

https://www.babylonjs-playground.com/#AIFTUT

Also – Texture modes and UV variables have no bearing on custom shaders, i.e.
texture.wrapU = BABYLON.Texture.MIRROR_ADDRESSMODE; texture.uScale = 0.25; texture.vScale = 0.25; etc, don’t do anything correct?

2

Your PG does not work:
image

Indeed, you have to do it yourself, at least for the scales. The wrap mode is set on the texture, though, so it will be in effect in your custom shader.

3

PG works just have to hit the play button once it loads

4

You can simply pass the u/v offset as well as the texture width/height of your tile to your fragment shader (that is, cellInfo) and compute there the u/v coordinates to use:

  vec2 uv = vUV * vCellInfo.zw + vCellInfo.xy;

As you want to tile, you can do:

  vec2 uv = mod(vUV * vec2(4., 4.), 1.0) * vCellInfo.zw + vCellInfo.xy;

Or simply scale vUV in the vertex shader and do:

  vec2 uv = mod(vUV, 1.0) * vCellInfo.zw + vCellInfo.xy;

https://www.babylonjs-playground.com/#AIFTUT#1

1 Like
5

awesome thank you! was racking my brain yesterday trying to get it right