Create a standard chart with a colored map using Three.js

Question

Create a standard chart with a colored map using Three.js

Recently, I dove into the world of Three.js and found myself on a mission to convert a color map into a normal map. My goal is to create a normal map similar to [image 2], based on the color map shown in [image 1]. Instead of simply uploading files, I wanted to find a way to achieve this without adding unnecessary weight to the project. Here's what I've experimented with so far:

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 = "rgba(200, 0, 0, 0)";
    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<d.length; i+=4) {
        let r = d[i];
        let g = d[i+1];
        let b = d[i+2];

        v1 = r < 75 ? r / (50 - r) : r * (255 - r);
        v2 = g > 75 ? g / (50 - g) : g * (255 - g);
        v3 = b > 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);
}

javascript three.js

Answer 1

Answer №1

I have limited knowledge about Three.js, but from what I do know, it simplifies the process of integrating 3D assets with canvases effortlessly.

On another note, I have developed a pure JavaScript function that effectively generates normal maps from color maps. This function was originally created in C# for winforms about 4 years ago and has been ported to JavaScript. It employs a recursive algorithm to extract the necessary data for conversion, resulting in slow processing speed due to the intricacy involved in obtaining high-quality normal maps.

Despite the slow processing speed, the function produces clean and precise normal maps from given color maps, offering a straightforward understanding of its functionality.

I have provided a live demo for you to observe the function in action.

While there are faster solutions available for pixel data manipulation, the method I implemented utilizes nested recursion to showcase the Sobel algorithm and pixel manipulation effect, enabling a clear demonstration of normalization.

Asynchronous updates have not been included in this implementation, so you will be alerted to the processing by a change in the cursor icon while the map generation is in progress.

Additionally, I have included four variations of the original image within the code, with three out of four variants commented out. The application begins at a 256x256 scale for a reasonable processing time. The sizes range from 128 to the original 1024, although I recommend avoiding the full-scale version as it may cause operation delays in your browser.

Similar to the C# version, users can control the intensity of the resulting normal calculations by adjusting the brightness parameters. This functionality could serve as a foundation for generating real-time normal maps applied to geometries within Three.js, offering a visualization of the mapping process.

Below is a screenshot of the results obtained after processing the 256x256 image:

https://i.sstatic.net/pouSE.png

To complement the live demo, here is the code provided:

normalize.htm

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Normalizer</title>
<link rel="stylesheet" href="css/normalize.css">
</head>
<body onload="startup()">
    <canvas id="input" class="canvas"></canvas>
    <canvas id="output" class="canvas"></canvas>
    <div class="progress">
        <input type="button" class="button" onclick="totallyNormal()" value="Normalize!" />
        <span id="progress">Ready to rock and / or roll on your command!</span>
    </div>
    <script src="js/normalize.js"></script>
</body>
</html>

normalize.css

  html {
    margin: 0px;
    padding: 0px;
    width: 100vw;
    height: 100vh;
  }

  // Additional CSS code continues...

normalize.js

// JavaScript code for the Normal Map Generator
// Implementation by Brian "BJS3D" Spencer
// Incorporating W3C-proposed algorithm for pixel brightness calculation with the Sobel Operator.

// Further code continues...

Answer 2