tiagosr / ofxshadertoy

Addon for openFrameworks that sets up and loads Shadertoy (http://www.shadertoy.com) shaders

ofxShadertoy

openFrameworks addon for loading and displaying shaders from the Shadertoy page.
Shadertoy is (c) iq
This addon is distributed under the terms of the MIT License.

Usage

1. Set up your project to use the programmable shader. in the int main(...) function, set your window to use OpenGL 3.2 or greater:

   ofGLWindowSettings settings;
   settings.setGLVersion(3, 2);    // <--- ofxShadertoy NEEDS the GL Programmable Renderer
   settings.width = 1024;
   settings.height = 768;
   ofCreateWindow(settings);       // <-------- setup the GL context

2. Set up the ofxShadertoy to load a file with the shadertoy glsl code

   ofxShadertoy shadertoy;
   ...
   shadertoy.load("shaders/raymarch.frag");

3. Set up textures if needed by the shader

   shadertoy.setTexture(0, nifty_texture);

4. In your draw() routine, draw a quad (or use begin() and end() to set up the shaders for a mesh) Effects happen in screen space.

Extensions

I've set up some extensions to the shader parameters, mostly relating to using a camera (for use, non-exclusively, with another one of my addons, ofxFPSControls). The new uniforms are:

uniform mat4 tCameraMatrix; - a camera matrix that can be set up using ofCamera or any child class (e.g. ofxFPSControls)

ofxshadertoy's Issues

ofSetCurrentRenderer is depricated

Where:
https://github.com/tiagosr/ofxShadertoy/blob/master/raymarcherExample/src/main.cpp#L5

Solution:
https://forum.openframeworks.cc/t/ofsetcurrentrenderer-in-0-9-0/21304

example passing variables

hi.
I love your add-on.

I'm using a shader right now that changes based on the iMouse position.
Do you have an example showing how I can pass in custom variables to effect change?
I have an ofxGui and want it to change things inside the shader.

Thanks for any advice.

textures, iChannel, iMouse

Thanks so much for making the update to OF 0.9.0

Your example and some other shaders work now :)

Do you have more information on how to make it work with an underlying texture and what is the iChannel stuff?
I tried to load in a texture but the shader did not like what i did.

    ofImage img;
    img.load("fondo.jpg");
    nifty_texture.loadData(img.getPixels());
   shadertoy.setTexture(0, nifty_texture);

here are 2 water ripple shaders i am trying to get working:
https://www.shadertoy.com/view/ldB3Wd
https://www.shadertoy.com/view/4djGzz

I am hoping to find shader code that i can change to give me more control over frequency, amplitude and propagation speed of interfering water ripples. Any pointers?

Thanks.

texture should not be bound

this line
https://github.com/tiagosr/ofxShadertoy/blob/master/src/ofxShadertoy.cpp#L101
is not necessary as it will affect other mesh drawings. It should be deleted or at least followed by channel0.unbind()

using ofFbo .getTexture()

it's me again.

I was successful loading an image in to my polarGrid example inside setup().

I am now trying to generate an ofFbo and pass it's texture to the shader during update().
But it's always black.
If I do the work around as in the below code things work. But it seems silly to have to pass FBO to pix, to tex.

Ideally I would be able to just call mainFbo.getTexture()

Any ideas what I am doing wrong?

void ofApp::update(){
    
    if(mainFbo.isAllocated() == false){
        img.allocate(1024, 768, OF_IMAGE_COLOR);
        tex.allocate(img.getWidth(), img.getHeight(), GL_RGBA, false); 
        mainFbo.allocate(1024,768, GL_RGBA, false);
    }
    
    mainFbo.begin();
    ofClear(255,255,255,0);
    ofSetColor(255, 0, 0,255);
    ofDrawCircle(mouseX, mouseY, 400);
    mainFbo.end();
    
//    shadertoy.setTexture(0, mainFbo.getTexture());
    
    ofPixels pix;
    mainFbo.readToPixels(pix);
    img.setFromPixels(pix);
    tex.loadData(img.getPixels());
    shadertoy.setTexture(0, tex);
}

OF 0.9.0 compile errors

Hi there.

