Dies ist das Repository meines kleinen Portfolios.
Im Hintergrund läuft eine Planetensimulation, geschrieben in JavaScript und Three.js.
Die zu sehenden Texturen stammen von:
https://www.solarsystemscope.com/textures/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
90 lines
2.3 KiB
90 lines
2.3 KiB
import { |
|
Vector2 |
|
} from 'three'; |
|
|
|
/** |
|
* Sobel Edge Detection (see https://youtu.be/uihBwtPIBxM) |
|
* |
|
* As mentioned in the video the Sobel operator expects a grayscale image as input. |
|
* |
|
*/ |
|
|
|
const SobelOperatorShader = { |
|
|
|
uniforms: { |
|
|
|
'tDiffuse': { value: null }, |
|
'resolution': { value: new Vector2() } |
|
|
|
}, |
|
|
|
vertexShader: /* glsl */` |
|
|
|
varying vec2 vUv; |
|
|
|
void main() { |
|
|
|
vUv = uv; |
|
|
|
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); |
|
|
|
}`, |
|
|
|
fragmentShader: /* glsl */` |
|
|
|
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 ); |
|
|
|
}` |
|
|
|
}; |
|
|
|
export { SobelOperatorShader };
|
|
|