@dailies-studio/tsl-textures 3.0.4

package/src/translator.js

@@ -0,0 +1,116 @@
+
+//	TSL-Textures: Translator
+
+
+
+import { Vector2, Vector3 } from "three";
+import { cross, Fn, normalLocal, positionGeometry, tangentLocal } from 'three/tsl';
+import { approximateNormal, selectPlanar } from './tsl-utils.js';
+
+
+
+var defaults = {
+	$name: 'Translator',
+	$positionNode: true,
+	$selectorPlanar: true,
+
+	distance: new Vector3( -0.5, 0, 0.2 ),
+
+	selectorCenter: new Vector3( 0, 0, 0 ),
+	selectorAngles: new Vector2( 0, 0 ),
+	selectorWidth: 0.7,
+
+};
+
+
+
+var surfacePos = Fn( ([ pos, distance, selectorAngles, selectorCenter, selectorWidth ])=>{
+
+	var zone = selectPlanar( pos, selectorAngles, selectorCenter, selectorWidth );
+
+	return pos.add( distance.mul( zone ) );
+
+} ).setLayout( {
+	name: 'surfacePos',
+	type: 'vec3',
+	inputs: [
+		{ name: 'pos', type: 'vec3' },
+		{ name: 'distance', type: 'vec3' },
+		{ name: 'selectorAngles', type: 'vec2' },
+		{ name: 'selectorCenter', type: 'vec3' },
+		{ name: 'selectorWidth', type: 'float' },
+	]
+} );
+
+
+
+var translatorRaw = Fn( ([ distance, selectorAngles, selectorCenter, selectorWidth ])=>{
+
+	return surfacePos( positionGeometry, distance, selectorAngles, selectorCenter, selectorWidth );
+
+} ).setLayout( {
+	name: 'translatorRaw',
+	type: 'vec3',
+	inputs: [
+		{ name: 'distance', type: 'vec3' },
+		{ name: 'selectorAngles', type: 'vec2' },
+		{ name: 'selectorCenter', type: 'vec3' },
+		{ name: 'selectorWidth', type: 'float' },
+	]
+} );
+
+
+
+var translatorNormalRaw = Fn( ([ distance, selectorAngles, selectorCenter, selectorWidth ])=>{
+
+	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, distance, selectorAngles, selectorCenter, selectorWidth );
+	var posU = surfacePos( position.add( tangent ), distance, selectorAngles, selectorCenter, selectorWidth );
+	var posV = surfacePos( position.add( bitangent ), distance, selectorAngles, selectorCenter, selectorWidth );
+
+	return approximateNormal( pos, posU, posV );
+
+} ).setLayout( {
+	name: 'translatorNormalRaw',
+	type: 'vec3',
+	inputs: [
+		{ name: 'distance', type: 'vec3' },
+		{ name: 'selectorAngles', type: 'vec2' },
+		{ name: 'selectorCenter', type: 'vec3' },
+		{ name: 'selectorWidth', type: 'float' },
+	]
+} );
+
+
+
+function translator( params={} ) {
+
+	var { distance, selectorAngles, selectorCenter, selectorWidth } = { ...defaults, ...params };
+
+	return translatorRaw( distance, selectorAngles, selectorCenter, selectorWidth );
+
+}
+
+
+
+translator.normal = function ( params={} ) {
+
+	var { distance, selectorAngles, selectorCenter, selectorWidth } = { ...defaults, ...params };
+
+	return translatorNormalRaw( distance, selectorAngles, selectorCenter, selectorWidth );
+
+};
+
+
+
+translator.defaults = defaults;
+
+
+
+export { translator };

package/src/tsl-textures.js

