three.js(七) 绘制到WebGLRenderTarget

时间:2022-08-16 19:38:04

WebGLRenderTarget 是GPU 内部对象, 主要作用是存储绘制结果,通常绘制结果直接显示到屏幕上,但是也可以暂时存储在GPU内部,以便于再次利用。对于OpenGL 来讲, RenderTarget就是一个FrameBuffer, 在这个FrameBuffer之下附带有一个颜色buffer通常即是一个Texture,  还有一个renderBuffer 通常可以是存储深度浮点信息,或者其它浮点信息。    target = new THREE.WebGLRenderTarget(WINDOW_W*0.5, WINDOW_H);这里声明一个半个屏幕宽度, 整个高度的RenderTarget.接着在绘制场景的函数中:    renderer.setRenderTarget(target);    renderer.clear();    renderer.render(scene, camera, target);首先设定绘制目标,清理目标, 将场景绘制到目标上。接着我们就可以使用绘制的数据了, 例如最简单的是,将绘制的场景显示在另外一个场景中的某个平面上。    scene2 = new THREE.Scene();    m2 = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), new THREE.MeshBasicMaterial());    m2.rotation.x = -Math.PI/4;    m2.rotation.y = -Math.PI/4;    normalCamera = new THREE.PerspectiveCamera(90, WINDOW_W*0.5/WINDOW_H, 0.5, 2000);    normalCamera.position.z = 3;    scene2.add(normalCamera);    scene2.add(m2);这里构建另外一个场景, 场景中有一个平面, 平面的纹理是上面的绘制结果,    m2.material.map = target;    m2.material.map.needUpdate = true;接着将这个新场景绘制到屏幕上, 只需要设定绘制目标为null, 就可以了。    renderer.setRenderTarget(null);    renderer.clear();    renderer.render(scene2, normalCamera);这样就可以制作出类似于 显示器的效果了。