tsl-textures 0.6.0 → 0.8.0

package/README.md

@@ -1,4 +1,14 @@
 # tsl-textures
-A collection of Three.js Shading Language (TSL) textures.
+A collection of Three.js Shading Language (TSL) textures –
+these are online real-time procedural generators of 3D textures.
 
-See [Project page](https://boytchev.github.io/tsl-textures/).
+Pick a texture from the [Project home page](https://boytchev.github.io/tsl-textures/).
+
+
+#### Example "Planet"
+
+Uses [planet.js](https://boytchev.github.io/tsl-textures/docs/planet.html)
+for both the planet and its moon; and [stars.js](https://boytchev.github.io/tsl-textures/docs/stars.html)
+for the stars. Click on the image for a live demo.
+
+[<img src="https://boytchev.github.io/tsl-textures/examples/example-planet.jpg">](https://boytchev.github.io/tsl-textures/examples/example-planet.html)

package/package.json

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

package/src/concrete.js

@@ -0,0 +1,59 @@
+
+// TSL-Textures: Concrete
+
+
+
+import { abs, cos, cross, exp, normalLocal, positionLocal, pow, remap, sin, sub, tangentLocal, tslFn, vec3 } from 'three/nodes';
+import { noise } from 'tsl-textures/tsl-utils.js';
+
+
+
+var surfacePos = tslFn( ([ pos, normal, bump, density, seed ]) => {
+
+	var k = noise( pos.add( seed ) ).mul( 0.5 ).add( 0.5 );
+	k = bump.mul( pow( abs( k ), density ) );
+
+	return pos.add( k.mul( normal ) );
+
+} );
+
+
+var concrete = tslFn( ( params ) => {
+
+	var eps = 0.001;
+
+	var position = positionLocal.mul( exp( params.scale.div( 2 ).add( 2 ) ) ).toVar( ),
+		normal = normalLocal.normalize().toVar(),
+		tangent = tangentLocal.normalize().mul( eps ).toVar(),
+		bitangent = cross( normal, tangent ).normalize().mul( eps ).toVar();
+
+	var density = remap( params.density, 0, 1, 10, 0.5 ).toVar();
+	var seed = vec3( sin( params.seed ).mul( 100 ), cos( params.seed.div( 2 ) ).mul( 100 ), sin( params.seed.div( 3 ) ).mul( 100 ) ).toVar();
+
+	var pos = surfacePos( position, normal, params.bump, density, seed );
+	var posU = surfacePos( position.add( tangent ), normal, params.bump, density, seed );
+	var posV = surfacePos( position.add( bitangent ), normal, params.bump, density, seed );
+
+	var dU = sub( posU, pos ),
+		dV = sub( posV, pos );
+
+	return cross( dU, dV ).normalize();
+
+} );
+
+
+
+concrete.defaults = {
+	$name: 'Concrete',
+	$normalNode: true,
+
+	scale: 2,
+	density: 0.5,
+	bump: 0.5,
+
+	seed: 0,
+};
+
+
+
+export { concrete };

package/src/concrete.js.bak

@@ -0,0 +1,59 @@
+
+// TSL-Textures: Concrete
+
+
+
+import { abs, cos, cross, exp, mul, normalLocal, positionLocal, pow, remap, sin, sub, tangentLocal, tslFn, vec3 } from 'three/nodes';
+import { noise } from 'tsl-textures/tsl-utils.js';
+
+
+
+var surfacePos = tslFn( ([ pos, normal, bump, density, seed ]) => {
+
+	var k = noise( pos.add( seed ) ).mul( 0.5 ).add( 0.5 );
+	k = bump.mul( pow( abs( k ), density ) );
+
+	return pos.add( k.mul( normal ) );
+
+} );
+
+
+var concrete = tslFn( ( params ) => {
+
+	var eps = 0.001;
+
+	var position = positionLocal.mul( exp( params.scale.div( 2 ).add( 2 ) ) ).toVar( ),
+		normal = normalLocal.normalize().toVar(),
+		tangent = tangentLocal.normalize().mul( eps ).toVar(),
+		bitangent = cross( normal, tangent ).normalize().mul( eps ).toVar();
+
+	var density = remap( params.density, 0, 1, 10, 0.5 ).toVar();
+	var seed = vec3( sin( params.seed ).mul( 100 ), cos( params.seed.div( 2 ) ).mul( 100 ), sin( params.seed.div( 3 ) ).mul( 100 ) ).toVar();
+
+	var pos = surfacePos( position, normal, params.bump, density, seed );
+	var posU = surfacePos( position.add( tangent ), normal, params.bump, density, seed );
+	var posV = surfacePos( position.add( bitangent ), normal, params.bump, density, seed );
+
+	var dU = sub( posU, pos ),
+		dV = sub( posV, pos );
+
+	return cross( dU, dV ).normalize();
+
+} );
+
+
+
+concrete.defaults = {
+	$name: 'Concrete',
+	$normalNode: true,
+
+	scale: 2,
+	density: 0.5,
+	bump: 0.5,
+
+	seed: 0,
+};
+
+
+
+export { concrete };

package/src/polka-dots.js

@@ -0,0 +1,62 @@
+
+//	TSL-Textures: Polka Dots
+
+
+
+import { Color } from "three";
+import { acos, add, distance, exp, float, loop, max, min, mix, mul, oneMinus, positionLocal, pow, smoothstep, tslFn, } from 'three/nodes';
+import { mod, spherical } from 'tsl-textures/tsl-utils.js';
+
+
+
+var goldenRatio = ( 1+5**0.5 )/2;
+
+
+
+var polkaDots = tslFn( ( params ) => {
+
+	var cnt = pow( 10, params.count ).toVar();
+	var vec = positionLocal.normalize().toVar();
+
+	var besti = oneMinus( vec.y ).mul( cnt ).sub( 1 ).div( 2 );
+
+	var span = max( 10, cnt.pow( 0.5 ) );
+
+	var mini = besti.sub( span ).floor().clamp( 0, cnt );
+	var maxi = besti.add( span ).floor().clamp( 0, cnt );
+
+	var dist = float( 1 ).toVar();
+ 	loop( maxi.sub( mini ), ( { i } )=> {
+
+		var j = add( i, mini );
+		var theta = mod( mul( 2*Math.PI/goldenRatio, j ), 2*Math.PI );
+		var phi = acos( oneMinus( float( j ).mul( 2 ).add( 1 ).div( cnt ) ) );
+		var pnt = spherical( phi, theta );//.normalize();
+		dist.assign( min( dist, distance( vec, pnt ) ) );
+
+	} );
+
+	var size = exp( params.size.mul( 5 ).sub( 5 ) ).toVar();
+	var blur = params.blur.pow( 4 ).toVar();
+	var k = smoothstep( size.sub( blur ), size.add( blur ), dist );
+
+	return mix( params.color, params.background, k );
+
+} );
+
+
+
+polkaDots.defaults = {
+	$name: 'Polka dots',
+
+	count: 2,
+	size: 0.5,
+	blur: 0.25,
+
+	color: new Color( 0x000000 ),
+	background: new Color( 0xFFFFFF ),
+};
+
+
+
+export { polkaDots };

package/src/--concrete.js

@@ -1,37 +0,0 @@
-
-// TSL-Textures: Concrete
-
-
-
-//import { Color } from "three";
-import { abs, /*add, div,*/ exp, /*If, MeshLambertNodeMaterial, mix,*/ mul, /*oneMinus,*/ positionLocal, pow, remap, tslFn } from 'three/nodes';
-import { /*hsl,*/ noise } from 'tsl-textures/tsl-utils.js';
-
-
-
-var concrete = tslFn( ( params ) => {
-
-	var pos = positionLocal.mul( exp( params.scale ) ).add( params.seed ).toVar( );
-
-	var k = noise( pos );
-
-	//return hsl( 0, 0, mul(params.bump,pow(abs(k.div(2).add(0.5)),remap(params.density,0,1,10,0.5))) );
-	return mul( params.bump, pow( abs( k.div( 2 ).add( 0.5 ) ), remap( params.density, 0, 1, 10, 0.5 ) ) );
-
-} );
-
-
-
-concrete.defaults = {
-	$name: 'Concrete',
-
-	scale: 2,
-	density: 1,
-	bump: 1,
-
-	seed: 0,
-};
-
-
-
-export { concrete };