Three.js: readRenderTargetPixels broken on Safari

[luruke]

.readRenderTargetPixels seems broken on Safari.

Error: WebGL: INVALID_ENUM: readPixels: invalid type

The bug can be reproduced on the official example: https://threejs.org/examples/webgl_read_float_buffer.html

Three.js version

• [ ] Dev
• [x] r101
• [ ] ...

Browser

• [ ] All of them
• [ ] Chrome
• [ ] Firefox
• [ ] Internet Explorer
• [x] Safari 11.1.1

OS

• [ ] All of them
• [ ] Windows
• [x] macOS
• [ ] Linux
• [ ] Android
• [ ] iOS

Hardware Requirements (graphics card, VR Device, ...)

[luruke]

I haven't had time to debug it, but it seems to affect also Safari iOS

[luruke]

(In my specific case, I've fixed using UnsignedByteType instead of FloatType)

[aardgoose]

Only unsigned byte is guaranteed by the WebGL spec.

https://www.khronos.org/registry/webgl/specs/latest/1.0/index.html#readpixels

The implementation specific format checks obviously don't catch the Safari case.

https://github.com/mrdoob/three.js/blob/37bbe4e749843c50d4ff79db6f73e43ad6d31895/src/renderers/WebGLRenderer.js#L2581

[Mugen87]

The problem is that renderer.extensions.get( 'OES_texture_float' ) returns not null in Safari. So when using a float texture, the entire if statements evaluates to false.

BTW: Just executing the following code in the example returns 0 in Safari.

const gl = renderer.context;
console.log( gl.getParameter( gl.IMPLEMENTATION_COLOR_READ_TYPE ) );

In Chrome and Firefox, the value 5121 is logged which means UNSIGNED_BYTE. What does actually 0 mean?

[aardgoose]

Is this a recent breakage with Safari, or Three? I'm surprised this issue hasn't been raised before.

Incidentally the documentation for readRenderTargetPixels() only suggests float buffers are accepted as destinations when the reality is somewhat different.

After a quick search It looks like the Safari behaviour has been around awhile now.

https://bugs.webkit.org/show_bug.cgi?id=171432

[Mugen87]

Um, since this is obviously a browser issue, I would prefer to leave the code as it is. There is already a bug report after all.

Incidentally the documentation for readRenderTargetPixels() only suggests float buffers are accepted as destinations when the reality is somewhat different.

You mean the documentation of three.js? I can't find the mentioned section.

https://threejs.org/docs/index.html#api/en/renderers/WebGLRenderer.readRenderTargetPixels

[aardgoose]

Sorry, I was misreading the type annotation in the three docs.

I think the Khronos WebGL 1.0 spec is potentially ambiguous, it guarantees unsigned byte is supported and a potentially source dependent implementation specific type/format. So supporting float isn't a given and I suspect the getParameter() result of 0 indicates no second format support. The spec doesn't say 'must' or 'should'.

I think it is probably worth documenting that unsigned byte/RGBA is the only combination universally supported?

[Mugen87]

I think it is probably worth documenting that unsigned byte/RGBA is the only combination universally supported?

Sounds good.

[Mugen87]

Closing. This needs to be fixed in Safari.

[Mugen87]

Hey, it looks like they are already working on a fix 🎉

https://bugs.webkit.org/show_bug.cgi?id=171432#c3