Raw GSLS to extend material color in mesh, creating jagged forms instead of smooth

I extended the material color of my mesh to map the color according to its heightmap, as seen here:


The problem I am having, is getting the mesh to clip smoothly like it used to and have it be smooth as well:

(Notice how the mesh used to be: http://syracusesafelight.herokuapp.com/ - In order to see it click the “Hide/Show Crime Level” button in the right hand side. )

It seems like the jagedness may be because of : “THREE.WebGLRenderer: image is not power of two (1560x969)”. How can I regenerate the texture as a power of two? Say 1024x512 resolution. Is there a way for three.js to resize automatically, yet accurately?

This is the dismap image:

Is the interpolation set to linear for the displacement texture? You should provide textures in power of 2 in the first place, i don’t know the source you get it from, but if it is a static file just resize it.

But Three.js resizes textures for long time already. At least 10 last releases.

three.js already re-scaled the texture. and it gave the jagged result.