@dailies-studio/tsl-textures 3.0.4

package/src/halftone.js

@@ -0,0 +1,252 @@
+
+//	TSL-Textures: Halftone
+
+
+
+import { Discard, float, Fn, If, min, positionView, screenCoordinate, Switch, vec2, vec3, vertexColor } from 'three/tsl';
+
+
+
+var defaults = {
+	$name: 'Halftone',
+
+	position: screenCoordinate,
+	scale: 2,
+	radius: 0.5,
+	pattern: 1,
+
+	attenuation: 0,
+	near: 6,
+	far: 14,
+
+	color: vertexColor(),
+
+	positionView: positionView,
+
+};
+
+
+
+// square grid of circles
+var halftoneGridRaw = Fn( ([ position, scale, radius, attenuation, far, near, color, positionView ]) => {
+
+	var xscale = float( 5 ).sub( scale ).exp().toVar(),
+		pos = position.toVar(),
+		xradius = radius.div( Math.sqrt( 2 ) ).toVar();
+
+	var center = pos.div( xscale ).round().mul( xscale );
+
+
+	If( attenuation.notEqual( 0 ), ()=>{
+
+		xradius.mulAssign( positionView.z.mul( -1 ).smoothstep( far, near ).pow( 1/2 ) );
+
+	} );
+
+	If( pos.distance( center ).greaterThan( xscale.mul( xradius ) ), ()=>Discard() );
+
+	return color;
+
+} ).setLayout( {
+	name: 'halftoneGridRaw',
+	type: 'vec3',
+	inputs: [
+		{ name: 'position', type: 'vec3' },
+		{ name: 'scale', type: 'float' },
+		{ name: 'radius', type: 'float' },
+		{ name: 'attenuation', type: 'int' },
+		{ name: 'far', type: 'float' },
+		{ name: 'near', type: 'float' },
+		{ name: 'color', type: 'vec3' },
+		{ name: 'positionView', type: 'vec3' },
+	] }
+);
+
+
+
+// diagonal geid of circles
+var halftoneDiagRaw = Fn( ([ position, scale, radius, attenuation, far, near, color, positionView ]) => {
+
+	var xscale = float( 5 ).sub( scale ).exp().toVar(),
+		pos = position.toVar(),
+		xradius = radius.div( Math.sqrt( 2 ) ).toVar();
+
+	var shift = pos.y.div( xscale ).round().mod( 2 );
+
+	var centerA = pos.div( xscale ).round().mulAssign( xscale ).toVar();
+
+	If( shift.equal( 0 ), ()=>{
+
+		centerA.x.addAssign( xscale.mul( 0.5 ) );
+
+	} );
+	var centerB = vec2( centerA.x.sub( xscale ), centerA.y ).toVar();
+
+
+	If( attenuation.notEqual( 0 ), ()=>{
+
+		xradius.mulAssign( positionView.z.mul( -1 ).smoothstep( far, near ).pow( 1/2 ) );
+
+	} );
+
+	If( min( pos.distance( centerA ), pos.distance( centerB ) ).greaterThan( xscale.mul( xradius ) ), ()=>Discard() );
+
+	return color;
+
+} ).setLayout( {
+	name: 'halftoneDiagRaw',
+	type: 'vec3',
+	inputs: [
+		{ name: 'position', type: 'vec3' },
+		{ name: 'scale', type: 'float' },
+		{ name: 'radius', type: 'float' },
+		{ name: 'attenuation', type: 'int' },
+		{ name: 'far', type: 'float' },
+		{ name: 'near', type: 'float' },
+		{ name: 'color', type: 'vec3' },
+		{ name: 'positionView', type: 'vec3' },
+	] }
+);
+
+
+
+// trigonetric pattern
+var halftoneTrigRaw = Fn( ([ position, scale, radius, pattern, attenuation, far, near, color, positionView ]) => {
+
+	var pos = position.mul( scale.sub( 3.5 ).exp() ).sin().add( 1 ).div( 2 ).toVar(),
+		x = pos.x,
+		y = pos.y,
+		xradius = radius.div( Math.sqrt( 2 ) ).toVar();
+
+	var dist = float( 0 );
+
+	Switch( pattern )
+		.Case( 2, ()=>{
+
+			dist.assign( x.add( y ).div( 2 ) );
+
+		} )
+		.Case( 3, ()=>{
+
+			dist.assign( x.sub( y ).abs().oneMinus() );
+
+		} )
+		.Case( 10, ()=>{
+
+			dist.assign( x.sub( y ).abs() );
+
+		} )
+		.Case( 4, ()=>{
+
+			dist.assign( x.mul( y ).oneMinus() );
+
+		} )
+		.Case( 9, ()=>{
+
+			dist.assign( x.mul( y ) );
+
+		} )
+		.Case( 5, ()=>{
+
+			dist.assign( x.max( y ) );
+
+		} )
+		.Case( 6, ()=>{
+
+			dist.assign( x.min( y ) );
+
+		} )
+		.Case( 7, ()=>{
+
+			dist.assign( x );
+
+		} )
+		.Case( 8, ()=>{
+
+			dist.assign( y );
+
+		} );
+
+	If( attenuation.notEqual( 0 ), ()=>{
+
+		xradius.mulAssign( positionView.z.mul( -1 ).smoothstep( far, near ).pow( 1/2 ) );
+
+	} );
+
+	If( dist.greaterThan( xradius ), ()=>Discard() );
+
+	return color;
+
+} ).setLayout( {
+	name: 'halftoneTrigRaw',
+	type: 'vec3',
+	inputs: [
+		{ name: 'position', type: 'vec3' },
+		{ name: 'scale', type: 'float' },
+		{ name: 'radius', type: 'float' },
+		{ name: 'pattern', type: 'int' },
+		{ name: 'attenuation', type: 'int' },
+		{ name: 'far', type: 'float' },
+		{ name: 'near', type: 'float' },
+		{ name: 'color', type: 'vec3' },
+		{ name: 'positionView', type: 'vec3' },
+	] }
+);
+
+
+
+var halftoneRaw = Fn( ([ position, scale, radius, pattern, attenuation, far, near, color, positionView ]) => {
+
+	var result = vec3( 0 ).toVar();
+
+	Switch( pattern )
+		.Case( 0, ()=>{
+
+			result.assign( halftoneGridRaw( position, scale, radius, attenuation, far, near, color, positionView ) );
+
+		} )
+		.Case( 1, ()=>{
+
+			result.assign( halftoneDiagRaw( position, scale, radius, attenuation, far, near, color, positionView ) );
+
+		} )
+		.Default( ()=>{
+
+			result.assign( halftoneTrigRaw( position, scale, radius, pattern, attenuation, far, near, color, positionView ) );
+
+		} );
+
+	return result;
+
+} ).setLayout( {
+	name: 'halftoneRaw',
+	type: 'vec3',
+	inputs: [
+		{ name: 'position', type: 'vec3' },
+		{ name: 'scale', type: 'float' },
+		{ name: 'radius', type: 'float' },
+		{ name: 'pattern', type: 'int' },
+		{ name: 'attenuation', type: 'int' },
+		{ name: 'far', type: 'float' },
+		{ name: 'near', type: 'float' },
+		{ name: 'color', type: 'vec3' },
+		{ name: 'positionView', type: 'vec3' },
+	] }
+);
+
+
+function halftone( params={} ) {
+
+	var { position, scale, radius, pattern, attenuation, far, near, color, positionView } = { ...defaults, ...params };
+
+	return halftoneRaw( position, scale, radius, pattern, attenuation, far, near, color, positionView );
+
+}
+
+
+
+halftone.defaults = defaults;
+
+
+
+export { halftone };

