javascript - Writing fragment shaders: cannot make sense of how the uniforms are defined -

i'm trying make custom filters phaser, don't how uniforms, , vtexturecoord in particular specified. here's jsfiddle (edit: ignore image, minimal case lays in square gradient):

• why isn't top-right corner white? i've set both filter resolution , sprite size 256, yet vtexturecoord goes [0,0] [.5,.5] (or seems)
• try dragging sprite: seems blocked wall @ top , left borders. it's shader-related though, game object correctly dragged. how come?

i pulled hair on 1 during last ludum dare, trying figure out pixel position within sprite (i.e. [0,0] on bottom left corner , [sprite.w, sprite.h] on top right one)... couldn't find reliable way compute whatever sprite position , size are.

thanks help!

---

edit: emackey pointed out, seems either phaser or pixi (not sure @ level it's handled?) uses intermediate texture. because of usampler not original texture, modified one, is, example, shifted/cropped if sprite beyond top-left corner of screen. usampler , vtexturecoord work together, long i'm making simple things color tweaks seems well, toying texture coordinates it's not reliable.

can phaser/pixi guru explain why works way, , i'm supposed clear coordinates , work actual source texture? i managed hack shader "fixing vtexturecoord" , plugging texture in ichannel0, feels bit hacky.

thanks.

i'm not familiar phaser, can shed little light on fragment shader doing. load jsfiddle , replace glsl main body this:

void main() {     gl_fragcolor = vec4(vtexturecoord.x * 2., vtexturecoord.y * 2., 1., 1.);     gl_fragcolor *= texture2d(usampler, vtexturecoord) * 0.6 + 0.4; } 

the above filter shader combination of original texture (with gray added) , colors, can see both texture , uvs @ same time.

you're correct vtexturecoord goes 0.5, hence * 2. above, that's not whole story: try dragging sprite off top-left. texture slides texture coordinates don't move!

how possible? guess original sprite texture being rendered intermediate texture, using of sprite's location info transform. time custom filter runs, filter glsl code running on what's transformed intermediate texture, , texture coordinates no longer have known relation original sprite texture.

if run chrome canvas inspector can see indeed there multiple passes, including render-to-texture pass. can see filter pass using coordinates appear ratio of filter area size game area size, in case 0.5 on both dimensions.

i don't know phaser enough know if there's quick fix of this. maybe can add uniforms filter give shader transform needs, if can figure out comes exactly. or perhaps there's way attach shader directly on sprite (there's null field of same name) possibly run glsl code there instead of in filter. hope answer has @ least explained "why" of 2 questions above.