tsl-textures 0.1.1 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tsl-textures",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "description": "A collection of Three.js Shading Language (TSL) textures ",
   "main": "index.js",
   "repository": {
@@ -15,6 +15,7 @@
     "tsl",
     "three.js"
   ],
+  "homepage": "https://boytchev.github.io/tsl-textures/",
   "author": "Pavel Boytchev",
   "files": [
     "LICENSE",

package/src/camouflage.js

@@ -0,0 +1,64 @@
+
+//	TSL-Textures: Camouflage
+
+
+
+import { Color } from 'three';
+import { exp, If, positionLocal, round, tslFn, vec3 } from 'three/nodes';
+import { noise } from 'tsl-textures/tsl-utils.js';
+
+
+
+var camouflage = tslFn( ( params )=>{
+
+	var pos = positionLocal.mul( exp( params.scale ) ).add( params.seed ).toVar( );
+
+	var color = vec3( 0, 0, 0 ).toVar( );
+
+	If( round( noise( pos ).add( 0.2 ) ).greaterThanEqual( 1 ), () => {
+
+		color.assign( params.colorA );
+
+	}
+	)
+		.elseif( round( noise( pos.yzx ).add( 0.3 ) ).greaterThanEqual( 1 ), () => {
+
+			color.assign( params.colorB );
+
+		}
+		)
+		.elseif( round( noise( pos.zxy ).add( 0.4 ) ).greaterThanEqual( 1 ), () => {
+
+			color.assign( params.colorC );
+
+		}
+		)
+		.else( () => {
+
+			color.assign( params.colorD );
+
+		}
+		);
+
+	return color;
+
+} );
+
+
+
+camouflage.defaults = {
+	$name: 'Camouflage',
+
+	scale: 2,
+
+	colorA: new Color( 0xc2bea8 ),
+	colorB: new Color( 0x9c895e ),
+	colorC: new Color( 0x92a375 ),
+	colorD: new Color( 0x717561 ),
+
+	seed: 0,
+};
+
+
+
+export { camouflage };

package/src/cave-art.js

@@ -0,0 +1,54 @@
+
+//	TSL-Textures: Cave Art
+
+
+
+import { Color } from "three";
+import { abs, add, exp, float, If, mix, or, positionLocal, pow2, sub, tslFn } from 'three/nodes';
+import { noise } from 'tsl-textures/tsl-utils.js';
+
+
+var caveArt = tslFn( ( params ) => {
+
+	var pos = positionLocal.mul( exp( params.scale ) ).add( params.seed ).toVar( );
+
+	var k1 = noise( pos ).mul( 4 ).sin().toVar();
+	var k2 = noise( pos.mul( 1.5 ) ).mul( 4 ).cos().toVar();
+
+	var thinness = exp( sub( float( 3 ), params.thinness ) );
+	var k = sub( thinness, pow2( abs( add( k1, k2 ) ) ).mul( 20 ) ).toVar();
+
+	If( or( k1.greaterThan( k2 ), k.lessThan( 0 ) ), ()=>{
+
+		k.assign( 0 );
+
+	} );
+
+	If( k.lessThanEqual( 0 ), ()=>{
+
+		k.assign( params.noise.mul( pow2( noise( pos.mul( 30 ) ) ) ) );
+
+	} );
+
+	return mix( params.background, params.color, k );
+
+} );
+
+
+
+caveArt.defaults = {
+	$name: 'Cave art',
+
+	scale: 2,
+	thinness: 2,
+	noise: 0.3,
+
+	color: new Color( 0xD34545 ),
+	background: new Color( 0xFFF8F0 ),
+
+	seed: 0,
+};
+
+
+
+export { caveArt };

package/src/entangled.js

@@ -0,0 +1,49 @@
+
+//	TSL-Textures: Entangled
+
+
+
+import { Color } from "three";
+import { abs, exp, float, floor, loop, max, mix, mul, oneMinus, positionLocal, pow, sin, tslFn } from 'three/nodes';
+import { noise } from 'tsl-textures/tsl-utils.js';
+
+
+
+var entangled = tslFn( ( params ) => {
+
+	var scale = exp( params.scale.div( 2 ) ).toVar( );
+	var pos = positionLocal.add( params.seed ).toVar( );
+	var k = float( -10000 ).toVar( );
+	var k1 = float( 0 ).toVar( );
+
+	loop( floor( float( params.density ) ), ()=> {
+
+		k1.assign( sin( noise( mul( pos, scale ) ).mul( 3*Math.PI ) ) );
+		k.assign( max( k, k1 ) );
+		scale.mulAssign( 1.2 );
+
+	} );
+
+	k.assign( oneMinus( pow( abs( k ), 5 ) ).mul( 6 ) );
+
+	return mix( params.color, params.background, k );
+
+} );
+
+
+
+entangled.defaults = {
+	$name: 'Entangled',
+
+	scale: 2,
+	density: 10,
+
+	color: new Color( 0x002040 ),
+	background: new Color( 0xFFFFFF ),
+
+	seed: 0,
+};
+
+
+
+export { entangled };

package/src/fordite.js

@@ -1,21 +1,17 @@
 
-//	Procedural Equirectangular Textures
-//	Fordite Pattern
-//
+//	TSL-Textures: Fordite
 
 
 
 import { Color } from 'three';
-import { tslFn, vec3, sin, mul, exp, positionLocal } from 'three/nodes';
-import { noise, hsl } from 'tsl-textures/tsl-utils.js';
-
-
+import { exp, mul, positionLocal, sin, tslFn, vec3 } from 'three/nodes';
+import { hsl, noise } from 'tsl-textures/tsl-utils.js';
 
 
 
 var fordite = tslFn( ( params ) => {
 
-	var pos = positionLocal.mul( exp( params.scale ) ).add( params.seed );
+	var pos = positionLocal.mul( exp( params.scale ) ).add( params.seed ).toVar( );
 
 	var k = noise(
 		vec3(
@@ -23,7 +19,7 @@ var fordite = tslFn( ( params ) => {
 			noise( pos ).mul( 2 ),
 			noise( pos ).mul( 3 ),
 		)
-	);
+	).toVar( );
 
 	return hsl(
 		k,
@@ -36,7 +32,7 @@ var fordite = tslFn( ( params ) => {
 
 
 fordite.defaults = {
-	$name: 'fordite',
+	$name: 'Fordite',
 	scale: 2,
 	color: new Color( 0, 0, 0 ),
 	seed: 0,

package/src/isolines.js

@@ -0,0 +1,43 @@
+
+//	TSL-Textures: Isolines
+
+
+
+import { Color } from "three";
+import { add, exp, mix, oneMinus, positionLocal, sin, smoothstep, sub, tslFn } from 'three/nodes';
+import { noise } from 'tsl-textures/tsl-utils.js';
+
+
+
+var isolines = tslFn( ( params )=>{
+
+	var pos = positionLocal.mul( exp( params.scale ) ).add( params.seed ).toVar( );
+
+	var k = noise( pos ).mul( params.density );
+
+	k = oneMinus( sin( k ) ).div( 2 );
+
+	k = smoothstep( sub( params.thinness, params.blur ), add( params.thinness, params.blur ), k );
+
+	return mix( params.color, params.background, k );
+
+} );
+
+
+isolines.defaults = {
+	$name: 'Isolines',
+
+	scale: 2,
+	density: 40,
+	blur: 0.3,
+	thinness: 0.6,
+
+	color: new Color( 0xFFFFFF ),
+	background: new Color( 0x000000 ),
+
+	seed: 0,
+};
+
+
+
+export { isolines };

package/src/marble.js

@@ -0,0 +1,68 @@
+
+//	TSL-Textures: Marble
+
+
+
+import { Color } from "three";
+import { add, div, exp, If, mix, mul, oneMinus, positionLocal, pow, tslFn } from 'three/nodes';
+import { noise } from 'tsl-textures/tsl-utils.js';
+
+
+var marble = tslFn( ( params ) => {
+
+	var pos = positionLocal.mul( exp( params.scale ) ).add( params.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 ) );
+
+	var	maxSmooth = oneMinus( pow( 0.5, params.thinness.add( 7 ) ) ).toVar(),
+		minSmooth = oneMinus( pow( 0.5, params.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( params.noise, noise( pos.mul( 150 ) ).abs().pow3() ) ) );
+
+	return mix( params.background, params.color, k );
+
+} );
+
+
+
+marble.defaults = {
+	$name: 'Marble',
+
+	scale: 1.2,
+	thinness: 5,
+	noise: 0.3,
+
+	color: new Color( 0x4545D3 ),
+	background: new Color( 0xF0F8FF ),
+
+	seed: 0,
+};
+
+
+
+export { marble };

package/src/stars.js

@@ -0,0 +1,44 @@
+
+//	TSL-Textures: Stars
+
+
+
+import { Color } from "three";
+import { abs, add, cond, exp, mix, positionLocal, tslFn } from 'three/nodes';
+import { hsl, noise, toHsl } from 'tsl-textures/tsl-utils.js';
+
+
+
+var stars = tslFn( ( params ) => {
+
+	var pos = positionLocal.mul( exp( params.scale.div( 2 ).add( 3 ) ) ).add( params.seed ).toVar( );
+
+	var k = abs( noise( pos ) ).pow( 10 ).mul( 10 );
+
+	k = k.mul( exp( params.density.sub( 2 ) ) );
+
+	var dS = cond( k.greaterThan( 0.1 ), params.variation.mul( noise( pos ) ), 0 );
+
+	var col = toHsl( mix( params.background, params.color, k ) );
+
+	return hsl( add( col.x, dS ), col.y, col.z );
+
+} );
+
+
+
+stars.defaults = {
+	$name: 'Stars',
+
+	scale: 2,
+	density: 2,
+	variation: 0,
+
+	color: new Color( 0xfff5f0 ),
+	background: new Color( 0x000060 ),
+
+	seed: 0,
+};
+
+
+export { stars };

package/src/tsl-utils.js

@@ -3,7 +3,7 @@
 //
 
 import { MathUtils } from 'three';
-import { tslFn, sub, vec3, min, max, uniform } from 'three/nodes';
+import { add, cond, cos, float, If, max, min, sin, sub, tslFn, uniform, vec3 } from 'three/nodes';
 import { mx_perlin_noise_float as noise } from 'three/addons/nodes/materialx/lib/mx_noise.js';
 
 
@@ -53,7 +53,7 @@ hslHelper.setLayout( {
 
 
 
-
+// convert from hsl to rgb
 const hsl = tslFn( ([ h, s, l ]) => {
 
 	h = h.fract().add( 1 ).fract();
@@ -79,6 +79,50 @@ hsl.setLayout( {
 } );
 
 
+// convert from rgb to hsl
+const toHsl = tslFn( ([ rgb ]) => {
+
+	var R = float( rgb.x ).toVar(),
+		G = float( rgb.y ).toVar(),
+		B = float( rgb.z ).toVar();
+
+	var mx = max( R, max( G, B ) ).toVar();
+	var mn = min( R, min( G, B ) ).toVar();
+
+	var H = float( 0 ).toVar(),
+		S = float( 0 ).toVar(),
+		L = add( mx, mn ).div( 2 );
+
+	If( mn.notEqual( mx ), ()=>{
+
+		const delta = sub( mx, mn ).toVar();
+
+		S.assign( cond( L.lessThanEqual( 0.5 ), delta.div( add( mn, mx ) ), delta.div( sub( 2, add( mn, mx ) ) ) ) );
+		If( mx.equal( R ), ()=>{
+
+			H.assign( sub( G, B ).div( delta ).add( cond( G.lessThanEqual( B ), 6, 0 ) ) );
+
+		} )
+			.elseif( mx.equal( G ), ()=>{
+
+				H.assign( sub( B, R ).div( delta ).add( 2 ) );
+
+			} )
+			.else( ()=>{
+
+				H.assign( sub( R, G ).div( delta ).add( 4 ) );
+
+			} );
+		H.divAssign( 6 );
+
+	} );
+	return vec3( H, S, L );
+
+} );
+
+
+
+
 
 // make all elements dynamic (i.e. uniform)
 function dynamic( params ) {
@@ -98,11 +142,34 @@ function dynamic( params ) {
 
 
 
+// convert phi-theta angles to position on unit sphere
+const spherical = tslFn( ([ phi, theta ]) => {
+
+	return vec3(
+		sin( theta ).mul( sin( phi ) ),
+		cos( phi ),
+		cos( theta ).mul( sin( phi ) )
+	);
+
+} );
+
+spherical.setLayout( {
+	name: 'spherical',
+	type: 'vec3',
+	inputs: [
+		{ name: 'phi', type: 'float' },
+		{ name: 'theta', type: 'float' },
+	]
+} );
+
+
 export
 {
 	map,
 	mapExp,
 	noise,
 	hsl,
-	dynamic
+	toHsl,
+	dynamic,
+	spherical
 };

package/src/zebra-lines.js

@@ -0,0 +1,48 @@
+
+//	TSL-Textures: Zebra Lines
+
+
+
+import { Color } from "three";
+import { acos, clamp, exp, mix, positionLocal, sin, tslFn } from 'three/nodes';
+import { spherical } from 'tsl-textures/tsl-utils.js';
+
+
+
+var zebraLines = tslFn( ( params ) => {
+
+	var pos = positionLocal.normalize().toVar( );
+
+	var dir = spherical( params.phi, params.theta ).toVar();
+
+	var angle = acos( clamp( dir.dot( pos ), -1, 1 ) );
+
+	var scale = exp( params.scale.add( 1 ) ).toVar();
+
+	var k = sin( angle.mul( scale ) ).sub( params.thinness.sub( 0.5 ).mul( 2 ) );
+
+	k = clamp( k.mul( 1000 ).div( scale ), -1, 1 ).mul( 0.5 ).add( 0.5 );
+
+	return mix( params.background, params.color, k );
+
+} );
+
+
+
+zebraLines.defaults = {
+	$name: 'Zebra lines',
+
+	scale: 2,
+	thinness: 0.5,
+	phi: 0,
+	theta: 0,
+
+	color: new Color( 0x0 ),
+	background: new Color( 0xFFFFFF ),
+
+	// no seed for zebra lines
+};
+
+
+
+export { zebraLines };