sss

examples/js/nodes/accessors/ScreenUVNode.js

@@ -0,0 +1,36 @@
+/**
+ * @author sunag / http://www.sunag.com.br/
+ */
+
+THREE.ScreenUVNode = function( resolution ) {
+
+	THREE.TempNode.call( this, 'v2', { shared: false } );
+
+	this.resolution = resolution;
+
+};
+
+THREE.ScreenUVNode.prototype = Object.create( THREE.TempNode.prototype );
+THREE.ScreenUVNode.prototype.constructor = THREE.ScreenUVNode;
+
+THREE.ScreenUVNode.prototype.generate = function( builder, output ) {
+
+	var material = builder.material;
+	var result;
+
+	if ( builder.isShader( 'fragment' ) ) {
+
+		result = 'gl_FragCoord.xy/' + this.resolution.build( builder, 'v2' );
+
+	}
+	else {
+
+		console.warn( "THREE.ScreenUVNode is not compatible with " + builder.shader + " shader." );
+
+		result = 'vec2( 0.0 )';
+
+	}
+
+	return builder.format( result, this.getType( builder ), output );
+
+};

examples/js/nodes/utils/ResolutionNode.js

@@ -0,0 +1,25 @@
+/**
+ * @author sunag / http://www.sunag.com.br/
+ */
+
+THREE.ResolutionNode = function( renderer ) {
+
+	THREE.Vector2Node.call( this );
+
+	this.requestUpdate = true;
+
+	this.renderer = renderer;
+
+};
+
+THREE.ResolutionNode.prototype = Object.create( THREE.Vector2Node.prototype );
+THREE.ResolutionNode.prototype.constructor = THREE.ResolutionNode;
+
+THREE.ResolutionNode.prototype.updateAnimation = function( delta ) {
+
+	var size = this.renderer.getSize();
+
+	this.x = size.width;
+	this.y = size.height;
+
+};

examples/js/nodes/utils/TimerNode.js

@@ -2,12 +2,13 @@
  * @author sunag / http://www.sunag.com.br/
  */
 
-THREE.TimerNode = function( value ) {
+THREE.TimerNode = function( value, scale ) {
 
 	THREE.FloatNode.call( this, value );
 
 	this.requestUpdate = true;
-	this.scale = 1;
+
+	this.scale = scale !== undefined ? scale : 1;
 
 };
 

examples/webgl_materials_nodes.html

@@ -55,6 +55,7 @@
 		<script src="js/nodes/accessors/PositionNode.js"></script>
 		<script src="js/nodes/accessors/NormalNode.js"></script>
 		<script src="js/nodes/accessors/UVNode.js"></script>
+		<script src="js/nodes/accessors/ScreenUVNode.js"></script>
 		<script src="js/nodes/accessors/ColorsNode.js"></script>
 		<script src="js/nodes/accessors/CameraNode.js"></script>
 		<script src="js/nodes/accessors/ReflectNode.js"></script>
@@ -85,6 +86,7 @@
 		<script src="js/nodes/utils/LuminanceNode.js"></script>
 		<script src="js/nodes/utils/ColorAdjustmentNode.js"></script>
 		<script src="js/nodes/utils/NoiseNode.js"></script>
+		<script src="js/nodes/utils/ResolutionNode.js"></script>
 
 		<!-- Phong Material -->
 		<script src="js/nodes/materials/PhongNode.js"></script>
@@ -102,9 +104,10 @@
 		var teapot, mesh;
 		var controls;
 		var move = false;
+		var rtTexture, rtMaterial;
 		var gui, guiElements = [];
 
-		var param = { example: 'standard' };
+		var param = { example: 'sss' };
 
 		var brick = new THREE.TextureLoader().load( 'textures/brick_diffuse.jpg' );
 		var grass = new THREE.TextureLoader().load( 'textures/terrain/grasslight-big.jpg' );
@@ -202,6 +205,7 @@
 				'adv / camera-depth': 'camera-depth',
 				'adv / soft-body': 'soft-body',
 				'adv / wave': 'wave',
+				'adv / sss' : 'sss',
 				'misc / smoke' : 'smoke',
 				'misc / firefly' : 'firefly'
 			} ).onFinishChange( function() {
@@ -1439,7 +1443,7 @@
 
 						wrapShadow.number = val;
 
-					}, false, -1, 0 );
+					}, false, - 1, 0 );
 
 					break;
 
