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

package/src/planet.js

@@ -0,0 +1,130 @@
+
+//	TSL-Textures: Planet
+
+
+
+import { Color } from 'three';
+import { exp, float, If, loop, mix, mul, positionLocal, remap, smoothstep, tslFn, vec3 } from 'three/nodes';
+import { noise } from 'tsl-textures/tsl-utils.js';
+
+
+
+
+var planet = tslFn( ( params )=>{
+
+	var k = float( 0 ).toVar(),
+		sum = float( 0 ).toVar(),
+		scale = exp( params.scale.sub( 2 ) ).toVar(),
+		power = float( 2 ).toVar();
+
+	loop( params.iterations.add( 10 ), ()=>{
+
+		k.addAssign( mul( power, noise( positionLocal.mul( scale ).add( params.seed ) ) ) );
+		sum.addAssign( power );
+		scale.mulAssign( 1.5 );
+		power.mulAssign( 0.8 );
+
+	} );
+
+	k.assign( mul( k, k, 0.5 ).div( sum ) );
+
+	var levelSea = params.levelSea.pow( 2 ).toVar();
+	var levelMountain = params.levelMountain.pow( 2 ).toVar();
+	var levelSand = mix( levelSea, levelMountain, params.balanceSand ).toVar();
+	var levelCoast = mix( levelSea, levelSand, 0.4 ).toVar();
+	var levelGrass = mix( levelSea, levelSand, 0.6 ).toVar();
+
+	var color = vec3().toVar();
+
+	// process water
+	If( k.lessThan( levelSea ), ()=>{
+
+		// deep-shallow
+		color.assign( mix(
+			params.colorDeep,
+			params.colorShallow,
+			remap( k, 0, levelSea, 0, 1 ).pow( exp( params.balanceWater.mul( -8 ).add( 4 ) ) )
+		) );
+
+	} )
+		.elseif( k.lessThan( levelCoast ), ()=>{
+
+			// shallow-sand
+			color.assign( mix(
+				params.colorShallow,
+				params.colorBeach,
+				remap( k, levelSea, levelCoast )
+			) );
+
+		} )
+		.elseif( k.lessThan( levelGrass ), ()=>{
+
+			// sand
+			color.assign( params.colorBeach );
+
+		} )
+		.elseif( k.lessThan( levelSand ), ()=>{
+
+			// shallow-sand-grass
+			color.assign( mix(
+				params.colorBeach,
+				params.colorGrass,
+				remap( k, levelGrass, levelSand )
+			) );
+
+		} )
+		.elseif( k.lessThan( levelMountain ), ()=>{
+
+			// grass-forest
+			color.assign( mix(
+				params.colorGrass,
+				params.colorForest,
+				remap( k, levelSand, levelMountain ).pow( 0.75 )
+			) );
+
+		} )
+		.else( ()=>{
+
+			// forest-snow
+			var levelSnow = mix( 1, levelMountain, params.balanceSnow );
+			color.assign( mix(
+				params.colorForest,
+				params.colorSnow,
+				smoothstep( mix( levelSnow, levelMountain, params.balanceSnow.pow( 0.5 ) ), levelSnow, k )
+			) );
+
+		} );
+
+	return color;
+
+} );
+
+
+
+planet.defaults = {
+	$name: 'Planet',
+
+	scale: 2,
+
+	iterations: 5,
+
+	levelSea: 0.3,
+	levelMountain: 0.7,
+
+	balanceWater: 0.3,
+	balanceSand: 0.2,
+	balanceSnow: 0.8,
+
+	colorDeep: new Color( 0x123a59 ).convertLinearToSRGB(), // SteelBlue
+	colorShallow: new Color( 0x87CEEB ).convertLinearToSRGB(), // SkyBlue
+	colorBeach: new Color( 0xFFFACD ).convertLinearToSRGB(), // LemonChiffon
+	colorGrass: new Color( 0x3CB371 ).convertLinearToSRGB(), // MediumSeaGreen
+	colorForest: new Color( 0x003000 ).convertLinearToSRGB(), // Dark green
+	colorSnow: new Color( 0xF0FFFF ).convertLinearToSRGB(), // Azure
+
+	seed: 0,
+};
+
+
+
+export { planet };

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/polka-dots.js.bak

