Skip to content

strange canvas output if graphical is true on chrome for android #521

@philolt

Description

@philolt

What is wrong?

I tried to run your yellifish canvas direct draw example on my mobile phone (Samsung Galaxy S7) with latest Android updates. If CPU mode is enabled everything works like expected (slow). If I enable the GPU the output is shuffled. It seems like the texture coordinates are shifted.
expected (cpu):
screenshot_1
observed (gpu):
screenshot

I tried another example where an color gradient is drawn directly to the canvas. Same behavior on this specific device.
expected (cpu):
screenshot_2
observed (gpu):
screenshot_3

Where does it happen?

Chrome for Android on my Samsung Galaxy S7. Didn't try another Android Device. Can try it tomorrow. Linux Desktop works like expected.

How do we replicate the issue?

If you have such a device, you can use the Yellifish Video example. Or you can use the second example below:

<!DOCTYPE html>
<meta charset="utf-8">

<body>
<script src="js/gpu.js"></script>
<script>
const gpu = new GPU({mode: "gpu"});
const render = gpu.createKernel(function(x) {
  this.color(this.thread.x/500, this.thread.y/500, x[0]);
})
  .setOutput([500, 500])
  .setGraphical(true)
render([0.4])
const canvas = render.canvas;
document.getElementsByTagName('body')[0].appendChild(canvas);
</script>

How important is this (1-5)?

5 (my subjective importance) because I cannot use gpu.js for my project with this behaviour. I want to apply video effects to the device camera. Without this behaviour the performance of gpu.js would be great for this project. It is an awesome library! Thanks for that! :)

Expected behavior (i.e. solution)

There seems to be an anomaly in the canvas output of this (maybe more) devices. It is not the input because of the second test (computed output). It seems like there is a special planar color space in the output texture, so that the uv-mappings doesn't apply to this device (only a slight guess). I have tried other THREE.js video texture examples on this device to proof it is possible and no hardware related problem. The examples i found worked like expected.

Other Comments

Thank you for this great library!

Metadata

Metadata

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions