Converting from Shader Toy to OF

@tabularasa1992 wrote:

Hey all,

So I just downloaded this android app based on ShaderToy (also called ShaderToy) and am having trouble porting the example code into OF. I've tried a couple of different things. First, I tried to do the standard plane stuff:

ofApp.cpp

void setup(){
img.loadImage("citadel.jpg");

plane.set(ofGetWidth(), ofGetHeight());
plane.mapTexCoordsFromTexture(img.getTextureReference());

shader.load("tunnel.vert", "tunnel.frag");
shader.begin();
shader.setUniform2f("resolution", ofGetWidth(), ofGetHeight());
shader.end();
}

void ofApp::draw() {

ofSetColor(255);
img.getTextureReference().bind();
shader.begin();
shader.setUniform1f("time", ofGetElapsedTimef());
ofPushMatrix();
	ofTranslate(ofGetWidth()/2, ofGetHeight()/2);
	plane.draw();
ofPopMatrix();
shader.end();
img.getTextureReference().unbind();
}

I could display the image properly by just doing a flow-through vertex and fragment shader, but as soon as I use the actual frag shader, I get a totally different result from the phone app.

tunnel.vert

#version 120

uniform vec2 resolution;

varying vec2 vTexCoord;

void main(){
gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;
vTexCoord = gl_MultiTexCoord0.xy * 2.0 - 1.0;
vTexCoord.x *= (resolution.x/resolution.y);
gl_TexCoord[0] = gl_MultiTexCoord0;
gl_FrontColor = gl_Color;
}

tunnel.frag

#version 120
#extension GL_ARB_texture_rectangle : enable

uniform sampler2DRect texture;
uniform float time;
uniform vec2 resolution;

varying vec2 vTexCoord;

void main(){

float a = atan(vTexCoord.x, vTexCoord.y);
float r = length(vTexCoord);

vec2 uv = vec2(0.25 * time + 0.1/r, (a/3.1416));

gl_FragColor = texture2DRect(texture, uv) * r; // This is what's used in the app. It draws all white here.
//gl_FragColor = texture2DRect(texture, vTexCoord); --> This draws the image in the upper left hand quadrant, super stretched image in the upper right and lower left quadrants, and a solid color in the lower right.
//gl_FragColor = texture2DRect(texture, gl_TexCoord[0]); -->This draws the image perfectly fine.

}

There are only three differences between this code and the app code: I used sampler2DRect instead of sampler2D, since my image is non-power of two; on the phone, the modelviewprojection matrix is passed in as a uniform mat4, and gl_Vertex and gl_MultiTexCoord0 are passed in as attributes; and lastly that I #defined version 120. Other than that they're the same.

Thinking it might be a problem with the number of vertices in the plane (vs. a quad, for example), I also tried using a mesh that just draws a quad. No luck there either. I even tried just straight up using ofRect to no avail. Does anybody have any idea what's going on here?

Edit: ok so the same code works on the ShaderToy website. I'm 90% sure the issue has to do with the fact that texture coordinates are not normalized in OF. How can I normalize them when I pass them into the shader?

Thanks a lot!
Chris

Posts: 1

Participants: 1

Read full topic