# Basic shader help

**URL:** <https://discourse.processing.org/t/basic-shader-help/2895>\
**Category:** Coding Questions\
**Created:** [August 23, 2018, 7:54pm UTC](https://discourse.processing.org/t/basic-shader-help/2895 "2018-08-23T19:54:20Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![steve\_j](https://avatars.discourse-cdn.com/v4/letter/s/4491bb/32.png) [@steve\_j](https://discourse.processing.org/u/steve_j)\
**Post date:** [August 23, 2018, 7:54pm UTC](https://discourse.processing.org/t/basic-shader-help/2895/1 "2018-08-23T19:54:20Z")

</div>

Im currently trying to get my head around shaders. Have tried adapting the the “VideoMappingWithShader” fragment shader from gohai’s GL video Pi library to add a gradient to the video.

i get a “OpenGL error 1282 at top endDraw(): invalid operation” error and strangly the checkerboard shows but when switching to the video i just get a white square.

Processing code hasnt changed except for a shader.set(“u\_resolution”, width, height); at the end of setup.

Any advice please?

vertext shader (unchanged)

```auto
uniform mat4 transform;
uniform mat4 texMatrix;

attribute vec4 position;
attribute vec4 color;
attribute vec2 texCoord;
attribute float texCoordQ;

varying vec4 vertColor;
varying vec3 vertTexCoord;

void main() {
  gl_Position = transform * position;

  vertColor = color;
  vertTexCoord = vec3(texCoord * texCoordQ, texCoordQ);
}

```

fragment shader

```auto
#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif

uniform sampler2D texture;

varying vec3 vertColor;
varying vec3 vertTexCoord;

void main() {
	vec2 st = gl_FragCoord.xy/u_resolution;
    float blend = st.x;
    
    gl_FragColor = texture2D(texture, vertTexCoord.st / vertTexCoord.p) * blend;
}

```

---

<div class="post-metadata">

**Author:** ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)\
**Post date:** [August 29, 2018, 9:51am UTC](https://discourse.processing.org/t/basic-shader-help/2895/2 "2018-08-29T09:51:11Z")

</div>

You don’t seem to be defining the `u_resolution` uniform in the fragment shader?!

You need

```auto
uniform sampler2D texture;
uniform vec2 u_resolution;

```

Mind you, you’ll need to make sure you’re passing width and height as floats i think.

IIRC PShader will automatically set a vec2 uniform called resolution, so you may not need to set this yourself, just add that?

The various uniforms that will get set automatically if they exist in your shaders are at [https://github.com/processing/processing/blob/master/core/src/processing/opengl/PShader.java#L1146](https://github.com/processing/processing/blob/master/core/src/processing/opengl/PShader.java#L1146)

---

<div class="post-metadata">

**Author:** ![steve\_j](https://avatars.discourse-cdn.com/v4/letter/s/4491bb/32.png) [@steve\_j](https://discourse.processing.org/u/steve_j)\
**Post date:** [August 29, 2018, 10:26am UTC](https://discourse.processing.org/t/basic-shader-help/2895/3 "2018-08-29T10:26:56Z")

</div>

> [@neilcsmith](#):
>
> uniform sampler2D texture; uniform vec2 u\_resolution;

Thanks Neil, that was it.

As this affects the whole output, do you have any advice on putting the blend inside the processed fragment shader area? Ie so the blend directly affects the keystoned area and not over the whole output?

```auto
vec4 texture2D(sampler2D s, vec2 coord [, float bias])  

```

Trying `gl_FragColor = texture2D(texture, vertTexCoord.st / vertTexCoord.p, blend);` didnt seem to effect it EDIT: scrap that, i see thats the Coordinate bias

---

<div class="post-metadata">

**Author:** ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)\
**Post date:** [August 29, 2018, 10:30am UTC](https://discourse.processing.org/t/basic-shader-help/2895/4 "2018-08-29T10:30:00Z")

</div>

Yes, just use the texture coordinates for that too (if I’m understanding what you’re after correctly)

---

<div class="post-metadata">

**Author:** ![steve\_j](https://avatars.discourse-cdn.com/v4/letter/s/4491bb/32.png) [@steve\_j](https://discourse.processing.org/u/steve_j)\
**Post date:** [August 29, 2018, 11:10am UTC](https://discourse.processing.org/t/basic-shader-help/2895/5 "2018-08-29T11:10:26Z")

</div>

> [@steve\_j](#):
>
> texture coordinates

Im not sure i understand. Do you mean use the `vertTexCoord` passed on from the vertex shader instead of my gl\_FragCoord?

---

<div class="post-metadata">

**Author:** ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)\
**Post date:** [August 29, 2018, 11:16am UTC](https://discourse.processing.org/t/basic-shader-help/2895/6 "2018-08-29T11:16:17Z")

</div>

Yes, exactly. Those coordinates should already be relative to the transformed quad, whereas the fragment coordinates are relative to the screen.

---

<div class="post-metadata">

**Author:** ![steve\_j](https://avatars.discourse-cdn.com/v4/letter/s/4491bb/32.png) [@steve\_j](https://discourse.processing.org/u/steve_j)\
**Post date:** [August 29, 2018, 12:08pm UTC](https://discourse.processing.org/t/basic-shader-help/2895/7 "2018-08-29T12:08:12Z")

</div>

Thanks neil.

Last question. i have implemented `vec2 st = vertTexCoord.st+1./resolution;` although im not sure why i need the +1. (or any value for that matter) as `vec2 st = vertTexCoord.st./resolution` gives a black canvas. do i need to offset vertTexCoord.st for some reason? ie are we going from -.5,+.5 to 0,1?

---

<div class="post-metadata">

**Author:** ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)\
**Post date:** [August 29, 2018, 12:57pm UTC](https://discourse.processing.org/t/basic-shader-help/2895/8 "2018-08-29T12:57:19Z")

</div>

It’s from 0 to 1. But not sure why you’re using `vec2 st` at all. Surely -

```auto
float blend = vertTexCoord.x;

```

???