first commit
This commit is contained in:
		
							
								
								
									
										312
									
								
								public/sdk/three/jsm/shaders/HalftoneShader.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										312
									
								
								public/sdk/three/jsm/shaders/HalftoneShader.js
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,312 @@ | ||||
| /** | ||||
|  * RGB Halftone shader for three.js. | ||||
|  *	NOTE: | ||||
|  * 		Shape (1 = Dot, 2 = Ellipse, 3 = Line, 4 = Square) | ||||
|  *		Blending Mode (1 = Linear, 2 = Multiply, 3 = Add, 4 = Lighter, 5 = Darker) | ||||
|  */ | ||||
|  | ||||
| const HalftoneShader = { | ||||
|  | ||||
| 	name: 'HalftoneShader', | ||||
|  | ||||
| 	uniforms: { | ||||
| 		'tDiffuse': { value: null }, | ||||
| 		'shape': { value: 1 }, | ||||
| 		'radius': { value: 4 }, | ||||
| 		'rotateR': { value: Math.PI / 12 * 1 }, | ||||
| 		'rotateG': { value: Math.PI / 12 * 2 }, | ||||
| 		'rotateB': { value: Math.PI / 12 * 3 }, | ||||
| 		'scatter': { value: 0 }, | ||||
| 		'width': { value: 1 }, | ||||
| 		'height': { value: 1 }, | ||||
| 		'blending': { value: 1 }, | ||||
| 		'blendingMode': { value: 1 }, | ||||
| 		'greyscale': { value: false }, | ||||
| 		'disable': { value: false } | ||||
| 	}, | ||||
|  | ||||
| 	vertexShader: /* glsl */` | ||||
|  | ||||
| 		varying vec2 vUV; | ||||
|  | ||||
| 		void main() { | ||||
|  | ||||
| 			vUV = uv; | ||||
| 			gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); | ||||
|  | ||||
| 		}`, | ||||
|  | ||||
| 	fragmentShader: /* glsl */` | ||||
|  | ||||
| 		#define SQRT2_MINUS_ONE 0.41421356 | ||||
| 		#define SQRT2_HALF_MINUS_ONE 0.20710678 | ||||
| 		#define PI2 6.28318531 | ||||
| 		#define SHAPE_DOT 1 | ||||
| 		#define SHAPE_ELLIPSE 2 | ||||
| 		#define SHAPE_LINE 3 | ||||
| 		#define SHAPE_SQUARE 4 | ||||
| 		#define BLENDING_LINEAR 1 | ||||
| 		#define BLENDING_MULTIPLY 2 | ||||
| 		#define BLENDING_ADD 3 | ||||
| 		#define BLENDING_LIGHTER 4 | ||||
| 		#define BLENDING_DARKER 5 | ||||
| 		uniform sampler2D tDiffuse; | ||||
| 		uniform float radius; | ||||
| 		uniform float rotateR; | ||||
| 		uniform float rotateG; | ||||
| 		uniform float rotateB; | ||||
| 		uniform float scatter; | ||||
| 		uniform float width; | ||||
| 		uniform float height; | ||||
| 		uniform int shape; | ||||
| 		uniform bool disable; | ||||
| 		uniform float blending; | ||||
| 		uniform int blendingMode; | ||||
| 		varying vec2 vUV; | ||||
| 		uniform bool greyscale; | ||||
| 		const int samples = 8; | ||||
|  | ||||
| 		float blend( float a, float b, float t ) { | ||||
|  | ||||
| 		// linear blend | ||||
| 			return a * ( 1.0 - t ) + b * t; | ||||
|  | ||||
| 		} | ||||
|  | ||||
| 		float hypot( float x, float y ) { | ||||
|  | ||||
| 		// vector magnitude | ||||
| 			return sqrt( x * x + y * y ); | ||||
|  | ||||
| 		} | ||||
|  | ||||
| 		float rand( vec2 seed ){ | ||||
|  | ||||
| 		// get pseudo-random number | ||||
| 			return fract( sin( dot( seed.xy, vec2( 12.9898, 78.233 ) ) ) * 43758.5453 ); | ||||
|  | ||||
| 		} | ||||
|  | ||||
| 		float distanceToDotRadius( float channel, vec2 coord, vec2 normal, vec2 p, float angle, float rad_max ) { | ||||
|  | ||||
| 		// apply shape-specific transforms | ||||
| 			float dist = hypot( coord.x - p.x, coord.y - p.y ); | ||||
| 			float rad = channel; | ||||
|  | ||||
| 			if ( shape == SHAPE_DOT ) { | ||||
|  | ||||
| 				rad = pow( abs( rad ), 1.125 ) * rad_max; | ||||
|  | ||||
| 			} else if ( shape == SHAPE_ELLIPSE ) { | ||||
|  | ||||
| 				rad = pow( abs( rad ), 1.125 ) * rad_max; | ||||
|  | ||||
| 				if ( dist != 0.0 ) { | ||||
| 					float dot_p = abs( ( p.x - coord.x ) / dist * normal.x + ( p.y - coord.y ) / dist * normal.y ); | ||||
| 					dist = ( dist * ( 1.0 - SQRT2_HALF_MINUS_ONE ) ) + dot_p * dist * SQRT2_MINUS_ONE; | ||||
| 				} | ||||
|  | ||||
| 			} else if ( shape == SHAPE_LINE ) { | ||||
|  | ||||
| 				rad = pow( abs( rad ), 1.5) * rad_max; | ||||
| 				float dot_p = ( p.x - coord.x ) * normal.x + ( p.y - coord.y ) * normal.y; | ||||
| 				dist = hypot( normal.x * dot_p, normal.y * dot_p ); | ||||
|  | ||||
| 			} else if ( shape == SHAPE_SQUARE ) { | ||||
|  | ||||
| 				float theta = atan( p.y - coord.y, p.x - coord.x ) - angle; | ||||
| 				float sin_t = abs( sin( theta ) ); | ||||
| 				float cos_t = abs( cos( theta ) ); | ||||
| 				rad = pow( abs( rad ), 1.4 ); | ||||
| 				rad = rad_max * ( rad + ( ( sin_t > cos_t ) ? rad - sin_t * rad : rad - cos_t * rad ) ); | ||||
|  | ||||
| 			} | ||||
|  | ||||
| 			return rad - dist; | ||||
|  | ||||
| 		} | ||||
|  | ||||
| 		struct Cell { | ||||
|  | ||||
| 		// grid sample positions | ||||
| 			vec2 normal; | ||||
| 			vec2 p1; | ||||
| 			vec2 p2; | ||||
| 			vec2 p3; | ||||
| 			vec2 p4; | ||||
| 			float samp2; | ||||
| 			float samp1; | ||||
| 			float samp3; | ||||
| 			float samp4; | ||||
|  | ||||
| 		}; | ||||
|  | ||||
| 		vec4 getSample( vec2 point ) { | ||||
|  | ||||
| 		// multi-sampled point | ||||
| 			vec4 tex = texture2D( tDiffuse, vec2( point.x / width, point.y / height ) ); | ||||
| 			float base = rand( vec2( floor( point.x ), floor( point.y ) ) ) * PI2; | ||||
| 			float step = PI2 / float( samples ); | ||||
| 			float dist = radius * 0.66; | ||||
|  | ||||
| 			for ( int i = 0; i < samples; ++i ) { | ||||
|  | ||||
| 				float r = base + step * float( i ); | ||||
| 				vec2 coord = point + vec2( cos( r ) * dist, sin( r ) * dist ); | ||||
| 				tex += texture2D( tDiffuse, vec2( coord.x / width, coord.y / height ) ); | ||||
|  | ||||
| 			} | ||||
|  | ||||
| 			tex /= float( samples ) + 1.0; | ||||
| 			return tex; | ||||
|  | ||||
| 		} | ||||
|  | ||||
| 		float getDotColour( Cell c, vec2 p, int channel, float angle, float aa ) { | ||||
|  | ||||
| 		// get colour for given point | ||||
| 			float dist_c_1, dist_c_2, dist_c_3, dist_c_4, res; | ||||
|  | ||||
| 			if ( channel == 0 ) { | ||||
|  | ||||
| 				c.samp1 = getSample( c.p1 ).r; | ||||
| 				c.samp2 = getSample( c.p2 ).r; | ||||
| 				c.samp3 = getSample( c.p3 ).r; | ||||
| 				c.samp4 = getSample( c.p4 ).r; | ||||
|  | ||||
| 			} else if (channel == 1) { | ||||
|  | ||||
| 				c.samp1 = getSample( c.p1 ).g; | ||||
| 				c.samp2 = getSample( c.p2 ).g; | ||||
| 				c.samp3 = getSample( c.p3 ).g; | ||||
| 				c.samp4 = getSample( c.p4 ).g; | ||||
|  | ||||
| 			} else { | ||||
|  | ||||
| 				c.samp1 = getSample( c.p1 ).b; | ||||
| 				c.samp3 = getSample( c.p3 ).b; | ||||
| 				c.samp2 = getSample( c.p2 ).b; | ||||
| 				c.samp4 = getSample( c.p4 ).b; | ||||
|  | ||||
| 			} | ||||
|  | ||||
| 			dist_c_1 = distanceToDotRadius( c.samp1, c.p1, c.normal, p, angle, radius ); | ||||
| 			dist_c_2 = distanceToDotRadius( c.samp2, c.p2, c.normal, p, angle, radius ); | ||||
| 			dist_c_3 = distanceToDotRadius( c.samp3, c.p3, c.normal, p, angle, radius ); | ||||
| 			dist_c_4 = distanceToDotRadius( c.samp4, c.p4, c.normal, p, angle, radius ); | ||||
| 			res = ( dist_c_1 > 0.0 ) ? clamp( dist_c_1 / aa, 0.0, 1.0 ) : 0.0; | ||||
| 			res += ( dist_c_2 > 0.0 ) ? clamp( dist_c_2 / aa, 0.0, 1.0 ) : 0.0; | ||||
| 			res += ( dist_c_3 > 0.0 ) ? clamp( dist_c_3 / aa, 0.0, 1.0 ) : 0.0; | ||||
| 			res += ( dist_c_4 > 0.0 ) ? clamp( dist_c_4 / aa, 0.0, 1.0 ) : 0.0; | ||||
| 			res = clamp( res, 0.0, 1.0 ); | ||||
|  | ||||
| 			return res; | ||||
|  | ||||
| 		} | ||||
|  | ||||
| 		Cell getReferenceCell( vec2 p, vec2 origin, float grid_angle, float step ) { | ||||
|  | ||||
| 		// get containing cell | ||||
| 			Cell c; | ||||
|  | ||||
| 		// calc grid | ||||
| 			vec2 n = vec2( cos( grid_angle ), sin( grid_angle ) ); | ||||
| 			float threshold = step * 0.5; | ||||
| 			float dot_normal = n.x * ( p.x - origin.x ) + n.y * ( p.y - origin.y ); | ||||
| 			float dot_line = -n.y * ( p.x - origin.x ) + n.x * ( p.y - origin.y ); | ||||
| 			vec2 offset = vec2( n.x * dot_normal, n.y * dot_normal ); | ||||
| 			float offset_normal = mod( hypot( offset.x, offset.y ), step ); | ||||
| 			float normal_dir = ( dot_normal < 0.0 ) ? 1.0 : -1.0; | ||||
| 			float normal_scale = ( ( offset_normal < threshold ) ? -offset_normal : step - offset_normal ) * normal_dir; | ||||
| 			float offset_line = mod( hypot( ( p.x - offset.x ) - origin.x, ( p.y - offset.y ) - origin.y ), step ); | ||||
| 			float line_dir = ( dot_line < 0.0 ) ? 1.0 : -1.0; | ||||
| 			float line_scale = ( ( offset_line < threshold ) ? -offset_line : step - offset_line ) * line_dir; | ||||
|  | ||||
| 		// get closest corner | ||||
| 			c.normal = n; | ||||
| 			c.p1.x = p.x - n.x * normal_scale + n.y * line_scale; | ||||
| 			c.p1.y = p.y - n.y * normal_scale - n.x * line_scale; | ||||
|  | ||||
| 		// scatter | ||||
| 			if ( scatter != 0.0 ) { | ||||
|  | ||||
| 				float off_mag = scatter * threshold * 0.5; | ||||
| 				float off_angle = rand( vec2( floor( c.p1.x ), floor( c.p1.y ) ) ) * PI2; | ||||
| 				c.p1.x += cos( off_angle ) * off_mag; | ||||
| 				c.p1.y += sin( off_angle ) * off_mag; | ||||
|  | ||||
| 			} | ||||
|  | ||||
| 		// find corners | ||||
| 			float normal_step = normal_dir * ( ( offset_normal < threshold ) ? step : -step ); | ||||
| 			float line_step = line_dir * ( ( offset_line < threshold ) ? step : -step ); | ||||
| 			c.p2.x = c.p1.x - n.x * normal_step; | ||||
| 			c.p2.y = c.p1.y - n.y * normal_step; | ||||
| 			c.p3.x = c.p1.x + n.y * line_step; | ||||
| 			c.p3.y = c.p1.y - n.x * line_step; | ||||
| 			c.p4.x = c.p1.x - n.x * normal_step + n.y * line_step; | ||||
| 			c.p4.y = c.p1.y - n.y * normal_step - n.x * line_step; | ||||
|  | ||||
| 			return c; | ||||
|  | ||||
| 		} | ||||
|  | ||||
| 		float blendColour( float a, float b, float t ) { | ||||
|  | ||||
| 		// blend colours | ||||
| 			if ( blendingMode == BLENDING_LINEAR ) { | ||||
| 				return blend( a, b, 1.0 - t ); | ||||
| 			} else if ( blendingMode == BLENDING_ADD ) { | ||||
| 				return blend( a, min( 1.0, a + b ), t ); | ||||
| 			} else if ( blendingMode == BLENDING_MULTIPLY ) { | ||||
| 				return blend( a, max( 0.0, a * b ), t ); | ||||
| 			} else if ( blendingMode == BLENDING_LIGHTER ) { | ||||
| 				return blend( a, max( a, b ), t ); | ||||
| 			} else if ( blendingMode == BLENDING_DARKER ) { | ||||
| 				return blend( a, min( a, b ), t ); | ||||
| 			} else { | ||||
| 				return blend( a, b, 1.0 - t ); | ||||
| 			} | ||||
|  | ||||
| 		} | ||||
|  | ||||
| 		void main() { | ||||
|  | ||||
| 			if ( ! disable ) { | ||||
|  | ||||
| 		// setup | ||||
| 				vec2 p = vec2( vUV.x * width, vUV.y * height ); | ||||
| 				vec2 origin = vec2( 0, 0 ); | ||||
| 				float aa = ( radius < 2.5 ) ? radius * 0.5 : 1.25; | ||||
|  | ||||
| 		// get channel samples | ||||
| 				Cell cell_r = getReferenceCell( p, origin, rotateR, radius ); | ||||
| 				Cell cell_g = getReferenceCell( p, origin, rotateG, radius ); | ||||
| 				Cell cell_b = getReferenceCell( p, origin, rotateB, radius ); | ||||
| 				float r = getDotColour( cell_r, p, 0, rotateR, aa ); | ||||
| 				float g = getDotColour( cell_g, p, 1, rotateG, aa ); | ||||
| 				float b = getDotColour( cell_b, p, 2, rotateB, aa ); | ||||
|  | ||||
| 		// blend with original | ||||
| 				vec4 colour = texture2D( tDiffuse, vUV ); | ||||
| 				r = blendColour( r, colour.r, blending ); | ||||
| 				g = blendColour( g, colour.g, blending ); | ||||
| 				b = blendColour( b, colour.b, blending ); | ||||
|  | ||||
| 				if ( greyscale ) { | ||||
| 					r = g = b = (r + b + g) / 3.0; | ||||
| 				} | ||||
|  | ||||
| 				gl_FragColor = vec4( r, g, b, 1.0 ); | ||||
|  | ||||
| 			} else { | ||||
|  | ||||
| 				gl_FragColor = texture2D( tDiffuse, vUV ); | ||||
|  | ||||
| 			} | ||||
|  | ||||
| 		}` | ||||
|  | ||||
| }; | ||||
|  | ||||
| export { HalftoneShader }; | ||||
		Reference in New Issue
	
	Block a user