@@ -0,0 +1,63 @@
+if ( typeof window !== 'undefined' ) {
+
+	window.__TSL_TEXTURES__ = 3.0;
+
+}
+
+export * from './tsl-utils.js';
+
+
+export { brain } from './brain.js';
+export { camouflage } from './camouflage.js';
+export { caveArt } from './cave-art.js';
+export { circles } from './circles.js';
+export { clouds } from './clouds.js';
+export { concrete } from './concrete.js';
+export { cork } from './cork.js';
+export { dalmatianSpots } from './dalmatian-spots.js';
+export { darthMaul } from './darth-maul.js';
+export { dysonSphere } from './dyson-sphere.js';
+export { entangled } from './entangled.js';
+export { fordite } from './fordite.js';
+export { gasGiant } from './gas-giant.js';
+export { grid } from './grid.js';
+export { isolines } from './isolines.js';
+export { karstRock } from './karst-rock.js';
+export { marble } from './marble.js';
+//export { melter } from './melter.js';
+export { neonLights } from './neon-lights.js';
+export { perlinNoise } from './perlin-noise.js';
+export { photosphere } from './photosphere.js';
+export { planet } from './planet.js';
+export { polkaDots } from './polka-dots.js';
+export { processedWood } from './processed-wood.js';
+export { protozoa } from './protozoa.js';
+export { rotator } from './rotator.js';
+export { roughClay } from './rough-clay.js';
+export { runnyEggs } from './runny-eggs.js';
+export { rust } from './rust.js';
+export { satin } from './satin.js';
+export { scaler } from './scaler.js';
+export { scepterHead } from './scepter-head.js';
+export { scream } from './scream.js';
+export { stars } from './stars.js';
+export { staticNoise } from './static-noise.js';
+export { supersphere } from './supersphere.js';
+export { tigerFur } from './tiger-fur.js';
+export { translator } from './translator.js';
+export { voronoiCells } from './voronoi-cells.js';
+export { waterDrops } from './water-drops.js';
+export { watermelon } from './watermelon.js';
+export { waves } from './waves.js';
+export { wood } from './wood.js';
+export { zebraLines } from './zebra-lines.js';
+export { circleDecor } from './circle-decor.js';
+export { reticularVeins } from './reticular-veins.js';
+export { romanPaving } from './roman-paving.js';
+export { crumpledFabric } from './crumpled-fabric.js';
+export { isolayers } from './isolayers.js';
+export { turbulentSmoke } from './turbulent-smoke.js';
+export { caustics } from './caustics.js';
+export { bricks } from './bricks.js';
+export { halftone } from './halftone.js';
+//export { aaa } from './aaa.js';

package/src/tsl-utils.js

