tsl-textures 0.4.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tsl-textures",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "A collection of Three.js Shading Language (TSL) textures ",
   "main": "index.js",
   "repository": {

package/src/--concrete.js

@@ -0,0 +1,37 @@
+
+// TSL-Textures: Concrete
+
+
+
+//import { Color } from "three";
+import { abs, /*add, div,*/ exp, /*If, MeshLambertNodeMaterial, mix,*/ mul, /*oneMinus,*/ positionLocal, pow, remap, tslFn } from 'three/nodes';
+import { /*hsl,*/ noise } from 'tsl-textures/tsl-utils.js';
+
+
+
+var concrete = tslFn( ( params ) => {
+
+	var pos = positionLocal.mul( exp( params.scale ) ).add( params.seed ).toVar( );
+
+	var k = noise( pos );
+
+	//return hsl( 0, 0, mul(params.bump,pow(abs(k.div(2).add(0.5)),remap(params.density,0,1,10,0.5))) );
+	return mul( params.bump, pow( abs( k.div( 2 ).add( 0.5 ) ), remap( params.density, 0, 1, 10, 0.5 ) ) );
+
+} );
+
+
+
+concrete.defaults = {
+	$name: 'Concrete',
+
+	scale: 2,
+	density: 1,
+	bump: 1,
+
+	seed: 0,
+};
+
+
+
+export { concrete };

package/src/grid.js

@@ -0,0 +1,49 @@
+
+//	TSL-Textures: Grid
+
+
+
+import { Color } from "three";
+import { abs, add, div, equirectUV, min, mix, mul, oneMinus, positionLocal, pow, remapClamp, round, sin, smoothstep, sub, tslFn } from 'three/nodes';
+
+
+
+var grid = tslFn( ( params ) => {
+
+	var uv = equirectUV( positionLocal.normalize() ).toVar(),
+		a = mul( uv.x, 2*Math.PI ),
+		b = mul( uv.y, Math.PI ).toVar();
+
+	var uTo = div( round( mul( uv.x, params.countU ) ), params.countU ),
+		vTo = div( round( mul( uv.y, params.countV ) ), params.countV ),
+		aTo = mul( uTo, 2*Math.PI ),
+		bTo = mul( vTo, Math.PI );
+
+	var angleU = abs( sub( a, aTo ) ).mul( sin( b ) ),
+		angleV = abs( sub( b, bTo ) ),
+		angle = min( angleU, angleV );
+
+	var treshold = mul( min( div( 2*Math.PI, params.countU ), div( Math.PI, params.countV ) ), remapClamp( pow( params.thinness, 0.5 ), 0, 1, 0.9, 0.04 ), 0.5 );
+	var k = oneMinus( smoothstep( sub( treshold, 0.002 ), add( treshold, 0.002 ), angle ) );
+
+	return mix( params.background, params.color, k );
+
+} );
+
+
+
+grid.defaults = {
+	$name: 'Grid',
+
+	countU: 32,
+	countV: 16,
+
+	thinness: 0.8,
+
+	color: new Color( 0x000000 ),
+	background: new Color( 0xFFFFFF ),
+};
+
+
+
+export { grid };

package/src/marble.js

@@ -8,6 +8,7 @@ import { add, div, exp, If, mix, mul, oneMinus, positionLocal, pow, tslFn } from
 import { noise } from 'tsl-textures/tsl-utils.js';
 
 
+
 var marble = tslFn( ( params ) => {
 
 	var pos = positionLocal.mul( exp( params.scale ) ).add( params.seed ).toVar( );

package/src/neon-lights.js

@@ -0,0 +1,77 @@
+
+//	TSL-Textures: Neon Lights
+
+
+
+import { Color } from "three";
+import { abs, cond, exp, oneMinus, positionLocal, sqrt, tslFn, vec3 } from 'three/nodes';
+import { hsl, noise, toHsl } from 'tsl-textures/tsl-utils.js';
+
+
+
+var neonLights = tslFn( ( params ) => {
+
+	var pos = positionLocal;//.mul( exp( params.scale ) ).add( params.seed ).toVar( );
+
+	var scale = exp( params.scale.remap( 0, 4, 2, -2 ) ).toVar();
+	var thinness = exp( params.thinness.remap( 0, 1, 1.5, 0 ) ).toVar();
+
+	var color = params.background.toVar();
+	var neon = vec3( 0 ).toVar();
+
+	var x = noise( pos.xyz ).toVar();
+	var y = noise( pos.yzx ).toVar();
+	var z = noise( pos.zxy ).toVar();
+
+	var k = noise( vec3( x, y, z ).mul( scale ).add( params.seed ) ).toVar();
+	k.assign( oneMinus( sqrt( abs( k ) ) ).pow( 3 ) );
+
+	neon.assign( params.colorA );
+	var HSL = toHsl( neon );
+	neon.assign( hsl( HSL.x, HSL.y, HSL.z.mul( k ) ) );
+
+	color.addAssign( cond( params.mode.equal( 0 ), neon, neon.negate() ).mul( thinness ) );
+
+	k.assign( noise( vec3( y, z, x ).mul( scale ).sub( params.seed ) ) );
+	k.assign( oneMinus( sqrt( abs( k ) ) ).pow( 3 ) );
+
+	neon.assign( params.colorB );
+	var HSL = toHsl( neon );
+	neon.assign( hsl( HSL.x, HSL.y, HSL.z.mul( k ) ) );
+
+	color.addAssign( cond( params.mode.equal( 0 ), neon, neon.negate() ).mul( thinness ) );
+
+
+	k.assign( noise( vec3( z, x, y.negate() ).mul( scale ).add( params.seed ) ) );
+	k.assign( oneMinus( sqrt( abs( k ) ) ).pow( 3 ) );
+
+	neon.assign( params.colorC );
+	var HSL = toHsl( neon );
+	neon.assign( hsl( HSL.x, HSL.y, HSL.z.mul( k ) ) );
+
+	color.addAssign( cond( params.mode.equal( 0 ), neon, neon.negate() ).mul( thinness ) );
+
+	return color;
+
+} );
+
+
+
+neonLights.defaults = {
+	$name: 'Neon Lights',
+
+	scale: 1.5,
+	thinness: 0.8,
+	mode: 0, // 0=additive, 1=subtractive
+
+	colorA: new Color( 0xFF0000 ),
+	colorB: new Color( 0x00FF00 ),
+	colorC: new Color( 0x0000FF ),
+	background: new Color( 0x000000 ),
+
+	seed: 0,
+};
+
+
+
+export { neonLights };

package/src/planet.js

@@ -0,0 +1,130 @@
+
+//	TSL-Textures: Planet
+
+
+
+import { Color } from 'three';
+import { exp, float, If, loop, mix, mul, positionLocal, remap, smoothstep, tslFn, vec3 } from 'three/nodes';
+import { noise } from 'tsl-textures/tsl-utils.js';
+
+
+
+
+var planet = tslFn( ( params )=>{
+
+	var k = float( 0 ).toVar(),
+		sum = float( 0 ).toVar(),
+		scale = exp( params.scale.sub( 2 ) ).toVar(),
+		power = float( 2 ).toVar();
+
+	loop( params.iterations.add( 10 ), ()=>{
+
+		k.addAssign( mul( power, noise( positionLocal.mul( scale ).add( params.seed ) ) ) );
+		sum.addAssign( power );
+		scale.mulAssign( 1.5 );
+		power.mulAssign( 0.8 );
+
+	} );
+
+	k.assign( mul( k, k, 0.5 ).div( sum ) );
+
+	var levelSea = params.levelSea.pow( 2 ).toVar();
+	var levelMountain = params.levelMountain.pow( 2 ).toVar();
+	var levelSand = mix( levelSea, levelMountain, params.balanceSand ).toVar();
+	var levelCoast = mix( levelSea, levelSand, 0.4 ).toVar();
+	var levelGrass = mix( levelSea, levelSand, 0.6 ).toVar();
+
+	var color = vec3().toVar();
+
+	// process water
+	If( k.lessThan( levelSea ), ()=>{
+
+		// deep-shallow
+		color.assign( mix(
+			params.colorDeep,
+			params.colorShallow,
+			remap( k, 0, levelSea, 0, 1 ).pow( exp( params.balanceWater.mul( -8 ).add( 4 ) ) )
+		) );
+
+	} )
+		.elseif( k.lessThan( levelCoast ), ()=>{
+
+			// shallow-sand
+			color.assign( mix(
+				params.colorShallow,
+				params.colorBeach,
+				remap( k, levelSea, levelCoast )
+			) );
+
+		} )
+		.elseif( k.lessThan( levelGrass ), ()=>{
+
+			// sand
+			color.assign( params.colorBeach );
+
+		} )
+		.elseif( k.lessThan( levelSand ), ()=>{
+
+			// shallow-sand-grass
+			color.assign( mix(
+				params.colorBeach,
+				params.colorGrass,
+				remap( k, levelGrass, levelSand )
+			) );
+
+		} )
+		.elseif( k.lessThan( levelMountain ), ()=>{
+
+			// grass-forest
+			color.assign( mix(
+				params.colorGrass,
+				params.colorForest,
+				remap( k, levelSand, levelMountain ).pow( 0.75 )
+			) );
+
+		} )
+		.else( ()=>{
+
+			// forest-snow
+			var levelSnow = mix( 1, levelMountain, params.balanceSnow );
+			color.assign( mix(
+				params.colorForest,
+				params.colorSnow,
+				smoothstep( mix( levelSnow, levelMountain, params.balanceSnow.pow( 0.5 ) ), levelSnow, k )
+			) );
+
+		} );
+
+	return color;
+
+} );
+
+
+
+planet.defaults = {
+	$name: 'Planet',
+
+	scale: 2,
+
+	iterations: 5,
+
+	levelSea: 0.3,
+	levelMountain: 0.7,
+
+	balanceWater: 0.3,
+	balanceSand: 0.2,
+	balanceSnow: 0.8,
+
+	colorDeep: new Color( 0x123a59 ).convertLinearToSRGB(), // SteelBlue
+	colorShallow: new Color( 0x87CEEB ).convertLinearToSRGB(), // SkyBlue
+	colorBeach: new Color( 0xFFFACD ).convertLinearToSRGB(), // LemonChiffon
+	colorGrass: new Color( 0x3CB371 ).convertLinearToSRGB(), // MediumSeaGreen
+	colorForest: new Color( 0x003000 ).convertLinearToSRGB(), // Dark green
+	colorSnow: new Color( 0xF0FFFF ).convertLinearToSRGB(), // Azure
+
+	seed: 0,
+};
+
+
+
+export { planet };

package/src/scepter-head.js

@@ -0,0 +1,66 @@
+
+//	TSL-Textures: Scepter Head
+
+
+
+import { Color } from "three";
+import { abs, add, cos, floor, max, mix, mul, positionLocal, remapClamp, sign, tan, tslFn, vec3 } from 'three/nodes';
+import { hsl, mod, noise, remapExp, toHsl } from 'tsl-textures/tsl-utils.js';
+
+
+
+var scepterHead = tslFn( ( params ) => {
+
+	var pos = positionLocal;
+
+	var fx = pos.x.mul( remapExp( params.xFactor, 0, 100, 1.35, 30 ) ).toVar( ),
+		fy = pos.y.mul( remapExp( params.yFactor, 0, 100, 1.35, 30 ) ).toVar( ),
+		fz = pos.z.mul( remapExp( params.zFactor, 0, 100, 1.35, 30 ) ).toVar( );
+
+	var cosX = cos( fx ).toVar(),
+		cosY = cos( fy ).toVar(),
+		cosZ = cos( fz ).toVar();
+
+	var k = noise( vec3( pos.x.div( cosX ), pos.y.div( cosY ), pos.z.div( cosZ ) ) );
+
+	k = sign( k ).mul( abs( k ).pow( 0.75 ) );
+
+	var dx = abs( mul( fx, tan( fx ) ).add( 1 ).div( cos( fx ) ) ),
+		dy = abs( mul( fy, tan( fy ) ).add( 1 ).div( cos( fy ) ) ),
+		dz = abs( mul( fz, tan( fz ) ).add( 1 ).div( cos( fz ) ) );
+
+	var HSL = vec3().toVar();
+
+	var indexX = ( abs( floor( ( fx.mul( 2/Math.PI ).add( 1 ) ).div( 2 ) ) ) ),
+		indexY = ( abs( floor( ( fy.mul( 2/Math.PI ).add( 1 ) ).div( 2 ) ) ) ),
+		indexZ = ( abs( floor( ( fz.mul( 2/Math.PI ).add( 1 ) ).div( 2 ) ) ) );
+
+	var index = mod( ( add( indexX, indexY, indexZ ) ), 2 );
+
+	HSL.assign( toHsl( mix( params.colorA, params.colorB, index ) ) );
+	var color1 = hsl( HSL.x, HSL.y, HSL.z.mul( k ) ).toVar();
+
+	HSL.assign( toHsl( params.colorRim ) );
+	var color2 = hsl( HSL.x, HSL.y, mul( 2, k, HSL.z ) ).toVar();
+
+	return mix( color1, color2, remapClamp( max( dx, max( dy, dz ) ), 55-10, 55+10 ) );
+
+} );
+
+
+
+scepterHead.defaults = {
+	$name: 'Scepter head',
+
+	xFactor: 10,
+	yFactor: 22,
+	zFactor: 10,
+
+	colorRim: new Color( 0xFFFFFF ),
+	colorA: new Color( 0x70E0FF ),
+	colorB: new Color( 0x3000FF ),
+};
+
+
+
+export { scepterHead };

package/src/scream.js

@@ -0,0 +1,46 @@
+
+//	TSL-Textures: Scream
+
+
+
+import { Color } from "three";
+import { add, cos, exp, mix, positionLocal, sin, tslFn } from 'three/nodes';
+import { hsl, noise, toHsl } from 'tsl-textures/tsl-utils.js';
+
+
+
+var scream = tslFn( ( params ) => {
+
+	var pos = positionLocal.mul( exp( params.scale ) ).add( params.seed ).toVar( );
+
+	var k = noise( add( sin( pos.xyz ), cos( pos.yzx ) ) );
+
+	pos.assign( positionLocal.mul( exp( params.scale ).mul( k ) ).add( params.seed ) );
+
+	var k = noise( add( sin( pos.xyz ), cos( pos.yzx ) ).mul( 2 ) );
+
+	var col = mix( params.background, params.color, k ).toVar();
+
+	var HSL = toHsl( col ).toVar();
+
+	return hsl( add( HSL.x, params.variety.mul( sin( k.mul( Math.PI ) ) ).mul( 0.5 ) ), HSL.y, HSL.z );
+
+} );
+
+
+
+scream.defaults = {
+	$name: 'Scream',
+
+	scale: 2,
+	variety: 1,
+
+	color: new Color( 0xF0F060 ),
+	background: new Color( 0xD09090 ),
+
+	seed: 0,
+};
+
+
+
+export { scream };

package/src/tsl-utils.js

@@ -8,7 +8,7 @@
 
 
 
-import { add, cond, cos, cross, float, If, max, min, mul, sin, sub, tslFn, uniform, vec3, vec4 } from 'three/nodes';
+import { add, cond, cos, cross, div, float, floor, If, log2, max, min, mul, pow, remap, sin, sub, tslFn, uniform, vec3, vec4 } from 'three/nodes';
 import { mx_perlin_noise_float as noise } from 'three/addons/nodes/materialx/lib/mx_noise.js';
 
 
@@ -187,6 +187,38 @@ const applyQuaternion = tslFn( ([ vec, quat ]) => {
 } );
 
 
+// calculate modulo (missing in TSL?)
+const mod = tslFn( ([ x, y ]) => {
+
+	return sub( x, floor( div( x, y ) ).mul( y ) );
+
+} );
+
+
+
+// exponential version of remap
+const remapExp = tslFn( ([ x, fromMin, fromMax, toMin, toMax ]) => {
+
+	x = remap( x, fromMin, fromMax, 0, 1 );
+	x = pow( 2, mul( x, log2( toMax.div( toMin ) ) ).add( log2( toMin ) ) );
+	return x;
+	/*
+
+function mapExp( x, toMin, toMax, fromMin=0, fromMax=100 ) {
+
+	x = map( x, 0, 1, fromMin, fromMax );
+	x = 2**( x * Math.log2( toMax/toMin ) + Math.log2( toMin ) );
+
+	return x;
+
+}
+*/
+
+} );
+
+
+
+
 export
 {
 	noise,
@@ -194,5 +226,7 @@ export
 	toHsl,
 	dynamic,
 	spherical,
-	applyEuler
+	applyEuler,
+	mod,
+	remapExp
 };