How to generate a png or jpg image from a Uint8Array array of rgb values with node.js?

Question

I'm creating procedural planet textures for my space simulator, and the output that I end up with is a Uint8Array of RGB values, like so [255, 255, 255, 100, 200, 50] .

With three.js you can convert these values into a texture with the THREE.DataTexture class, but generating them in run time is rather slow if you want high-resolution textures, so I would like to produce the textures with node.js so that I can use them like I would any other texture.

Could anyone shed some light on how I could achieve the above? Ideally, I'd like the output to be either a jpg or png image.

Answer 1

jpeg-js is JavaScript JPEG encoder and decoder for node.js . This allows you to create JPG files from Buffer objects via jpeg.encode() . You can create the Buffer instance like so:

const data = new Uint16Array(6);

arr[0] = 255;
arr[1] = 255;
arr[2] = 255;
arr[3] = 100;
arr[4] = 200;
arr[5] = 50;

const buffer = Buffer.from( data );