源码:
作者: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