我正在开发一个包含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();的调用,如果我删除了这个调用,那么根本就没有渲染,这是非常奇怪的。
非常感谢任何帮助