Shader Loop Question

[Nabroski]

 

 

• vuv = vector of two components {x , y} /4.
• the range for x = | 0 - 1 |
•  the range for y = | 0 - 1 |
• vuv divided by four =  0,25
  vuv / 4. + 
• fract (implementation in glsl x-floor(x)) 
• vector of two components {_t , 3 - _t / 4) }/ 4. 
• mod(time,16) = time modulus operator 16 means is the number divisible by 16 ? yes return true : false return flase
• 3-mod(time,16)-4/4 means step 1 time slower then the x component in the vetcor
• 3-(mod(0.0)/4 when b = 0 = 0.75
• again devide by four

and so on

http://www.wolframalpha.com/input/?i=({y,x}%2F4.)%2Bfract(({0..16,3-0..16%2F4})%2F4.),x%3D0..1.,y%3D0..1.

 

float how many frames = 16

mod(time,how many frames)

float length of one image = 4? so its equal divisible

vuv /  length of one image . + fract(vec2(_t, 3 - _t /length of one image  ) / length of one image  ));

 

 

[Nabroski]

@Pryme8

i press the enter key to early

look at this pic x:y{0,0} is in the left-bottom x:y{1,1}

how many frames[cel,rows] 8x4 = 32

length of one image = 4? (.25 ?)

vuv / 4. + 

 

100/8 rows = 12,5, - but i guess its smaller  you have to figure it out 
 

 

 

@Pryme8

also this is not an 8rowsx8cells image so you have to cut the last cells (fract(vec2(_t, 3 - _t /FIVE OR LESS  )/ALSOABITTRICKY) 

[Nabroski]

(sorry, for three post in a row, their is kind of short cut that makes you submit ...weird)

i'm also no genius here, change some numbers and see what the do, - the main challenge is to equally cut the frames 100/8 = 12.5(1 frame width) rows and 100/5=20(1 frame height) cells

we are close 

 

[Pryme8]

Ok I think I figured out why there has been so much trouble with this.

My base shader is broken and not working correct if you look here:

|

This is a test level rendered out using the tile map:

Its kinda hard to see so here is a scaled up version:


So something is wrong with how I am looking up the tiles.

http://media.tojicode.com/webgl-samples/js/webgl-tilemap.js
This is the example I am working off of.

and this is what I have so far:

var _vs =
`
precision mediump float;
// Attributes
attribute vec3 position;
attribute vec3 normal;
attribute vec2 uv;
// Uniforms
uniform mat4 worldViewProjection;
uniform float time;
uniform vec2 viewOffset;
uniform vec2 viewportSize;
uniform vec2 inverseTileTextureSize;
uniform float layerHeight;
uniform float tileSize;
// Varying
varying vec3 vPosition;
varying vec2 vUV;
varying vec2 pixelCoord;
varying vec2 texCoord;
void main() {
    vec4 p = vec4( position, 1. );
    vPosition = p.xyz;    
    gl_Position = worldViewProjection * p;
    vUV = uv;
    vUV.y = vUV.y * -1.;
    pixelCoord = (vUV * viewportSize) + viewOffset;
    pixelCoord.y = pixelCoord.y + (viewportSize.y*0.5) + ((layerHeight*tileSize)/2.0);
    texCoord = pixelCoord * inverseTileTextureSize * (1.0/tileSize);
}
`;
var _fs =
`
precision mediump float;
#define pU 1./255.
uniform float time;
uniform float fps;
uniform sampler2D tiles;
uniform sampler2D animationMap;
uniform sampler2D sprites;
uniform vec2 viewportSize;
uniform float tileSize;
uniform vec2 inverseSpriteTextureSize;
uniform vec2 inverseTileTextureSize;
uniform vec3 globalLight;

varying vec3 vPosition;
varying vec2 vUV;
varying vec2 pixelCoord;
varying vec2 texCoord;

void main(){
vec4 tile = texture2D(tiles, texCoord);
if(tile.x == 1.0 && tile.y == 1.0) { discard; }

vec2 spriteOffset = floor(tile.xy * 256.0) * tileSize;
vec2 spriteCoord = mod(pixelCoord, tileSize);
vec4 tSample = texture2D(sprites, (spriteOffset + spriteCoord) * inverseSpriteTextureSize);
vec3 color = tSample.xyz;
float alpha = tSample.a;

color = color * globalLight;

gl_FragColor =  vec4(color, alpha);
}
`;
 

Any clue anyone?

[Pryme8]

Here is another example of whats going wrong.

I think I must be filtering or doing something to the textures that is not correct.
Here is the map:
Here is the scaled version for easy viewing: 
This is what it should look like (photoshop edit):


But this is what it looks like:


do the textures need to be power of 2?

[Nabroski]

So the only differenceis the extra blank space ? IDK maybe becourse some camera matrix computation is happening ?

vec4 p = vec4( position, 1. ); //
    vPosition = p.xyz;    
    gl_Position = worldViewProjection * p;

so the plane has a depth, babylonjs will also compute all the necessary steps befor it gets to |-1, 1 | coords of your screen, (maybe) it also lead to distortion
https://github.com/Pryme8/TileMaster/blob/gh-pages/ani-test.html#L273

 

[Pryme8]

Ok, I think if I figure out this last part we will be cooking!

Riddle me this.
So when I make the layer map, lets say I paint all the tiles r:1,g:0,b:0 (outa 255);
Now when I sample a tile I should get a return of
[1/255, 0/255, 0/255, 1.0]
but if I do something like this in the shader:

if(tile.x == 1./255.){discard;}

Nothing effectively happens so its making me think the values are wrong somehow.
because lets say I wanted to do something like

tile.x = (1./255.)*2.0;  or tile.x = (1./255.)*3.0;
it will select the correct tiles.

So Im thinking for some reason the value of the rgb sampler values are being converted incorrectly somehow.

 

[Nabroski]

https://www.google.de/search?q=1.%2F255.

if (tile.x ==0.003 ?

Also check if the AlphaBlending is On

{ needAlphaBlending: true, needAlphaTesting: true }

https://playground.babylonjs.com/#PYK67E#25

 

 

[Pryme8]

So in the shader it cuts it to a floored three decimal places for the 255 value converted into 0-1?

 

[Nabroski]

"Now when I sample a tile I should get a return of
[1/255, 0/255, 0/255, 1.0] "

No if you want to test against r:1 you should do 255 /254 ~ 1.00390625

https://www.khronos.org/registry/OpenGL/specs/es/2.0/GLSL_ES_Specification_1.00.pdf

mediump - 10 bit, floating point range: -2^14 to 2^14, integer range: -2^10 to 2^10

https://oletus.github.io/float16-simulator.js/

 

[Pryme8]

Your a boss!!!
#define pU 0.00392156862

then later
if(tile.x == pU)discard;

just to test works! I am stoked. thanks dude for some reason I assumed 1./255. would have worked but I must of had my floats set wrong!

I should have everything worked out now thank you for your help! @Nabroski

[Pryme8]

https://pryme8.github.io/TileMaster/dev/ani-test.html

Got it, Ill have a cool demo done by the end of this weekend I hope!
Time to start working on the light calculations.