Materials in web and android devices (SOLVED)

Questions
#1

Hey,

I came across with a problem about using materials in html5 and I hope someone can help me.
I created a material and wrote some basic vertex and fragment shaders.
They work fine in PC build, but when I try to run the game in html5, it just doesn’t start.
Same problem occurs with android build: when I run my game, it crashes in a moment.

Material just creates fading circle, nothing too complicated. It looks like this in PC build:

Link to the image

Could you please give some piece of advice regarding the usage of materials (with vertex and fragment shaders)?
Maybe you have some ideas why material works fine on PC and doesn’t work on web and my android device.

I would really appreciate any help. Thanks.

Fragment shader:

varying mediump vec4 position;
varying mediump vec2 var_texcoord0;
varying lowp vec4 var_color;

uniform lowp sampler2D texture;

uniform vec4 cnr;
uniform vec4 color;
uniform vec4 _time;
uniform vec4 _speed;

float drawCircleFade(float2 uv, float2 center, float radius, float feather, float fadeValue)
{
	float circle = pow((uv.y - center.y), 2) + pow((uv.x - center.x), 2);
	float radiusSq = pow(radius, 2);	
	
	float lowValue = 0.0;
	
	if(circle < radiusSq)
	{
		float result = smoothstep(radiusSq, radiusSq - feather, circle);
		return result * fadeValue;
	}
	else
		return lowValue;
} 

void main()
{
    lowp vec4 tex = texture2D(texture, var_texcoord0.xy) * color;
    float fadeVal = abs(sin(_time.x / 2  * _speed.x));
    float a = drawCircleFade(var_texcoord0.xy, float2(cnr.x,cnr.y), cnr.z, cnr.w, fadeVal);
    tex = tex * a;
    gl_FragColor = tex;
}

Vertex shader:

uniform mediump mat4 view_proj;
uniform mediump mat4 world;


attribute mediump vec4 position;
attribute mediump vec2 texcoord0;
attribute lowp vec4 color;


varying mediump vec2 var_texcoord0;
uniform vec4 offset;

void main()
{
    var_texcoord0.xy = texcoord0.xy;
    gl_Position = view_proj * vec4(position.xyz, 1.0);
}
1 Like
#2

Do you get any useful information logged on Android? Check with logcat and see if you get an indication of what’s wrong.

Shaders is not my area of expertise at all so I have no idea what’s wrong I’m afraid. Maybe you’re using a function that’s not available in Open GL ES 2.0?

@sven and @Mathias_Westerdahl, do you know?

#3

Not sure I’m afraid. I’d also advise to check the console log of the browser (show developer console) to see if it ways anything.

#4

Ok, thanks for the advice to take a look at logs (I have no idea why I haven’t thought about it earlier).

Turns out:
1). You cannot use unexpected types as input or outputs.
F.e.

if(circle < radiusSq)
    return 1;
else
    return 0.2;

This is an error as first return is an integer and the second one is a float.

float radiusSq = pow(radius, 2);

This is an error as ‘2’ is an integer and method expects a float. So with ‘2.0’ it works fine.

2). You cannot use such type as ‘float2’. It is supposed to be ‘vec2’.

If I fix both these problems it works as expected. Although PC build works fine without these fixes.

Thanks for your time and sorry for such dummy question, I should look at errors in logs sometimes.

4 Likes
#5

I’ve just had this issue come up as well. Using a shader that works fine on PC build, when building the html5 version having a comparison of a “lowp vec4” r channel to the int “0” the build failed. Might be an idea to force this to fail on the PC build so that it’s consistent between the build types.

Also, sorry for the repeated necromancy.