package/src/isolayers.js

@@ -0,0 +1,79 @@
+
+//	TSL-Textures: Isolayers
+
+
+
+import { Color } from 'three';
+import { exp, float, Fn, mix, positionGeometry } from 'three/tsl';
+import { hsl, noise, toHsl } from './tsl-utils.js';
+
+
+
+var defaults = {
+	$name: 'Isolayers',
+
+	position: positionGeometry,
+	scale: 2,
+	layers: 10,
+	edge: 0.5,
+	darkness: 0,
+
+	color: new Color( 0xFFFFF0 ),
+	background: new Color( 0xFF4040 ),
+
+	seed: 0,
+};
+
+
+
+var isolayersRaw = Fn( ([ position, scale, layers, edge, darkness, color, background, seed ])=>{
+
+	var pos = position.mul( exp( scale.sub( 1 ) ) ).add( seed ).toVar( );
+
+	var depth = edge.remap( 0, 1, 40, 10 );
+
+	var k = noise( pos, 1.2, 1 ).div( 2 );
+
+	var i = k.mul( layers ).round().div( layers ).clamp( 0, 1 );
+	var f = k.sub( float( 0.5+0.03 ).div( layers ) )
+		.mul( layers ).fract()
+		.mul( float( 2 ).pow( depth.reciprocal() ) )
+		.pow( depth ).sub( 1 ).abs().oneMinus();
+
+	var hslColor = mix( toHsl( background ), toHsl( color ), i ).toVar();
+	hslColor.z.mulAssign( mix( 1, i.mul( 1.5 ), darkness ).clamp( 0, 1 ) );
+
+	return hsl( hslColor ).sub( f );
+
+} ).setLayout( {
+	name: 'isolayersRaw',
+	type: 'vec3',
+	inputs: [
+		{ name: 'position', type: 'vec3' },
+		{ name: 'scale', type: 'float' },
+		{ name: 'layers', type: 'int' },
+		{ name: 'edge', type: 'float' },
+		{ name: 'darkness', type: 'float' },
+		{ name: 'color', type: 'vec3' },
+		{ name: 'background', type: 'vec3' },
+		{ name: 'seed', type: 'float' },
+	] }
+);
+
+
+
+function isolayers( params={} ) {
+
+	var { position, scale, layers, edge, darkness, color, background, seed } = { ...defaults, ...params };
+
+	return isolayersRaw( position, scale, layers, edge, darkness, color, background, seed );
+
+}
+
+
+
+isolayers.defaults = defaults;
+
+
+
+export { isolayers };

