Question

我正在尝试重新创建淡化绘图缓冲区并留下绘制对象的轨迹的效果，而不是每帧清除它。这是一个非常简单的效果，在2D中可以这样做：http://jsfiddle.net/faRW3/1/

// draw stuff
c.fillStyle = "red";
c.fillRect(Math.sin( time )*50+70, Math.cos( time )*50+70, 20, 20);

// fade background
c.fillStyle = "rgba(255, 255, 255, 0.25)";
c.fillRect(0, 0, canvas.width, canvas.height);

但是我还没有找到在WebGL中实现它的方法，特别是使用Three.js。我尝试通过将preserveDrawingBuffer设置为true并使用Effect Composer进行播放但未成功完成此操作。

我很感激任何建议。

Answer 1

一种方法是在场景后面放置一个透明平面并设置preserveDrawingBuffer = true。

renderer = new THREE.WebGLRenderer( { preserveDrawingBuffer: true } );
renderer.autoClearColor = false;

// background plane
var plane = new THREE.Mesh( new THREE.PlaneGeometry( 100, 100 ), new THREE.MeshBasicMaterial( { transparent: true, opacity: 0.1 } ) );
plane.position.z = -10;
scene.add( plane );

有关实例，请参阅：http://vincemckelvie.com/Potluck/Cartwheel/

three.js r.64

Answer 2

WestLangley描述的技术效果非常好，但是如果你想要更多地控制你的运动轨迹，你也可以使用WebGLRenderTarget。

您可能已经注意到，例如，将平面的opacity设置为低于0.1的值会导致屏幕上出现永久性污点。使用渲染目标，可以解决这个问题。

该技术需要三个场景和三个纹理：

sceneContent包含多维数据集
sceneComp包含带材质的quadComp（textureNew + textureOld）
sceneScreen包含带材质的quadScreen（textureComp）

它们应该像这样呈现：

将sceneContent，cameraPerspective渲染到textureNew
将sceneComp，cameraOrto渲染到textureComp
将sceneScreen，cameraOrto渲染到textureOld
将sceneScreen，cameraOrto渲染到屏幕上

无需将autoClear设置为false或将preserveDrawingBuffer设置为true。

有关实例，请参阅：https://codepen.io/brunoimbrizi/pen/MoRJaN

THREE.js - 如何淡化背景？

2 个答案: