Added "Tiger fur"

boytchev · Jul 30, 2024 · 4628421 · 4628421
1 parent 226000b
commit 4628421
Show file tree

Hide file tree

Showing 9 changed files with 195 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,9 @@
 # TSL Textures
 
 
+## 0.15.0
+* Added "Tiger fur" in *tiger-fur.js*
+
 ## 0.14.0
 * Added "Dyson sphere" in *dyson-sphere.js*
 

diff --git a/docs/images/tiger-fur-1.png b/docs/images/tiger-fur-1.png
diff --git a/docs/images/tiger-fur-2.png b/docs/images/tiger-fur-2.png
diff --git a/docs/images/tiger-fur-3.png b/docs/images/tiger-fur-3.png
diff --git a/docs/images/tiger-fur.png b/docs/images/tiger-fur.png
diff --git a/docs/tiger-fur.md b/docs/tiger-fur.md
@@ -0,0 +1,73 @@
+<img class="logo" src="../assets/logo/logo.png">
+
+
+# TSL Textures
+
+
+## Tiger fur
+
+This texture renders a pattern that resembles tiger fur.
+Click on a snapshot to open it online.
+
+<p class="gallery">
+
+	<a class="style-block nocaption" href="../online/tiger-fur.html?scale=2&length=4&blur=0.3&strength=0.3&hairs=0.5&color=16755200&bottomColor=16777198&seed=0">
+		<img src="images/tiger-fur-1.png">
+	</a>
+
+	<a class="style-block nocaption" href="../online/tiger-fur.html?scale=4&length=16&blur=0.3&strength=0&hairs=0.65&color=14523136&bottomColor=16513511&seed=0">
+		<img src="images/tiger-fur-2.png">
+	</a>
+
+	<a class="style-block nocaption" href="../online/tiger-fur.html?scale=1.28&length=1.8&blur=0&strength=0.3&hairs=0.02&color=16777215&bottomColor=16041852&seed=0">
+		<img src="images/tiger-fur-3.png">
+	</a>
+
+</p>
+
+
+### Code example
+
+```js
+import { tiger-fur } from "tsl-textures/tiger-fur.js";
+
+
+model.material.colorNode = tigerFur ( {
+	scale: 2,
+	length: 4,
+	blur: 0.3,
+	strength: 0.3,
+	hairs: 0.5,
+	color: new THREE.Color(16755200),
+	bottomColor: new THREE.Color(16777198),
+	seed: 0
+} );
+```
+
+
+### Parameters
+
+* `scale` &ndash; level of details of the pattern, higher value generates finer details, [0, 4]
+* `length` &ndash; length of fur lines, [0,20]
+* `blur` &ndash; smoothness of lines edges, [0,1]
+* `strength` &ndash; amount (thickness) of lines, [0,1]
+* `hairs` &ndash; amount of this hairs aroud the lines, [0,1]
+* `color` &ndash; fur color at the top
+* `bottomColor` &ndash; fur color at the bottom
+* `seed` &ndash; number for the random generator, each value generates specific pattern
+
+
+### Online generator
+
+[online/tiger-fur.html](../online/tiger-fur.html)
+
+
+### Source
+
+[src/tiger-fur.js](https://github.com/boytchev/tsl-textures/blob/main/src/tiger-fur.js)
+
+
+		
+<div class="footnote">
+	<a href="../">Home</a>
+</div>
diff --git a/index.html b/index.html
@@ -129,6 +129,11 @@ <h3>Welcome. Pick a texture!</h3>
 			<img src="./docs/images/stars.png">
 		</a>
 
+		<a class="style-block" href="./online/tiger-fur.html">
+			<div class="title">Tiger fur</div>
+			<img src="./docs/images/tiger-fur.png">
+		</a>
+
 		<a class="style-block" href="./online/voronoi-cells.html">
 			<div class="title">Voronoi cells</div>
 			<img src="./docs/images/voronoi-cells.png">

diff --git a/online/tiger-fur.html b/online/tiger-fur.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+
+
+<html>
+
+
+<head>
+	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+
+	<link rel="shortcut icon" type="image/png" href="../assets/logo/logo.png"/>
+	<link rel="stylesheet" href="styles.css">
+
+	<script type="importmap">
+	  {
+		"imports": {
+			"three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
+			"three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/",
+			"three/nodes": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/nodes/Nodes.js",
+			"tsl-textures/": "../src/"
+		}
+	  }
+	</script>
+</head>
+
+
+<body>
+
+	<script type="module">
+
+		import { install, params } from "./online.js";
+		import { tigerFur } from "tsl-textures/tiger-fur.js";
+
+		var gui = install( tigerFur );
+
+		gui.add( params, 'scale' )
+			.min( 0 ).max( 4 )
+			.name( 'Spots <right>scale</right>' )
+			.$input.classList.add( 'top' );
+
+		gui.add( params, 'length' )
+			.min( 0 ).max( 20 ).step(0.1)
+			.name( '<right>length</right>' );
+
+		gui.add( params, 'blur' )
+			.min( 0 ).max( 1 )
+			.name( '<right>blur</right>' );
+
+		gui.add( params, 'strength' )
+			.min( 0 ).max( 1 ).step( 0.01 )
+			.name( '<right>strength</right>' );
+
+		gui.add( params, 'hairs' )
+			.min( 0 ).max( 1 ).step( 0.01 )
+			.name( '<right>hairs</right>' )
+			.$input.classList.add( 'bottom' );
+
+		gui.addColor( params, 'color' )
+			.name( 'Color <right>top</right>' )
+			.$text.classList.add( 'top' );
+
+		gui.addColor( params, 'bottomColor' )
+			.name( '<right>bottom</right>' )
+			.$text.classList.add( 'bottom' );
+
+	</script>
+</body>
+</html>
diff --git a/src/tiger-fur.js b/src/tiger-fur.js
@@ -0,0 +1,47 @@
+
+//	TSL-Textures: Tiger fur
+
+
+
+import { Color } from "three";
+import { exp, mix, positionLocal, tslFn, vec3 } from 'three/nodes';
+import { noise } from 'tsl-textures/tsl-utils.js';
+
+
+
+var tigerFur = tslFn( ( params )=>{
+
+	var scale = params.scale.div( 2 ).add( 1 ).toVar();
+	var pos = positionLocal.mul( exp( scale ) ).add( params.seed ).toVar( );
+
+	var len = params.length.add( 5 ).reciprocal().toVar();
+	var hairs = params.hairs.mul( 0.3 ).toVar();
+	var k = noise( pos.mul( scale, vec3( 1, len, len ) ) );
+	k = k.add( noise( pos.mul( vec3( 25, 1, 1 ) ) ).add( 1 ).mul( hairs ) );
+	k = k.add( params.strength.sub( 0.5 ) ).smoothstep( params.blur.negate(), params.blur ).oneMinus();
+
+	var n = positionLocal.y.add( hairs.sub( 0.5 ) ).smoothstep( -1, 0.5 );
+
+	return mix( params.bottomColor, params.color, n ).mul( k );
+
+} );
+
+
+tigerFur.defaults = {
+	$name: 'Tiger fur',
+
+	scale: 2,
+	length: 4,
+	blur: 0.3,
+	strength: 0.3,
+	hairs: 0.5,
+
+	color: new Color( 0xFFAA00 ),
+	bottomColor: new Color( 0xFFFFEE ),
+
+	seed: 0,
+};
+
+
+
+export { tigerFur };