React Native Webgl Flickering

时间:2018-04-07 21:20:05

标签: reactjs react-native webgl

我正在开发一个包含WebGL部分的React Native应用程序,使用React Native WebGL(https://github.com/react-community/react-native-webgl

渲染时出现闪烁问题。我怀疑这是与RN WebGL使用的WebGLView中的缓冲区交换以及设备的实际帧缓冲区有关的问题。

查看RN WebGL GitHub页面上的示例,它们似乎都不能正确地实现渲染,而不仅仅是单帧,或使用第三方库,如Three.js。

我正在使用requestAnimationFrame()来安排下一帧渲染,并使用gl.flush()和rngl.endFrame()结束我的帧更新。

以下是我更新每个框架的简化代码。

const update = () => {
        this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
        this.gl.viewport(0, 0, this.gl.drawingBufferWidth, this.gl.drawingBufferHeight);

        this.shader.Bind(this.gl);

        let p = this.shader.GetAttribLocation(this.gl, "p");
        if (p > -1) {
            this.gl.enableVertexAttribArray(p);
            this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffer);
            this.gl.vertexAttribPointer(p, 2, this.gl.FLOAT, false, 0, 0);
        }

        // Draw entities
        this.gl.drawArrays(this.gl.TRIANGLES, 0, 6);

        this.gl.getError(); // Removing this prevents any rendering at all....
        this.gl.flush();
        this.rngl.endFrame();
        this.requestId = requestAnimationFrame(update);
    };

可以在此处看到闪烁的视频:https://www.youtube.com/watch?v=_IyMMfnXVFo

如代码中所述,有一个gl.getError();的调用,如果我删除了这个调用,那么根本就没有渲染,这是非常奇怪的。

非常感谢任何帮助

0 个答案:

没有答案