GPGPU examples do not work on iOS Safari or Chrome

Description of the problem
[Warning] WebGL: INVALID_FRAMEBUFFER_OPERATION: clear: framebuffer not complete (three.js, line 19838)
[Warning] WebGL: INVALID_FRAMEBUFFER_OPERATION: drawElements: framebuffer not complete (three.js, line 16994)

This is happening in the GPGPU examples and in my own project (see jons.website/projects/reaction-diffusion), which uses the latest build, indicating that whatever problem this is spans multiple versions of Three. It seems to me that the problem is related to the use of floating-point textures, but my knowledge ends there.

The problem is that the things the shaders do in these examples (i.e. forming the waves in the water example) don’t seem to take, and it will repeatedly spit out the two errors above.

I could reproduce this on an iPad (9.3.3), iPhone 6 (9.0.2), and iPhone 6s (9.3.4), using both Chrome and Safari. I do not know if this affects Android, but it seems likely.

Three.js version
  • Dev
  • r80
Browser
  • All of them
  • Chrome
  • Firefox
  • Internet Explorer
OS
  • All of them
  • Windows
  • Linux
  • Android
  • IOS
Hardware Requirements (graphics card, VR Device, …)

Any device with iOS 8.0+, most likely

Author: Fantashit

1 thought on “GPGPU examples do not work on iOS Safari or Chrome

  1. I think that one works (if briefly) because it isn’t using floating point render textures. In contrast, the GPGPU examples use GPUComputationRenderer, which reads from and renders to float textures.

    Most platforms properly report that they can read from float render textures using OES_texture_float. If you want to know whether you can render to a float texture, you look for WEBGL_color_buffer_float; however, to my knowledge there are very few platforms that report WEBGL_color_buffer_float, even if the hardware supports it. This behavior is what caused my confusion.

    From what I’m reading, WEBGL_color_buffer_float probably isn’t going to gain wider support. Instead, WebGL 2.0 is going to replace it with an extension called EXT_color_buffer_float that should (should) do the same thing but have wider support from browsers.

    The core problem isn’t Three’s fault, but perhaps something could be done to throw an error on unsupported platforms? The technique I’m aware of for checking for float texture render support is to set up a simple scene and try to render it into a texture, which would kind of look like the following:

    //Set up a scene, renderer, and camera beforehand
    var renderTarget = new THREE.WebGLRenderTarget(16, 16, {
                format: THREE.RGBAFormat,
                type: THREE.FloatType
    });
    renderer.render(scene, camera, renderTarget);
    var gl = renderer.context;
    var status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
    if (status !== gl.FRAMEBUFFER_COMPLETE) {
        return false;
    }
    return true;
    

Comments are closed.