# Shader glow effect

**URL:** <https://discourse.processing.org/t/shader-glow-effect/33001>\
**Category:** Coding Questions\
**Created:** [October 22, 2021, 9:00am UTC](https://discourse.processing.org/t/shader-glow-effect/33001 "2021-10-22T09:00:35Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dazzid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/dazzid/32/2870_2.png) [@Dazzid](https://discourse.processing.org/u/Dazzid)\
**Post date:** [October 22, 2021, 9:00am UTC](https://discourse.processing.org/t/shader-glow-effect/33001/1 "2021-10-22T09:00:35Z")

</div>

I would like to add a glow effect using shaders but I’m confused about how to implement examples from other sources in Processing.

I want to test this example [GLSL Sandbox](https://glslsandbox.com/e#75905.0)

```auto
precision mediump float;

varying vec2 surfacePosition;

void main( void ) {

float intensity = 1.0; // Lower number = more 'glow'
vec3 light_color = vec3(0.674, 0.36778, 0.78761); // RGB, proportional values, higher increases intensity
float master_scale = 0.11; // Change the size of the effect

float c = master_scale/(length(surfacePosition) * length(surfacePosition));
gl_FragColor = vec4(vec3(pow(c, intensity))*light_color, 182898.0);

}

```

Using the ToonShading example in Processing I don’t find a way to call surfacePosition.

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [October 22, 2021, 9:47am UTC](https://discourse.processing.org/t/shader-glow-effect/33001/2 "2021-10-22T09:47:09Z")

</div>

Hello @Dazzid,

Can we see an example of your use case please? It would be easier to guide you in the right direction this way.

---

<div class="post-metadata">

**Author:** ![Dazzid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/dazzid/32/2870_2.png) [@Dazzid](https://discourse.processing.org/u/Dazzid)\
**Post date:** [October 22, 2021, 1:11pm UTC](https://discourse.processing.org/t/shader-glow-effect/33001/3 "2021-10-22T13:11:17Z")

</div>

The example is exactly the ToonShading code from the Processing examples.

```auto
/**
 * Toon Shading.
 * 
 * Example showing the use of a custom lighting shader in order  
 * to apply a "toon" effect on the scene. Based on the glsl tutorial 
 * from lighthouse 3D:
 * http://www.lighthouse3d.com/tutorials/glsl-tutorial/toon-shader-version-ii/
 */
 
PShader toon;
boolean shaderEnabled = true;  

void setup() {
  size(640, 360, P3D);
  noStroke();
  fill(204);
  toon = loadShader("frag.glsl", "vert.glsl");
}

void draw() {
  if (shaderEnabled == true) {
    shader(toon);
  }

  noStroke(); 
  background(0); 
  float dirY = (mouseY / float(height) - 0.5) * 2;
  float dirX = (mouseX / float(width) - 0.5) * 2;
  directionalLight(204, 204, 204, -dirX, -dirY, -1);
  translate(width/2, height/2);
  sphere(120);
}  

void mousePressed() {
  if (shaderEnabled) {
    shaderEnabled = false;
    resetShader();
  } 
  else {
    shaderEnabled = true;
  }
}

```

Vert.glsl:

```auto
// Toon shader using per-pixel lighting. Based on the glsl 
// tutorial from lighthouse 3D:
// http://www.lighthouse3d.com/tutorials/glsl-tutorial/toon-shader-version-ii/

#define PROCESSING_LIGHT_SHADER

uniform mat4 modelview;
uniform mat4 transform;
uniform mat3 normalMatrix;

uniform vec3 lightNormal[8];

attribute vec4 vertex;
attribute vec3 normal;

varying vec3 vertNormal;
varying vec3 vertLightDir;
varying vec2 surfacePosition;

void main() {
  // Vertex in clip coordinates
  gl_Position = transform * vertex;
  
  // Normal vector in eye coordinates is passed
  // to the fragment shader
  vertNormal = normalize(normalMatrix * normal);
  
  // Assuming that there is only one directional light.
  // Its normal vector is passed to the fragment shader
  // in order to perform per-pixel lighting calculation.  
  vertLightDir = -lightNormal[0];
}

```

And the frag.glsl is

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

varying vec3 vertNormal;
varying vec3 vertLightDir;
varying vec2 surfacePosition;

void main() {  
    float intensity = 1.0; // Lower number = more 'glow'
    vec3 light_color = vec3(0.674, 0.36778, 0.78761); // RGB, proportional values, higher increases intensity
    float master_scale = 0.91; // Change the size of the effect

    float c = master_scale/(length(surfacePosition) * length(surfacePosition));
    gl_FragColor = vec4(vec3(pow(c, intensity))*light_color, 0.1);
    
}

```

It doesn’t work as I don’t understand how to implement surfacePosition and then pass it to gl\_FragColor