package/src/isolines.js

@@ -0,0 +1,72 @@
+
+//	TSL-Textures: Isolines
+
+
+
+import { Color } from "three";
+import { add, exp, Fn, mix, oneMinus, positionGeometry, sin, smoothstep, sub } from 'three/tsl';
+import { noise } from './tsl-utils.js';
+
+
+
+var defaults = {
+	$name: 'Isolines',
+
+	position: positionGeometry,
+	scale: 2,
+	density: 40,
+	blur: 0.3,
+	thinness: 0.6,
+
+	color: new Color( 0xFFFFFF ),
+	background: new Color( 0x000000 ),
+
+	seed: 0,
+};
+
+
+
+var isolinesRaw = Fn( ([ position, scale, density, blur, thinness, color, background, seed ])=>{
+
+	var pos = position.mul( exp( scale ) ).add( seed ).toVar( );
+
+	var k = noise( pos, density );
+
+	k = oneMinus( sin( k ) ).div( 2 );
+
+	k = smoothstep( sub( thinness, blur ), add( thinness, blur ), k );
+
+	return mix( color, background, k );
+
+} ).setLayout( {
+	name: 'isolinesRaw',
+	type: 'vec3',
+	inputs: [
+		{ name: 'position', type: 'vec3' },
+		{ name: 'scale', type: 'float' },
+		{ name: 'density', type: 'float' },
+		{ name: 'blur', type: 'float' },
+		{ name: 'thinness', type: 'float' },
+		{ name: 'color', type: 'vec3' },
+		{ name: 'background', type: 'vec3' },
+		{ name: 'seed', type: 'float' },
+	] }
+);
+
+
+
+function isolines( params={} ) {
+
+	var { position, scale, density, blur, thinness, color, background, seed } = { ...defaults, ...params };
+
+	return isolinesRaw( position, scale, density, blur, thinness, color, background, seed );
+
+}
+
+
+
+isolines.defaults = defaults;
+
+
+
+export { isolines };

