tsl-textures 0.11.0 → 0.13.0

package/README.md

@@ -21,3 +21,14 @@ The normal are created directly without using any of the TSL texture generators.
 Click on the image for a live demo.
 
 [<img src="https://boytchev.github.io/tsl-textures/examples/example-normal-map.jpg">](https://boytchev.github.io/tsl-textures/examples/example-normal-map.html)
+
+
+#### Example "Wooden toys"
+
+Uses [wood.js](https://boytchev.github.io/tsl-textures/docs/wood.html) texture
+to convert flat-color 3D models (an ambulance, a race car and a luxury SUV from
+Car Kit (1.4) by Kenney [www.kenney.nl](https://www.kenney.nl/)) into wooden toys.
+All the wood textures are procedurally generated in real-time. Click on the image
+for a live demo. (Note: non-WebGPU browsers might need 30+ seconds to start up.)
+
+[<img src="https://boytchev.github.io/tsl-textures/examples/example-wooden-toys.jpg">](https://boytchev.github.io/tsl-textures/examples/example-wooden-toys.html)

package/package.json

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

package/src/cork.js

@@ -0,0 +1,83 @@
+
+//	TSL-Textures: Cork
+
+
+
+import { Color } from 'three';
+import { exp, float, If, loop, mix, positionLocal, tslFn, vec3 } from 'three/nodes';
+import { noise, vnoise } from 'tsl-textures/tsl-utils.js';
+
+
+
+var cellCenter = tslFn( ([ cell ])=>{
+
+	return cell.add( vnoise( cell ) );
+
+} );
+
+
+var cork = tslFn( ( params )=>{
+
+	var pos = positionLocal.mul( exp( params.scale.div( 1.5 ).add( 1 ) ) ).add( params.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 = float( 0 ).toVar();
+
+
+	loop( 27, () => {
+
+		var ix = i.mod( 3 ).sub( 1 );
+		var iy = i.div( 3 ).floor().mod( 3 ).sub( 1 );
+		var iz = i.div( 9 ).floor().sub( 1 );
+		cell.assign( midCell.add( vec3( ix, iy, iz ) ) );
+		dist.assign( pos.distance( cellCenter( cell ) ) );
+
+		dist.addAssign( noise( pos.add( cell ) ).div( params.straight.exp() ) );
+
+		If( dist.lessThan( minDist ), ()=>{
+
+			minDist.assign( dist );
+			minCell.assign( cell );
+
+		} );
+		i.addAssign( 1 );
+
+	} );
+
+	var n = noise( minCell.mul( Math.PI ) ).toVar();
+	var r = noise( pos.mul( 12 ) ).toVar();
+	r.assign( r.sign().mul( r.abs().pow3() ) );
+	r.addAssign( noise( pos.mul( 40 ) ).div( 3 ) );
+	var k = n.add( 1 ).div( 2 );
+
+	var color = mix( params.color, params.background, k.add( r.mul( params.noise ) ) ).toVar();
+
+	return color;
+
+} );
+
+
+
+cork.defaults = {
+	$name: 'Cork',
+
+	scale: 1,
+	straight: 1,
+	noise: 0.3,
+
+	color: new Color( 0xfff0c0 ),
+	background: new Color( 0xd08060 ),
+
+	seed: 0,
+};
+
+
+
+export { cork };

package/src/tsl-utils.js

@@ -210,10 +210,18 @@ function mapExp( x, toMin, toMax, fromMin=0, fromMax=100 ) {
 
 
 
+// simple vector noise, vec3->float[-1,1]
+const vnoise = tslFn( ([ v ])=>{
+
+	return v.dot( vec3( 12.9898, 78.233, -97.5123 ) ).sin().mul( 43758.5453 ).fract().mul( 2 ).sub( 1 );
+
+} );
+
 
 export
 {
 	noise,
+	vnoise,
 	hsl,
 	toHsl,
 	dynamic,

package/src/voronoi-cells.js

@@ -0,0 +1,79 @@
+
+//	TSL-Textures: Voronoi Cells
+
+
+
+import { Color } from 'three';
+import { exp, float, If, loop, mix, positionLocal, tslFn, vec3 } from 'three/nodes';
+import { noise } from 'tsl-textures/tsl-utils.js';
+
+
+
+var cellCenter = tslFn( ([ cell ])=>{
+
+	return cell.add( noise( cell.mul( Math.PI ) ) );
+
+} );
+
+
+var voronoiCells = tslFn( ( params )=>{
+
+	var pos = positionLocal.mul( exp( params.scale.div( 2 ).add( 0.5 ) ) ).add( params.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 = float( 0 ).toVar();
+
+	loop( 27, () => {
+
+		var ix = i.mod( 3 ).sub( 1 );
+		var iy = i.div( 3 ).floor().mod( 3 ).sub( 1 );
+		var iz = i.div( 9 ).floor().sub( 1 );
+		cell.assign( midCell.add( vec3( ix, iy, iz ) ) );
+		dist.assign( pos.distance( cellCenter( cell ) ).add( noise( pos ).div( 5 ) ) );
+
+		If( dist.lessThan( minDist ), ()=>{
+
+			minDist.assign( dist );
+			minCell.assign( cell );
+
+		} );
+		i.addAssign( 1 );
+
+	} );
+
+
+	var n = noise( minCell.mul( Math.PI ) ).toVar();
+	var k = mix( minDist, n.add( 1 ).div( 2 ), params.flat );
+
+	var color = mix( params.color, params.background, k ).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, params.variation ), params.variation );
+
+} );
+
+
+
+voronoiCells.defaults = {
+	$name: 'Voronoi cells',
+
+	scale: 2,
+	variation: 0,
+	flat: 0,
+
+	color: new Color( 0 ),
+	background: new Color( 0xc0d0ff ),
+
+	seed: 0,
+};
+
+
+
+export { voronoiCells };

package/src/wood.js.bak

@@ -1,64 +0,0 @@
-
-//	TSL-Textures: Wood
-
-
-
-import { Color } from 'three';
-import { add, cond, cos, exp, float, If, loop, mix, mul, normalLocal, positionLocal, radians, reciprocal, sin, smoothstep, sub, tslFn, vec3 } from 'three/nodes';
-import { hsl, noise, toHsl } from 'tsl-textures/tsl-utils.js';
-
-
-
-var wood = tslFn( ( params ) => {
-
-	var angle = radians( params.angle ).toVar();
-	var posLocal = vec3(
-		sub( positionLocal.x.mul( cos( angle ) ), positionLocal.y.mul( sin( angle ) ) ),
-		add( positionLocal.x.mul( sin( angle ) ), positionLocal.y.mul( cos( angle ) ) ),
-		positionLocal.z,
-	).toVar();
-
-
-	// main pattern with rings
-	var pos = posLocal.mul( exp( params.scale.sub( 3 ) ).mul( vec3( reciprocal( params.length ), 4, reciprocal( params.length ) ) ) ).add( params.seed ).toVar( );
-	var k = noise( pos ).add( 1 ).mul( 10 ).mul( params.rings );
-	k = k.add( k.cos() ).cos().add( 1 ).div( 2 );
-
-	var kk = float( 0 ).toVar(),
-		sum = float( 0 ).toVar(),
-		scale = exp( params.scale.sub( 2 ) ).mul( vec3( 1, params.fibersDensity, 1 ) ).toVar(),
-		power = float( 2 ).toVar();
-
-	loop( 10, ()=>{
-
-		kk.addAssign( mul( power, noise( posLocal.mul( scale ).add( params.seed ) ) ) );
-		sum.addAssign( power );
-		scale.mulAssign( 1.8 );
-		power.mulAssign( 0.6 );
-
-	} );
-
-	kk.assign( mul( kk, 5 ).div( sum ).mul( 10 ).sin().add( 1 ).div( 2 ) );
-
-	return mix( params.color, params.background, mix( k, kk, params.fibers ) );
-
-} );
-
-
-
-wood.defaults = {
-	$name: 'Wood',
-	scale: 2.5,
-	rings: 4.5,
-	length: 1,
-	angle: 0,
-	fibers: 0.3,
-	fibersDensity: 10,
-	color: new Color( 0.8, 0.4, 0 ),
-	background: new Color( 0.4, 0.1, 0 ),
-	seed: 0,
-};
-
-
-
-export { wood };