@@ -1604,6 +1608,117 @@
 
 					}, false, 0, 3 );
 
+					break;
+
+				case 'sss':
+
+					// DISTANCE FORMULA
+
+					var modelPos = new THREE.Vector3Node();
+
+					var viewPos = new THREE.PositionNode( THREE.PositionNode.VIEW );
+					var cameraPosition = new THREE.CameraNode( THREE.CameraNode.POSITION );
+
+					var cameraDistance = new THREE.Math2Node(
+						modelPos,
+						cameraPosition,
+						THREE.Math2Node.DISTANCE
+					);
+
+					var viewPosZ = new THREE.SwitchNode( viewPos, 'z' );
+
+					var distance = new THREE.OperatorNode(
+						cameraDistance,
+						viewPosZ,
+						THREE.OperatorNode.SUB
+					);
+
+					var distanceRadius = new THREE.OperatorNode(
+						distance,
+						new THREE.FloatNode( 70 ),
+						THREE.OperatorNode.ADD
+					);
+
+					var objectDepth = new THREE.Math3Node(
+						distanceRadius,
+						new THREE.FloatNode( 0 ),
+						new THREE.FloatNode( 50 ),
+						THREE.Math3Node.SMOOTHSTEP
+					);
+
+					// RTT ( get back distance )
+
+					rtTexture = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBFormat } );
+
+					var distanceMtl = new THREE.PhongNodeMaterial();
+					distanceMtl.environment = objectDepth;
+					distanceMtl.side = THREE.BackSide;
+					distanceMtl.build();
+
+					rtMaterial = distanceMtl;
+
+					// MATERIAL
+
+					mtl = new THREE.StandardNodeMaterial();
+
+					var backSideDepth = new THREE.TextureNode( rtTexture, new THREE.ScreenUVNode( new THREE.ResolutionNode( renderer ) ) );
+
+					var difference = new THREE.OperatorNode(
+						objectDepth,
+						backSideDepth,
+						THREE.OperatorNode.SUB
+					);
+
+					difference = new THREE.Math3Node(
+						new THREE.FloatNode( - .1 ),
+						new THREE.FloatNode( .5 ),
+						difference,
+						THREE.Math3Node.SMOOTHSTEP
+					);
+
+					var internalColor = new THREE.ColorNode( 0x1a0e14 );
+					var surfaceColor = new THREE.ColorNode( 0xd04327 );
+
+					var color = new THREE.Math3Node(
+						surfaceColor,
+						internalColor,
+						new THREE.Math1Node( difference, THREE.Math1Node.SAT ),
+						THREE.Math3Node.MIX
+					);
+
+					var light = new THREE.OperatorNode(
+						new THREE.LightNode(),
+						color,
+						THREE.OperatorNode.ADD
+					);
+
+					mtl.color = new THREE.ColorNode( 0xffffff );
+					mtl.roughness = new THREE.FloatNode( .1 );
+					mtl.metalness = new THREE.FloatNode( .5 );
+
+					mtl.light = light;
+					mtl.environment = color;
+
+					// GUI
+
+					addGui( 'internalColor', internalColor.value.getHex(), function( val ) {
+
+						internalColor.value.setHex( val );
+
+					}, true );
+
+					addGui( 'surfaceColor', surfaceColor.value.getHex(), function( val ) {
+
+						surfaceColor.value.setHex( val );
+
+					}, true );
+
+					addGui( 'area', difference.b.number, function( val ) {
+
+						difference.b.number = val;
+
+					}, false, 0, 1 );
+
 					break;
 			}
 
@@ -1647,6 +1762,17 @@
 			// update material animation and/or gpu calcs (pre-renderer)
 			mesh.material.updateAnimation( delta );
 
+			// render to texture for SSS material only
+			if ( rtTexture ) {
+
+				scene.overrideMaterial = rtMaterial;
+
+				renderer.render( scene, camera, rtTexture, true );
+
+				scene.overrideMaterial = null;
+
+			}
+
 			renderer.render( scene, camera );
 
 			requestAnimationFrame( animate );