About WebGL effects

0 favourites
From the Asset Store
Wind effect
$2.49 USD
Animated wind effect for objects, grass, trees, etc.
  • Ashley ,

    I am sorry for my ignorance, but I'd like to know if the WebGL effects that are included in C2 are a standard bundle that come with the browser's HTML5 support, or the Scirra team went ahead and created them.

    If the latter is true, then may I ask for an additional x,y origin point properties for all the radial effects (radial blur, radial pixellate, warp radial, radial pixellate mask)???

    Been able to control the radial blur's and radial warp's center will be especially useful for creating all sorts of (un)focus and zooming effects.

    (for example, have a look at this: http://www.eli0s.com/Tests/Warp/ The radial blur works ok when close to the center but breaks down the further you move the mouse. Ideally, the effect should follow the center of the warp and the streaks would look much better (this is clearly noticeable when firing the lasers)) EDIT-I've updated the example and now it uses the Radial blur plus... See post bellow <img src="{SMILIES_PATH}/icon_e_smile.gif" alt=":)" title="Smile">

    Please tell me if this is a realistic request <img src="{SMILIES_PATH}/icon_redface.gif" alt=":oops:" title="Embarrassed">

    Thank you,

    Elias

    -EDIT-

    Here is the capx file for anyone that might be interested. Please note that you'll need the Textured Warp effect by GamesWarp Studio and that you'll have to edit the official Sprite plugin in order for the effect to work. There are instructions on their site on how to achieve that. Do that on your own risk.

    [attachment=0:3ak1hohy]Warp.capx[/attachment:3ak1hohy]

    -EDIT-

  • Last time I checked, I think there was the name of the effect's creator in the effect description for built in effects

    EG: Alpha clamp

    Set alpha to a minimum or maximum value using a threshold. (By: Scirra)

    And also there were none "standard bundle", even though they may be based off simple expressions in the langage they are done with.

    So this request would make sense.

  • Thank you Aphrodite , again I apologize for my ignorance I forgot about the reference to the creator, I knew it was there but it had slipped my mind.

    For what is worth then, it's a request for the Scirra team and for mister Brad Larson (which I don't know how to get in contact with)!

  • WebGL effects are programmed using special small programs called shaders. These are not built-in to the browser, they are hand written. If you learn the basics of GLSL (OpenGL shading language), it should be possible to make your own new effects which have new features like those you propose.

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • Ashley , if I was able to learn something like that I would have been a happier and more intelligent person. Unfortunately I am not. I know that this is probably something trivial for someone with your knowledge but I am illiterate in terms of programming languages.

    Perhaps if I invest some months, I'll learn the basics of GLSL (although I strongly doubt about that), but I estimate it will take much-much less time for someone that knows what he/she is doing, to add these features. That's the reason I ask.

    Since you are the one who made the radial blur and warp effects, you know better than anyone how and if it can be done. That is if you I agree with me about those options and if your developing schedule allows it.

  • it wont take you months, look at the GLSL code for the effects you're looking at, add 2 parameters, and add an offset by adding the value of those parameters to whatever is choosing the blur position, voila you're done. If you can code in construct you can do this

  • Making effects is not that difficult actually, I've made few of them without any knowledge or learning but only looking at existing files in effects folder.

    There are some things I can't still figure out (like this) but simple experimentation can give you quite nice results.

  • QuaziGNRLnose , what I wrote to Ashley applies to you also: you guys can't even begin to understand how frustrating coding looks to someone that wasn't exposed to it like you did, when you did.

    I am not claiming that I know you or something, don't get me wrong, I admire you guys for what you do! It's just that I wouldn't believe if you told me that you had no prior experience in programing what so ever up until your thirties, and suddenly you decided to grab visual studio or something and you came up with Construct or Q3D. Somehow you laid foundations in knowing how the logic works, what the syntax means and so on.

    On the other hand, to put it with an analogy, someone that was blind until his mid thirties and miraculously found his light, does not have the necessary neurons to interpret the visual stimuli.

    What is great in C2 it's that it bridges this gap with the event system's logic. However, making a platformer or a top-down shooter in C2 doesn't substitute for proper programming education.

    So, to sum it up, I do understand the logic behind your advice but I don't get where those parameters live inside the code! For example, this is how I see the code:

    //some stuff that are necessary for the shader.
    precision mediump float;
    varying vec2 vTex;
    uniform sampler2D samplerFront;
    
    //I guess that these are declared variables, like global variables in C2
    uniform float pixelWidth;
    uniform float pixelHeight;
    uniform float intensity;
    uniform float radius;
    
    void main(void) //this is the function (?) that does the trick
    {
    	vec2 dir = 0.5 - vTex; 
    	float dist = sqrt(dir.x*dir.x + dir.y*dir.y); 
    	dir = dir/dist; 
    	vec4 front = texture2D(samplerFront, vTex); 
    // I guess that the position of the center is been determined somewhere in the above 4 lines, but I don't get where or how.
    
    	vec4 sum = front; //No idea what so ever.
    
    	sum += texture2D(samplerFront, vTex + dir * -0.08 * radius);
    	sum += texture2D(samplerFront, vTex + dir * -0.05 * radius);
    	sum += texture2D(samplerFront, vTex + dir * -0.03 * radius);
    	sum += texture2D(samplerFront, vTex + dir * -0.02 * radius);
    	sum += texture2D(samplerFront, vTex + dir * -0.01 * radius);
    	sum += texture2D(samplerFront, vTex + dir * 0.01 * radius);
    	sum += texture2D(samplerFront, vTex + dir * 0.02 * radius);
    	sum += texture2D(samplerFront, vTex + dir * 0.03 * radius);
    	sum += texture2D(samplerFront, vTex + dir * 0.05 * radius);
    	sum += texture2D(samplerFront, vTex + dir * 0.08 * radius);
    //All of the above must create the extra images that blend together to create the blur. There should be 4 images between the sprite and the center and 4 behind the sprite and towards the center . 
    
    	sum /= 11.0; //something that sets up the way the images blend together?
    
    	float t = dist * 2.2; //how much the images are separated from each other in relation with the distance from the center...?
    	t = clamp(t, 0.0, 1.0); //no idea
    
    	gl_FragColor = mix(front, mix(front, sum, t), intensity); // No idea...
    }
    [/code:3y85ayee]
    
    @shinkan , I am glad you have your way around just by looking the code and experimenting! I 'm just not able to do that. I need help to cross the road on those stuff. I have my way on other things though. For example, I like to think of my self as a half decent artist and composer. I've been told that I am a good teacher. I get along with cats and dogs! I just can't learn code!!!
  • First of all:

    Look at the xml file associated with the effect

    	<!-- Parameters -->
    	<parameters>
    		<param>
    			<name>Radius</name>
    			<description>Magnitude of the radial blur.</description>
    			<type>percent</type>
    			<initial>0.4</initial>
    			<uniform>radius</uniform>
    		</param>
    		<param>
    			<name>Intensity</name>
    			<description>Intensity level, from 0 to 100.</description>
    			<type>percent</type>
    			<initial>1</initial>
    			<uniform>intensity</uniform>
    		</param>
    	</parameters>[/code:1gma6wz9]
    
    I'm sure you could figure out how to add a new param to this, you're going to need 2. one for x offset, one for y offset.
    
    notice that the two things in the two files have the same name: lowercase "intensity"
    <uniform>intensity</uniform>
    uniform float intensity;
    
    theres a similar comparison you can make with the uniform for radius. Just from the fact these are the things you can change in construct im sure you have an understanding of what a uniform probably is: a value you can pass into the shader to control it with.
    
    im sure you can figure out how the writing in the xml relates to the declaration of the variable uniform float intensity.
    
    so now you're able to get two new values to your shader.
    
    Inspect the code more carefully within the the "main" function and see how things inter-relate.
    
    theres a bunch of stuff which you don't need to concern yourself with, in fact i haven't written any GLSL shaders so i don't know whats going on all that much either, but if you look at the code you have "dir" which probably means direction, and as you've easily deduced in the top 4 lines theres something that likely determines the position of the center.
    
    I haven't tried this but just looking at those 4 lines, theres a 2D vector called dir, which is set from " 0.5 - vTex " 0.5 is one half, the center of a screen is halfway in both the x and y directions, i don't know glsl but i can tell this has a result which is a 2d vector by the next line that says dist = sqrt(dir.x*dir.x + dir.y*dir.y). dist is some distance obviously because of A the name, and B the fact that the expression is the square root of two positions squared, which is the formula for euclidean distance/ Pythagorean theorem. notice that dir has a component dir.x and dir.y soooooo, the above line probably means
    
    vec2 dir = 0.5 - vTex
    which is equivalent to
    dir.x = 0.5 - vTex.x
    dir.y = 0.5 - vTex.y
    
    if you made two uniforms offsetx and offsety, you could probably replace the first line with the following
    
    vec2 dir = 0.5 - vTex --> replace with stuff below
    
    vec2 dir;
    dir.x = vTex.x + offsetx;
    dir.y = vTex.y + offsety;
    
    and then in construct you set the values to something between 0 and 1 to select a fractional position between the top left (0)(0) and bottom right (1)(1). this is all you really need.
    
    im sure if you modified effect code and added/multiplied uniforms to/with existing expressions to test what they did you could find all this out on your own. Combine that with google searching terms you don't quite understand (for example vec2 if you didn't know what it meant) and the fact that you already have an intuitive grasp of what things do, and im sure you could have figured this all out on your own.
  • QuaziGNRLnose ,

    I'll be damned! After I read your thorough explanation I came up with this: [attachment=1:2v5tqtap]RadialBlurPlus.zip[/attachment:2v5tqtap]

    I don't know what to say! A simple thank you is not enough! But here it is anyway, thank you very, very much!!!! <img src="{SMILIES_PATH}/icon_e_biggrin.gif" alt=":D" title="Very Happy">

    -note for anyone interested, I've also changed the way the images are dispersed. Instead of 4 images in front of the virtual radius and 4 images behind it, I made it so all images are rendered behind the radius. I feel it looks more like a camera zoom effect this way.

    <img src="{SMILIES_PATH}/icon_lol.gif" alt=":lol:" title="Laughing">

    Edit: I've updated the html test to use the new effect (http://www.eli0s.com/Tests/Warp/)

    Edit2: And here is the Radial Pixellate effect <img src="{SMILIES_PATH}/icon_e_wink.gif" alt=";)" title="Wink">[attachment=1:2v5tqtap]RadialBlurPlus.zip[/attachment:2v5tqtap]

  • I am also astounded by the explanation given by QuaziGNRLnose - many thanks indeed!

    If such an explanation had been in the SDK from the start, then many more shaders would probably have been available by now.

    eli0s

    Excellent work.

    Now you are an expert, I hope to see hundreds more shaders from you

  • zenox98 , hehe, thanks! I don't know about hundreds, but I will try to dig a bit deeper into existing shaders In reality the only thing I did is to follow QuaziGNRLnose's step by step instructions, I'm not that confident that I'll do any good by my own :b

  • how do you made the lens effect? can this effect be used with the 3d plugin Q3dMaster?

  • imothep85 ,

    The lens flare is on an other topic, I have the capx attached on that topic so you can see how it was made.

    While I've bought the Q3D plugin, I haven't had the chance to use it yet, I find it to be too complicated for my comprehension and I am waiting stoically for some kind of video or written tutorial - manual - practical examples. So, I can't give an intelligent answer about it. Having said that, my guess is that you can overlay-underlay the effect on different layers, since there seems to be a mode in Q3D that takes into account the layer order and respects their rendering order from top to bottom.

  • after you can play with textures, lights rotations etc

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