About WebGL effects

Share your Construct 2 effect files

Post » Mon Oct 27, 2014 8:27 pm

@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 :)

Please tell me if this is a realistic request :oops:

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.
Warp.capx

-EDIT-
You do not have the required permissions to view the files attached to this post.
Last edited by eli0s on Thu Feb 05, 2015 9:14 pm, edited 3 times in total.
composer - multimedia artist
www.eli0s.com/en/
B
69
S
26
G
5
Posts: 1,146
Reputation: 9,829

Post » Tue Oct 28, 2014 6:29 am

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.
Game design is all about decomposing the core of your game so it becomes simple instructions.
B
53
S
22
G
18
Posts: 2,122
Reputation: 17,123

Post » Tue Oct 28, 2014 2:22 pm

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)!
composer - multimedia artist
www.eli0s.com/en/
B
69
S
26
G
5
Posts: 1,146
Reputation: 9,829

Post » Tue Oct 28, 2014 3:40 pm

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.
Scirra Founder
B
395
S
231
G
88
Posts: 24,367
Reputation: 193,694

Post » Tue Oct 28, 2014 4:14 pm

@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.
composer - multimedia artist
www.eli0s.com/en/
B
69
S
26
G
5
Posts: 1,146
Reputation: 9,829

Post » Tue Oct 28, 2014 8:58 pm

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
B
77
S
13
G
8
Posts: 1,973
Reputation: 9,891

Post » Tue Oct 28, 2014 9:05 pm

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.
ImageImageImageImage
B
157
S
66
G
41
Posts: 2,598
Reputation: 34,823

Post » Tue Oct 28, 2014 11:10 pm

@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:

Code: Select all
//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...
}


@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!!! :cry: :oops: :lol:
composer - multimedia artist
www.eli0s.com/en/
B
69
S
26
G
5
Posts: 1,146
Reputation: 9,829

Post » Wed Oct 29, 2014 1:07 am

First of all:

Look at the xml file associated with the effect

Code: Select all
   <!-- 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>


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.
B
77
S
13
G
8
Posts: 1,973
Reputation: 9,891

Post » Wed Oct 29, 2014 2:19 am

@QuaziGNRLnose ,

I'll be damned! After I read your thorough explanation I came up with this:
RadialBlurPlus.zip

I don't know what to say! A simple thank you is not enough! But here it is anyway, thank you very, very much!!!! :D

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

:lol:

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 ;)
RadialBlurPlus.zip
You do not have the required permissions to view the files attached to this post.
composer - multimedia artist
www.eli0s.com/en/
B
69
S
26
G
5
Posts: 1,146
Reputation: 9,829

Next

Return to Effects

Who is online

Users browsing this forum: No registered users and 0 guests