title: Generate a normal map with a color map in Three js
body: <p>I started learning Three js and I was looking for a way to convert a color map into a normal map. What I want to do is to try and make the normal map based on this color map <a href="https://i.stack.imgur.com/iyHMP.jpg" rel="nofollow noreferrer">[image 1]</a>, by changing the pixels based on their color so it looks like this normal map <a href="https://i.stack.imgur.com/GfIXe.jpg" rel="nofollow noreferrer">[image 2]</a>. I don't want to simply upload the files since I'm trying to minimize the weight of the project as much as possible. Here is what I already tried :</p>
  <pre><code>let img = new Image();
  
  img.src = './texture/color.jpg';
  img.onload = function () {
      let canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;
      document.getElementById('body').appendChild(canvas)
      const c = canvas.getContext('2d')
      c.clearRect(0, 0, canvas.width, canvas.height);
      c.fillStyle = '#EEEEEE';
      c.fillRect(0,0,canvas.width, canvas.height);
  
      //draw background image
      c.drawImage(img, 0, 0);
      //draw a box over the top
      c.fillStyle = &quot;rgba(200, 0, 0, 0)&quot;;
      c.fillRect(0, 0, canvas.width, canvas.height);
  
      draw(c, canvas);
  };
  
  
  function draw(c, canvas)
  {
  
  
      let img2 = c.getImageData(0, 0, canvas.width,canvas.height);
      console.log(img2.data)
      let d = img2.data;
      for (let i=0; i&lt;d.length; i+=4) {
          let r = d[i];
          let g = d[i+1];
          let b = d[i+2];
  
          v1 = r &lt; 75 ? r / (50 - r) : r * (255 - r);
          v2 = g &gt; 75 ? g / (50 - g) : g * (255 - g);
          v3 = b &gt; 75 ? b / (50 - b) : b * (255 - b);
  
          d[i] = v1;
          d[i+1] = v2;
          d[i+2] = v3;
      }
      console.log(img2.data)
      c.putImageData(img2, 0, 0);
  }
  </code></pre>