用WebGL实现ThreeJS中的水/镜像曲面
我正试着用WebGL用Three.js做一个水面。我想我将从一个镜子开始，因为我认为我知道如何增加位移，以产生基本的涟漪效应。
，这是我所知道的：反射通常是通过在FBO上渲染垂直(y轴)翻转场景来实现的，使用水平面作为剔除平面。然后将此FBO用作水平面的纹理。使用位移图(或噪声纹理)，图像可以被移位，并达到水的效果。
的问题：首先，我找不到一种方法来翻转在ThreeJS的场景。在OpenGL中，您可以只对Y使用glScale和put -1，但我认为这在WebGL (或它所基于的GLES )中是不可能的。至少我在ThreeJS中没有发现这样的东西。几何有一个尺度参数，但是没有场景参数。一种解决方案可能是在相机中改变.matrixWorldInverse，但我不知道如何做到这一点。有什么想法吗？
第二个障碍是剪裁/剔除飞机。同样，旧的方式是使用glClipPlane，但据我所知，即使在最新的OpenGL标准中也不支持它，也不支持WebGL。我在某个地方读到，你可以在顶点着色器中这样做，但在ThreeJS中，我只知道如何添加着色器作为材料，在渲染到FBO时我需要这样做。
第三，用正确的纹理坐标将FBO渲染到水平面，所以我认为基本上是从摄像机的位置投射出来的。
我在网上找不到更多的信息了。很少有WebGL反射的例子，唯一接近的是这里，它使用了一些“斜视图”的方法来剔除。这真的是现在最好的方法吗？而不是一个功能，我们现在必须自己编码在软件(要运行在CPU上，而不是GPU)？当然，ThreeJS中提供的立方体反射也不适用于飞机，所以是的，我试过了。如果有人能尽可能简单地举例说明如何做到这一点，我将非常感激。
回答 3
Stack Overflow用户
发布于 2015-01-20 15:04:07
看看这个three.js示例。
直接从源文件中取出并准备使用：
water = new THREE.Water( renderer, camera, scene, {
textureWidth: 512,
textureHeight: 512,
waterNormals: waterNormals,
alpha: 1.0,
sunDirection: light.position.clone().normalize(),
sunColor: 0xffffff,
waterColor: 0x001e0f,
distortionScale: 50.0,
} );
mirrorMesh = new THREE.Mesh(
new THREE.PlaneBufferGeometry( parameters.width * 500, parameters.height * 500 ),
water.material
);
mirrorMesh.add( water );
mirrorMesh.rotation.x = - Math.PI * 0.5;
scene.add( mirrorMesh );在我看来就像一片海洋:)
Stack Overflow用户
发布于 2013-02-24 08:57:58
您可以看到这个演示文稿http://29a.ch/slides/2012/webglwater/
这个小提琴可能对你有用jsfiddle.net/ahmedadel/44 may。
Stack Overflow用户
发布于 2013-02-23 23:23:27
这只解决了你问题的缩放部分。附加到Object3D的矩阵有一个makeScale方法。
https://stackoverflow.com/questions/15046449
复制相似问题
腾讯云开发者
