Messages

1

Graphics / Re: How to use shaders in a system with a variable amount of inputs?

« on: December 20, 2017, 12:22:18 pm »

Now that you ask that, it is just tangentially related to SFML.I'm going to post this question on the OpenGl forums.

I guess I asked this here because I'm not sure how to adapt pure openGL code that uses other libraries (such as glew or glfw) to SFML.I know SFML provides an environment to work with openGL, but I wanted to avoid pure openGL as much as possible.

In short: most of my code uses SFML, so I asked this question here.

2

Graphics / How to use shaders in a system with a variable amount of inputs?

« on: December 20, 2017, 03:06:29 am »

So I'm making an electric field simulation in which the user can dynamically create charges through a mouse click.Currently, the electric field is just calculated on the CPU with a pretty bad algorithm on every cell within a grid.https://i.imgur.com/BFtnkou.gifv

To illustrate the equipotential lines, I have made a shader that computes the potential according to the charge position and q(electric charge).https://i.imgur.com/hipLStv.gifv

This is the shader code for glslViewer:

#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
#define PI 3.14159265

void main( void ) {
        vec2 position = ( gl_FragCoord.xy / u_resolution.y );
        vec2 mousePos = u_mouse/u_resolution.y;
        vec2 r = position - mousePos;
        vec2 r2 = position - vec2(0.5, 0.5);
        float potential = 0.125/length(r) - 0.125/length(r2);
        potential = clamp(potential, -1.0, 1.0);
        float cutoff = sin(2.0*PI*10.0*potential);
        cutoff = smoothstep(1.0,0.0, 0.5*abs(cutoff)/fwidth(cutoff));
        //Maps negative potential to blue
        // and positive potential to red
        gl_FragColor =  cutoff * vec4(potential, 0.0, -potential, 1.0);
}
 

Quick edit: I know I'll have to modify the shader, obviously.
My problem is: how do I use this shader with a dynamic amount of charges? One of the GLSL paradigms is that the shader can't just have a variable amount of inputs--therefore, I can't just throw in an array of vec3 to represent q and position of every charge and hope the shader knows how to sum up the electric potential without knowing the array size a priori.

My two cents on solving the problem:

• Use a floating point texture FPT.
• Have two separate shaders:
  
  • One is used for every charge, and takes the charge's q and position as inputs.It outputs a "voltage" created by the charge and adds that value to the FPT(superposition principle).The iteration over every charge is done in a for loop, inside the application's update() method or something like that.
  • The other is used as a final step, to implement the clamping for very big potentials(in absolute value), the cutoff to make the equipotential lines and, lastly, to map negative values to blue and positive ones to red.
• Render the final result to a sprite and draw it.

That all sounds great in theory, but my attempts at implementing that were all failures.Namely, I don't think I understand the openGL functions, as I'm mostly inexperienced with pure openGL.

3

Graphics / Re: How to use blend modes to invert colors on overlap?

« on: December 20, 2017, 01:47:29 am »

Problem solved! Thanks

I forgot that the red color would interfere with the blending.Now I've put a white color as default and it works as expected.https://i.imgur.com/80u2Ncl.png(In case you can't see, the line is cyan when inside the red circle)

4

Graphics / Re: How to use blend modes to invert colors on overlap?

« on: December 19, 2017, 06:26:48 pm »

Can you describe in more details or with a picture what exactly you want to do? Is maybe sf::BlendMode mode(sf::BlendMode::OneMinusDstColor, sf::BlendMode::Zero, sf::BlendMode::Add) what you're looking for?

Yes! that's what I was looking for! thanks 
https://i.imgur.com/g79Hjzi.png

There's just one thing: the color doesn't seem to be negative(see the image--the important line is the one that originates in the center of the red circle)

Still, it makes the line pretty distinguishable!

Could you please explain what I was doing wrong? It seems the only thing that was changed was the order of the first two arguments...

Just to clarify: I wanted the line's color to be opposite of that of the background's(everything that was drawn before it) so that the line was always visible.

So your line is red and you want it to be a different color when it's drawn over a red circle.

