Three.js: 用户定义的剪切平面

创建于 2011-10-13  ·  5评论  ·  资料来源: mrdoob/three.js

我想使用用户定义的剪切平面。
在openGL中,我将使用:

glClipPlane(GL_CLIP_PLANE0, planeEq);
glEnable(GL_CLIP_PLANE0);

如何使用webGL做同样的事情?

Question

最有用的评论

嘿,非常感谢!!

您的建议使我重新考虑了这个问题,并且我注意到没有“一般”滞后,只有在近剪辑平面发生变化(镜面位置与镜面相机位置相比)时才闪烁。

因此,您几乎就在那儿@WestLangley :这是您需要更新的镜像相机的矩阵,而不是相机本身。

结果:不再出现“滞后”: http :

也许我们可以将其抽象为它自己的对象。

是的,我已经考虑过了。 拥有一个可以处理所有事情的new THREE.mirror()很棒。 我会尝试编写一些代码...

所有5条评论

您应该能够使用renderer.context获得WebGL上下文。
从那里开始,取决于您和WebGL规范:)

我最近在将反射平面(也称为“镜子”:smile:)实现为three.js时遇到了相同的问题。
据我所知,WebGL不能提供用户定义的剪切平面,至少不能采用您描述的“简单” openGL方式。
诀窍是使用“ Oblique View视锥”方法,本文对此进行了说明: http :
此方法的目的是用反射面定义的平面替换镜面的摄像机视锥的近夹平面。
甚至提供了一些源代码(尽管使用C ++): http :

我成功地在three.js中移植了该方法,下面是一个现场演示的示例场景: http :

唯一剩下的问题是renderTarget被渲染为一帧,我不知道为什么! 当照相机移动太快以及反光镜穿过其他物体时,这会引起闪烁。

关于如何解决这个问题的任何想法? 我是否需要实现一种多缓冲方法,或者仅仅是因为在修改平截头体后不更新相机矩阵? 如果是这样,我该怎么做?

嗯...我尝试将scene.autoUpdatefalse并手动调用scene.updateMatrixWorld()以确保所有渲染器具有相同的内容,但似乎无法解决任何问题...在从中提取轮播之前都没有调用mirror.updateMatrix() ...

虽然很酷! 也许我们可以将其抽象为它自己的对象。

甜。

我还尝试确保相关矩阵是最新的。 如果您担心延迟,则必须在使用它们之前对其进行更新。 不幸的是,快速缩放似乎并不重要...

mirror.updateMatrixWorld();

camera.updateMatrixWorld();

camera.matrixWorldInverse.getInverse( camera.matrixWorld );

嘿,非常感谢!!

您的建议使我重新考虑了这个问题,并且我注意到没有“一般”滞后,只有在近剪辑平面发生变化(镜面位置与镜面相机位置相比)时才闪烁。

因此,您几乎就在那儿@WestLangley :这是您需要更新的镜像相机的矩阵,而不是相机本身。

结果:不再出现“滞后”: http :

也许我们可以将其抽象为它自己的对象。

是的,我已经考虑过了。 拥有一个可以处理所有事情的new THREE.mirror()很棒。 我会尝试编写一些代码...

此页面是否有帮助?
0 / 5 - 0 等级