OceanShaders.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374
  1. console.warn( "THREE.OceanShaders: As part of the transition to ES6 Modules, the files in 'examples/js' were deprecated in May 2020 (r117) and will be deleted in December 2020 (r124). You can find more information about developing using ES6 Modules in https://threejs.org/docs/index.html#manual/en/introduction/Import-via-modules." );
  2. /* Author: Aleksandr Albert
  3. // Website: www.routter.co.tt
  4. // Description: A deep water ocean shader set
  5. // based on an implementation of a Tessendorf Waves
  6. // originally presented by David Li ( www.david.li/waves )
  7. // The general method is to apply shaders to simulation Framebuffers
  8. // and then sample these framebuffers when rendering the ocean mesh
  9. // The set uses 7 shaders:
  10. // -- Simulation shaders
  11. // [1] ocean_sim_vertex -> Vertex shader used to set up a 2x2 simulation plane centered at (0,0)
  12. // [2] ocean_subtransform -> Fragment shader used to subtransform the mesh (generates the displacement map)
  13. // [3] ocean_initial_spectrum -> Fragment shader used to set intitial wave frequency at a texel coordinate
  14. // [4] ocean_phase -> Fragment shader used to set wave phase at a texel coordinate
  15. // [5] ocean_spectrum -> Fragment shader used to set current wave frequency at a texel coordinate
  16. // [6] ocean_normal -> Fragment shader used to set face normals at a texel coordinate
  17. // -- Rendering Shader
  18. // [7] ocean_main -> Vertex and Fragment shader used to create the final render
  19. */
  20. THREE.OceanShaders = {};
  21. THREE.OceanShaders[ "ocean_sim_vertex" ] = {
  22. vertexShader: [
  23. "varying vec2 vUV;",
  24. "void main (void) {",
  25. " vUV = position.xy * 0.5 + 0.5;",
  26. " gl_Position = vec4(position, 1.0 );",
  27. "}"
  28. ].join( "\n" )
  29. };
  30. THREE.OceanShaders[ "ocean_subtransform" ] = {
  31. uniforms: {
  32. "u_input": { value: null },
  33. "u_transformSize": { value: 512.0 },
  34. "u_subtransformSize": { value: 250.0 }
  35. },
  36. fragmentShader: [
  37. //GPU FFT using a Stockham formulation
  38. "precision highp float;",
  39. "#include <common>",
  40. "uniform sampler2D u_input;",
  41. "uniform float u_transformSize;",
  42. "uniform float u_subtransformSize;",
  43. "varying vec2 vUV;",
  44. "vec2 multiplyComplex (vec2 a, vec2 b) {",
  45. " return vec2(a[0] * b[0] - a[1] * b[1], a[1] * b[0] + a[0] * b[1]);",
  46. "}",
  47. "void main (void) {",
  48. " #ifdef HORIZONTAL",
  49. " float index = vUV.x * u_transformSize - 0.5;",
  50. " #else",
  51. " float index = vUV.y * u_transformSize - 0.5;",
  52. " #endif",
  53. " float evenIndex = floor(index / u_subtransformSize) * (u_subtransformSize * 0.5) + mod(index, u_subtransformSize * 0.5);",
  54. //transform two complex sequences simultaneously
  55. " #ifdef HORIZONTAL",
  56. " vec4 even = texture2D(u_input, vec2(evenIndex + 0.5, gl_FragCoord.y) / u_transformSize).rgba;",
  57. " vec4 odd = texture2D(u_input, vec2(evenIndex + u_transformSize * 0.5 + 0.5, gl_FragCoord.y) / u_transformSize).rgba;",
  58. " #else",
  59. " vec4 even = texture2D(u_input, vec2(gl_FragCoord.x, evenIndex + 0.5) / u_transformSize).rgba;",
  60. " vec4 odd = texture2D(u_input, vec2(gl_FragCoord.x, evenIndex + u_transformSize * 0.5 + 0.5) / u_transformSize).rgba;",
  61. " #endif",
  62. " float twiddleArgument = -2.0 * PI * (index / u_subtransformSize);",
  63. " vec2 twiddle = vec2(cos(twiddleArgument), sin(twiddleArgument));",
  64. " vec2 outputA = even.xy + multiplyComplex(twiddle, odd.xy);",
  65. " vec2 outputB = even.zw + multiplyComplex(twiddle, odd.zw);",
  66. " gl_FragColor = vec4(outputA, outputB);",
  67. "}"
  68. ].join( "\n" )
  69. };
  70. THREE.OceanShaders[ "ocean_initial_spectrum" ] = {
  71. uniforms: {
  72. "u_wind": { value: new THREE.Vector2( 10.0, 10.0 ) },
  73. "u_resolution": { value: 512.0 },
  74. "u_size": { value: 250.0 }
  75. },
  76. vertexShader: [
  77. "void main (void) {",
  78. " gl_Position = vec4(position, 1.0);",
  79. "}"
  80. ].join( "\n" ),
  81. fragmentShader: [
  82. "precision highp float;",
  83. "#include <common>",
  84. "const float G = 9.81;",
  85. "const float KM = 370.0;",
  86. "const float CM = 0.23;",
  87. "uniform vec2 u_wind;",
  88. "uniform float u_resolution;",
  89. "uniform float u_size;",
  90. "float omega (float k) {",
  91. " return sqrt(G * k * (1.0 + pow2(k / KM)));",
  92. "}",
  93. "#if __VERSION__ == 100",
  94. "float tanh (float x) {",
  95. " return (1.0 - exp(-2.0 * x)) / (1.0 + exp(-2.0 * x));",
  96. "}",
  97. "#endif",
  98. "void main (void) {",
  99. " vec2 coordinates = gl_FragCoord.xy - 0.5;",
  100. " float n = (coordinates.x < u_resolution * 0.5) ? coordinates.x : coordinates.x - u_resolution;",
  101. " float m = (coordinates.y < u_resolution * 0.5) ? coordinates.y : coordinates.y - u_resolution;",
  102. " vec2 K = (2.0 * PI * vec2(n, m)) / u_size;",
  103. " float k = length(K);",
  104. " float l_wind = length(u_wind);",
  105. " float Omega = 0.84;",
  106. " float kp = G * pow2(Omega / l_wind);",
  107. " float c = omega(k) / k;",
  108. " float cp = omega(kp) / kp;",
  109. " float Lpm = exp(-1.25 * pow2(kp / k));",
  110. " float gamma = 1.7;",
  111. " float sigma = 0.08 * (1.0 + 4.0 * pow(Omega, -3.0));",
  112. " float Gamma = exp(-pow2(sqrt(k / kp) - 1.0) / 2.0 * pow2(sigma));",
  113. " float Jp = pow(gamma, Gamma);",
  114. " float Fp = Lpm * Jp * exp(-Omega / sqrt(10.0) * (sqrt(k / kp) - 1.0));",
  115. " float alphap = 0.006 * sqrt(Omega);",
  116. " float Bl = 0.5 * alphap * cp / c * Fp;",
  117. " float z0 = 0.000037 * pow2(l_wind) / G * pow(l_wind / cp, 0.9);",
  118. " float uStar = 0.41 * l_wind / log(10.0 / z0);",
  119. " float alpham = 0.01 * ((uStar < CM) ? (1.0 + log(uStar / CM)) : (1.0 + 3.0 * log(uStar / CM)));",
  120. " float Fm = exp(-0.25 * pow2(k / KM - 1.0));",
  121. " float Bh = 0.5 * alpham * CM / c * Fm * Lpm;",
  122. " float a0 = log(2.0) / 4.0;",
  123. " float am = 0.13 * uStar / CM;",
  124. " float Delta = tanh(a0 + 4.0 * pow(c / cp, 2.5) + am * pow(CM / c, 2.5));",
  125. " float cosPhi = dot(normalize(u_wind), normalize(K));",
  126. " float S = (1.0 / (2.0 * PI)) * pow(k, -4.0) * (Bl + Bh) * (1.0 + Delta * (2.0 * cosPhi * cosPhi - 1.0));",
  127. " float dk = 2.0 * PI / u_size;",
  128. " float h = sqrt(S / 2.0) * dk;",
  129. " if (K.x == 0.0 && K.y == 0.0) {",
  130. " h = 0.0;", //no DC term
  131. " }",
  132. " gl_FragColor = vec4(h, 0.0, 0.0, 0.0);",
  133. "}"
  134. ].join( "\n" )
  135. };
  136. THREE.OceanShaders[ "ocean_phase" ] = {
  137. uniforms: {
  138. "u_phases": { value: null },
  139. "u_deltaTime": { value: null },
  140. "u_resolution": { value: null },
  141. "u_size": { value: null }
  142. },
  143. fragmentShader: [
  144. "precision highp float;",
  145. "#include <common>",
  146. "const float G = 9.81;",
  147. "const float KM = 370.0;",
  148. "varying vec2 vUV;",
  149. "uniform sampler2D u_phases;",
  150. "uniform float u_deltaTime;",
  151. "uniform float u_resolution;",
  152. "uniform float u_size;",
  153. "float omega (float k) {",
  154. " return sqrt(G * k * (1.0 + k * k / KM * KM));",
  155. "}",
  156. "void main (void) {",
  157. " float deltaTime = 1.0 / 60.0;",
  158. " vec2 coordinates = gl_FragCoord.xy - 0.5;",
  159. " float n = (coordinates.x < u_resolution * 0.5) ? coordinates.x : coordinates.x - u_resolution;",
  160. " float m = (coordinates.y < u_resolution * 0.5) ? coordinates.y : coordinates.y - u_resolution;",
  161. " vec2 waveVector = (2.0 * PI * vec2(n, m)) / u_size;",
  162. " float phase = texture2D(u_phases, vUV).r;",
  163. " float deltaPhase = omega(length(waveVector)) * u_deltaTime;",
  164. " phase = mod(phase + deltaPhase, 2.0 * PI);",
  165. " gl_FragColor = vec4(phase, 0.0, 0.0, 0.0);",
  166. "}"
  167. ].join( "\n" )
  168. };
  169. THREE.OceanShaders[ "ocean_spectrum" ] = {
  170. uniforms: {
  171. "u_size": { value: null },
  172. "u_resolution": { value: null },
  173. "u_choppiness": { value: null },
  174. "u_phases": { value: null },
  175. "u_initialSpectrum": { value: null }
  176. },
  177. fragmentShader: [
  178. "precision highp float;",
  179. "#include <common>",
  180. "const float G = 9.81;",
  181. "const float KM = 370.0;",
  182. "varying vec2 vUV;",
  183. "uniform float u_size;",
  184. "uniform float u_resolution;",
  185. "uniform float u_choppiness;",
  186. "uniform sampler2D u_phases;",
  187. "uniform sampler2D u_initialSpectrum;",
  188. "vec2 multiplyComplex (vec2 a, vec2 b) {",
  189. " return vec2(a[0] * b[0] - a[1] * b[1], a[1] * b[0] + a[0] * b[1]);",
  190. "}",
  191. "vec2 multiplyByI (vec2 z) {",
  192. " return vec2(-z[1], z[0]);",
  193. "}",
  194. "float omega (float k) {",
  195. " return sqrt(G * k * (1.0 + k * k / KM * KM));",
  196. "}",
  197. "void main (void) {",
  198. " vec2 coordinates = gl_FragCoord.xy - 0.5;",
  199. " float n = (coordinates.x < u_resolution * 0.5) ? coordinates.x : coordinates.x - u_resolution;",
  200. " float m = (coordinates.y < u_resolution * 0.5) ? coordinates.y : coordinates.y - u_resolution;",
  201. " vec2 waveVector = (2.0 * PI * vec2(n, m)) / u_size;",
  202. " float phase = texture2D(u_phases, vUV).r;",
  203. " vec2 phaseVector = vec2(cos(phase), sin(phase));",
  204. " vec2 h0 = texture2D(u_initialSpectrum, vUV).rg;",
  205. " vec2 h0Star = texture2D(u_initialSpectrum, vec2(1.0 - vUV + 1.0 / u_resolution)).rg;",
  206. " h0Star.y *= -1.0;",
  207. " vec2 h = multiplyComplex(h0, phaseVector) + multiplyComplex(h0Star, vec2(phaseVector.x, -phaseVector.y));",
  208. " vec2 hX = -multiplyByI(h * (waveVector.x / length(waveVector))) * u_choppiness;",
  209. " vec2 hZ = -multiplyByI(h * (waveVector.y / length(waveVector))) * u_choppiness;",
  210. //no DC term
  211. " if (waveVector.x == 0.0 && waveVector.y == 0.0) {",
  212. " h = vec2(0.0);",
  213. " hX = vec2(0.0);",
  214. " hZ = vec2(0.0);",
  215. " }",
  216. " gl_FragColor = vec4(hX + multiplyByI(h), hZ);",
  217. "}"
  218. ].join( "\n" )
  219. };
  220. THREE.OceanShaders[ "ocean_normals" ] = {
  221. uniforms: {
  222. "u_displacementMap": { value: null },
  223. "u_resolution": { value: null },
  224. "u_size": { value: null }
  225. },
  226. fragmentShader: [
  227. "precision highp float;",
  228. "varying vec2 vUV;",
  229. "uniform sampler2D u_displacementMap;",
  230. "uniform float u_resolution;",
  231. "uniform float u_size;",
  232. "void main (void) {",
  233. " float texel = 1.0 / u_resolution;",
  234. " float texelSize = u_size / u_resolution;",
  235. " vec3 center = texture2D(u_displacementMap, vUV).rgb;",
  236. " vec3 right = vec3(texelSize, 0.0, 0.0) + texture2D(u_displacementMap, vUV + vec2(texel, 0.0)).rgb - center;",
  237. " vec3 left = vec3(-texelSize, 0.0, 0.0) + texture2D(u_displacementMap, vUV + vec2(-texel, 0.0)).rgb - center;",
  238. " vec3 top = vec3(0.0, 0.0, -texelSize) + texture2D(u_displacementMap, vUV + vec2(0.0, -texel)).rgb - center;",
  239. " vec3 bottom = vec3(0.0, 0.0, texelSize) + texture2D(u_displacementMap, vUV + vec2(0.0, texel)).rgb - center;",
  240. " vec3 topRight = cross(right, top);",
  241. " vec3 topLeft = cross(top, left);",
  242. " vec3 bottomLeft = cross(left, bottom);",
  243. " vec3 bottomRight = cross(bottom, right);",
  244. " gl_FragColor = vec4(normalize(topRight + topLeft + bottomLeft + bottomRight), 1.0);",
  245. "}"
  246. ].join( "\n" )
  247. };
  248. THREE.OceanShaders[ "ocean_main" ] = {
  249. uniforms: {
  250. "u_displacementMap": { value: null },
  251. "u_normalMap": { value: null },
  252. "u_geometrySize": { value: null },
  253. "u_size": { value: null },
  254. "u_projectionMatrix": { value: null },
  255. "u_viewMatrix": { value: null },
  256. "u_cameraPosition": { value: null },
  257. "u_skyColor": { value: null },
  258. "u_oceanColor": { value: null },
  259. "u_sunDirection": { value: null },
  260. "u_exposure": { value: null }
  261. },
  262. vertexShader: [
  263. "precision highp float;",
  264. "varying vec3 vPos;",
  265. "varying vec2 vUV;",
  266. "uniform mat4 u_projectionMatrix;",
  267. "uniform mat4 u_viewMatrix;",
  268. "uniform float u_size;",
  269. "uniform float u_geometrySize;",
  270. "uniform sampler2D u_displacementMap;",
  271. "void main (void) {",
  272. " vec3 newPos = position + texture2D(u_displacementMap, uv).rgb * (u_geometrySize / u_size);",
  273. " vPos = newPos;",
  274. " vUV = uv;",
  275. " gl_Position = u_projectionMatrix * u_viewMatrix * vec4(newPos, 1.0);",
  276. "}"
  277. ].join( "\n" ),
  278. fragmentShader: [
  279. "precision highp float;",
  280. "varying vec3 vPos;",
  281. "varying vec2 vUV;",
  282. "uniform sampler2D u_displacementMap;",
  283. "uniform sampler2D u_normalMap;",
  284. "uniform vec3 u_cameraPosition;",
  285. "uniform vec3 u_oceanColor;",
  286. "uniform vec3 u_skyColor;",
  287. "uniform vec3 u_sunDirection;",
  288. "uniform float u_exposure;",
  289. "vec3 hdr (vec3 color, float exposure) {",
  290. " return 1.0 - exp(-color * exposure);",
  291. "}",
  292. "void main (void) {",
  293. " vec3 normal = texture2D(u_normalMap, vUV).rgb;",
  294. " vec3 view = normalize(u_cameraPosition - vPos);",
  295. " float fresnel = 0.02 + 0.98 * pow(1.0 - dot(normal, view), 5.0);",
  296. " vec3 sky = fresnel * u_skyColor;",
  297. " float diffuse = clamp(dot(normal, normalize(u_sunDirection)), 0.0, 1.0);",
  298. " vec3 water = (1.0 - fresnel) * u_oceanColor * u_skyColor * diffuse;",
  299. " vec3 color = sky + water;",
  300. " gl_FragColor = vec4(hdr(color, u_exposure), 1.0);",
  301. "}"
  302. ].join( "\n" )
  303. };