I am trying to get your addon to run on my MBP with NVIDIA GeForce GT 750M 2048 MB under OS X 10.10

Here is a list of errors i have encountered:

compiling your example gives me this:
Field type 'ofxShadertoy' is an abstract class

so i made these changes changes:
command out
//ofSetCurrentRenderer(ofGLProgrammableRenderer::TYPE);

//ofxShadertoy shader toy; 
ofxShadertoy *shadertoy;

and

//shadertoy.load("shaders/raymarch.frag");
shadertoy->load("shaders/raymarch.frag");
etc

which removed all ofxShaderToy related errors.
But in ofxFPSControls i had to command the following calls since these functions seem not to exist in my version of OF:

//    ofSetCursorPosition(ofGetWindowWidth()/2, ofGetWindowHeight()/2);
//    ofGrabCursor();
//    ofReleaseCursor();
//    ofSetCursorPosition(center.x, center.y);

then the app compiled but crashed and gave me these error messages:

[ error ] ofShader: setupShaderFromSource(): GL_VERTEX_SHADER shader failed to compile
[ error ] ofShader: GL_VERTEX_SHADER shader reports:
ERROR: 0:1: '' :  version '330' is not supported
ERROR: 0:2: 'precision' : syntax error: syntax error

[ error ] ofShader: GL_VERTEX_SHADER, offending line 1 :
        1   #version 330
        2   precision mediump float;uniform mat4 modelViewProjectionMatrix;uniform mat4 tCameraMatrix;in vec4 position;void main(){    gl_Position = modelViewProjectionMatrix * position;}
        3   

[ error ] ofShader: setupShaderFromSource(): GL_FRAGMENT_SHADER shader failed to compile
[ error ] ofShader: GL_FRAGMENT_SHADER shader reports:
ERROR: 0:1: '' :  version '330' is not supported
ERROR: 0:2: 'precision' : syntax error: syntax error

[ error ] ofShader: GL_FRAGMENT_SHADER, offending line 1 :
        1   #version 330
        2   precision mediump float;
        3   uniform vec3      iResolution;

[ error ] shader: error loading shader

not sure if my GPU is not compatible since "version '330' is not supported"

thx

Havent found a way to get multi-buffer textures

Hello,

Would you please help me ?

I still haven't found a way to get in my "ofxShadertoy::Buffer::Image" shader, other buffers result textures.

The shaders are all compilling without issues; If I test evey other buffer's shader in ImageBuffer, they all work.

But it is at the time I try to bind Buffer(A/B/C/D) texture to Image Buffer, when I try to get RGBA texture information, I can't (Result is pure black).

Am I missing something ?

shader :

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = fragCoord/iResolution.xy;
    vec4 color = texture(iChannel0, uv);
    //color = vec4(1.0, 0.0, 0.0, 1.0);
    fragColor = color;
}

Code :

void ofApp::draw() {

	shaderRaymarching.begin();
	shaderRaymarching.draw(0.0, 0.0, 0.0, width, height);
	shaderRaymarching.end();
}

void ofApp::loadShadersFiles()
{
  shaderRaymarching.load("Photos.frag", ofxShadertoy::Buffer::Image);
  
  shaderRaymarching.load("PixelA.frag", ofxShadertoy::Buffer::BufferA);
  shaderRaymarching.load("PixelB.frag", ofxShadertoy::Buffer::BufferB);
  shaderRaymarching.load("PixelC.frag", ofxShadertoy::Buffer::BufferC);
  shaderRaymarching.load("PixelD.frag", ofxShadertoy::Buffer::BufferD);
  
  shaderRaymarching.begin();
  shaderRaymarching.end();

  shaderRaymarching.setTexture(0, ofxShadertoy::Buffer::BufferA, ofxShadertoy::Buffer::Image);
  shaderRaymarching.setTexture(1, ofxShadertoy::Buffer::BufferB, ofxShadertoy::Buffer::Image);
  shaderRaymarching.setTexture(2, ofxShadertoy::Buffer::BufferC, ofxShadertoy::Buffer::Image);
}

Any plans to support multiple buffers?

Would be great to have multiple buffer support. I know ofxFx supports things like this but its not openGL 3.2 compatible.