Make textures in generated materials resizable; bump version to 1.4.0

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "THREE.Terrain",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "main": "build/THREE.Terrain.min.js",
   "ignore": [
     "node_modules"

build/THREE.Terrain.js

@@ -1,5 +1,5 @@
 /**
- * THREE.Terrain.js 1.3.0-20150906
+ * THREE.Terrain.js 1.4.0-20150907
  *
  * @author Isaac Sukin (http://www.isaacsukin.com/)
  * @license MIT
@@ -1681,9 +1681,16 @@ THREE.Terrain.Weierstrass = function(g, options) {
  *   rendered.
  */
 THREE.Terrain.generateBlendedMaterial = function(textures) {
+    // Convert numbers to strings of floats so GLSL doesn't barf on "1" instead of "1.0"
+    function glslifyNumber(n) {
+        return n === (n|0) ? n+'.0' : n+'';
+    }
+
     var uniforms = THREE.UniformsUtils.merge([THREE.ShaderLib.lambert.uniforms]),
         declare = '',
-        assign = '';
+        assign = '',
+        t0Repeat = textures[0].texture.repeat,
+        t0Offset = textures[0].texture.offset;
     for (var i = 0, l = textures.length; i < l; i++) {
         // Uniforms
         textures[i].wrapS = textures[i].wrapT = THREE.RepeatWrapping;
@@ -1699,16 +1706,16 @@ THREE.Terrain.generateBlendedMaterial = function(textures) {
         if (i !== 0) {
             var v = textures[i].levels, // Vertex heights at which to blend textures in and out
                 p = textures[i].glsl, // Or specify a GLSL expression that evaluates to a float between 0.0 and 1.0 indicating how opaque the texture should be at this texel
-                useLevels = typeof v !== 'undefined'; // Use levels if they exist; otherwise, use the GLSL expression
+                useLevels = typeof v !== 'undefined', // Use levels if they exist; otherwise, use the GLSL expression
+                tiRepeat = textures[i].texture.repeat,
+                tiOffset = textures[i].texture.offset;
             if (useLevels) {
                 // Must fade in; can't start and stop at the same point.
                 // So, if levels are too close, move one of them slightly.
                 if (v[1] - v[0] < 1) v[0] -= 1;
                 if (v[3] - v[2] < 1) v[3] += 1;
-                // Convert levels to floating-point numbers as strings so GLSL doesn't barf on "1" instead of "1.0"
                 for (var j = 0; j < v.length; j++) {
-                    var n = v[j];
-                    v[j] = n === n|0 ? n+'.0' : n+'';
+                    v[j] = glslifyNumber(v[j]);
                 }
             }
             // The transparency of the new texture when it is layered on top of the existing color at this texel is
@@ -1718,12 +1725,13 @@ THREE.Terrain.generateBlendedMaterial = function(textures) {
             var blendAmount = !useLevels ? p :
                 '1.0 - smoothstep(' + v[0] + ', ' + v[1] + ', vPosition.z) + smoothstep(' + v[2] + ', ' + v[3] + ', vPosition.z)';
             assign += '        color = mix( ' +
-                'texture2D( texture_' + i + ', MyvUv ), ' +
+                'texture2D( texture_' + i + ', MyvUv * vec2( ' + glslifyNumber(tiRepeat.x) + ', ' + glslifyNumber(tiRepeat.y) + ' ) + vec2( ' + glslifyNumber(tiOffset.x) + ', ' + glslifyNumber(tiOffset.y) + ' ) ), ' +
                 'color, ' +
                 'max(min(' + blendAmount + ', 1.0), 0.0)' +
                 ');\n';
         }
     }
+
     var params = {
         // I don't know which of these properties have any effect
         fog: true,
@@ -1780,7 +1788,7 @@ THREE.Terrain.generateBlendedMaterial = function(textures) {
 
             '    vec3 outgoingLight = vec3( 0.0 );', // outgoing light does not have an alpha; the surface does
             '    vec4 diffuseColor = vec4( diffuse, opacity );',
-            '    vec4 color = texture2D( texture_0, MyvUv ); // base',
+            '    vec4 color = texture2D( texture_0, MyvUv * vec2( ' + glslifyNumber(t0Repeat.x) + ', ' + glslifyNumber(t0Repeat.y) + ' ) + vec2( ' + glslifyNumber(t0Offset.x) + ', ' + glslifyNumber(t0Offset.y) + ' ) ); // base',
                 assign,
             '    diffuseColor = color;',
             // '    gl_FragColor = color;',

demo/index.js

@@ -144,8 +144,12 @@ function setupDatGui() {
       sand.rotation.x = -0.5 * Math.PI;
       scene.add(sand);
       THREE.ImageUtils.loadTexture('demo/img/grass1.jpg', undefined, function(t2) {
+        t2.wrapS = t2.wrapT = THREE.RepeatWrapping;
         THREE.ImageUtils.loadTexture('demo/img/stone1.jpg', undefined, function(t3) {
+          t3.wrapS = t3.wrapT = THREE.RepeatWrapping;
           THREE.ImageUtils.loadTexture('demo/img/snow1.jpg', undefined, function(t4) {
+            t4.wrapS = t4.wrapT = THREE.RepeatWrapping;
+            // t2.repeat.x = t2.repeat.y = 2;
             blend = THREE.Terrain.generateBlendedMaterial([
               {texture: t1},
               {texture: t2, levels: [-80, -35, 20, 50]},
@@ -412,7 +416,7 @@ function watchFocus() {
     if (_blurred) {
       _blurred = false;
       // startAnimating();
-      controls.freeze = false;
+      // controls.freeze = false;
     }
   });
   window.addEventListener('blur', function() {

package.json

@@ -1,6 +1,6 @@
 {
     "name": "three.terrain.js",
-    "version": "1.3.0",
+    "version": "1.4.0",
     "description": "Extends the Three.js web-based 3D graphics framework to support generating random terrains and rendering terrain from predetermined heightmaps.",
     "homepage": "https://github.com/IceCreamYou/THREE.Terrain",
     "bugs": "https://github.com/IceCreamYou/THREE.Terrain/issues",

roadmap.md

@@ -1,14 +1,8 @@
-## 1.x
-
-The steps filter seems to be misbehaving
-Make the custom shader(s) scalable https://twitter.com/VMA3D/status/562631211752112128
-Update the analytics docs page
-
-
 ## 2.0
 
 Make the API more consistent: naming (e.g. use "elevation" instead of "height"), capitalization, method and property grouping
 Write documentation that's not in the code
+Minify JS in /src that isn't included in the main bundle
 Fix Smoothing to use a smoothing factor (a multiplier for how close the point should move to the average) instead of a weight for the target point
 Add the ability for Smoothing to look in a broader neighborhood, not just the immediately surrounding 8 points
 Implement helper functions to convert from a 1D Vector3 array to/from a 1D and 2D float array, and convert the generator and filter functions to operate on those

src/materials.js

@@ -36,9 +36,16 @@
  *   rendered.
  */
 THREE.Terrain.generateBlendedMaterial = function(textures) {
+    // Convert numbers to strings of floats so GLSL doesn't barf on "1" instead of "1.0"
+    function glslifyNumber(n) {
+        return n === (n|0) ? n+'.0' : n+'';
+    }
+
     var uniforms = THREE.UniformsUtils.merge([THREE.ShaderLib.lambert.uniforms]),
         declare = '',
-        assign = '';
+        assign = '',
+        t0Repeat = textures[0].texture.repeat,
+        t0Offset = textures[0].texture.offset;
     for (var i = 0, l = textures.length; i < l; i++) {
         // Uniforms
         textures[i].wrapS = textures[i].wrapT = THREE.RepeatWrapping;
@@ -54,16 +61,16 @@ THREE.Terrain.generateBlendedMaterial = function(textures) {
         if (i !== 0) {
             var v = textures[i].levels, // Vertex heights at which to blend textures in and out
                 p = textures[i].glsl, // Or specify a GLSL expression that evaluates to a float between 0.0 and 1.0 indicating how opaque the texture should be at this texel
-                useLevels = typeof v !== 'undefined'; // Use levels if they exist; otherwise, use the GLSL expression
+                useLevels = typeof v !== 'undefined', // Use levels if they exist; otherwise, use the GLSL expression
+                tiRepeat = textures[i].texture.repeat,
+                tiOffset = textures[i].texture.offset;
             if (useLevels) {
                 // Must fade in; can't start and stop at the same point.
                 // So, if levels are too close, move one of them slightly.
                 if (v[1] - v[0] < 1) v[0] -= 1;
                 if (v[3] - v[2] < 1) v[3] += 1;
-                // Convert levels to floating-point numbers as strings so GLSL doesn't barf on "1" instead of "1.0"
                 for (var j = 0; j < v.length; j++) {
-                    var n = v[j];
-                    v[j] = n === n|0 ? n+'.0' : n+'';
+                    v[j] = glslifyNumber(v[j]);
                 }
             }
             // The transparency of the new texture when it is layered on top of the existing color at this texel is
@@ -73,12 +80,13 @@ THREE.Terrain.generateBlendedMaterial = function(textures) {
             var blendAmount = !useLevels ? p :
                 '1.0 - smoothstep(' + v[0] + ', ' + v[1] + ', vPosition.z) + smoothstep(' + v[2] + ', ' + v[3] + ', vPosition.z)';
             assign += '        color = mix( ' +
-                'texture2D( texture_' + i + ', MyvUv ), ' +
+                'texture2D( texture_' + i + ', MyvUv * vec2( ' + glslifyNumber(tiRepeat.x) + ', ' + glslifyNumber(tiRepeat.y) + ' ) + vec2( ' + glslifyNumber(tiOffset.x) + ', ' + glslifyNumber(tiOffset.y) + ' ) ), ' +
                 'color, ' +
                 'max(min(' + blendAmount + ', 1.0), 0.0)' +
                 ');\n';
         }
     }
+
     var params = {
         // I don't know which of these properties have any effect
         fog: true,
@@ -135,7 +143,7 @@ THREE.Terrain.generateBlendedMaterial = function(textures) {
 
             '    vec3 outgoingLight = vec3( 0.0 );', // outgoing light does not have an alpha; the surface does
             '    vec4 diffuseColor = vec4( diffuse, opacity );',
-            '    vec4 color = texture2D( texture_0, MyvUv ); // base',
+            '    vec4 color = texture2D( texture_0, MyvUv * vec2( ' + glslifyNumber(t0Repeat.x) + ', ' + glslifyNumber(t0Repeat.y) + ' ) + vec2( ' + glslifyNumber(t0Offset.x) + ', ' + glslifyNumber(t0Offset.y) + ' ) ); // base',
                 assign,
             '    diffuseColor = color;',
             // '    gl_FragColor = color;',