Colors apear as black on android but works on desktop

Questions
, ,
1

so i have this function to change the color of a material in a 3d model, this works on desktop, but i dont know why on mobile the colors are aways black

function changeColor(node,mat_name,colors){
	const rgb = hexToRGB(colors);

	var tempCanvas = document.createElement('canvas');
	var tempCtx = tempCanvas.getContext('2d');
	tempCanvas.width = 256;
	tempCanvas.height = 256;
	tempCtx.fillStyle = 'rgb(.5, .5, .5)';
	tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);
	var canvasTexture = new THREE.CanvasTexture(tempCtx.canvas);
	canvasTexture.name = mat_name + colors;
	node.material.map = canvasTexture;
	node.material.color.r = rgb.r;
	node.material.color.g = rgb.g;
	node.material.color.b = rgb.b;

        node.material.emissiveIntensity = 0;
	node.material.needsUpdate = true;
}
2

:thinking: Can you try like this…

function changeColor(node,mat_name,colors){
	const rgb = hexToRGB(colors);

	var tempCanvas = document.createElement('canvas');
	var tempCtx = tempCanvas.getContext('2d');
	tempCanvas.width = 256;
	tempCanvas.height = 256;
	tempCtx.fillStyle = 'rgb(.5, .5, .5)';
	tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);
	var canvasTexture = new THREE.CanvasTexture(tempCanvas);
	canvasTexture.name = mat_name + colors;
	node.material.map = canvasTexture;
	node.material.color.setRGB(rgb) 
	
        node.material.emissiveIntensity = 0;
	node.material.needsUpdate = true;
}

Also if you enable developer mode on the Android device in question you should be able to enable USB debugging, connect the device up to the PC and access dev tools through chrome at chrome://inspect#devices

3

ty for the reply, i tried your suggestion, the desktop version started to give me the same problem, im using the developer mode do inspect the phone and i cant see any errors on the JavaScript and when i compare the console logs they are both equals on desktop and on the phone

this is a console log of the node.material.color before changing the color on desktop

changeColor - node.material.color 1 Color {isColor: true, r: 0.800000011920929, g: 0.800000011920929, b: 0.800000011920929}

this is after

changeColor - node.material.color 2 Color {isColor: true, r: 45, g: 45, b: 227}

and this is the same consoles on mobile
before

changeColor - node.material.color 1 Color {isColor: true, r: 0.800000011920929, g: 0.800000011920929, b: 0.800000011920929}

after

changeColor - node.material.color 2 Color {isColor: true, r: 45, g: 45, b: 227}

4

This color:

is practically black. In CSS the rgb() function takes arguments from 0 to 255. I’m not surprised that blending it with the main color of the object turns it black. I’m more surprised why it is not black on your desktop.

5

im not sure what was the problem but it got fixed

first update the fillStyle

tempCtx.fillStyle = ‘rgb(128, 128, 128)’;

an then add the divide by 255 on my function that converts hex to rgb

const r = parseInt(hex.slice(1, 3), 16) / 255;
const g = parseInt(hex.slice(3, 5), 16) / 255;
const b = parseInt(hex.slice(5, 7), 16) / 255;

so im not sure why this was not working but after these 2 changes the problem has been fixed