Renamed smoothStep and smootherStep to smoothstep and smootherstep to make it consistent with GLSL. Implemented it in CanvasRenderer.

src/math/Math.js

@@ -30,40 +30,28 @@ THREE.Math = {
 
 	// http://en.wikipedia.org/wiki/Smoothstep
 
-	smoothStep: function ( x, min, max ) {
+	smoothstep: function ( x, min, max ) {
 
-		if( x <= min ) {
-			return 0;
-		}
-		if( x >= max ) {
-			return 1;
-		}
+		if ( x <= min ) return 0;
+		if ( x >= max ) return 1;
 
-		// normalize
 		x = ( x - min )/( max - min );
 
 		return x*x*(3 - 2*x);
 
 	},
 
-	// http://en.wikipedia.org/wiki/Smoothstep
-
-	smootherStep: function ( x, min, max ) {
+	smootherstep: function ( x, min, max ) {
 
-		if( x <= min ) {
-			return 0;
-		}
-		if( x >= max ) {
-			return 1;
-		}
+		if ( x <= min ) return 0;
+		if ( x >= max ) return 1;
 
-		// normalize
 		x = ( x - min )/( max - min );
 
 		return x*x*x*(x*(x*6 - 15) + 10);
 
 	},
-	
+
 	// Random float from <0, 1> with 16 bits of randomness
 	// (standard Math.random() creates repetitive patterns when applied over larger space)
 

src/renderers/CanvasRenderer.js

@@ -6,6 +6,8 @@ THREE.CanvasRenderer = function ( parameters ) {
 
 	console.log( 'THREE.CanvasRenderer', THREE.REVISION );
 
+	var smoothstep = THREE.Math.smoothstep;
+
 	parameters = parameters || {};
 
 	var _this = this,
@@ -740,17 +742,9 @@ THREE.CanvasRenderer = function ( parameters ) {
 				_near = camera.near;
 				_far = camera.far;
 
-				var depth;
-
-				depth = 1 - smoothstep( v1.positionScreen.z * v1.positionScreen.w, _near, _far );
-				_color1.setRGB( depth, depth, depth );
-
-				depth = 1 - smoothstep( v2.positionScreen.z * v2.positionScreen.w, _near, _far )
-				_color2.setRGB( depth, depth, depth );
-
-				depth = 1 - smoothstep( v3.positionScreen.z * v3.positionScreen.w, _near, _far );
-				_color3.setRGB( depth, depth, depth );
-
+				_color1.r = _color1.g = _color1.b = 1 - smoothstep( v1.positionScreen.z * v1.positionScreen.w, _near, _far );
+				_color2.r = _color2.g = _color2.b = 1 - smoothstep( v2.positionScreen.z * v2.positionScreen.w, _near, _far );
+				_color3.r = _color3.g = _color3.b = 1 - smoothstep( v3.positionScreen.z * v3.positionScreen.w, _near, _far );
 				_color4.addColors( _color2, _color3 ).multiplyScalar( 0.5 );
 
 				_image = getGradientTexture( _color1, _color2, _color3, _color4 );
@@ -1171,13 +1165,6 @@ THREE.CanvasRenderer = function ( parameters ) {
 
 		}
 
-		function smoothstep( value, min, max ) {
-
-			var x = ( value - min ) / ( max - min );
-			return x * x * ( 3 - 2 * x );
-
-		}
-
 		// Hide anti-alias gaps
 
 		function expand( v1, v2 ) {