tsl-textures 0.10.0 → 0.12.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.10.0",
+  "version": "0.12.0",
   "description": "A collection of Three.js Shading Language (TSL) textures ",
   "main": "index.js",
   "repository": {

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

@@ -0,0 +1,64 @@
+
+//	TSL-Textures: Wood
+
+
+
+import { Color } from 'three';
+import { add, cos, exp, float, loop, mix, mul, positionLocal, radians, reciprocal, sin, sub, tslFn, vec3 } from 'three/nodes';
+import { noise } 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 };

package/src/circles.js.bak

@@ -1,56 +0,0 @@
-
-//	TSL-Textures: Circles
-
-
-
-import { Color } from "three";
-import { acos, add, clamp, cond, cos, exp, float, hash, loop, mix, positionLocal, sin, smoothstep, sub, tslFn, vec3 } from 'three/nodes';
-import { hsl, noise, spherical, toHsl } from 'tsl-textures/tsl-utils.js';
-
-
-
-var circles = tslFn( ( params ) => {
-
-	var pos = positionLocal.normalize().toVar( );
-
-	var angle = acos( clamp( pos.y, -1, 1 ) ).mul( 20 );
-
-	var scale = exp( params.scale.sub( 1 ) ).toVar();
-
-	var x = angle.div( 3000 ).mul( scale );
-
-	var k = float( params.seed.sin().mul( 100 ) ).toVar();
-	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 ) );
-
-	var HSL = toHsl( params.color );
-
-	var hue = HSL.x.add( k.mul( params.variety ) ).mod( 1 ).mul( 10 ).toVar();
-
-	var huei = hue.floor();
-	var huef = hue.sub( huei );
-	huef = cond( huef.lessThan( 0.5 ), huef.pow( 1.5 ), huef.pow( 1/1.5 ) );
-	hue.assign( huei.add( huef ) );
-
-	return hsl( hue.div( 10 ), HSL.y, HSL.z );
-
-} );
-
-
-
-circles.defaults = {
-	$name: 'Circles',
-
-	scale: 2,
-	variety: 1,
-
-	color: new Color( 0xF0E0D0 ),
-
-	seed: 0,
-};
-
-
-
-export { circles };