Three.js 帧缓冲区 .render() 两次渲染结果叠加 - 文章教程

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

发布于 2021-09-18 字数 1940 浏览 1087 评论 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()方法清除模板缓冲区中模板数据

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

浮生未歇

这个人比较懒,什么都没有填写!

11 文章
5 评论
17927 人气
更多

推荐作者

qq_iQVWB

文章 0 评论 0

gyhjy

文章 0 评论 0

dianjvnan

文章 0 评论 0