UVTransformNode

examples/js/nodes/utils/UVTransformNode.js

@@ -0,0 +1,48 @@
+/**
+ * @author sunag / http://www.sunag.com.br/
+ */
+
+THREE.UVTransformNode = function () {
+
+	THREE.FunctionNode.call( this, "( uvTransform * vec4( uvNode, 0, 1 ) ).xy", "vec2" );
+
+	this.uv = new THREE.UVNode();
+	this.transform = new THREE.Matrix4Node();
+
+};
+
+THREE.UVTransformNode.prototype = Object.create( THREE.FunctionNode.prototype );
+THREE.UVTransformNode.prototype.constructor = THREE.UVTransformNode;
+
+THREE.UVTransformNode.prototype.generate = function ( builder, output ) {
+
+	this.keywords[ "uvNode" ] = this.uv;
+	this.keywords[ "uvTransform" ] = this.transform;
+
+	return THREE.FunctionNode.prototype.generate.call( this, builder, output );
+
+};
+
+THREE.UVTransformNode.prototype.compose = function () {
+
+	var defaultPivot = new THREE.Vector2( .5, .5 ),
+		tempVector = new THREE.Vector3(),
+		tempMatrix = new THREE.Matrix4();
+
+	return function compose( translate, rotate, scale, optionalCenter ) {
+
+		optionalCenter = optionalCenter !== undefined ? optionalCenter : defaultPivot;
+
+		var matrix = this.transform.value;
+
+		matrix.identity();
+		matrix.setPosition( tempVector.set( - optionalCenter.x, - optionalCenter.y, 0 ) );
+		matrix.premultiply( tempMatrix.makeRotationZ( rotate ) );
+		matrix.multiply( tempMatrix.makeScale( scale.x, scale.y, 0 ) );
+		matrix.multiply( tempMatrix.makeTranslation( translate.x, translate.y, 0 ) );
+
+		return this;
+
+	};
+
+}();

examples/webgl_materials_nodes.html

@@ -71,6 +71,7 @@
 		<script src="js/nodes/inputs/Vector3Node.js"></script>
 		<script src="js/nodes/inputs/Vector4Node.js"></script>
 		<script src="js/nodes/inputs/TextureNode.js"></script>
+		<script src="js/nodes/inputs/Matrix4Node.js"></script>
 		<script src="js/nodes/inputs/CubeTextureNode.js"></script>
 
 		<!-- Math -->
@@ -91,6 +92,7 @@
 		<script src="js/nodes/utils/ResolutionNode.js"></script>
 		<script src="js/nodes/utils/BumpNode.js"></script>
 		<script src="js/nodes/utils/BlurNode.js"></script>
+		<script src="js/nodes/utils/UVTransformNode.js"></script>
 
 		<!-- Phong Material -->
 		<script src="js/nodes/materials/PhongNode.js"></script>
@@ -211,6 +213,7 @@
 				'basic / layers': 'layers',
 				'basic / rim': 'rim',
 				'basic / color-adjustment': 'color-adjustment',
+				'basic / uv-transform': 'uv-transform',
 				'basic / bump': 'bump',
 				'basic / blur': 'blur',
 				'basic / spherical-reflection': 'spherical-reflection',
@@ -816,6 +819,71 @@
 
 					break;
 
+				case 'uv-transform':
+
+					// MATERIAL
+
+					mtl = new THREE.PhongNodeMaterial();
+
+					var translate = new THREE.Vector2();
+					var rotate = 0;
+					var scale = new THREE.Vector2(1, 1);
+
+					var texture = new THREE.TextureNode( getTexture( "brick" ) );
+					texture.coord = new THREE.UVTransformNode();
+
+					mtl.color = texture;
+
+					// GUI
+
+					function updateUVTransform() {
+					
+						texture.coord.compose( translate, THREE.Math.degToRad( rotate ), scale );
+					
+					}
+
+					addGui( 'translateX', translate.x, function( val ) {
+
+						translate.x = val;
+
+						updateUVTransform();
+
+					}, false, 0, 10 );
+					
+					addGui( 'translateY', translate.y, function( val ) {
+
+						translate.y = val;
+
+						updateUVTransform();
+
+					}, false, 0, 10 );
+					
+					addGui( 'scaleX', scale.x, function( val ) {
+
+						scale.x = val;
+
+						updateUVTransform();
+
+					}, false, .1, 5 );
+					
+					addGui( 'scaleY', scale.y, function( val ) {
+
+						scale.y = val;
+
+						updateUVTransform();
+
+					}, false, .1, 5 );
+					
+					addGui( 'rotate', rotate, function( val ) {
+
+						rotate = val;
+						
+						updateUVTransform();
+
+					}, false, 0, 360 );
+
+					break;
+
 				case 'bump':
 
 					// MATERIAL