package/src/karst-rock.js

@@ -0,0 +1,67 @@
+
+//	TSL-Textures: Karst rock
+
+
+
+import { Color } from "three";
+import { exp, Fn, mix, positionGeometry } from 'three/tsl';
+import { noise } from './tsl-utils.js';
+
+
+
+var defaults = {
+	$name: 'Karst rock',
+
+	position: positionGeometry,
+	scale: 2,
+
+	color: new Color( 0xFFF4F0 ),
+	background: new Color( 0xD0D0D0 ),
+
+	seed: 0,
+};
+
+
+
+var karstRockRaw = Fn( ([ position, scale, color, background, seed ])=>{
+
+	var pos = position.mul( exp( scale ) ).add( seed.sin().mul( 5 ) ).toVar( );
+
+	var pos2 = pos.add( noise( pos.mul( 2 ) ) ).toVar();
+
+	var k = noise( pos2 ).div( noise( pos2.mul( 1.01 ) ) ).clamp( 0, 2 ).toVar();
+
+	k.addAssign( noise( pos.mul( 100 ) ).div( 3 ) );
+	k.addAssign( noise( pos.mul( 2 ) ).div( 2 ) );
+
+	return mix( background, color, k ).mul( k.pow( 0.1 ) );
+
+} ).setLayout( {
+	name: 'karstRockRaw',
+	type: 'vec3',
+	inputs: [
+		{ name: 'position', type: 'vec3' },
+		{ name: 'scale', type: 'float' },
+		{ name: 'color', type: 'vec3' },
+		{ name: 'background', type: 'vec3' },
+		{ name: 'seed', type: 'float' },
+	] }
+);
+
+
+
+function karstRock( params={} ) {
+
+	var { position, scale, color, background, seed } = { ...defaults, ...params };
+
+	return karstRockRaw( position, scale, color, background, seed );
+
+}
+
+
+
+karstRock.defaults = defaults;
+
+
+
+export { karstRock };

package/src/marble.js

