Added "Translator"

boytchev · Sep 4, 2024 · 98046c3 · 98046c3
1 parent 1f0a297
commit 98046c3
Show file tree

Hide file tree

Showing 11 changed files with 242 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,9 @@
 # TSL Textures
 
 
+## 1.4.0
+* Added "Translator" in *translator.js*
+
 ## 1.3.0
 * Added "Scaler" in *scaler.js*
 

diff --git a/docs/images/translator-1.png b/docs/images/translator-1.png
diff --git a/docs/images/translator-2.png b/docs/images/translator-2.png
diff --git a/docs/images/translator-3.png b/docs/images/translator-3.png
diff --git a/docs/images/translator.png b/docs/images/translator.png
diff --git a/docs/rotator.md b/docs/rotator.md
@@ -6,7 +6,7 @@
 
 ## Rotator
 
-This texture deforms a shape by rotating part of it vertices. The rotation is
+This texture deforms a shape by rotating part of its vertices. The rotation is
 defined as YXZ rotation of Euler angles around a 3D pivot point used as rotation
 center.
 

diff --git a/docs/scaler.md b/docs/scaler.md
@@ -6,7 +6,7 @@
 
 ## Scaler
 
-This texture deforms a shape by scaling to coordinates of part of it vertices.
+This texture deforms a shape by scaling the coordinates of part of its vertices.
 The scaling is relative to a 3D pivot point used as scaling center.
 
 The selection of affected vertices is set by a imaginary thick planar