@@ -0,0 +1,62 @@
+
+//	TSL-Textures: Polka Dots
+
+
+
+import { Color, Vector3 } 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/temp.js

@@ -0,0 +1,59 @@
+
+//	TSL-Textures: Noise Pattern
+
+
+
+//import { Color } from "three";
+import { /*clamp, exp,*/ loop, mix, positionLocal, /*storage,*/ storageObject, tslFn /*uniforms, vec3*/ } from 'three/nodes';
+//import StorageBufferAttribute from 'three/addons/renderers/common/StorageBufferAttribute.js';
+import StorageInstancedBufferAttribute from 'three/addons/renderers/common/StorageInstancedBufferAttribute.js';
+import { noise } from 'tsl-textures/tsl-utils.js';
+
+/* workign version via uniforms
+
+	var colorGradient = uniforms( [new Color('red'),new Color('blue')] );
+	var color1 = colorGradient.element(0);
+	var color2 = colorGradient.element(1);
+
+	return mix( color1, color2, k);
+
+*/
+
+var count = 2;
+var array = [ 1, 0, 0, 1, 1, 0, 0, 0, 1 ];
+var arrayBuffer = new StorageInstancedBufferAttribute( new Float32Array( array ), 3 );
+var colorGradient = storageObject( arrayBuffer, 'vec3', count );
+
+console.log( colorGradient.value.count );
+
+var temp = tslFn( ( /*params*/ ) => {
+
+	var pos = positionLocal.mul( 2 );
+
+	var k = noise( pos ).mul( 0.5 ).add( 0.5 );
+
+	var color1 = colorGradient.element( 0 ).toVar();
+	loop( 2, ( { i } )=>{
+
+		color1.assign( colorGradient.element( i ) );
+
+	} );
+	var color2 = colorGradient.element( colorGradient.value.count-1 );
+
+	return mix( color1, color2, k );
+
+} );
+
+
+
+temp.defaults = {
+	$name: 'temp',
+
+	scale: 2,
+
+	seed: 0,
+};
+
+
+
+export { temp };

package/src/temp.js.bak

@@ -0,0 +1,59 @@
+
+//	TSL-Textures: Noise Pattern
+
+
+
+//import { Color } from "three";
+import { /*clamp, exp,*/ loop, mix, positionLocal, /*storage,*/ storageObject, tslFn /*uniforms, vec3*/ } from 'three/nodes';
+//import StorageBufferAttribute from 'three/addons/renderers/common/StorageBufferAttribute.js';
+import StorageInstancedBufferAttribute from 'three/addons/renderers/common/StorageInstancedBufferAttribute.js';
+import { noise } from 'tsl-textures/tsl-utils.js';
+
+/* workign version via uniforms
+
+	var colorGradient = uniforms( [new Color('red'),new Color('blue')] );
+	var color1 = colorGradient.element(0);
+	var color2 = colorGradient.element(1);
+
+	return mix( color1, color2, k);
+
+*/
+
+var count = 2;
+var array = [ 1, 0, 0, 1, 1, 0, 0, 0, 1 ];
+var arrayBuffer = new StorageInstancedBufferAttribute( new Float32Array( array ), 3 );
+var colorGradient = storageObject( arrayBuffer, 'vec3', count );
+
+console.log( colorGradient.value.count );
+
+var temp = tslFn( ( params ) => {
+
+	var pos = positionLocal.mul( 2 );
+
+	var k = noise( pos ).mul( 0.5 ).add( 0.5 );
+
+	var color1 = colorGradient.element( 0 ).toVar();
+	loop( 2, ( { i } )=>{
+
+		color1.assign( colorGradient.element( i ) );
+
+	} );
+	var color2 = colorGradient.element( colorGradient.value.count-1 );
+
+	return mix( color1, color2, k );
+
+} );
+
+
+
+temp.defaults = {
+	$name: 'temp',
+
+	scale: 2,
+
+	seed: 0,
+};
+
+
+
+export { temp };

package/src/tsl-utils.js

@@ -216,6 +216,9 @@ function mapExp( x, toMin, toMax, fromMin=0, fromMax=100 ) {
 
 } );
 
+
+
+
 export
 {
 	noise,