源码：作者：johnhollen源码：https://github.com/johnhollen/Procedural-Ocean最后的效果不是特别漂亮，但是作者给出了详细的注释，这也是为什么这个源包含代码。注：TNM084是林雪平大学的图像处理课程。github上有20多个相关项目，简单易学。以下是原作者笔记的翻译。项目介绍该项目由JohnHollén(johho982)在林雪平大学的TNM084-图像处理课程中完成。最初的计划是创建一个程序生成的星球，但事实证明这对我来说太具有挑战性，因为我不是特别精通OpenGL/WebGL。该计划已更改为创建海洋，而不是太空海洋。我选择在WebGL中做这个项目，因为网络编程是我最喜欢的编程类型，而且在浏览器中运行3D图形的想法非常酷。此应用程序已经过测试，在2011MacBookPro上的Safari、Chrome和Firefox中运行良好。本应用中使用的3D噪声的实现取自[2]。框架和库该应用程序是使用以下库编写的：Three.jsJQueryGLSL基本场景设置该场景仅包含两个对象。一个大立方体用作天空盒，而一个由100x50三角形组成的平面用作水面。这两个对象都是使用各自的THREE.js方法THREE.CubeGeometry和THREE.PlaneGeometry创建的。场景中只有一个光源，THREE.PointLight。点光源是简单的光源，没有方向，只有距离和强度。现场还有两台摄像机。我正在使用THREE.PerspectiveCamera和THREE.CubeCamera来反射水中的天空。稍后将描述天空反射是如何完成的。SkyRealization第一个想法是创造一个星球，所以首先创造了空间环境。首先，创建大立方体并将其缩放为10000x10000x10000的大小，并配置为仅显示其内部。要将着色器程序附加到天空盒，需要使用THREE.ShaderMaterial。着色器材质对象将着色器程序作为输入，并在幕后进行所有着色器绑定和编译。天空盒的顶点着色器不是很有趣，因为它只为片段着色器提供顶点位置。然而，片段着色器更有趣。使用八倍频程多重分形[[1]渲染天空纹理，它也使用时间来移动天空。天空纹理的完整代码如下所示。varyingvec3v_position;uniformfloattime;vec4spaceClouds(vec3cubePos){//标准化立方体位置以将其映射到球体上。vec3spherePos=normalize(cubePos);constintoctaves=8;浮点数=0.0;浮动频率=0.7；floatweight=1.3;for(inti=0;i
