Metaball GLSL Effect

0 favourites
From the Asset Store
Create unlimited effects lets you create stunning visual effects with an instant preview.
  • 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:

    ssertion 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

    ://localhost:50001/glwrap.js:299

    GLWrap_@http://localhost:50001/glwrap.js:213

    Runtime@http://localhost:50001/preview.js:227

    ://localhost:50001/preview.js:2664

    ://localhost:50001/:105

    ://localhost:50001/jquery-1.7.1.min.js:2

    ://localhost:50001/jquery-1.7.1.min.js:2

    ://localhost:50001/jquery-1.7.1.min.js:2

    ://localhost:50001/jquery-1.7.1.min.js:2

    Anyone know what these are really saying? This is the .fx file. This is the .xml file.

  • 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.

    precision mediump float;

    Hope that helps, from best I can tell this is a subtle difference between webgl glsl and opengl glsl.

  • 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! <img src="smileys/smiley1.gif" border="0" align="middle" /> Think of the fluids.

  • 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!

  • 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.

  • 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.

  • 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?

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • 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/gallery

  • I'd think the Canvas plugin would be your best bet for metaballs.

  • 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

  • I�m amazed o.o

  • Agh, I can't take it anymore! My eyes physically cannot stop reading metaball as "meatball" and now I'm starving. <img src="smileys/smiley19.gif" border="0" align="middle" />

  • That is awesome Animmaniac. Looking forward to trying it out once you release it. :)

  • I think that forum is going to explode really soon.

    All that things Animmaniac is planning to release...

  • I look forward to using this in my projects..

    It seems to run at an amazing frame rate!

    Just wanted to add how I came into this topic thinking what the hell is a

    Meatball effect

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)