@@ -0,0 +1,344 @@
+
+//	TSL Utility Functions
+
+//	noise(pos,mul,add) 				- perlin noise (x*mul+add), x->[-1,1]
+//	fractal(pos,octaves,...)		- fractal noise
+//	voronoi(pos,jitter,...)			- voronoi cells (worley noise)
+//	voronoi2(pos,jitter,...)		- voronoi cells but returns vec2
+//	voronoi3(pos,jitter,...)		- voronoi cells but returns vec3
+//	vnoise(pos)						- simple noise -> [-1,1]
+//	approximateNormal(pos,posU,posV) - approximate normal vector
+//  toHsl(vec3)						- convert rgb to hsl
+//  hsl(vec3)						- convert hsl to rgb
+//	remapExp(x,fromMin,fromMax,toMin,toMax) - exponential version of remap
+//	showFallbackWarning( )
+//	hideFallbackWarning( )
+//	spherical( phi, theta ):vec3	- from angles to point on unit sphere
+//	rotatePivot( vector, pivot, angle ) - rotate around pivot point
+
+
+
+import { add, cos, cross, float, Fn, If, log2, max, min, mul, pow, remap, rotate, select, sin, smoothstep, sub, transformNormalToView, vec3 } from 'three/tsl';
+
+
+
+// simple vector noise, vec3->float[-1,1]
+const vnoise = Fn( ([ v ])=>{
+
+	return v.dot( vec3( 12.9898, 78.233, -97.5123 ) ).sin().mul( 43758.5453 ).fract().mul( 2 ).sub( 1 );
+
+} ).setLayout( {
+	name: 'vnoise',
+	type: 'float',
+	inputs: [
+		{ name: 'v', type: 'vec3' },
+	]
+} );
+
+
+
+// approximate normal vector given point and two neighbout points
+const approximateNormal = Fn( ([ pos, posU, posV ])=>{
+
+	var dU = sub( posU, pos ),
+		dV = sub( posV, pos );
+
+	return transformNormalToView( cross( dU, dV ).normalize() );
+
+} ).setLayout( {
+	name: 'approximateNormal',
+	type: 'vec3',
+	inputs: [
+		{ name: 'pos', type: 'vec3' },
+		{ name: 'posU', type: 'vec3' },
+		{ name: 'posV', type: 'vec3' },
+	]
+} );
+
+
+
+
+// exponential version of remap
+const remapExp = Fn( ([ 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;
+
+} ).setLayout( {
+	name: 'remapExp',
+	type: 'float',
+	inputs: [
+		{ name: 'x', type: 'float' },
+		{ name: 'fromMin', type: 'float' },
+		{ name: 'fromMax', type: 'float' },
+		{ name: 'toMin', type: 'float' },
+		{ name: 'toMax', type: 'float' },
+	]
+} );
+
+
+
+// show notification that
+var banner = null;
+var bannerCounter = 10;
+async function showFallbackWarning( ) {
+
+	if ( navigator.gpu != undefined ) {
+
+		var adapter = await navigator.gpu.requestAdapter();
+		if ( adapter ) return;
+
+	}
+
+	var html = `
+	<div style="font-size:1.25em; font-weight:bold;">PLEASE, WAIT</div>
+	<div  style="font-size:0.85em; font-weight:100;" >NO WEBGPU &mdash; TRYING WEBGL2</div>
+	<div id="counter"></div>
+	`;
+
+	banner = document.createElement( 'div' );
+	banner.innerHTML = html;
+
+	banner.style.left = 'calc(50% - 8em)';
+	banner.style.width = '16em';
+
+	banner.style.fontFamily = 'Bahnschrifts, Arial';
+	banner.style.position = 'absolute';
+	banner.style.bottom = '20px';
+	banner.style.padding = '12px 6px';
+	banner.style.border = '1px solid white';
+	banner.style.borderRadius = '4px';
+	banner.style.background = 'rgba(0,0,0,0.5)';
+	banner.style.color = 'white';
+	banner.style.textAlign = 'center';
+	banner.style.opacity = '0.8';
+	banner.style.outline = 'none';
+	banner.style.zIndex = '999';
+
+	document.body.appendChild( banner );
+
+}
+
+
+
+function hideFallbackWarning( ) {
+
+	if ( banner ) {
+
+		if ( bannerCounter>0 )
+			bannerCounter--;
+		else {
+
+			banner.style.display = 'none';
+			banner = null;
+
+		}
+
+	}
+
+}
+
+
+
+// helper function - convert hsl to rgb, ported to TSL from:
+// https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_RGB_alternative
+
+const hslHelper = Fn( ([ h, s, l, n ])=>{
+
+	var k = n.add( h.mul( 12 ) ).mod( 12 );
+	var a = s.mul( min( l, sub( 1, l ) ) );
+	return l.sub( a.mul( max( -1, min( min( k.sub( 3 ), sub( 9, k ) ), 1 ) ) ) );
+
+} ).setLayout( {
+	name: 'hslHelper',
+	type: 'float',
+	inputs: [
+		{ name: 'h', type: 'float' },
+		{ name: 's', type: 'float' },
+		{ name: 'l', type: 'float' },
+		{ name: 'n', type: 'float' },
+	]
+} );
+
+
+
+// convert from hsl to rgb
+const hsl = Fn( ([ col ]) => {
+
+	var h = col.x.fract().add( 1 ).fract();
+	var s = col.y.clamp( 0, 1 );
+	var l = col.z.clamp( 0, 1 );
+
+	var r = hslHelper( h, s, l, 0 );
+	var g = hslHelper( h, s, l, 8 );
+	var b = hslHelper( h, s, l, 4 );
+
+	return vec3( r, g, b );
+
+} ).setLayout( {
+	name: 'hsl',
+	type: 'vec3',
+	inputs: [
+		{ name: 'col', type: 'vec3' },
+	]
+} );
+
+
+
+// convert from rgb to hsl
+const toHsl = Fn( ([ 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( select( 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( select( 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 );
+
+} );
+
+toHsl.setLayout( {
+	name: 'toHsl',
+	type: 'vec3',
+	inputs: [
+		{ name: 'rgb', type: 'vec3' },
+	]
+} );
+
+
+
+const spherical = Fn( ([ phi, theta ]) => {
+
+	return vec3(
+		sin( theta ).mul( sin( phi ) ),
+		cos( phi ),
+		cos( theta ).mul( sin( phi ) )
+	);
+
+} ).setLayout( {
+	name: 'spherical',
+	type: 'vec3',
+	inputs: [
+		{ name: 'phi', type: 'float' },
+		{ name: 'theta', type: 'float' },
+	]
+} );
+
+
+
+const rotatePivot = Fn( ([ vector, pivot, angle ])=>{
+
+	return rotate( vector.sub( pivot ), angle ).add( pivot );
+
+} ).setLayout( {
+	name: 'rotatePivot',
+	type: 'vec3',
+	inputs: [
+		{ name: 'vector', type: 'vec3' },
+		{ name: 'pivot', type: 'vec3' },
+		{ name: 'angle', type: 'vec3' },
+	]
+} );
+
+
+
+const selectPlanar = Fn( ([ pos, selAngles, selCenter, selWidth ])=>{
+
+	// select zone in a plane through point selCenter,
+	// rotated according to selAngles and selWidth thick
+	// result is [0,1] inside plane, 0 below plane, 1 above plane
+
+	// C is projected on segment AB
+	// result is [0,1] inside AB, 0 before A, 1 after B
+
+	/* non-optimized version
+	var s = spherical(selAngles.x,selAngles.y).mul(selWidth).toVar(),
+		c = pos,
+		a = selCenter.sub(s.div(2)),
+		b = selCenter.add(s.div(2));
+
+	var ca = a.sub(c),
+		ab = b.sub(a).toVar();
+
+	var caab = ca.dot(s),
+		abab = ab.dot(ab);
+
+	var k = caab.div(abab).negate();
+	*/
+
+	var s = spherical( selAngles.x, selAngles.y ).mul( selWidth ).toVar();
+
+	var k = selCenter.sub( s.div( 2 ) ).sub( pos ).dot( s ).div( s.dot( s ) ).negate();
+
+	return smoothstep( 0, 1, k );
+
+} ).setLayout( {
+	name: 'selectPlanar',
+	type: 'float',
+	inputs: [
+		{ name: 'pos', type: 'vec3' },
+		{ name: 'selAngles', type: 'vec2' },
+		{ name: 'selCenter', type: 'vec3' },
+		{ name: 'selWidth', type: 'float' },
+	]
+} );
+
+
+
+export
+{
+	approximateNormal,
+	showFallbackWarning,
+	hideFallbackWarning,
+	remapExp,
+	hsl,
+	toHsl,
+	rotatePivot,
+	vnoise,
+	spherical,
+	selectPlanar,
+};
+
+
+
+export
+{
+	mx_noise_float as noise,
+	mx_noise_vec3 as noise3,
+	mx_fractal_noise_float as fractal,
+	mx_fractal_noise_vec3 as fractal3,
+	mx_worley_noise_float as voronoi,
+	mx_worley_noise_vec2 as voronoi2,
+	mx_worley_noise_vec3 as voronoi3,
+
+} from 'three/tsl';

package/src/turbulent-smoke.js

@@ -0,0 +1,73 @@
+
+//	TSL-Textures: Turbulent smoke
+
+
+
+import { exp, Fn, positionGeometry, time, vec3 } from 'three/tsl';
+import { fractal, fractal3, voronoi } from './tsl-utils.js';
+
+
+
+var defaults = {
+	$name: 'Turbulent smoke',
+	$width: 260,
+
+	position: positionGeometry,
+	scale: 2,
+	speed: 0,
+	details: 5,
+	time: time,
+
+	seed: 0,
+};
+
+
+
+var turbulentSmokeRaw = Fn( ([ position, scale, speed, details, time, seed ])=>{
+
+	var pos = position.mul( exp( scale.sub( 1 ) ) ).add( seed ).toVar( );
+
+	var t = time.mul( speed.sub( 1 ).exp() );
+
+	var q = pos.add( vec3(
+		fractal( pos.add( vec3( 1, t.sin(), -1 ) ) ),
+		fractal( pos.add( vec3( t.add( 2*Math.PI/3 ).sin(), 1, -1 ) ) ),
+		fractal( pos.add( vec3( 1, -1, t.add( 4*Math.PI/3 ).sin() ) ) ),
+	) );
+
+	var p = fractal3( q, details );
+
+	var k = voronoi( pos.add( p.div( 2 ) ) ).pow( 4 ).mul( 4 ).oneMinus();
+
+	return k;
+
+} ).setLayout( {
+	name: 'turbulentSmokeRaw',
+	type: 'vec3',
+	inputs: [
+		{ name: 'position', type: 'vec3' },
+		{ name: 'scale', type: 'float' },
+		{ name: 'speed', type: 'float' },
+		{ name: 'details', type: 'int' },
+		{ name: 'time', type: 'float' },
+		{ name: 'seed', type: 'float' },
+	] }
+);
+
+
+
+function turbulentSmoke( params={} ) {
+
+	var { position, scale, speed, details, time, seed } = { ...defaults, ...params };
+
+	return turbulentSmokeRaw( position, scale, speed, details, time, seed );
+
+}
+
+
+
+turbulentSmoke.defaults = defaults;
+
+
+
+export { turbulentSmoke };

package/src/voronoi-cells.js

@@ -0,0 +1,99 @@
+
+//	TSL-Textures: Voronoi Cells
+
+
+
+import { Color } from 'three';
+import { exp, float, Fn, If, int, Loop, mix, positionGeometry, vec3 } from 'three/tsl';
+import { noise, vnoise } from './tsl-utils.js';
+
+
+
+var defaults = {
+	$name: 'Voronoi cells',
+
+	position: positionGeometry,
+	scale: 2,
+	variation: 0,
+	facet: 0,
+
+	color: new Color( 0 ),
+	background: new Color( 0xc0d0ff ),
+
+	seed: 0,
+};
+
+
+
+var voronoiCellsRaw = Fn( ([ position, scale, variation, facet, color, background, seed ])=>{
+
+	var pos = position.mul( exp( scale.div( 2 ).add( 0.5 ) ) ).add( seed ).toVar( );
+
+	var midCell = pos.round().toVar();
+
+	var minCell = midCell.toVar();
+	var minDist = float( 1 ).toVar();
+
+	var cell = vec3().toVar();
+	var dist = float().toVar();
+
+	var i=int( 0 ).toVar( 'i' ),
+		j=int( 0 ).toVar( 'j' ),
+		k=int( 0 ).toVar( 'k' );
+
+	// Loop uses hard-coded i, j, k as indices
+	Loop( 3, 3, 3, () => {
+
+		cell.assign( midCell.add( vec3( i, j, k ).sub( 1 ) ) );
+		//var cellCenter = cell.add( noise( cell.mul( Math.PI ) ) ); // too slow on WebGL2
+		var cellCenter = cell.add( vnoise( cell.mul( Math.PI*2 ) ).div( 2 ) );
+		dist.assign( pos.distance( cellCenter ) );
+
+		If( dist.lessThan( minDist ), ()=>{
+
+			minDist.assign( dist );
+			minCell.assign( cell );
+
+		} );
+
+	} );
+
+	var n = noise( minCell.mul( Math.PI ) ).toVar();
+	var m = mix( minDist, n.add( 1 ).div( 2 ), facet );
+
+	var color = mix( color, background, m ).toVar();
+	var randomColor = vec3( n.mul( 16.8 ), n.mul( 31.4159 ), n.mul( 27.1828 ) ).sin().add( 1 ).div( 2 );
+
+	return mix( color, mix( color, randomColor, variation ), variation );
+
+} ).setLayout( {
+	name: 'voronoiCellsRaw',
+	type: 'vec3',
+	inputs: [
+		{ name: 'position', type: 'vec3' },
+		{ name: 'scale', type: 'float' },
+		{ name: 'variation', type: 'float' },
+		{ name: 'facet', type: 'float' },
+		{ name: 'color', type: 'vec3' },
+		{ name: 'background', type: 'vec3' },
+		{ name: 'seed', type: 'float' },
+	] }
+);
+
+
+
+function voronoiCells( params={} ) {
+
+	var { position, scale, variation, facet, color, background, seed } = { ...defaults, ...params };
+
+	return voronoiCellsRaw( position, scale, variation, facet, color, background, seed );
+
+}
+
+
+
+voronoiCells.defaults = defaults;
+
+
+
+export { voronoiCells };