Welcome, Guest. Please login or register. Did you miss your activation email?

Author Topic: Importing shaders from shaderstoy  (Read 4025 times)

0 Members and 1 Guest are viewing this topic.

boniomri

  • Newbie
  • *
  • Posts: 9
    • View Profile
Importing shaders from shaderstoy
« on: January 08, 2016, 12:19:41 pm »
I have been trying to mess with shaders on my project recently and I encountered  afew problems.
Firstly I am a total noobie with shaders and sfml so excuse me if I state things that are wrong, I probably understood info I read incorrectly.

I saw there is a site called shaderstoy and I tried to figure out how to implement shaders from the site into my project. I read the sfml wiki about shaders, I got the SFML code part, although I'm not sure what to do on the shaders side.
What file to create with the code from the site, what parameters to pass etc.
For example this shader:
https://www.shadertoy.com/view/MsjXzh

How would one implement it and know what parameters to pass to it?

Again, sorry if I said stuff that made you cringe from my lack of knowledge in this department.
I just couldnt find lots of info regarding my question, I hope I was clear.

Hapax

  • Hero Member
  • *****
  • Posts: 3379
  • My number of posts is shown in hexadecimal.
    • View Profile
    • Links
Re: Importing shaders from shaderstoy
« Reply #1 on: January 08, 2016, 03:39:48 pm »
Shadertoy has a list of its input parameters hidden under "Shader Inputs" (just above the code). Click it and it'll reveal the inputs.
Selba Ward -SFML drawables
Cheese Map -Drawable Layered Tile Map
Kairos -Timing Library
Grambol
 *Hapaxia Links*

Ztormi

  • Jr. Member
  • **
  • Posts: 71
  • Web developer by day. Game developer by night.
    • View Profile
Re: Importing shaders from shaderstoy
« Reply #2 on: January 08, 2016, 03:39:58 pm »
You can see the shader parameters by expanding the Shader Inputs at the top of the shader code at shadertoy. In your case they would be
 
uniform vec3      iResolution;           // viewport resolution (in pixels)
uniform float     iGlobalTime;           // shader playback time (in seconds)
uniform float     iTimeDelta;            // render time (in seconds)
uniform int       iFrame;                // shader playback frame
uniform float     iChannelTime[4];       // channel playback time (in seconds)
uniform vec3      iChannelResolution[4]; // channel resolution (in pixels)
uniform vec4      iMouse;                // mouse pixel coords. xy: current (if MLB down), zw: click
uniform samplerXX iChannel0..3;          // input channel. XX = 2D/Cube
uniform vec4      iDate;                 // (year, month, day, time in seconds)
uniform float     iSampleRate;           // sound sample rate (i.e., 44100)

Most of those inputs are redundant unless the shader is animated. ShaderToy also has support for playing audio so you can get rid of those aswell. Keep in mind that the code there is fragment shader code, you'll probably get away with the default vertex shader found in the SFML docs in most cases I think.

I don't personally like ShaderToy for these reasons, it makes learning glsl kinda hard because of the extra stuff the code tends to have. It's good for demonstration, but I'm usually just googling for general ideas of what I want and go from there.

The result of this shader seems fairly simple, basically it just looks like a horizontal blur applied after rendering the screen with horizontal and vertical lines (which you also do in the shader) and some gamma adjustments.

GLSL is essentially just C with some extra keywords and functions, it's not so intimidating once you have tossed off even the most basic shader, like tint effect or texture overlay for example  ;)
« Last Edit: January 08, 2016, 03:46:02 pm by Ztormi »

boniomri

  • Newbie
  • *
  • Posts: 9
    • View Profile
Re: Importing shaders from shaderstoy
« Reply #3 on: January 08, 2016, 06:29:13 pm »
Thank you both so much!

Just to make sure I understand what you mean Ztormi, what I have to do is basically copy the code into a "something.fragment" file, then pass parameters that I see being used in the code?
In this example would I be sending a sf::Vector3f to iResolution?
Since I only see iResolution being used in the code out of that list.

As for your GLSL is pretty easy comment, looking at the code it does look abit intimidating, but I don't have enough time to learn it until I hand in the project.
Essentially I don't need shaders, I just thought it would be a cool extra to have and also because I have never had the chance to mess around with shaders, so I jumped on the "lets try it 2 weeks before I hand the project" train.
Thanks again though.