This can help if you'll consider using a shader instead of sfml blend modes:

https://app.box.com/s/hijgkl6tt9

It's GLSL code to emulate photoshop blending modes. Exclusion and Difference modes can do what you want. They would make the line red over black and black over red. But then it would also make the line cyan if you draw over white circles 

Oh that's interesting! I've tried using shaders but I'm pretty much a noob.

I thought it was impossible to make a shader for blending in SFML. Wouldn't I need access to the previous buffer(background) to blend with the current one(line)?

5

Graphics / How to use blend modes to invert colors on overlap?

« on: December 18, 2017, 05:01:01 pm »

In my game, I have a line class that is drawn on top of circles.The thing is, those circles have the same color as the line when highlighted, so it gets pretty difficult to distinguish them(impossible when the line is too small)https://i.imgur.com/RZJviGv.png.I could just change the color of the line, but I think a blend mode(like https://i.stack.imgur.com/LuWAA.png) would be the most future-proof way to visualize this line, as it overlaps other entities.

I've already read up on the docs https://www.sfml-dev.org/documentation/2.4.2/structsf_1_1BlendMode.php but I'm still pretty much confused as to how I implement this specific blend mode.Actually, I think I still don't understand sf::BlendMode at all.This was my attempt:

    // Draw charges
    for (auto s : chargeVector) {
        mainWindow.draw(*s);
        if (s->getIsCursorOn()) {
            // Draw charge
            mainWindow.draw(*s, &chargeHighlightShader);
            // Draw velocity line
            mainWindow.draw(
                s->velocityLine(),
                sf::BlendMode(sf::BlendMode::Zero,
                              sf::BlendMode::OneMinusDstColor,
                              sf::BlendMode::Add));
        } else
            mainWindow.draw(*s);
    }

It's best if I give my current "understanding" of this code snippet, just so that you can clarify my misconceptions and better pinpoint the problem(s):

sf::BlendMode is just a part of the renderstate of the drawable object(in this case, a "Line") which is passed as an argument to it's draw() method.

The constructor I'm using takes three arguments:

• sourceFactor:In this case, it means how much a pixel of the line(src) affects the final output.This is set to zero, that is, the color and alpha of each pixel of the line is just being ignored.
• destinationFactor:In this case, it means how much a pixel of the current buffer(dst) affects the final output.This is set to vec4(1.0) - pixel.rgba, that is, it's colors are completely inverted, including the alpha.
• blendEquation:Determines how the src and dst values should be mixed.Set to add(pretty self-explanatory).

I guess the only problem I see is in the second argument, for which the alpha value is set to 1.0 - 1.0 = 0.0.But if that's the problem, how do I fix it?

Oh and this is what happens when I use my attempt:https://i.imgur.com/RkSmcHS.png

6

Graphics / How to make a wireframe grid?

« on: December 11, 2017, 12:57:10 pm »

I'm making a simulation in SFML and would like to make a wireframe grid(like this:https://i.stack.imgur.com/1TKlE.png). After looking at lots of posts and answers on the SFML forums and stack overflow, I became quite frustrated at how difficult this seemingly trivial problem actually is.

Currently, I've got this(https://i.stack.imgur.com/h3x6C.png) for a grid, but my implementation just draws gridlines from opposite sides(left-right for each row, top-bottom for each column), which doesn't allow me to highlight a square(on mouse hover, for example).

If possible, the wireframe grid should:

• Have the ability to highlight individual squares(highlight borders and/or fill)
  
• Have 1 pixel thickness at all times
  
• Avoid redundancies(such as overlapping borders)
  

Preferrably, I would like a purely SFML-based approach(as I'm inexperienced with glsl).

Oh and if anyone is curious about my implementation:

grid.cpp:https://github.com/AllergicGorilla/Electric-Charges/blob/master/grid.cpp

grid.hpp:https://github.com/AllergicGorilla/Electric-Charges/blob/master/grid.hpp

Also, this post is a copy(with minor changes) of my stack overflow one: https://stackoverflow.com/questions/47742302/how-to-make-a-wireframe-grid-in-sfml(currently on hold)