How to write shader, blurring texture relative some world coordinate

Yan · February 2017

Please help me to write this shader, I read a tons of info about, but still cant figure out how to deal with texture positions.

muro · February 2017

+1

hgy29 · February 2017

Hi @Yan, I'd like to help but I don't know where to start and not sure about what you want to achieve... Can you post here your current code ?

Yan · February 2017

Now im just trying to fugure out how to work with angles, and so on. Each shadow is a one separate Sprite, so I need it to soften somehow. I fond a solution to make alpha all borders from center to edges, through the center axis. But still cant figure out how to make this thing, I cant do anything until I have no debug stuff, Im just doing, but I cant check myself, I didnt expect how to make anything so hard without debug ...

BlurEffect={}
 
BlurEffect.VS_GL=[[
uniform highp mat4 vMatrix;
 
attribute highp vec3 vVertex;
attribute mediump vec2 vTexCoord;
 
varying mediump vec2 fTexCoord;
 
void main() {
  vec4 vertex = vec4(vVertex,1.0);
  gl_Position = vMatrix*vertex;
  fTexCoord = vTexCoord;
}
]]
 
BlurEffect.FS_GL=[[
#ifdef GL_ES
  precision mediump float;
#endif
 
uniform lowp vec4 fColor;
uniform lowp vec2 sPoint;
uniform mediump vec4 fTexSize;
uniform lowp sampler2D fTexture;
 
varying mediump vec2 fTexCoord;
 
void main()
{
	vec2 lightCoord		= sPoint;
	vec2 textureCoord	= fTexCoord;
 
	float ang = acos(dot(textureCoord, lightCoord)) * 180 / 3.14;
 
	vec4 solidRed = vec4(0,0,0,0);
 
	//solidRed.a = 0.9 - length(lightCoord.xy - textureCoord.xy);
 
	if (ang > 70) {
		solidRed.a = 0.5;
	}
 
    gl_FragColor = solidRed;
}
]]
 
-- sX, sY (light position)
 
BlurEffect.Shader:setConstant("sPoint", Shader.CFLOAT2, 1 , {sX / self.world.size.w, sY / self.world.size.h})

hgy29 · February 2017

Well, at first sight I don't understand the logic behind your math!

Assuming you use a Bitmap as a way to apply your shader, then your textureCoord will vary from (0,0):top-left corner to (1,1): bottom-right corner (if the texture used with your bitmap is power of two sized).
Your lightCoord is predivided by world width and height, so I assume your shading bitmap is applied all over your world too, right ?

But then I don't get what

acos(dot(textureCoord, lightCoord))

is supposed to compute...

Here's what I would have computed:

 vec2 lightToPixel=textureCoord-lightCoord;
 vec2 lightDirection=vec2(0.0,1.0);
 vec2 lightDirProjection=dot(lightToPixel,lightDirection);
 float angle=acos(length(lightDirProjection)/length(lightToPixel));
 float distanceFromLightDir=length(lightToPixel-lightDirProjection);

Yan · February 2017

Nope my Shading bitmap is relative to world positioned Shape, drawed by code. Ive attached my shadows lib, you to understand how Im producing shadows, code is simple ang clear.

And I dont know how to find light direction ...

hgy29 · February 2017

Ok, I understand better. Since your shadow is just a black/translucent shape, you don't need texture coordinates at all. I think it would be easier to use actual world coordinates in the shader. Just convert vertex position to world position in vertex shader thanks to world matrix (SYS_WORLD) and pass it as a varying to the fragment shader.

Then supply your light source position as world position directly (no need to divide by world size).

From there it should be more straightforward to compute shading.

Yan · February 2017

Ok, I understand better. Since your shadow is just a black/translucent shape, you don't need texture coordinates at all. I think it would be easier to use actual world coordinates in the shader. Just convert vertex position to world position in vertex shader thanks to world matrix (SYS_WORLD) and pass it as a varying to the fragment shader.

Then supply your light source position as world position directly (no need to divide by world size).

From there it should be more straightforward to compute shading.

Did solved, with some issues, give a feedback later ...

Howdy, Stranger!

Categories

In this Discussion

Top Posters

How to write shader, blurring texture relative some world coordinate

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

How to write shader, blurring texture relative some world coordinate

Comments