TextureLoader return different data between node-three-gltf and threejs on transparent pixel

[misty000]

I load a png image with transparent pixel
threejs is 0,0,0,0

// three_r148/src/extras/ImageUtils.js after line 49
const context = canvas.getContext('2d')
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
console.log(imageData)
for (let i = 0; i < imageData.width * imageData.height; i++) {
	const r = imageData.data[i * 4]
	const g = imageData.data[i * 4 + 1]
	const b = imageData.data[i * 4 + 2]
	const a = imageData.data[i * 4 + 3]
	console.log(i, '--', r, g, b, a)
}

node-three-gltf is 255,255,255,0

const textureLoader = new TextureLoader()
const metalnessMap = await textureLoader.loadAsync('./assets/textures/metalness.png')
// metalnessMap.encoding = sRGBEncoding

if (metalnessMap?.source?.data) {
    const imageData = metalnessMap.source.data
    for (let i = 0; i < imageData.width * imageData.height; i++) {
        const r = imageData.data[i * 4]
        const g = imageData.data[i * 4 + 1]
        const b = imageData.data[i * 4 + 2]
        const a = imageData.data[i * 4 + 3]
        console.log(i, '--', r, g, b, a)
    }
}

image.zip

[misty000]

I try node-canvas
the result is same as html-canvas

import {Canvas, loadImage} from "canvas";

let image = await loadImage('./assets/textures/metalness.png');
const {width, height} = image

const canvas = new Canvas(width, height)
const ctx = canvas.getContext('2d')
ctx.drawImage(image, 0, 0, width, height)

const imageData = ctx.getImageData(0, 0, width, height)

for (let i = 0; i < width * height; i++) {
    const r = imageData.data[i * 4]
    const g = imageData.data[i * 4 + 1]
    const b = imageData.data[i * 4 + 2]
    const a = imageData.data[i * 4 + 3]
    console.log(i, '--', r, g, b, a)
}

[misty000]

what is the reason for replacing jimp with sharp?

[Brakebein]

The ImageLoader here uses sharp to load any images/textures. Did you also test your file directly with sharp? It should be something like this:

const data = await sharp('./assets/textures/metalness.png').raw().toBuffer();

for (let i = 0; i < width * height; i++) {
    const r = data[i * 4]
    const g = data[i * 4 + 1]
    const b = data[i * 4 + 2]
    const a = data[i * 4 + 3]
    console.log(i, '--', r, g, b, a)
}

The reason for replacing jimp with sharp is that sharp is much smaller in size and faster than jimp. There were also some vulnerabilities with some dependencies of jimp (which may be resolved by now jimp-dev/jimp#1088). The overall maintainance of the sharp package also seems to be better. So, there are several reasons I switched to sharp, and so far, my experiences are pretty well (also in my other projects).

[misty000]

Thanks for your reply.

Yes, I tested sharp directly loading images and the results are also "255 255 255 0"

The reason I ask this question is:
I'm trying to get GLTFExporter to work in nodejs, One method is to extract the blue and green channels of the metalnessMap and the roughnessMap, merged into one image.

The original version uses canvas, and the channel value of transparent pixels is 0. But sharp version is 255. cause the result to be wrong.

But I can't use node-canvas at the same time, it conflicts with sharp under windows, and the packing volume is too large.

[misty000]

Also, I use jimp to achieve the result I want, but I don't know how to do it with sharp.

const image0 = await Jimp.read('./assets/textures/metalness.png')

let imageData = image0.bitmap
const background0 = new Jimp(imageData.width, imageData.height, 0x00000000)
background0.blit(image0, 0,0)
imageData = background0.bitmap

for (let i = 0; i < imageData.width * imageData.height; i++) {
    const r = imageData.data[i * 4]
    const g = imageData.data[i * 4 + 1]
    const b = imageData.data[i * 4 + 2]
    const a = imageData.data[i * 4 + 3]
    console.log(i, '--', r, g, b, a)
}

[misty000]

This might solve my problem.

const data2 = await sharp({
        create: {
            width: 4,
            height: 4,
            channels: 4,
            background: '#00000000' // {r:0, g: 0, b: 0, alpha: 0}
        }
    })
    .composite([
        {input: './assets/textures/metalness.png'}
    ])
    .raw()
    .toBuffer()

for (let i = 0; i < 16; i++) {
    const r = data2[i * 4]
    const g = data2[i * 4 + 1]
    const b = data2[i * 4 + 2]
    const a = data2[i * 4 + 3]
    console.log(i, '--', r, g, b, a)
}

[Brakebein]

Maybe you can open an isssue at the sharp repository. That the channel values of an transparent pixel load differently may not be an intended behavior.

[misty000]

I found a way to solve this problem

let s6 = await sharp('./assets/textures/metalness.png')
    .ensureAlpha()
s6 = await s6.metadata()
    .then(meta => {
        return s6
            .raw()
            .toBuffer()
            .then(buf => {
                return sharp(buf, {
                    raw: {
                        width: meta.width,
                        height: meta.height,
                        channels: meta.channels,
                        premultiplied: true, // !!!
                    }
                })
            })
    })

const d6 = await s6.raw().toBuffer()
console.log('d6')
dump(d6)

I didn't find a direct way, I have submitted the issue in the sharp repository