Metaball GLSL Effect

Discussion and feedback on Construct 2

Post » Tue Sep 11, 2012 5:14 am

Hi guys.

I've been trying to put together a metaball effect, which would be handy for fluids, with the new C2 effect system. I've used this as a blueprint - but I'm getting some serious errors when I try and run it:

[QUOTE]Assertion failure: Error compiling fragment shader: ERROR: 0:7: '' : No precision specified for (float)
ERROR: 0:7: '' : No precision specified for (float)


Stack trace:
assert2@http://localhost:50001/preview_prelude.js:12
@http://localhost:50001/glwrap.js:299
GLWrap_@http://localhost:50001/glwrap.js:213
Runtime@http://localhost:50001/preview.js:227
@http://localhost:50001/preview.js:2664
@http://localhost:50001/:105
@http://localhost:50001/jquery-1.7.1.min.js:2
@http://localhost:50001/jquery-1.7.1.min.js:2
@http://localhost:50001/jquery-1.7.1.min.js:2
@http://localhost:50001/jquery-1.7.1.min.js:2[/QUOTE]

Anyone know what these are really saying? This is the .fx file. This is the .xml file.cow_trix2012-09-11 05:15:22
B
55
S
12
G
8
Posts: 339
Reputation: 9,314

Post » Tue Sep 11, 2012 6:11 am

The 0:7 is the column:row in th .fx file of the error and "No precision specified for (float)" is the error.

I found this page that seems relevant:
http://learningwebgl.com/blog/?p=2507

Add this line to the top of your shader and it won't assert.
[code]precision mediump float;[/code]

Hope that helps, from best I can tell this is a subtle difference between webgl glsl and opengl glsl.
B
79
S
24
G
52
Posts: 4,725
Reputation: 39,713

Post » Tue Sep 11, 2012 9:46 am

Thanks rojo! This has been a pretty brutal crash course in GLSL. No closer to a metaball shader, but if anyone can get it to work that'd be incredible! Think of the fluids.
B
55
S
12
G
8
Posts: 339
Reputation: 9,314

Post » Tue Sep 11, 2012 11:01 am

WebGL uses GLGL ES (for mobile) instead of desktop GLSL. Most snippets of GLSL you find on the web are probably desktop GLSL. GLSL ES is actually a slightly different language with different features and functions available. You can't expect everything that works in desktop GLSL to work in GLSL ES.

The biggest change is in GLSL ES every single float requires a precision specifier: lowp, mediump or highp. For example, "mediump float x" instead of just "float x". In GLSL ES not providing a precision is an error, which is what you were seeing.

You can also put a precision statement at the top which sets the default precision for everything, as @R0J0Hound said, and that should set the precision for all variables beneath it (so you still need to specify precision for variables above it). That should fix the error, but it's bad practice: mobile devices are slowed down by using unnecessarily high precision. The effect template from the SDK has comments guiding the use of precision, roughly along the lines of:
lowp - for samplers, color and opacity values, which are expected to be in the range 0-1
mediump - for texture co-ordinates and where lowp is insufficient precision
highp - not usually necessary (and not actually always supported), but may be necessary when very high accuracy is required for some reason in an effect.

Never use "precision highp float", this is almost always wrong. Even "precision mediump float" will needlessly cause slowdown by making samplers and colors use higher precision than necessary.

Hope that helps you understand!
Scirra Founder
B
359
S
214
G
72
Posts: 22,946
Reputation: 178,498

Post » Tue Sep 11, 2012 12:05 pm

Thanks Ash!

So basically what I'm trying to do right now is for each pixel where the alpha is above 0, flood out from that pixel, reducing the alpha each time by some inputted value. Any ideas how you'd implement this? I'm pretty stumped.
B
55
S
12
G
8
Posts: 339
Reputation: 9,314

Post » Tue Sep 11, 2012 12:20 pm

Some algorithms do not lend themselves well to shaders. I'm not sure how metaballs work specifically, but 'flood fill' is typically impossible with a shader, or not possible in a way which is remotely efficient. Remember a shader is effectively called for every pixel simultaneously, rather than sequentially. So if you need to take in to account surrounding pixels you need to make lots of extra calls to texture2D(), and the more you add the slower it'll be, especially on mobile.
Scirra Founder
B
359
S
214
G
72
Posts: 22,946
Reputation: 178,498

Post » Tue Sep 11, 2012 1:05 pm

Ah, darn. It seemed to me to just be a blur effect with a hard cuttoff? Any idea of how to pull of a metaball effect in C2?
B
55
S
12
G
8
Posts: 339
Reputation: 9,314

Post » Tue Sep 11, 2012 4:24 pm

Someone (can't remember who, sorry) shared some time ago this link to showcase what was possible with webgl, and the very last example is metaballs example that can be forked for code view. Maybe you find it usefull, I had similar thoughts of trying it out, but my lack of time and shader knowledge made me back off of the task.

http://webglplayground.net/gallerydEspadas2012-09-11 16:25:10
B
16
S
7
G
4
Posts: 29
Reputation: 4,957

Post » Tue Sep 11, 2012 9:12 pm

I'd think the Canvas plugin would be your best bet for metaballs.
B
90
S
30
G
24
Posts: 3,189
Reputation: 32,400

Post » Wed Sep 12, 2012 5:29 pm

I made a shader to simulate metaballs using an alpha threshold. I still need to polish some things then I'll release it to the community.

Here's an example of what can be done with it:

Metaballs Shader Example
Scirra Employee
B
129
S
45
G
15
Posts: 705
Reputation: 15,413

Next

Return to Construct 2 General

Who is online

Users browsing this forum: No registered users and 15 guests