three.js中帧缓存的使用
1. 概述
在网上查阅了一下three.js关于帧缓存的使用,感觉很多都是关于three.js中后处理通道的使用的。后处理通道确实使用FBO实现的,但其实我就是想获取某个时刻的渲染结果作为纹理,没必要在动态渲染中进行后处理。真正实现这个功能的是WebGLRenderTarget这个类,这是一个渲染目标的缓冲区,可以装载到WebGLRenderer中进行渲染,再从WebGLRenderTarget获取纹理对象。
2. 示例
2.1. 代码
废话不多说,直接给出代码:
'use strict';
function init() {
var scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000); //场景的背景色
// create a camera, which defines where we're looking at.
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// position and point the camera to the center of the scene
camera.position.set(0, 0, 60); //相机的位置
camera.up.set(0, 1, 0); //相机以哪个方向为上方
camera.lookAt(new THREE.Vector3(0, 0, 0)); //相机看向哪个坐标
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xffffff, 1); //渲染器的背景色
document.body.appendChild(renderer.domElement);
//缓存场景
var bufferScene = new THREE.Scene();
//渲染目标缓冲区
var bufferTexture = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight);
// create the ground plane
var fboGeometry = new THREE.PlaneGeometry(60, 30);
var fboMaterial = new THREE.MeshBasicMaterial({
color: 0xAAAAAA
});
var fboPlane = new THREE.Mesh(fboGeometry, fboMaterial);
// add the plane to the scene
bufferScene.add(fboPlane);
//渲染到目标缓冲区
renderer.setRenderTarget(bufferTexture);
renderer.render(bufferScene, camera);
//渲染到屏幕
renderer.setRenderTarget(null);
// create the ground plane
var planeGeometry = new THREE.PlaneGeometry(60, 30);
var planeMaterial = new THREE.MeshBasicMaterial({
map: bufferTexture.texture //获取渲染目标缓冲区中的纹理
});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
scene.add(plane);
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();
}
其运行的结果如下:
2.2. 解析
渲染的结果出现了三个颜色部分:黑色区域,白色区域,以及灰色区域。对照代码来说,渲染器的清空色(背景色)是白色的:
renderer.setClearColor(0xffffff, 1); //渲染器的背景色
但是由于给当前的场景根节点设置背景色为黑色:
scene.background = new THREE.Color(0x000000); //场景的背景色
所以最外层的部分是黑色。
场景根节点中绘制了一个面:
// create the ground plane
var planeGeometry = new THREE.PlaneGeometry(60, 30);
var planeMaterial = new THREE.MeshBasicMaterial({
map: bufferTexture.texture //获取渲染目标缓冲区中的纹理
});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
scene.add(plane);
这个面的材质纹理来自于自定义的喧嚷目标缓冲区,并且预先通过渲染器将缓存场景渲染到这个缓冲区中:
//缓存场景
var bufferScene = new THREE.Scene();
//渲染目标缓冲区
var bufferTexture = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight);
//...
//渲染到目标缓冲区
renderer.setRenderTarget(bufferTexture);
renderer.render(bufferScene, camera);
//渲染到屏幕
renderer.setRenderTarget(null);
在缓存场景中,通过同一个相机,也绘制了一个面,这个面的材质颜色是灰色的:
// create the ground plane
var fboGeometry = new THREE.PlaneGeometry(60, 30);
var fboMaterial = new THREE.MeshBasicMaterial({
color: 0xAAAAAA
});
var fboPlane = new THREE.Mesh(fboGeometry, fboMaterial);
// add the plane to the scene
bufferScene.add(fboPlane);
所以最里层的部分就是缓存场景绘制面,也就是灰色的。而这个缓存场景是通过同一个渲染器绘制的,也就是缓存场景剩余的部分,就会是渲染器的背景色,也就是白色了。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)