Loading shadertoy .glsl or .frag

1

Afternoon all!!

Is there anything like ofxShadertoy or any block to quick load a .glsl or .frag shader into an object on MacOS? Something straightforward close to openframeworks where we can embed the file into an object. (i.e. ofShader).

It seems to exist one but only for windows (https://github.com/paulhoux/Cinder-Samples/tree/master/ShaderToy)

Thanks in advance!!
Luis

2

Well,

you can simply load a shader like this:

mShader = gl::GlslProg::create( loadAsset( "shader.vert" ), loadAsset( "shader.frag" ) );

Just put the two files inside your assets folder.

Regarding the use of ShaderToy files: their format has changed since I last updated the sample. ShaderToy shaders now have a void mainImage( out vec4 fragColor, in vec2 fragCoord ) function, instead of a void main(void), so you can’t use the shaders directly. There’s also a bunch of uniforms you need to supply for the shaders to function.

At the very least, you need to provide some additional code in your fragment shader:

#version 330 core

uniform vec3      iResolution;           // viewport resolution (in pixels)
uniform float     iTime;                 // 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)

out vec4 fragColor;

// ...paste the shadertoy code here...

void main(void)
{
    mainImage( fragColor, gl_FragCoord );
}

If you’re unsure about how to load and use shaders, have a look at the SimpleShader sample.

-Paul

3

Thank you very much for the answer @paul.houx

Luis

4

I’ve been meaning to update this with a cleaner approach but this might also be helpful… this example shows how to depth compare a triangulated fbo render into a raymarched “Shadertoy” texture…
https://github.com/earjuice/rayFboDepthCompare_CinderExample/blob/master/src/rayDepthApp.cpp

5

Sorry to revive this post.

I’m currently trying to implement a delay effect on a video exactly like this one: https://www.shadertoy.com/view/XtKczm

My current shaders are instantiates as follows:

glsl = gl::GlslProg::create(gl::GlslProg::Format()
  .vertex (CI_GLSL (150,
                                                   
    uniform mat4 ciModelViewProjection;
    in vec4 ciPosition;
    in vec2 ciTexCoord0;
    out highp vec2 TexCoord;
                                                   
    void main( void ) {
      vec4 object_space_pos = vec4( ciPosition.x, ciPosition.y, ciPosition.z, 1.0);

      TexCoord = ciTexCoord0;

      gl_Position = ciModelViewProjection * object_space_pos;
    } ))
  .fragment (CI_GLSL (150,
    in vec2    TexCoord;
    out vec4 oColor;
                                                     
    uniform sampler2DRect uTex0;
    uniform sampler2DRect prevTexture;
    uniform sampler2DRect currTexture;
    //uniform float delayAmount;
                                                     
    void main( void ) {
      vec4 prev = texture(prevTexture,TexCoord);
      vec4 curr = texture(currTexture,TexCoord);
                                                         
      oColor = mix(prev, curr, 0.8);
    } )));

Implemented based on this thread https://www.reddit.com/r/gamemaker/comments/hpg8pt/need_to_create_a_delay_shader_effect/ but the video plays just normal. Any help on this?

Thanks!

6

You need to ping-pong between two textures using a gl::Fbo. That functionality is hidden from you in shadertoy but is implied by having multiple buffers. Search for fbo ping pong and you should find some examples.

1 Like
7

Can you provide a cinder-based example? Thanks.