three
Version:
JavaScript 3D library
66 lines (47 loc) • 1.2 kB
JavaScript
/**
* @module KaleidoShader
* @three_import import { KaleidoShader } from 'three/addons/shaders/KaleidoShader.js';
*/
/**
* Kaleidoscope Shader.
* Radial reflection around center point
* Ported from: {@link http://pixelshaders.com/editor/}
* by [Toby Schachman]{@link http://tobyschachman.com/}
*
* sides: number of reflections
* angle: initial angle in radians
*
* @constant
* @type {ShaderMaterial~Shader}
*/
const KaleidoShader = {
name: 'KaleidoShader',
uniforms: {
'tDiffuse': { value: null },
'sides': { value: 6.0 },
'angle': { value: 0.0 }
},
vertexShader: /* glsl */`
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}`,
fragmentShader: /* glsl */`
uniform sampler2D tDiffuse;
uniform float sides;
uniform float angle;
varying vec2 vUv;
void main() {
vec2 p = vUv - 0.5;
float r = length(p);
float a = atan(p.y, p.x) + angle;
float tau = 2. * 3.1416 ;
a = mod(a, tau/sides);
a = abs(a - tau/sides/2.) ;
p = r * vec2(cos(a), sin(a));
vec4 color = texture2D(tDiffuse, p + 0.5);
gl_FragColor = color;
}`
};
export { KaleidoShader };