Render fails on pixel phones

[elbamos]

Description of the problem

My app works on all browsers and equipment we've tried it on with the exception of pixel phones. On pixel phones, we get an error on the first call to render, with this stack trace:

texImage2D    @    three.js:19999
setupFrameBufferTexture    @    three.js:20738
setupRenderTarget    @    three.js:20915
WebGLRenderer.setRenderTarget    @    three.js:24430
WebGLRenderer.render    @    three.js:23129
render    @    RenderPass.js:51
render    @    EffectComposer.js:88

I'm not sure which portions of the code would be helpful in tracking this down?

Three.js version

• r97
• r94

Browser

• All of them
• Chrome
• Firefox
• Internet Explorer

OS

• All of them
• Windows
• macOS
• Linux
• Android
• iOS

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

Pixel Phone

[mrdoob]

I use a pixel phone on a daily basis and none of the examples give that error. Please, provide sample code that gives the error.

[Mugen87]

I use a pixel phone on a daily basis and none of the examples give that error.

Same here^^.

[mrdoob]

Closing for now.

[elbamos]

I was able to track it down to this line:

renderer.setPixelRatio( window.devicePixelRatio );

in case anyone else experiences the issue.

[mrdoob]

I was able to track it down to this line:

renderer.setPixelRatio( window.devicePixelRatio );

That is misleading.

Can you please provide a jsfiddle showing the issue?

[elbamos]

To be frank, I'm not a JS developer. I'm a data scientist. I only know what JS I needed to complete this project - probably a bit less than that. Haven't a clue how to make a jsfiddle.

I can tell you that in my app, I periodically change the viewport aspect ratio. In order for OutlinePass and FXAAShader to work correctly when I do that, following advice I found somewhere on the web, I periodically call

aa.uniforms['resolution'].value.set(1 / (window.innerWidth * dpr), 1 / (window.innerHeight * dpr));
highlight.resolution.set(width * dpr, height * dpr)

where aa is the ShaderPass encapsulating the FXAAShader, and highlight is the OutlinePass.

I was therefore also calling renderer.setPixelRatio( window.devicePixelRatio ); when I create the renderer.

What appeared to be happening when I looked through the debugger, is that in the call to render on the pixel phone, WebGLRenderer thought it had a 3000x5000 viewport, which it then rejected.

In my new code, I assume that the pixel ratio is 1 on android devices. It now renders correctly on ordinary ratio-1 screens, on Apple devices with retina, and also on Pixel Phones with a 3.5 pixel ratio.

Does that help?

[mrdoob]

Definitely helps. Without that context, other users would just blindly remove setPixelRatio().