# Loading shadertoy .glsl or .frag

**URL:** <https://discourse.libcinder.org/t/loading-shadertoy-glsl-or-frag/1562>\
**Category:** Uncategorized\
**Created:** [August 31, 2019, 5:30pm UTC](https://discourse.libcinder.org/t/loading-shadertoy-glsl-or-frag/1562 "2019-08-31T17:30:22Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![luisArandas](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.libcinder.org/luisarandas/32/705_2.png) [@luisArandas](https://discourse.libcinder.org/u/luisArandas)\
**Post date:** [August 31, 2019, 5:30pm UTC](https://discourse.libcinder.org/t/loading-shadertoy-glsl-or-frag/1562/1 "2019-08-31T17:30:22Z")

</div>

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](https://github.com/paulhoux/Cinder-Samples/tree/master/ShaderToy))

Thanks in advance!!  
Luis

---

<div class="post-metadata">

**Author:** ![paul.houx](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.libcinder.org/paul.houx/32/31_2.png) [@paul.houx](https://discourse.libcinder.org/u/paul.houx)\
**Post date:** [August 31, 2019, 11:41pm UTC](https://discourse.libcinder.org/t/loading-shadertoy-glsl-or-frag/1562/2 "2019-08-31T23:41:17Z")

</div>

Well,

you can simply load a shader like this:

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

```

Just put the two files inside your `assets` folder.

Regarding the use of [ShaderToy](https://www.shadertoy.com/) 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:

```auto
#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](https://github.com/paulhoux/Cinder-Samples/tree/master/SimpleShader) sample.

-Paul

---

<div class="post-metadata">

**Author:** ![luisArandas](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.libcinder.org/luisarandas/32/705_2.png) [@luisArandas](https://discourse.libcinder.org/u/luisArandas)\
**Post date:** [September 1, 2019, 8:58am UTC](https://discourse.libcinder.org/t/loading-shadertoy-glsl-or-frag/1562/3 "2019-09-01T08:58:46Z")

</div>

Thank you very much for the answer @paul.houx

Luis

---

<div class="post-metadata">

**Author:** ![Malfunkn](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.libcinder.org/malfunkn/32/761_2.png) [@Malfunkn](https://discourse.libcinder.org/u/Malfunkn)\
**Post date:** [September 3, 2019, 3:11pm UTC](https://discourse.libcinder.org/t/loading-shadertoy-glsl-or-frag/1562/4 "2019-09-03T15:11:46Z")

</div>

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](https://github.com/earjuice/rayFboDepthCompare_CinderExample/blob/master/src/rayDepthApp.cpp)

---

<div class="post-metadata">

**Author:** ![kashik](https://avatars.discourse-cdn.com/v4/letter/k/6bbea6/32.png) [@kashik](https://discourse.libcinder.org/u/kashik)\
**Post date:** [September 22, 2020, 5:47pm UTC](https://discourse.libcinder.org/t/loading-shadertoy-glsl-or-frag/1562/5 "2020-09-22T17:47:00Z")

</div>

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](https://www.shadertoy.com/view/XtKczm)

My current shaders are instantiates as follows:

```auto
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/](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!

---

<div class="post-metadata">

**Author:** ![lithium](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.libcinder.org/lithium/32/38_2.png) [@lithium](https://discourse.libcinder.org/u/lithium)\
**Post date:** [September 22, 2020, 11:58pm UTC](https://discourse.libcinder.org/t/loading-shadertoy-glsl-or-frag/1562/6 "2020-09-22T23:58:45Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kashik](https://avatars.discourse-cdn.com/v4/letter/k/6bbea6/32.png) [@kashik](https://discourse.libcinder.org/u/kashik)\
**Post date:** [September 23, 2020, 2:37pm UTC](https://discourse.libcinder.org/t/loading-shadertoy-glsl-or-frag/1562/7 "2020-09-23T14:37:36Z")

</div>

Can you provide a cinder-based example? Thanks.