Hi struggling with a sobel shader

OpenGL OpenGL: Basic Coding
1

Hi everyone I’m very new to shader coding and cannot understand what I’m doing wrong, its probably something simple.
Currently the shader throws no errors.
I’m using processing.

#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif
 
#define PROCESSING_TEXTURE_SHADER

uniform float v[10];
uniform sampler2D texture;
uniform float mult;
uniform float type;


varying vec4 vertColor;
varying vec4 vertTexCoord;

uniform vec2 resolution;
  
mat3 s = mat3(-1.0,-2.0,-1.0,0.0,1.0,0.0,1.0,2.0,1.0);
mat3 s1 = mat3(-1.0,0.0,-1.0,-2.0,1.0,2.0,-1.0,0.0,1.0);

void main(void) {
  float v2=0;
  float x = 1.0 / resolution.x;
  float y = 1.0 / resolution.y;
  
  vec4 horizEdge = vec4(0.0);
  for(float i=-1.0;i<2.0;i+=1.0){
	  for(float j=-1.0;j<2.0;j+=1.0){
		  if(vertTexCoord.x>10.0&&vertTexCoord.x<639.0){
			int ii = int(i)+1;
			int jj = int(j)+1;
				horizEdge += texture2D( texture, vec2( vertTexCoord.x+x*i, vertTexCoord.y+y*j))*s[ii][jj];
			}
  }}
  
  vec4 vertEdge = vec4(0.0);
  for(float i=-1.0;i<2.0;i+=1.0){
	  for(float j=-1.0;j<2.0;j+=1.0){
			int ii = int(i)+1;
			int jj = int(j)+1;
			if(vertTexCoord.y>10.0&&vertTexCoord.y<359.0){
				vertEdge += texture2D( texture, vec2( vertTexCoord.x+x*i, vertTexCoord.y+y*j))*s1[ii][jj];
			}
  }}
  
  vec3 edge = sqrt((horizEdge.rgb * horizEdge.rgb) + (vertEdge.rgb * vertEdge.rgb));
  
	gl_FragColor = vec4(edge,1.0);
}

main sketch

PShader shader;
PGraphics canvas;
PImage img;
float []v = {0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1.0};
void setup() {
  
  size(640, 360, P3D);
  v = new float[width];
  for(int i=0;i<width;i++){
    v[i] = 0;
  }
  img = loadImage("b1.jpg");
  shader = loadShader("shader.glsl");
  shader.set("mult",4.1);
  //shader.set("type",1.0);
  //shader.set("v",v);
  noStroke();
};

void draw() {
  background(0);
  shader.set("type",map(mouseY, 0, height, 0.6, 1));
  translate(width / 2, height / 2);
  rotateX(map(mouseY, 0, height, -PI, PI));
  rotateY(map(mouseX, 0, width, -PI, PI));
  rotateZ(PI/6);
  beginShape();
  texture(img);
  vertex(-100, -100, 0, 0, 0);
  vertex(100, -100, 0, img.width, 0);
  vertex(100, 100, 0, img.width, img.height);
  vertex(-100, 100, 0, 0, img.height);
  endShape();
  shader(shader);
};

Thanks

Paul

2

I am not sure what you are doing here with

int ii = int(i)+1;
int jj = int(j)+1;

but if you wanted to cast it to an int it is like in c++ with (int)i

3

Actually, that’s not legal GLSL syntax:

There is no typecast operator; constructors are used instead.

But really, the OP should just be using integers in the loop to begin with.

1 Like
4

Sorry, my bad. It works in shadertoy is why I didn’t know it wasn’t the same in actual glsl

5

Really it works in shadertoy? Ill check out your advice thank you.

6

This is acceptable code. The main reason my code wasn’t working was because I was not providing an alternative for the if statements.

for(float i=-1.0;i<2.0;i+=1.0){
	  for(float j=-1.0;j<2.0;j+=1.0){
		  if(vertTexCoord.x>x&&vertTexCoord.x<639.0){
			int ii = int(i)+1;
			int jj = int(j)+1;
				horizEdge += texture2D( texture, vec2( vertTexCoord.x+x*i, vertTexCoord.y+y*j))*s[ii][jj];
			}else horizEdge = vec4(0.2,1.0,0.0,1.0);
  }}

this now at least gets some color on screen, however it doesnt display the sobel I’m looking for.