diff --git a/docs/translator.md b/docs/translator.md
@@ -0,0 +1,79 @@
+<img class="logo" src="../assets/logo/logo.png">
+
+
+# TSL Textures
+
+
+## Translator
+
+This texture deforms a shape by moving part of its vertices.
+
+The selection of affected vertices is set by a imaginary thick planar
+layer. Vertices "below" the layer are not affected, vertices above the layer are
+fully affected. Vertices inside the layer are gradually affected depending on
+how close they are to the "bottom" or the "top" of the layer. The layer is
+defined by its own pivot point, rotation agles and width.
+
+Hint: use the `show` checkbox of the online generator to visualize the layer.
+
+<p class="gallery">
+
+	<a class="style-block nocaption" href="../online/translator.html?distance=-0.32,-0.16,-1.52&selectorCenter=0,0,0&selectorAngles=0,0&selectorWidth=0.4992">
+		<img src="images/translator-1.png">
+	</a>
+
+	<a class="style-block nocaption" href="../online/translator.html?distance=0,-4,0&selectorCenter=2.776,1.2,0&selectorAngles=0.74,1.06&selectorWidth=4">
+		<img src="images/translator-2.png">
+	</a>
+
+	<a class="style-block nocaption" href="../online/translator.html?distance=0,-0.64,0.8&selectorCenter=0,0,0&selectorAngles=0.74,1.06&selectorWidth=0.7137">
+		<img src="images/translator-3.png">
+	</a>
+
+</p>
+
+
+### Code template
+
+```js
+import * as THREE from "three";
+import { translator } from "tsl-textures/translator.js";
+
+model.material.positionNode = translator ( {
+	distance: new THREE.Vector3(-0.5,0,0.2),
+	selectorCenter: new THREE.Vector3(0,0,0),
+	selectorAngles: new THREE.Vector2(0,0),
+	selectorWidth: 0.7
+} );
+
+model.material.normalNode = translator.normal ( {
+	distance: new THREE.Vector3(-0.5,0,0.2),
+	selectorCenter: new THREE.Vector3(0,0,0),
+	selectorAngles: new THREE.Vector2(0,0),
+	selectorWidth: 0.7
+} );
+```
+
+
+### Parameters
+
+* `distance(x,y,z)` &ndash; distances along local X, Y and Z axes
+* `selectorAngles(φ,θ)` &ndash; spherical coordinates angles for rotation of the selection layer, φ=[0, &pi;], θ=[-2&pi;, 2&pi;]
+* `selectorCenter(x,y,z)` &ndash; 3D pivot point for the selection layer
+* `selectorWidth` &ndash; number for the selection layer width, [0.1, 4]
+
+
+### Online generator
+
+[online/translator.html](../online/translator.html)
+
+
+### Source
+
+[src/translator.js](https://github.com/boytchev/tsl-textures/blob/main/src/translator.js)
+
+
+		
+<div class="footnote">
+	<a href="../">Home</a>
+</div>
diff --git a/index.html b/index.html
@@ -206,6 +206,11 @@ <h3>Shape textures</h3>
 			<div class="title">Scaler</div>
 			<img src="./docs/images/scaler.png">
 		</a>
+
+		<a class="style-block" href="./online/translator.html">
+			<div class="title">Translator</div>
+			<img src="./docs/images/translator.png">
+		</a>
 	</div>
 
 

diff --git a/online/translator.html b/online/translator.html
@@ -0,0 +1,84 @@
+<!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.webgpu.min.js",
+			"three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/",
+			"tsl-textures/": "../src/"
+		}
+	  }
+	</script>
+</head>
+
+
+<body>
+
+	<script type="module">
+		import * as THREE from "three";
+		import { install, params, USE_CUBE, ADD_GRID, scene, selectorParams } from "../online/online.js";
+		import { translator } from "../src/translator.js";
+
+		var gui = install( translator, USE_CUBE, ADD_GRID );
+
+		gui.add( params.distance, 'x' )
+			.min( -4 ).max( 4 ).step( 0.01 )
+			.name( 'Distance <right>x</right>' )
+			.$input.classList.add( 'top' );
+
+		gui.add( params.distance, 'y' )
+			.min( -4 ).max( 4 ).step( 0.01 )
+			.name( '<right>y</right>' );
+
+		gui.add( params.distance, 'z' )
+			.min( -4 ).max( 4 ).step( 0.01 )
+			.name( '<right>z</right>' )
+			.$input.classList.add( 'bottom' );
+
+		var guiS = gui.addFolder( '<big>Planar selector</big>' )//.close();
+
+		guiS.add( params.selectorAngles, 'x' )
+			.min( 0 ).max( Math.PI ).step(0.01)
+			.name( 'Angles <right>&phi;</right>' )
+			.$input.classList.add( 'top' );
+
+		guiS.add( params.selectorAngles, 'y' )
+			.min( -2*Math.PI ).max( 2*Math.PI ).step(0.01)
+			.name( '<right>&theta;</right>' )
+			.$input.classList.add( 'bottom' );
+
+		guiS.add( params.selectorCenter, 'x' )
+			.min( -4 ).max( 4 )
+			.name( 'Position <right>x</right>' )
+			.$input.classList.add( 'top' );
+
+		guiS.add( params.selectorCenter, 'y' )
+			.min( -4 ).max( 4 )
+			.name( '<right>y</right>' );
+
+		guiS.add( params.selectorCenter, 'z' )
+			.min( -4 ).max( 4 )
+			.name( '<right>z</right>' )
+			.$input.classList.add( 'bottom' );
+
+		guiS.add( params, 'selectorWidth' )
+			.min( 0.1 ).max( 4 )
+			.name( 'Width' );
+
+		guiS.add( selectorParams, 'show' )
+			.name( 'Show' );
+
+
+	</script>
+</body>
+</html>
diff --git a/src/translator.js b/src/translator.js
@@ -0,0 +1,69 @@
+
+//	TSL-Textures: Translator
+
+
+
+import { Vector2, Vector3 } from "three";
+import { cross, Fn, modelNormalMatrix, normalLocal, positionLocal, sub, tangentLocal, vec4 } from 'three';
+import { matTrans, selectPlanar } from 'tsl-textures/tsl-utils.js';
+
+
+
+var surfacePos = Fn( ([ pos, params ])=>{
+
+	var zone = selectPlanar( pos, params.selectorAngles, params.selectorCenter, params.selectorWidth );
+
+	var T = matTrans( params.distance.mul( zone ) );
+
+	return T.mul( vec4( pos, 1 ) ).xyz;
+
+} );
+
+
+
+var translator = Fn( ( params )=>{
+
+	return surfacePos( positionLocal, params );
+
+} );
+
+
+
+translator.normal = Fn( ( params ) => {
+
+	var eps = 0.01;
+
+	var position = positionLocal,
+		normal = normalLocal.normalize().toVar(),
+		tangent = tangentLocal.normalize().mul( eps ).toVar(),
+		bitangent = cross( normal, tangent ).normalize().mul( eps ).toVar();
+
+	var pos = surfacePos( position, params );
+	var posU = surfacePos( position.add( tangent ), params );
+	var posV = surfacePos( position.add( bitangent ), params );
+
+	var dU = sub( posU, pos ),
+		dV = sub( posV, pos );
+
+	return modelNormalMatrix.mul( cross( dU, dV ).normalize() );
+
+} );
+
+
+
+translator.defaults = {
+	$name: 'Translator',
+	$positionNode: true,
+	$selectorPlanar: true,
+
+	distance: new Vector3( -0.5, 0, 0.2 ),
+
+	selectorCenter: new Vector3( 0, 0, 0 ),
+	selectorAngles: new Vector2( 0, 0 ),
+	selectorWidth: 0.7,
+
+};
+
+
+
+export { translator };