threejs 源码解析_threejs海面模拟

源码：

作者：john hollen

最终效果不是特别漂亮，但作者给出了详细的笔记，这就是收录这项源码的原因。

记笔记：TNM084，是Linköping University 的图像处理课程，github上有20有关多个项目，容易学习。

以下是对原作者笔记的翻译。

项目介绍

该项目由JohnHollén(johho982)在LinköpingUniversity的TNM084-图像处理课程中完成。 最初的计划是创建一个程序生成的行星，但是事实证明，这对我来说太具有挑战性，因为我对OpenGL / WebGL并不特别熟练。 该计划已更改为创建海洋，而不是空间海洋。

我之所以选择在WebGL中进行该项目，是因为Web编程是我最喜欢的编程类型，并且在浏览器中运行3D图形的想法非常酷。

此应用程序已经过测试，并且可以在2011年MacBook Pro的Safari，Chrome和Firefox中正常运行。 从[2]中获取了此应用中使用的3D噪声的实现。

框架和库

该应用程序是使用以下库编写的：

Three.js JQuery GLSL

基本场景设置

场景仅包含两个对象。 一个大立方体用作天空盒，而一个由100x50三角形组成的平面用作水面。 这两个对象都是通过使用它们各自的THREE.js方法THREE.CubeGeometry和THREE.PlaneGeometry创建的。 场景中只有一个光源，即THREE.PointLight。 点光源是没有方向的简单光源，仅具有距离和强度。

场景中还有两个摄像头。 我使用的是THREE.PerspectiveCamera，还有一个用于反射水中天空的THREE.CubeCamera。 稍后将描述如何完成天空反射。

天空实现

第一个想法是创建一个行星，因此首先创建了空间环境。 首先，创建了大立方体并将其缩放为10000x10000x10000的大小，并配置为仅显示其内侧。 为了将着色器程序附加到天空盒，使用了THREE.ShaderMaterial。 着色器材质对象将着色器程序作为输入，并在后台进行所有着色器绑定和编译。 天空盒的顶点着色器并不是很有趣，因为它只为片段着色器提供顶点位置。

但是，片段着色器更有趣。 使用 eight-octave multifractal [[1]渲染天空纹理，该分形也使用时间来移动天空。 天空纹理的完整代码如下所示。

varying vec3 v_position;

uniform