Writing Fragment Shaders: Can't figure out how uniforms are formed
I'm trying to create custom filters using Phaser, but I don't understand how the form and are specifically defined vTextureCoord
. Here's the JSFiddle (EDIT: ignore image, minimum case is in square gradient):
- Why isn't the top right corner white? I set both filter resolution and sprite size to 256, but
vTextureCoord
only works from [0,0] to [.5, .5] (or so it seems) - Try dragging the sprite: it seems to be blocked by a wall at the top and left borders. This is only related to the shader as the game object itself is being dragged correctly. Why?
Ludum Dare, ( [0,0] [sprite.w, sprite.h] )... , .
!
: emackey, , Phaser, Pixi ( , ?) . - uSampler
, , , , /, . uSampler
vTextureCoord
, , , , , .
Can the Phaser / Pixi guru explain why it works this way and what should I do to get the coordinates sharp and work with my actual source texture? I managed to hack the shader with "fixing vTextureCoord
" and plug my texture in iChannel0
, but this is a bit hacky.
Thank.
source to share
I'm not very familiar with Phaser, but we can shed some light on what this fragment shader really does. Download the jsFiddle and replace the main GLSL body with 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 is a combination of the original texture (with added gray) and your colors, so you can see the texture and UVs at the same time.
You are right that vTextureCoord
only fits 0.5
, hence the * 2.
above, but that's not the whole story: try dragging your sprite from the top left. The texture is sliding, but the texture coordinates are not moving!
How is this possible? I am assuming the original sprite texture is mapped to the intermediate texture using some sprite location information to transform. When your custom filter runs, your GLSL filter is running on what is now being converted by the intermediate texture, and the texture coordinates are no longer known to be related to the original sprite texture.
If you run the Chrome Canvas Inspector , you can see that there are actually multiple passes, including the render pass to the texture. You can also see that the filter pass uses coordinates, which are the ratio of the filter area size to the playing area size, which in this case is equal 0.5
for both dimensions.
I don't know Phaser well enough to know if there is a quick solution to any of this. Maybe you can add some uniforms to the filter that will give the shader the extra transformation it needs, if you can figure out where this is coming from. Or maybe there is a way to bind the shader directly to the sprite itself (there is a null field with the same name) so you can run your GLSL code there and not in the filter. I hope this answer at least explains the "why" of your two questions above.
source to share