OceanShaders.js 12 KB

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