Three.js帧缓冲区(.render()两次渲染结果叠加)

执行渲染器WebGLRenderer的渲染方法.render(),本质上就相当于调用WebGL绘制函数gl.drawArrays(),每执行一次渲染方法.render()帧缓冲区都会得到新的片元(像素)数据,覆盖帧缓冲区原来的像素数据,或者说每执行一次渲染方法.render(),canvas画布更新一次,canvas画布上上次执行.render()得到像素被覆盖。

//取消Threejs帧缓冲区数据自动清除功能 renderer.autoClear = false; //渲染函数 function render() { //每次调用render()函数的时候,把上次调用render()执行两次.render()叠加的帧缓冲区数据清除 renderer.clear() // 渲染一帧图像 renderer.render(scene, camera); // 再次执行.render()方法得到一帧图像,和上一帧的像素数据叠加 renderer.render(scene2, camera); requestAnimationFrame(render); mesh.rotateX(0.01) } render();

.autoClear属性

Threejs渲染器WebGLRenderer.autoClear属性默认值true,也就是每次执行渲染方法.render(),canvas画布上对应帧缓冲区中的像素相关数据都会被覆盖,如果希望两次或多次执行渲染方法.render()得到的像素数据叠加,需要设置renderer.autoClear=false

.clear()方法

执行渲染器.clear()方法会把帧缓冲区颜色、深度、模板三个缓冲区中数据全部清除。

.clearColor()方法

执行渲染器.clearColor()方法清除颜色缓冲区中像素数据

.clearDepth()方法

执行渲染器.clearDepth()方法清除深度缓冲区中片元深度数据

.clearStencil()方法

执行渲染器.clearStencil()方法清除模板缓冲区中模板数据

【END】

本文链接:

版权声明:本博客所有文章除声明转载外,均采用 BY-NC-SA 3.0 许可协议。转载请注明来自 GhostCat

阅读 879 | 发布于 2021-12-10
暂无评论