@@ -0,0 +1,96 @@
+
+//	TSL-Textures: Marble
+
+
+
+import { Color } from "three";
+import { add, div, exp, Fn, If, mix, mul, oneMinus, positionGeometry, pow } from 'three/tsl';
+import { noise } from './tsl-utils.js';
+
+
+
+var defaults = {
+	$name: 'Marble',
+
+	position: positionGeometry,
+	scale: 1.2,
+	thinness: 5,
+	noise: 0.3,
+
+	color: new Color( 0x4545D3 ),
+	background: new Color( 0xF0F8FF ),
+
+	seed: 0,
+};
+
+
+
+var marbleRaw = Fn( ([ position, scale, thinness, xnoise, color, background, seed ]) => {
+
+	var pos = position.mul( exp( scale ) ).add( seed ).toVar( );
+
+	var k = add(
+		noise( pos ),
+		noise( pos.mul( 2 ) ).mul( 0.5 ),
+		noise( pos.mul( 6 ) ).mul( 0.1 )
+	);
+
+	var k = oneMinus( k.abs().pow( 2.5 ) ).toVar();
+
+	var	maxSmooth = oneMinus( pow( 0.5, thinness.add( 7 ) ) ).toVar(),
+		minSmooth = oneMinus( pow( 0.5, thinness.add( 7 ).mul( 0.5 ) ) ).toVar();
+
+	If( k.greaterThan( maxSmooth ), ()=>{
+
+		k.assign( 1 );
+
+	} )
+		.ElseIf( k.lessThan( minSmooth ), ()=>{
+
+			k.assign( 0 );
+
+		} )
+		.Else( ()=> {
+
+			var a = k.sub( minSmooth );
+			var b = maxSmooth.sub( minSmooth );
+			k.assign( pow( div( a, b ), 5 ).mul( 0.75 ) );
+			k.assign( k.mul( add( 0.5, noise( pos.mul( 2 ) ).mul( 1.5 ) ) ) );
+
+		} );
+
+	k.assign( k.add( mul( xnoise, noise( pos.mul( 150 ) ).abs().pow3() ) ) );
+
+	return mix( background, color, k );
+
+} ).setLayout( {
+	name: 'marbleRaw',
+	type: 'vec3',
+	inputs: [
+		{ name: 'position', type: 'vec3' },
+		{ name: 'scale', type: 'float' },
+		{ name: 'thinness', type: 'float' },
+		{ name: 'xnoise', type: 'float' },
+		{ name: 'color', type: 'vec3' },
+		{ name: 'background', type: 'vec3' },
+		{ name: 'seed', type: 'float' },
+	] }
+);
+
+
+
+function marble( params={} ) {
+
+	var { position, scale, thinness, noise, color, background, seed } = { ...defaults, ...params };
+
+	return marbleRaw( position, scale, thinness, noise, color, background, seed );
+
+}
+
+
+
+marble.defaults = defaults;
+
+
+
+export { marble };

package/src/melter.js

@@ -0,0 +1,76 @@
+
+//	TSL-Textures: Melter
+
+
+
+import { Vector2, Vector3 } from "three";
+import { cross, float, Fn, normalLocal, positionGeometry, sub, tangentLocal, transformNormalToView, vec4 } from 'three/tsl';
+import { matTrans, noise, prepare } from './tsl-utils.js';
+
+
+
+var surfacePos = Fn( ([ pos, params ])=>{
+
+	var zone = float( 1 ).toVar();
+	var n = noise( pos.mul( 2 ) ).add( 1 ).div( 2 ); // noise factor
+	var k = params.distance.normalize().dot( normalLocal.normalize() ).max( 0 ).pow( 10 );
+
+
+	var T = matTrans( params.distance.mul( zone ).mul( n ).mul( k ).pow( 0.1 ) );
+
+	return T.mul( vec4( pos, 1 ) ).xyz;
+
+} );
+
+
+
+var melter = Fn( ( params )=>{
+
+	params = prepare( { ...melter.defaults, ...params } );
+
+	return surfacePos( positionGeometry, params );
+
+} );
+
+
+
+melter.normal = Fn( ( params ) => {
+
+	params = prepare( { ...melter.defaults, ...params } );
+
+	var eps = 0.01;
+
+	var position = positionGeometry,
+		normal = normalLocal.normalize().toVar(),
+		tangent = tangentLocal.normalize().mul( eps ).toVar(),
+		bitangent = cross( normal, tangent ).normalize().mul( eps ).toVar();
+
+	var pos = surfacePos( position, params );
+	var posU = surfacePos( position.add( tangent ), params );
+	var posV = surfacePos( position.add( bitangent ), params );
+
+	var dU = sub( posU, pos ),
+		dV = sub( posV, pos );
+
+	return transformNormalToView( cross( dU, dV ).normalize() );
+
+} );
+
+
+
+melter.defaults = {
+	$name: 'Melter',
+	$positionNode: true,
+	$selectorPlanar: true,
+
+	distance: new Vector3( 0, -0.5, 0 ),
+
+	selectorCenter: new Vector3( 0, 0, 0 ),
+	selectorAngles: new Vector2( 0, 0 ),
+	selectorWidth: 1.7,
+
+};
+
+
+
+export { melter };