[Bug] Images show as blank or a gray square on Android devices.

[934556826]

Describe the Bug

Describe the Bug
Images show as blank or a gray square on Android devices.

Steps to Reproduce

Open the link in Chrome on Android device
Cornerstone3D 2.0 locally: https://www.cornerstonejs.org/live-examples/local.html
Use this test file
test.zip

The current behavior

Shows blank or gray square.

The expected behavior

Show the image.

OS

Android 12

Node version

18.17.6

Browser

Chorme 131.0.6778.81

[934556826]

https://www.cornerstonejs.org/live-examples/dicomimageloaderwadouri
choose JPEG Lossless, also reproduce this BUG

[daker]

Which phone is this ? i just tested it on a Pixel phone and it works

[934556826]

Which phone is this ? i just tested it on a Pixel phone and it works

HUAWEI Mate 9 Pro
HUAWEI P60

[daker]

Try to post the webgl report https://webglreport.com/ also try to connect the devtools to the phone to see the error trace https://developer.chrome.com/docs/devtools/remote-debugging?hl=zh-cn

[934556826]

Try to post the webgl report https://webglreport.com/ also try to connect the devtools to the phone to see the error trace https://developer.chrome.com/docs/devtools/remote-debugging?hl=zh-cn

1.webglreport all supports;
2.The following warnings were found through devtools debugging

Thanks for your help！

[934556826]

But using CPU rendering can render normally

[daker]

Not sure but i think OES_texture_float_linear extension is not available in your case, maybe this code needs to be updated

cornerstone3D/packages/core/src/init.ts

Lines 157 to 166 in e7fb3e7

	* Only IPhone IOS cannot render float textures right now due to the lack of support for OES_texture_float_linear.
	* So we should not use float textures on IOS devices.
	*/
	function canRenderFloatTextures(): boolean {
	if (!isIOS()) {
	return true;
	}
	return false;
	}

[abasb75]

Not sure but i think OES_texture_float_linear extension is not available in your case, maybe this code needs to be updated

cornerstone3D/packages/core/src/init.ts

Lines 157 to 166 in e7fb3e7

	* Only IPhone IOS cannot render float textures right now due to the lack of support for OES_texture_float_linear.
	* So we should not use float textures on IOS devices.
	*/
	function canRenderFloatTextures(): boolean {
	if (!isIOS()) {
	return true;
	}
	return false;
	}

i test it:

The result does not change.

[a809924143]

I am also troubled by this problem @daker Is there any other way to solve this problem？

[Steven-DD]

华为手机在WebGL 1.0支持上存在差异，缺失部分调用接口，不知道是不是全部的华为都不行，没试过，缺少OES_texture_float_linear这个插件的支持，调用的时候可以判断下是不是支持这个插件，不支持就用cpu渲染。

translated：HUAWEI mobile have differences in WebGL 1.0 support，missing some WebGL api.

const canvas = document.createElement("canvas");
const gl = canvas.getContext("webgl");
if (!gl) {
  console.log("WebGL not supported, falling back on experimental-webgl");
  gl = canvas.getContext("experimental-webgl");
}
if (!gl) {
  console.log("Your browser does not support WebGL");
}
const ext = gl.getExtension("OES_texture_float_linear");
if (!ext) {
  console.log("need OES_texture_float_linear");
  setConfiguration({
    rendering: {
      useCPURendering: true,
    },
  });

} else {
  console.log("support OES_texture_float_linear");
}

[abasb75]

华为手机在WebGL 1.0支持上存在差异，缺失部分调用接口，不知道是不是全部的华为都不行，没试过，缺少OES_texture_float_linear这个插件的支持，调用的时候可以判断下是不是支持这个插件，不支持就用cpu渲染。

translated：HUAWEI mobile have differences in WebGL 1.0 support，missing some WebGL api.

const canvas = document.createElement("canvas");
const gl = canvas.getContext("webgl");
if (!gl) {
  console.log("WebGL not supported, falling back on experimental-webgl");
  gl = canvas.getContext("experimental-webgl");
}
if (!gl) {
  console.log("Your browser does not support WebGL");
}
const ext = gl.getExtension("OES_texture_float_linear");
if (!ext) {
  console.log("need OES_texture_float_linear");
  setConfiguration({
    rendering: {
      useCPURendering: true,
    },
  });

} else {
  console.log("support OES_texture_float_linear");
}

i test your code and It had no effect. huwaei p50 supports OES_texture_float_linear. If the problem was from webgl support, Firefox should also have problem. but firefox has no problem in my case.

[Steven-DD]

华为手机在WebGL 1.0支持上存在差异，缺失部分调用接口，不知道是不是全部的华为都不行，没试过，缺少OES_texture_float_linear这个插件的支持，调用的时候可以判断下是不是支持这个插件，不支持就用cpu渲染。
translated：HUAWEI mobile have differences in WebGL 1.0 support，missing some WebGL api.

const canvas = document.createElement("canvas");
const gl = canvas.getContext("webgl");
if (!gl) {
  console.log("WebGL not supported, falling back on experimental-webgl");
  gl = canvas.getContext("experimental-webgl");
}
if (!gl) {
  console.log("Your browser does not support WebGL");
}
const ext = gl.getExtension("OES_texture_float_linear");
if (!ext) {
  console.log("need OES_texture_float_linear");
  setConfiguration({
    rendering: {
      useCPURendering: true,
    },
  });

} else {
  console.log("support OES_texture_float_linear");
}

i test your code and It had no effect. huwaei p50 supports OES_texture_float_linear. If the problem was from webgl support, Firefox should also have problem. but firefox has no problem in my case.

I first encountered this problem on another model huawei p40.

if not a plugin supports problem,what would it be that causes the problem, like the problem @934556826 having with the plugin

[abasb75]

华为手机在WebGL 1.0支持上存在差异，缺失部分调用接口，不知道是不是全部的华为都不行，没试过，缺少OES_texture_float_linear这个插件的支持，调用的时候可以判断下是不是支持这个插件，不支持就用cpu渲染。
translated：HUAWEI mobile have differences in WebGL 1.0 support，missing some WebGL api.

const canvas = document.createElement("canvas");
const gl = canvas.getContext("webgl");
if (!gl) {
  console.log("WebGL not supported, falling back on experimental-webgl");
  gl = canvas.getContext("experimental-webgl");
}
if (!gl) {
  console.log("Your browser does not support WebGL");
}
const ext = gl.getExtension("OES_texture_float_linear");
if (!ext) {
  console.log("need OES_texture_float_linear");
  setConfiguration({
    rendering: {
      useCPURendering: true,
    },
  });

} else {
  console.log("support OES_texture_float_linear");
}

i test your code and It had no effect. huwaei p50 supports OES_texture_float_linear. If the problem was from webgl support, Firefox should also have problem. but firefox has no problem in my case.

I first encountered this problem on another model huawei p40.

if not a plugin supports problem,what would it be that causes the problem, like the problem @934556826 having with the plugin

check this my comment : #1678

[934556826]

I tried using useCPURendering: true, and the images do appear to work. But it throws a lot of errors, especially in VolumeViewports; I've never seen these errors when using GPU rendering. Is everything working fine for you after using CPU rendering?