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

发布于 2021-09-18 09:05:13 字数 1523 浏览 1786 评论 0

如果你对原生 WebGL 有一定的了解,对帧缓冲区的概念应该是不陌生的。Three.js 的渲染器 WebGLRenderer 本质上是原生 WebGL API 的封装,通过 Three.js 的渲染器对象可以对 WebGL 底层进行控制。

执行渲染器 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()方法清除模板缓冲区中模板数据

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

浮生未歇

暂无简介

文章
评论
18381 人气
更多

推荐作者

微信用户

文章 0 评论 0

小情绪

文章 0 评论 0

ゞ记忆︶ㄣ

文章 0 评论 0

笨死的猪

文章 0 评论 0

彭明超

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文