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