https://www.bang-olufsen.com/static-assets/libs/threejs/SobelOperatorShader.js

1//* 9fbef606107a605d69c0edbcd8029e5d *//
2/**
3 * @author Mugen87 / https://github.com/Mugen87
4 *
5 * Sobel Edge Detection (see https://youtu.be/uihBwtPIBxM)
6 *
7 * As mentioned in the video the Sobel operator expects a grayscale image as input.
8 *
9 */
10
11THREE.SobelOperatorShader = {
12
13  uniforms: {
14
15    "tDiffuse": { value: null },
16    "resolution": { value: new THREE.Vector2() }
17
18  },
19
20  vertexShader: [
21
22    "varying vec2 vUv;",
23
24    "void main() {",
25
26    "vUv = uv;",
27
28    "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
29
30    "}"
31
32  ].join( "\n" ),
33
34  fragmentShader: [
35
36    "uniform sampler2D tDiffuse;",
37    "uniform vec2 resolution;",
38    "varying vec2 vUv;",
39
40    "void main() {",
41
42    "vec2 texel = vec2( 1.0 / resolution.x, 1.0 / resolution.y );",
43
44    // kernel definition (in glsl matrices are filled in column-major order)
45
46    "const mat3 Gx = mat3( -1, -2, -1, 0, 0, 0, 1, 2, 1 );", // x direction kernel
47    "const mat3 Gy = mat3( -1, 0, 1, -2, 0, 2, -1, 0, 1 );", // y direction kernel
48
49    // fetch the 3x3 neighbourhood of a fragment
50
51    // first column
52
53    "float tx0y0 = texture2D( tDiffuse, vUv + texel * vec2( -1, -1 ) ).r;",
54    "float tx0y1 = texture2D( tDiffuse, vUv + texel * vec2( -1,  0 ) ).r;",
55    "float tx0y2 = texture2D( tDiffuse, vUv + texel * vec2( -1,  1 ) ).r;",
56
57    // second column
58
59    "float tx1y0 = texture2D( tDiffuse, vUv + texel * vec2(  0, -1 ) ).r;",
60    "float tx1y1 = texture2D( tDiffuse, vUv + texel * vec2(  0,  0 ) ).r;",
61    "float tx1y2 = texture2D( tDiffuse, vUv + texel * vec2(  0,  1 ) ).r;",
62
63    // third column
64
65    "float tx2y0 = texture2D( tDiffuse, vUv + texel * vec2(  1, -1 ) ).r;",
66    "float tx2y1 = texture2D( tDiffuse, vUv + texel * vec2(  1,  0 ) ).r;",
67    "float tx2y2 = texture2D( tDiffuse, vUv + texel * vec2(  1,  1 ) ).r;",
68
69    // gradient value in x direction
70
71    "float valueGx = Gx[0][0] * tx0y0 + Gx[1][0] * tx1y0 + Gx[2][0] * tx2y0 + ",
72    "Gx[0][1] * tx0y1 + Gx[1][1] * tx1y1 + Gx[2][1] * tx2y1 + ",
73    "Gx[0][2] * tx0y2 + Gx[1][2] * tx1y2 + Gx[2][2] * tx2y2; ",
74
75    // gradient value in y direction
76
77    "float valueGy = Gy[0][0] * tx0y0 + Gy[1][0] * tx1y0 + Gy[2][0] * tx2y0 + ",
78    "Gy[0][1] * tx0y1 + Gy[1][1] * tx1y1 + Gy[2][1] * tx2y1 + ",
79    "Gy[0][2] * tx0y2 + Gy[1][2] * tx1y2 + Gy[2][2] * tx2y2; ",
80
81    // magnitute of the total gradient
82
83    "float G = sqrt( ( valueGx * valueGx ) + ( valueGy * valueGy ) );",
84
85    "gl_FragColor = vec4( vec3( G ), 1 );",
86
87    "}"
88
89  ].join( "\n" )
90
91};