Repeating a bump map
bump-mapping, javascript, three.js, webgl
Solution
If you want a texture to repeat, it's size in pixels in each dimension must be a power of two ( e.g., 512 x 256 ).
If you have a diffuse `map` and a `bumpMap`, they must have the same `offset/repeat` settings. See for example this answer.
three.js r.55
Problem
I'm trying to apply a bump map to a plane to create a vaguely felt-like surface using Three.js r55. Here's my code: ``` var mapHeight = THREE.ImageUtils.loadTexture("images/felt.png"); mapHeight.repeat.set(2, 2); mapHeight.wrapS = mapHeight.wrapT = THREE.RepeatWrapping; mapHeight.format = THREE.RGBFormat; var groundMaterial = new THREE.MeshPhongMaterial({ ambient: 0x008800, color: 0x008800, specular: 0x888888, shininess: 25, bumpMap: mapHeight, bumpScale: 10, metal: false } ); scene.add(new THREE.Mesh(new THREE.PlaneGeometry(0.3, 0.3), groundMaterial)); ``` Notice how I set the texture to repeat twice along x/y axes. However what I'm seeing only applies the texture in one quadrant: I would expect this with clamp/repeat wrapping (or whatever it's called) but I've requested `RepeatWrapping` here. How can I have the bump map correctly repeat an arbitrary number of times on the plane. EDIT - Full Code I set about making a simple reproduction case. This is pretty minimal and reproduces the image below (from a slightly different camera angle.) The output has the identical problem. ``` <!DOCTYPE html> <html> <head> <script src="scripts/libs/three.min.js" type="text/javascript"></script> </head> <body> <div id="scene-container"></div> <script> init(); function init() { var camera, scene, renderer; scene = new THREE.Scene(); scene.add( new THREE.AmbientLight( 0x555555 ) ); var light = new THREE.DirectionalLight( 0x555555 ); light.position.set( 0, 0, 10 ); scene.add( light ); var bumpMapTexture = THREE.ImageUtils.loadTexture( "images/felt.png", undefined, function () { requestAnimationFrame( function () { // render once texture has loaded renderer.render( scene, camera ); } ); } ); bumpMapTexture.repeat.set( 2, 2 ); bumpMapTexture.wrapS = bumpMapTexture.wrapT = THREE.RepeatWrapping; var groundMaterial = new THREE.MeshPhongMaterial( { ambient: 0x00AA00, color: 0x00AA00, bumpMap: bumpMapTexture } ); scene.add( new THREE.Mesh( new THREE.PlaneGeometry( 3, 3 ), groundMaterial ) ); camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.01, 100000 ); camera.position.set( 0, 0, 3 ); camera.lookAt( new THREE.Vector3( 0, 0, 0 ) ); renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setSize( window.innerWidth, window.innerHeight );// renderer.render(scene, camera); document.getElementById( 'scene-container' ).appendChild( renderer.domElement ); } </script> </body> </html> ``` This links to Three.js r55 (minified). Any help appreciated.