tsl-textures 0.3.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tsl-textures",
-  "version": "0.3.0",
+  "version": "0.5.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/clouds.js

@@ -0,0 +1,61 @@
+
+//	TSL-Textures: Clouds
+
+
+
+import { Color } from "three";
+import { clamp, exp, min, mix, mul, positionLocal, tslFn, vec4 } from 'three/nodes';
+import { noise } from 'tsl-textures/tsl-utils.js';
+
+
+
+var _clouds = tslFn( ( params ) => {
+
+	var pos = positionLocal.toVar(),
+		scale = exp( params.scale.div( 1.5 ).sub( 0.5 ) ).toVar(),
+		density = params.density.remap( 0, 1, -0.15, 0.15 ).toVar();
+
+	var k = noise( pos.mul( scale ).add( params.seed ) ).add( params.density ).toVar( );
+	k.addAssign( mul( 0.80, noise( pos.mul( scale, 2 ).add( params.seed ) ) ).add( density ) );
+	k.addAssign( mul( 0.10, noise( pos.mul( scale, 6 ).add( params.seed ) ) ).add( density ) );
+	k.addAssign( mul( 0.07, noise( pos.mul( scale, 8 ).add( params.seed ) ), params.opacity ).add( density ) );
+
+	var a = clamp( 0, 1, mul( k, 2 ).pow( 1.5 ).sub( 1 ).mul( params.opacity ) ).toVar();
+
+	return vec4( mix( params.subcolor, params.color, min( 1, k ) ), a );
+
+} );
+
+
+var clouds = tslFn( ( params ) => {
+
+	return _clouds( params ).rgb;
+
+} );
+
+
+
+clouds.opacity = tslFn( ( params ) => {
+
+	return _clouds( params ).a;
+
+} );
+
+
+
+clouds.defaults = {
+	$name: 'Clouds',
+
+	scale: 2,
+	density: 0.5,
+	opacity: 1,
+
+	color: new Color( 0xFFFFFF ),
+	subcolor: new Color( 0xA0A0B0 ),
+
+	seed: 0,
+};
+
+
+
+export { clouds };

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/photosphere.js

@@ -0,0 +1,48 @@
+
+//	TSL-Textures: Photosphere
+
+
+
+import { Color } from "three";
+import { exp, loop, mix, positionLocal, tslFn, vec3 } from 'three/nodes';
+import { applyEuler, noise } from 'tsl-textures/tsl-utils.js';
+
+
+
+var photosphere = tslFn( ( params ) => {
+
+	var scale = exp( params.scale.add( 1 ) ).toVar( );
+	var pos = positionLocal.toVar( );
+
+	var vec = vec3( pos ).toVar();
+
+	loop( 6, () => {
+
+		vec.assign( applyEuler( vec, pos.mul( scale ) ) );
+		scale.mulAssign( params.seed.mul( scale ).sin().mul( 0.05 ).add( 1.1 ) );
+
+	} );
+
+
+	var k = noise( vec ).add( 1 ).div( 2 );
+
+	return mix( params.background, params.color, k );
+
+} );
+
+
+
+photosphere.defaults = {
+	$name: 'Photosphere',
+
+	scale: 2,
+
+	color: new Color( 0xFFFF00 ),
+	background: new Color( 0xFF0000 ),
+
+	seed: 0,
+};
+
+
+
+export { photosphere };

package/src/satin.js

@@ -0,0 +1,47 @@
+
+//	TSL-Textures: Satin
+
+
+
+import { Color } from "three";
+import { abs, exp, mix, positionLocal, pow, tslFn, vec3 } from 'three/nodes';
+import { noise } from 'tsl-textures/tsl-utils.js';
+
+
+
+var satin = tslFn( ( params ) => {
+
+	var pos = positionLocal.toVar( );
+
+	var scale = exp( params.scale.div( 3 ) ).toVar();
+
+	var k = noise(
+		vec3(
+			noise( vec3( pos.x.mul( 2 ), pos.y, pos.z ).mul( scale ) ),
+			noise( vec3( pos.x, pos.y.mul( 2 ), pos.z ).mul( scale ) ),
+			noise( vec3( pos.x, pos.y, pos.z.mul( 2 ) ).mul( scale ) ),
+		).mul( scale ).add( params.seed )
+	);
+
+	k = pow( abs( k ), 3 ).mul( 20 );
+
+	return mix( params.background, params.color, k );
+
+} );
+
+
+
+satin.defaults = {
+	$name: 'Satin',
+
+	scale: 2,
+
+	color: new Color( 0x7080FF ),
+	background: new Color( 0x000050 ),
+
+	seed: 0,
+};
+
+
+
+export { satin };

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/simplex-noise.js

