自己做网站需要做啥,高要区公路建设规划局网站,做网站有用吗,网络营销的特点与方法有哪些倒影是在自然界中非常常见的一种现象#xff0c;例如水面倒影、镜子。我们都知道#xff0c;眼睛之所以能够看到某个物体#xff0c;是因为物体本身能够发光或者物体能够反射其它的物体所发的光#xff0c;这些光进入到我们的眼里就形成了该物体影像。倒影形成也是一种光学…倒影是在自然界中非常常见的一种现象例如水面倒影、镜子。我们都知道眼睛之所以能够看到某个物体是因为物体本身能够发光或者物体能够反射其它的物体所发的光这些光进入到我们的眼里就形成了该物体影像。倒影形成也是一种光学的现象其原理是物体发射或者反射的光经过倒影平面的反射后进入到我们的眼里我们所看到的在倒影平面形成的虚像就是该物体的倒影。不管是做数据可视化还是游戏我们经常需要在3D场景中来实现这种自然现象给水面、镜面等物体增加倒影的效果来提高视觉效果。那么在3D渲染中这种效果是怎么实现的那WebGL的渲染引擎threejs给我们提供了一个很好的倒影实现的封装通过对threejs提供的代码进行分析希望能够和大家一起学习一下。大概的思路是构建一个虚拟的相机对需要倒影的物体进行渲染然后将渲染的结果当作纹理映射到倒影平面上这样就可以实现倒影的效果了。这里面我们需要解决两个问题第一个是如何构建这个虚拟的相机第二个是怎么将通过纹理相机渲染出来的结果正确的映射到倒影平面上。使用threejs来实现倒影我们只需要引入threejs的倒影引擎该文件位于threejs项目example/js/objects目录下然后创建一个接受倒影的几何体其他的交给threejs来完成就可以来这里我们创建了一个圆形来接收阴影。script srcjs/objects/Reflector.js/scriptvar geometry new THREE.CircleBufferGeometry(40, 64);
var groundMirror new THREE.Reflector(geometry, {textureWidth: WIDTH * window.devicePixelRatio,textureHeight: HEIGHT * window.devicePixelRatio
});
第一步构建虚拟的相机得到倒影面和真实相机的位置reflectorWorldPosition.setFromMatrixPosition( scope.matrixWorld );
cameraWorldPosition.setFromMatrixPosition( camera.matrixWorld );
得到反射面的旋转矩阵rotationMatrix.extractRotation( scope.matrixWorld );
先定义一个默认的法向量乘以上一步得到的反射面的旋转向量得到反射面现在的法向量normal.set( 0, 0, 1 );
normal.applyMatrix4( rotationMatrix );
计算相机位置// 计算相机位置到反射平面位置到向量
view.subVectors( reflectorWorldPosition, cameraWorldPosition );
// 当向量与反射面当法向量夹角说明相机在反射面的背面则直接返回不进行倒影的渲染
if ( view.dot( normal ) 0 ) return;
// 得到反射向量的反向量
view.reflect( normal ).negate();
// 投影面位置加上该向量得到虚拟相机的位置
view.add( reflectorWorldPosition );
与计算相机位置类似的步骤计算相机的视点位置rotationMatrix.extractRotation( camera.matrixWorld );
lookAtPosition.set( 0, 0, - 1 );
lookAtPosition.applyMatrix4( rotationMatrix );
lookAtPosition.add( cameraWorldPosition );target.subVectors( reflectorWorldPosition, lookAtPosition );
target.reflect( normal ).negate();
target.add( reflectorWorldPosition );
根据计算的相机位置和相机视点位置构建虚拟相机virtualCamera.position.copy( view );
virtualCamera.up.set( 0, 1, 0 );
virtualCamera.up.applyMatrix4( rotationMatrix );
virtualCamera.up.reflect( normal );
virtualCamera.lookAt( target );
virtualCamera.far camera.far;
virtualCamera.updateMatrixWorld();
virtualCamera.projectionMatrix.copy( camera.projectionMatrix );
第二步如何将虚拟相机的渲染结果映射到投影面上初始化一个默认矩阵这是初始化的矩阵主要是为了把屏幕坐标和[-1, 1]映射到[0, 1]的纹理坐标textureMatrix.set(0.5, 0.0, 0.0, 0.5,0.0, 0.5, 0.0, 0.5,0.0, 0.0, 0.5, 0.5,0.0, 0.0, 0.0, 1.0
);
然后将该矩阵乘以模型、视图、投影矩阵经过模型、视图、投影矩阵变换的坐标为屏幕坐标再经过上述矩阵后就可以映射为纹理坐标了textureMatrix.multiply( virtualCamera.projectionMatrix );
textureMatrix.multiply( virtualCamera.matrixWorldInverse );
textureMatrix.multiply( scope.matrixWorld );
将该矩阵在着色器中使用可以得到倒影面各坐标点对应的纹理坐标这样就可以把渲染结果正确的映射到投影平面上vUv textureMatrix * vec4( position, 1.0 );
进一步的完善调整虚拟相机渲染时的投影矩阵将相机的近裁剪面重置为投影面避免对倒影面下方对物体进行投影clipBias参数是对裁剪面进行了一个偏移具体对算法请参考Oblique View Frustum Near-Plane Clippinghttp://www.terathon.com/lengyel/Lengyel-Oblique.pdfreflectorPlane.setFromNormalAndCoplanarPoint( normal, reflectorWorldPosition );
reflectorPlane.applyMatrix4( virtualCamera.matrixWorldInverse );clipPlane.set( reflectorPlane.normal.x, reflectorPlane.normal.y, reflectorPlane.normal.z, reflectorPlane.constant );var projectionMatrix virtualCamera.projectionMatrix;q.x ( Math.sign( clipPlane.x ) projectionMatrix.elements[ 8 ] ) / projectionMatrix.elements[ 0 ];
q.y ( Math.sign( clipPlane.y ) projectionMatrix.elements[ 9 ] ) / projectionMatrix.elements[ 5 ];
q.z - 1.0;
q.w ( 1.0 projectionMatrix.elements[ 10 ] ) / projectionMatrix.elements[ 14 ];clipPlane.multiplyScalar( 2.0 / clipPlane.dot( q ) );projectionMatrix.elements[ 2 ] clipPlane.x;
projectionMatrix.elements[ 6 ] clipPlane.y;
projectionMatrix.elements[ 10 ] clipPlane.z 1.0 - clipBias;
projectionMatrix.elements[ 14 ] clipPlane.w;
最主要对几个步骤在已经完成了下面进行对就是通过构建对虚拟相机和新的投影矩阵对整个场景进行渲染将渲染结果当作纹理映射到投影平面上就完成了。
