WebGL渲染缓冲区
阅读文章 WebGL从来都不是单缓冲的，这意味着当前渲染的图像永远不是当前显示在画布元素中的图像。这可确保半渲染帧永远不会显示在浏览器窗口中。正在渲染的图像称为WebGL帧缓冲区或backbuffer。WebGL还允许额外的屏幕外帧缓冲区，这使得谈论帧缓冲区变得更加复杂，但在本文中我们忽略这一点。当前显示的图像称为frontbuffer。当然，backbuffer的内容将在某个时候复制到frontbuffer中，否则WebGL图形将不会有用户可见的效果 我们当前渲染的图像从来都不是画布上显示的图像，这怎么可能呢WebGL渲染缓冲区,webgl,Webgl,阅读文章 WebGL从来都不是单缓冲的，这意味着当前渲染的图像永远不是当前显示在画布元素中的图像。这可确保半渲染帧永远不会显示在浏览器窗口中。正在渲染的图像称为WebGL帧缓冲区或backbuffer。WebGL还允许额外的屏幕外帧缓冲区，这使得谈论帧缓冲区变得更加复杂，但在本文中我们忽略这一点。当前显示的图像称为frontbuffer。当然，backbuffer的内容将在某个时候复制到frontbuffer中，否则WebGL图形将不会有用户可见的效果 我们当前渲染的图像从来都不是画布上显示的图
然后它还说，正在渲染的图像称为webGL帧缓冲区或backbuffer，正在显示的图像称为frontbuffer。有什么区别。有人能帮我解释一下这篇文章吗？很简单。制作WebGL画布时，它有两个缓冲区，drawingbuffer也称为backbuffer，displaybuffer也称为frontbuffer 您绘制到drawingbuffer 如果你在画布上画一些东西，意味着你叫gl.clear或gl.draw？？？将它们设置为渲染到画布时，浏览器会将画布标记为需要合成。当前事件退出后，下次浏览器合成页面时，会将drawingbuffer复制到displaybuffer，或者交换drawingbuffer和displaybuffer 这取决于浏览器和一系列其他因素。如果设置preserveDrawingBuffer:true，则它总是将DrawingBuffer复制到displaybuffer。如果preserveDrawingBuffer为false默认值，则交换或复制取决于浏览器和一系列其他因素，但无论如何，当preserveDrawingBuffer为false时，WebGL将在交换或复制后清除drawingbuffer，以便您无法分辨差异，因此无论选择哪种，结果都是相同的 它有两个缓冲区，因为浏览器希望能够并行运行。通过这种设计，它可以随时使用displaybuffer绘制页面，因为它包含上次渲染的结果。如果没有它，如果您只有drawingbuffer并再次开始绘制，并且浏览器同时将所有元素合成在一起，那么当最终使用它时，它可能会从drawingbuffer中获得半绘制图像 请注意，有两个缓冲区这一事实通常是可以忽略的。从编程WebGL的角度来看，实际上只有两个结果 如果preserveDrawingBuffer为false（默认值），则drawingbuffer将被清除，然后浏览器将合成页面。其效果是，每次更新时都需要绘制所有内容。你不能每一帧都画一点。如果您想看到3个圆，您需要在同一帧中绘制3个圆。这对于99%的游戏和99%的WebGL应用来说是正常的。在OpenGL、DirectX、Metal、Vulkan等系统中也是如此。在这些系统中编写的游戏也会在每一帧中绘制所有内容 如果要使用canvas.toDataURL或canvas.toBlob或gl.readPixels或任何其他方式从WebGL画布获取数据，除非您在同一事件中读取数据，否则在尝试读取数据时，它可能会被清除 换句话说，如果你这样做
function render() {
// draw stuff with WebGL
}
function renderLoop() {
render();
requestAnimationFrame(renderLoop);
}
someButton.addEventListener('click', () => {
// take screenshot
const screenshotDataURL = webglCanvas.toDataURL();
});
someButton.addEventListener('click', () => {
// !!! render in the click event
render();
// take screenshot
const screenshotDataURL = webglCanvas.toDataURL();
});
请参见示例。这非常简单。制作WebGL画布时，它有两个缓冲区，drawingbuffer也称为backbuffer，displaybuffer也称为frontbuffer 您绘制到drawingbuffer 如果你在画布上画一些东西，意味着你叫gl.clear或gl.draw？？？将它们设置为渲染到画布时，浏览器会标记为t 他画了一幅需要合成的油画。当前事件退出后，下次浏览器合成页面时，会将drawingbuffer复制到displaybuffer，或者交换drawingbuffer和displaybuffer 这取决于浏览器和一系列其他因素。如果设置preserveDrawingBuffer:true，则它总是将DrawingBuffer复制到displaybuffer。如果preserveDrawingBuffer为false默认值，则交换或复制取决于浏览器和一系列其他因素，但无论如何，当preserveDrawingBuffer为false时，WebGL将在交换或复制后清除drawingbuffer，以便您无法分辨差异，因此无论选择哪种，结果都是相同的 它有两个缓冲区，因为浏览器希望能够并行运行。通过这种设计，它可以随时使用displaybuffer绘制页面，因为它包含上次渲染的结果。如果没有它，如果您只有drawingbuffer并再次开始绘制，并且浏览器同时将所有元素合成在一起，那么当最终使用它时，它可能会从drawingbuffer中获得半绘制图像 请注意，有两个缓冲区这一事实通常是可以忽略的。从编程WebGL的角度来看，实际上只有两个结果 如果preserveDrawingBuffer为false（默认值），则drawingbuffer将被清除，然后浏览器将合成页面。其效果是，每次更新时都需要绘制所有内容。你不能每一帧都画一点。如果您想看到3个圆，您需要在同一帧中绘制3个圆。这对于99%的游戏和99%的WebGL应用来说是正常的。在OpenGL、DirectX、Metal、Vulkan等系统中也是如此。在这些系统中编写的游戏也会在每一帧中绘制所有内容 如果要使用canvas.toDataURL或canvas.toBlob或gl.readPixels或任何其他方式从WebGL画布获取数据，除非您在同一事件中读取数据，否则在尝试读取数据时，它可能会被清除 换句话说，如果你这样做
function render() {
// draw stuff with WebGL
}
function renderLoop() {
render();
requestAnimationFrame(renderLoop);
}
someButton.addEventListener('click', () => {
// take screenshot
const screenshotDataURL = webglCanvas.toDataURL();
});
someButton.addEventListener('click', () => {
// !!! render in the click event
render();
// take screenshot
const screenshotDataURL = webglCanvas.toDataURL();
});