@@ -0,0 +1,39 @@
+
+//	TSL-Textures: Noise Pattern
+
+
+
+import { Color } from "three";
+import { clamp, exp, mix, positionLocal, tslFn } from 'three/nodes';
+import { noise } from 'tsl-textures/tsl-utils.js';
+
+
+
+var simplexNoise = tslFn( ( params ) => {
+
+	var pos = positionLocal.mul( exp( params.scale ) ).add( params.seed );
+
+	var k = clamp( 0, 1, noise( pos ).mul( 0.5, exp( params.contrast ) ).add( 0.5, params.balance ) );
+
+	return mix( params.background, params.color, k );
+
+} );
+
+
+
+simplexNoise.defaults = {
+	$name: 'Simplex noise',
+
+	scale: 2,
+	balance: 0,
+	contrast: 0,
+
+	color: new Color( 0xFFFFFF ),
+	background: new Color( 0x000000 ),
+
+	seed: 0,
+};
+
+
+
+export { simplexNoise };

package/src/tsl-utils.js

@@ -1,32 +1,15 @@
 
 //	Equirectangular Texture Generator - TSL Utility Functions
 //
+//	hsl( h, s, l ):vec3 			- convert from hsl to rgb
+//	toHsl( rgb:vec3 ):vec3			- convert from rgb to hsl
+//	spherical( phi, theta ):vec3	- from angles to point on unit sphere
+//	applyEuler( vec:vec3, eu:vec3 ):vec3 - apply Euler rotation to a vector
 
-import { MathUtils } from 'three';
-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';
-
-
-
-function map( x, toMin=0, toMax=1, fromMin=0, fromMax=100 ) {
-
-	x = MathUtils.mapLinear( x, fromMin, fromMax, toMin, toMax );
-
-	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;
 
-}
 
+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';
 
 
 // helper function - convert hsl to rgb, ported to TSL from:
@@ -163,13 +146,84 @@ spherical.setLayout( {
 } );
 
 
+
+// apply Euler rotation to a vector
+const applyEuler = tslFn( ([ vec, eu ]) => {
+
+	var quat = quaternionFromEuler( eu );
+	return applyQuaternion( vec, quat );
+
+} );
+
+
+// convert Euler XYZ angles to quaternion
+const quaternionFromEuler = tslFn( ([ eu ]) => {
+
+	var c1 = cos( eu.x.div( 2 ) );
+	var c2 = cos( eu.y.div( 2 ) );
+	var c3 = cos( eu.z.div( 2 ) );
+
+	var s1 = sin( eu.x.div( 2 ) );
+	var s2 = sin( eu.y.div( 2 ) );
+	var s3 = sin( eu.z.div( 2 ) );
+
+	return vec4(
+		add( mul( s1, c2, c3 ), mul( c1, s2, s3 ) ),
+		sub( mul( c1, s2, c3 ), mul( s1, c2, s3 ) ),
+		add( mul( c1, c2, s3 ), mul( s1, s2, c3 ) ),
+		sub( mul( c1, c2, c3 ), mul( s1, s2, s3 ) ),
+	);
+
+} );
+
+
+// apply quaternion rotation to a vector
+const applyQuaternion = tslFn( ([ vec, quat ]) => {
+
+	var t = cross( quat, vec ).mul( 2 ).toVar( );
+
+	return add( vec, t.mul( quat.w ), cross( quat.xyz, t ) );
+
+} );
+
+
+// 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
 {
-	map,
-	mapExp,
 	noise,
 	hsl,
 	toHsl,
 	dynamic,
-	spherical
+	spherical,
+	applyEuler,
+	mod,
+	remapExp
 };