tsl-textures 1.9.0 → 1.11.0

package/README.md

@@ -5,6 +5,15 @@ these are online real-time procedural generators of 3D textures.
 Pick a texture from the [Project home page](https://boytchev.github.io/tsl-textures/).
 
 
+[<img src="https://boytchev.github.io/tsl-textures/examples/example-planet.jpg" width="200">](https://boytchev.github.io/tsl-textures/examples/example-planet.html)
+[<img src="https://boytchev.github.io/tsl-textures/examples/example-normal-map.jpg" width="200">](https://boytchev.github.io/tsl-textures/examples/example-normal-map.html)
+[<img src="https://boytchev.github.io/tsl-textures/examples/example-wooden-toys.jpg" width="200">](https://boytchev.github.io/tsl-textures/examples/example-wooden-toys.html)
+[<img src="https://boytchev.github.io/tsl-textures/examples/example-protozoa.jpg" width="200">](https://boytchev.github.io/tsl-textures/examples/example-protozoa.html)
+[<img src="https://boytchev.github.io/tsl-textures/examples/example-neck-massage.jpg" width="200">](https://boytchev.github.io/tsl-textures/examples/example-neck-massage.html)
+[<img src="https://boytchev.github.io/tsl-textures/examples/example-watermelon-supersphere.jpg" width="200">](https://boytchev.github.io/tsl-textures/examples/example-watermelon-supersphere.html)
+[<img src="https://boytchev.github.io/tsl-textures/examples/example-texture-in-motion.jpg" width="200">](https://boytchev.github.io/tsl-textures/examples/example-texture-in-motion.html)
+
+<!--
 #### Example "Planet"
 
 Uses [planet.js](https://boytchev.github.io/tsl-textures/docs/planet.html)
@@ -79,3 +88,52 @@ via a TSL function. Click on the image for a live demo. (Note: non-WebGPU browse
 might need 30+ seconds to start up.)
 
 [<img src="https://boytchev.github.io/tsl-textures/examples/example-texture-in-motion.jpg">](https://boytchev.github.io/tsl-textures/examples/example-texture-in-motion.html)
+-->
+
+## Usage
+
+### Use with NPM
+
+**Install**
+```bat
+npm install three tsl-textures
+```
+
+**Use in a javascript file**
+```js
+// Important: Use `webgpu` version of Three.js
+import * as THREE from 'three/webgpu';
+
+// Import your desired texture
+import { polkaDots } from 'tsl-textures/polka-dots';
+
+// Create the renderer. Important: Use `WebGPURenderer`
+renderer = new THREE.WebGPURenderer({antialias: true});
+
+// ... Create your Three.js scene, camera, lights, etc.
+
+// Create geometry
+const objectGeometry = new THREE.IcosahedronGeometry(1, 12)
+
+// Create material: Important: Use `Node` Material
+objectMaterial = new THREE.MeshStandardNodeMaterial({
+    color: 0xCCCCCC,
+    roughness: 0.5,
+    metalness: 0.0,
+});
+
+// Apply texture to the material's `colorNode` property
+objectMaterial.colorNode = polkaDots ( {
+    count: 2,
+    size: 0.6,
+    blur: 0.22,
+    color: new THREE.Color(0),
+    background: new THREE.Color(16777215)
+} );
+
+// Assign Geometry and Material to a Mesh
+object = new THREE.Mesh(objectGeometry, objectMaterial);
+
+// Render
+renderer.render( scene, camera );
+```

package/package.json

@@ -1,33 +1,204 @@
-{
-  "name": "tsl-textures",
-  "version": "1.9.0",
-  "description": "A collection of Three.js Shading Language (TSL) textures ",
-  "main": "index.js",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/boytchev/tsl-textures.git"
-  },
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [
-    "texture",
-    "tsl",
-    "three.js"
-  ],
-  "homepage": "https://boytchev.github.io/tsl-textures/",
-  "author": "Pavel Boytchev",
-  "files": [
-    "LICENSE",
-    "package.json",
-    "README.md",
-    "src"
-  ],
-  "license": "MIT",
-  "devDependencies": {
-    "@eslint/js": "^9.4.0",
-    "eslint": "^9.4.0",
-    "eslint-plugin-html": "^8.1.1",
-    "globals": "^15.4.0"
-  }
-}
+{
+  "name": "tsl-textures",
+  "version": "1.11.0",
+  "description": "A collection of Three.js Shading Language (TSL) textures ",
+  "main": "./src/tsl-utils.js",
+  "module": "./src/tsl-utils.js",
+  "exports": {
+    ".": {
+      "require": "./src/tsl-utils.js",
+      "import": "./src/tsl-utils.js"
+    },
+    "./camouflage": {
+      "require": "./src/camouflage.js",
+      "import": "./src/camouflage.js"
+    },
+    "./cave-art": {
+      "require": "./src/cave-art.js",
+      "import": "./src/cave-art.js"
+    },
+    "./circles": {
+      "require": "./src/circles.js",
+      "import": "./src/circles.js"
+    },
+    "./clouds": {
+      "require": "./src/clouds.js",
+      "import": "./src/clouds.js"
+    },
+    "./concrete": {
+      "require": "./src/concrete.js",
+      "import": "./src/concrete.js"
+    },
+    "./cork": {
+      "require": "./src/cork.js",
+      "import": "./src/cork.js"
+    },
+    "./dalmatian-spots": {
+      "require": "./src/dalmatian-spots.js",
+      "import": "./src/dalmatian-spots.js"
+    },
+    "./darth-maul": {
+      "require": "./src/darth-maul.js",
+      "import": "./src/darth-maul.js"
+    },
+    "./dyson-sphere": {
+      "require": "./src/dyson-sphere.js",
+      "import": "./src/dyson-sphere.js"
+    },
+    "./entangled": {
+      "require": "./src/entangled.js",
+      "import": "./src/entangled.js"
+    },
+    "./fordite": {
+      "require": "./src/fordite.js",
+      "import": "./src/fordite.js"
+    },
+    "./gas-giant": {
+      "require": "./src/gas-giant.js",
+      "import": "./src/gas-giant.js"
+    },
+    "./grid": {
+      "require": "./src/grid.js",
+      "import": "./src/grid.js"
+    },
+    "./isolines": {
+      "require": "./src/isolines.js",
+      "import": "./src/isolines.js"
+    },
+    "./karst-rock": {
+      "require": "./src/karst-rock.js",
+      "import": "./src/karst-rock.js"
+    },
+    "./marble": {
+      "require": "./src/marble.js",
+      "import": "./src/marble.js"
+    },
+    "./neon-lights": {
+      "require": "./src/neon-lights.js",
+      "import": "./src/neon-lights.js"
+    },
+    "./photosphere": {
+      "require": "./src/photosphere.js",
+      "import": "./src/photosphere.js"
+    },
+    "./planet": {
+      "require": "./src/planet.js",
+      "import": "./src/planet.js"
+    },
+    "./polka-dots": {
+      "require": "./src/polka-dots.js",
+      "import": "./src/polka-dots.js"
+    },
+    "./processed-wood": {
+      "require": "./src/processed-wood.js",
+      "import": "./src/processed-wood.js"
+    },
+    "./protozoa": {
+      "require": "./src/protozoa.js",
+      "import": "./src/protozoa.js"
+    },
+    "./rotator": {
+      "require": "./src/rotator.js",
+      "import": "./src/rotator.js"
+    },
+    "./rough-clay": {
+      "require": "./src/rough-clay.js",
+      "import": "./src/rough-clay.js"
+    },
+    "./runny-eggs": {
+      "require": "./src/runny-eggs.js",
+      "import": "./src/runny-eggs.js"
+    },
+    "./rust": {
+      "require": "./src/rust.js",
+      "import": "./src/rust.js"
+    },
+    "./satin": {
+      "require": "./src/satin.js",
+      "import": "./src/satin.js"
+    },
+    "./scaler": {
+      "require": "./src/scaler.js",
+      "import": "./src/scaler.js"
+    },
+    "./scepter-head": {
+      "require": "./src/scepter-head.js",
+      "import": "./src/scepter-head.js"
+    },
+    "./scream": {
+      "require": "./src/scream.js",
+      "import": "./src/scream.js"
+    },
+    "./simplex-noise": {
+      "require": "./src/simplex-noise.js",
+      "import": "./src/simplex-noise.js"
+    },
+    "./stars": {
+      "require": "./src/stars.js",
+      "import": "./src/stars.js"
+    },
+    "./supersphere": {
+      "require": "./src/supersphere.js",
+      "import": "./src/supersphere.js"
+    },
+    "./tiger-fur": {
+      "require": "./src/tiger-fur.js",
+      "import": "./src/tiger-fur.js"
+    },
+    "./translator": {
+      "require": "./src/translator.js",
+      "import": "./src/translator.js"
+    },
+    "./tsl-utils": {
+      "require": "./src/tsl-utils.js",
+      "import": "./src/tsl-utils.js"
+    },
+    "./voronoi-cells": {
+      "require": "./src/voronoi-cells.js",
+      "import": "./src/voronoi-cells.js"
+    },
+    "./water-drops": {
+      "require": "./src/water-drops.js",
+      "import": "./src/water-drops.js"
+    },
+    "./watermelon": {
+      "require": "./src/watermelon.js",
+      "import": "./src/watermelon.js"
+    },
+    "./wood": {
+      "require": "./src/wood.js",
+      "import": "./src/wood.js"
+    },
+    "./zebra-lines": {
+      "require": "./src/zebra-lines.js",
+      "import": "./src/zebra-lines.js"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/boytchev/tsl-textures.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "texture",
+    "tsl",
+    "three.js"
+  ],
+  "homepage": "https://boytchev.github.io/tsl-textures/",
+  "author": "Pavel Boytchev",
+  "files": [
+    "LICENSE",
+    "package.json",
+    "README.md",
+    "src"
+  ],
+  "license": "MIT",
+  "devDependencies": {
+    "@eslint/js": "^9.4.0",
+    "eslint": "^9.4.0",
+    "eslint-plugin-html": "^8.1.1",
+    "globals": "^15.4.0"
+  }
+}

package/src/camouflage.js

@@ -5,43 +5,45 @@
 
 import { Color } from 'three';
 import { exp, Fn, If, positionGeometry, round, vec3 } from 'three/tsl';
-import { noise } from 'tsl-textures/tsl-utils.js';
+import { noise, prepare } from './tsl-utils.js';
 
 
 
 var camouflage = Fn( ( params )=>{
 
+	params = prepare( { ...camouflage.defaults, ...params } );
+
 	var pos = positionGeometry.mul( exp( params.scale ) ).add( params.seed ).toVar( );
 
 	var color = vec3( 0, 0, 0 ).toVar( );
 
-	If( round( noise( pos, 1, 0.2 ) ).greaterThanEqual( 1 ), () => {
-
-		color.assign( params.colorA );
-
+	If( round( noise( pos, 1, 0.2 ) ).greaterThanEqual( 1 ), () => {
+
+		color.assign( params.colorA );
+
 	}
 	)
-		.ElseIf( round( noise( pos.yzx, 1, 0.3 ) ).greaterThanEqual( 1 ), () => {
-
-			color.assign( params.colorB );
-
+		.ElseIf( round( noise( pos.yzx, 1, 0.3 ) ).greaterThanEqual( 1 ), () => {
+
+			color.assign( params.colorB );
+
 		}
 		)
-		.ElseIf( round( noise( pos.zxy, 1, 0.4 ) ).greaterThanEqual( 1 ), () => {
-
-			color.assign( params.colorC );
-
+		.ElseIf( round( noise( pos.zxy, 1, 0.4 ) ).greaterThanEqual( 1 ), () => {
+
+			color.assign( params.colorC );
+
 		}
 		)
-		.Else( () => {
-
-			color.assign( params.colorD );
-
+		.Else( () => {
+
+			color.assign( params.colorD );
+
 		}
 		);
 
 	return color;
-
+
 } );
 
 
@@ -61,4 +63,4 @@ camouflage.defaults = {
 
 
 
-export { camouflage };
+export { camouflage };

package/src/cave-art.js

@@ -5,11 +5,13 @@
 
 import { Color } from "three";
 import { abs, add, exp, float, Fn, If, mix, or, positionGeometry, pow2, sub } from 'three/tsl';
-import { noise } from 'tsl-textures/tsl-utils.js';
+import { noise, prepare } from './tsl-utils.js';
 
 
 var caveArt = Fn( ( params ) => {
 
+	params = prepare( { ...caveArt.defaults, ...params } );
+
 	var pos = positionGeometry.mul( exp( params.scale ) ).add( params.seed ).toVar( );
 
 	var k1 = noise( pos, 4 ).sin().toVar();

package/src/circles.js

@@ -5,12 +5,14 @@
 
 import { Color } from "three";
 import { acos, clamp, exp, float, Fn, positionGeometry, select, sin } from 'three/tsl';
-import { hsl, toHsl } from 'tsl-textures/tsl-utils.js';
+import { hsl, prepare, toHsl } from './tsl-utils.js';
 
 
 
 var circles = Fn( ( params ) => {
 
+	params = prepare( { ...circles.defaults, ...params } );
+
 	var pos = positionGeometry.normalize().toVar( );
 
 	var angle = acos( clamp( pos.y, -1, 1 ) ).mul( 20 );
@@ -21,10 +23,10 @@ var circles = Fn( ( params ) => {
 
 	var k = float( params.seed.sin().mul( 100 ) ).toVar();
 
-	for ( var n=0; n<=10; n++ ) {
+	for ( var n=0; n<=10; n++ ) {
 
 		k.addAssign( sin( x.mul( 2**n ).sub( Math.PI*n/2 ) ).mul( -n*( n+1 )/2 ) );
-
+
 	}
 
 	k.assign( k.div( 200 ).clamp( -2, 2 ) );
@@ -39,7 +41,7 @@ var circles = Fn( ( params ) => {
 	hue.assign( huei.add( huef ) );
 
 	return hsl( hue.div( 10 ), HSL.y, HSL.z );
-
+
 } );
 
 

package/src/clouds.js

@@ -5,7 +5,7 @@
 
 import { Color } from "three";
 import { clamp, exp, Fn, min, mix, mul, positionGeometry, vec4 } from 'three/tsl';
-import { noise } from 'tsl-textures/tsl-utils.js';
+import { noise, prepare } from './tsl-utils.js';
 
 
 
@@ -23,20 +23,24 @@ var _clouds = Fn( ( params ) => {
 	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 = Fn( ( params ) => {
 
+	params = prepare( { ...clouds.defaults, ...params } );
+
 	return _clouds( params ).rgb;
-
+
 } );
 
 
 
 clouds.opacity = Fn( ( params ) => {
 
+	params = prepare( { ...clouds.defaults, ...params } );
+
 	return _clouds( params ).a;
 
 } );

package/src/concrete.js

@@ -4,7 +4,7 @@
 
 
 import { abs, cos, cross, exp, Fn, normalLocal, positionGeometry, pow, remap, sin, sub, tangentLocal, transformNormalToView, vec3 } from 'three/tsl';
-import { noise } from 'tsl-textures/tsl-utils.js';
+import { noise, prepare } from './tsl-utils.js';
 
 
 
@@ -20,6 +20,8 @@ var surfacePos = Fn( ([ pos, normal, bump, density, seed ]) => {
 
 var concrete = Fn( ( params ) => {
 
+	params = prepare( { ...concrete.defaults, ...params } );
+
 	var eps = 0.001;
 
 	var position = positionGeometry.mul( exp( params.scale.div( 2 ).add( 2 ) ) ).toVar( ),

package/src/cork.js

@@ -5,7 +5,7 @@
 
 import { Color } from 'three';
 import { exp, float, Fn, If, Loop, mix, positionGeometry, vec3 } from 'three/tsl';
-import { noise, vnoise } from 'tsl-textures/tsl-utils.js';
+import { noise, prepare, vnoise } from './tsl-utils.js';
 
 
 
@@ -18,6 +18,8 @@ var cellCenter = Fn( ([ cell ])=>{
 
 var cork = Fn( ( params )=>{
 
+	params = prepare( { ...cork.defaults, ...params } );
+
 	var pos = positionGeometry.mul( exp( params.scale.div( 1.5 ).add( 1 ) ) ).add( params.seed ).toVar( );
 
 	var midCell = pos.round().toVar();

package/src/dalmatian-spots.js

@@ -5,11 +5,13 @@
 
 import { Color } from "three";
 import { exp, float, Fn, Loop, mix, positionGeometry } from 'three/tsl';
-import { noise } from 'tsl-textures/tsl-utils.js';
+import { noise, prepare } from './tsl-utils.js';
 
 
 var dalmatianSpots = Fn( ( params )=>{
 
+	params = prepare( { ...dalmatianSpots.defaults, ...params } );
+
 	var pos = positionGeometry.mul( exp( params.scale ) ).add( params.seed ).sub( 1000 ).toVar( );
 
 	var k = float( 1 ).toVar();
@@ -17,7 +19,7 @@ var dalmatianSpots = Fn( ( params )=>{
 	var d = float( 1.5 ).sub( params.density ).mul( 2 ).toVar();
 	var count = params.density.mul( 5 ).add( 5 ).toVar();
 
-	Loop( count, ()=> {
+	Loop( count, ()=> {
 
 		k.mulAssign( noise( pos ).abs().pow( d ).mul( 100 ).sub( 50 ).clamp( 0, 1 ).oneMinus() );
 		pos.assign( pos.mul( 1.01 ) );
@@ -25,7 +27,7 @@ var dalmatianSpots = Fn( ( params )=>{
 		pos.assign( pos.mul( 1.01 ) );
 		k.mulAssign( noise( pos.zxy ).abs().pow( d ).mul( 100 ).sub( 50 ).clamp( 0, 1 ).oneMinus() );
 		pos.assign( pos.mul( 1.01 ) );
-
+
 	} );
 
 	return mix( params.background, params.color, k.clamp( 0, 1 ) );

package/src/darth-maul.js

@@ -0,0 +1,58 @@
+
+//	TSL-Textures: Darth Maul
+
+
+
+import { Color, Vector3 } from "three";
+import { abs, exp, Fn, mix, positionGeometry, pow, select, vec3 } from 'three/tsl';
+import { noise, prepare } from './tsl-utils.js';
+
+
+
+var darthMaul = Fn( ( params ) => {
+
+	params = prepare( { ...darthMaul.defaults, ...params } );
+
+	var dX = vec3( params.shift.x, 0, 0 );
+
+	var position = positionGeometry.add( params.shift ).mul( exp( params.scale.div( 1.5 ).sub( 1 ) ) ).sub( params.shift ).mul( vec3( 1, 1/2, 1/2 ) ).toVar( );
+
+	var s = select( positionGeometry.y.mul( params.angle.radians().cos() ).add( positionGeometry.z.mul( params.angle.radians().sin() ) ).greaterThan( params.distance ), 1, 0 );
+
+	// implement symmetry
+	position.x.assign( position.x.add( params.shift.x ).abs() );
+	position.y.addAssign( params.seed );
+	position.z.mulAssign( params.shift.z );
+
+	var n = noise( position ).toVar();
+
+	var k = n.sin().mul( n.mul( params.complexity.mul( 2 ).add( 1 ).exp() ).sin() ).remap( 0, 0.2, 1, -1 ).greaterThan( params.balance ).select( 0, 1 );
+
+	var c = select( position.x.greaterThan( noise( position.mul( 2.3 ) ).abs().mul( 0.5 ).add( 0.02 )	), 1, 0 );
+
+	return mix( params.background, params.color, k.mul( s ).mul( c ).clamp( 0, 1 ) );
+
+} );
+
+
+
+darthMaul.defaults = {
+	$name: 'Darth Maul',
+
+	scale: 2,
+	shift: new Vector3( 0, 0, 0 ),
+	complexity: 0,
+
+	angle: 60,
+	distance: 1.9,
+
+	color: new Color( 0xD02020 ),
+	background: new Color( 0x000000 ),
+	balance: 0,
+
+	seed: 0,
+};
+
+
+
+export { darthMaul };

package/src/dyson-sphere.js

@@ -5,6 +5,7 @@
 
 import { Color } from 'three';
 import { exp, float, Fn, Loop, mix, positionGeometry, vec3 } from 'three/tsl';
+import { prepare } from './tsl-utils.js';
 
 
 
@@ -61,6 +62,8 @@ var noiseg = Fn( ([ pos ])=>{
 
 var dysonSphere = Fn( ( params )=>{
 
+	params = prepare( { ...dysonSphere.defaults, ...params } );
+
 	var pos = positionGeometry.mul( exp( params.scale.div( 2 ).add( 0.5 ) ) ).add( params.seed ).toVar( );
 
 	var res = vec3().toVar();

package/src/entangled.js

@@ -5,29 +5,31 @@
 
 import { Color } from "three";
 import { abs, exp, float, floor, Fn, Loop, max, mix, mul, oneMinus, positionGeometry, pow, sin } from 'three/tsl';
-import { noise } from 'tsl-textures/tsl-utils.js';
+import { noise, prepare } from './tsl-utils.js';
 
 
 
 var entangled = Fn( ( params ) => {
 
+	params = prepare( { ...entangled.defaults, ...params } );
+
 	var scale = exp( params.scale.div( 2 ) ).toVar( );
 	var pos = positionGeometry.add( params.seed ).toVar( );
 	var k = float( -10000 ).toVar( );
 	var k1 = float( 0 ).toVar( );
 
-	Loop( floor( float( params.density ) ), ()=> {
+	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 );
-
+
 } );
 
 

package/src/fordite.js

@@ -5,12 +5,14 @@
 
 import { Color } from 'three';
 import { exp, Fn, mul, positionGeometry, sin, vec3 } from 'three/tsl';
-import { hsl, noise } from 'tsl-textures/tsl-utils.js';
+import { hsl, noise, prepare } from './tsl-utils.js';
 
 
 
 var fordite = Fn( ( params ) => {
 
+	params = prepare( { ...fordite.defaults, ...params } );
+
 	var pos = positionGeometry.mul( exp( params.scale ) ).add( params.seed ).toVar( );
 
 	var k = noise(

package/src/gas-giant.js

@@ -5,12 +5,14 @@
 
 import { Color } from "three";
 import { exp, Fn, mix, positionGeometry, vec3 } from 'three/tsl';
-import { hsl, noise, toHsl } from 'tsl-textures/tsl-utils.js';
+import { hsl, noise, prepare, toHsl } from './tsl-utils.js';
 
 
 
 var gasGiant = Fn( ( params )=>{
 
+	params = prepare( { ...gasGiant.defaults, ...params } );
+
 	var scale = params.scale.div( 2 ).add( 1 ).toVar();
 	var pos = positionGeometry.mul( exp( scale ) ).add( params.seed ).toVar( );