ShaderUtils.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582
  1. var ShaderUtils = {
  2. lib: {
  3. /* -------------------------------------------------------------------------
  4. // Fresnel shader
  5. // - based on Nvidia Cg tutorial
  6. ------------------------------------------------------------------------- */
  7. 'fresnel': {
  8. uniforms: {
  9. "mRefractionRatio": { type: "f", value: 1.02 },
  10. "mFresnelBias": { type: "f", value: 0.1 },
  11. "mFresnelPower": { type: "f", value: 2.0 },
  12. "mFresnelScale": { type: "f", value: 1.0 },
  13. "tCube": { type: "t", value: 1, texture: null }
  14. },
  15. fragment_shader: [
  16. "uniform samplerCube tCube;",
  17. "varying vec3 vReflect;",
  18. "varying vec3 vRefract[3];",
  19. "varying float vReflectionFactor;",
  20. "void main() {",
  21. "vec4 reflectedColor = textureCube( tCube, vec3( -vReflect.x, vReflect.yz ) );",
  22. "vec4 refractedColor = vec4( 1.0, 1.0, 1.0, 1.0 );",
  23. "refractedColor.r = textureCube( tCube, vec3( -vRefract[0].x, vRefract[0].yz ) ).r;",
  24. "refractedColor.g = textureCube( tCube, vec3( -vRefract[1].x, vRefract[1].yz ) ).g;",
  25. "refractedColor.b = textureCube( tCube, vec3( -vRefract[2].x, vRefract[2].yz ) ).b;",
  26. "refractedColor.a = 1.0;",
  27. "gl_FragColor = mix( refractedColor, reflectedColor, clamp( vReflectionFactor, 0.0, 1.0 ) );",
  28. "}"
  29. ].join("\n"),
  30. vertex_shader: [
  31. "uniform float mRefractionRatio;",
  32. "uniform float mFresnelBias;",
  33. "uniform float mFresnelScale;",
  34. "uniform float mFresnelPower;",
  35. "varying vec3 vReflect;",
  36. "varying vec3 vRefract[3];",
  37. "varying float vReflectionFactor;",
  38. "void main() {",
  39. "vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
  40. "vec4 mPosition = objectMatrix * vec4( position, 1.0 );",
  41. "vec3 nWorld = normalize ( mat3( objectMatrix[0].xyz, objectMatrix[1].xyz, objectMatrix[2].xyz ) * normal );",
  42. "vec3 I = mPosition.xyz - cameraPosition;",
  43. "vReflect = reflect( I, nWorld );",
  44. "vRefract[0] = refract( normalize( I ), nWorld, mRefractionRatio );",
  45. "vRefract[1] = refract( normalize( I ), nWorld, mRefractionRatio * 0.99 );",
  46. "vRefract[2] = refract( normalize( I ), nWorld, mRefractionRatio * 0.98 );",
  47. "vReflectionFactor = mFresnelBias + mFresnelScale * pow( 1.0 + dot( normalize( I ), nWorld ), mFresnelPower );",
  48. "gl_Position = projectionMatrix * mvPosition;",
  49. "}"
  50. ].join("\n")
  51. },
  52. /* -------------------------------------------------------------------------
  53. // Normal map shader
  54. // - Blinn-Phong
  55. // - normal + diffuse + AO + displacement maps
  56. // - 1 point and 1 directional lights
  57. ------------------------------------------------------------------------- */
  58. 'normal' : {
  59. uniforms: {
  60. "enableAO": { type: "i", value: 0 },
  61. "enableDiffuse": { type: "i", value: 0 },
  62. "tDiffuse": { type: "t", value: 0, texture: null },
  63. "tNormal": { type: "t", value: 2, texture: null },
  64. "tAO": { type: "t", value: 3, texture: null },
  65. "uNormalScale": { type: "f", value: 1.0 },
  66. "tDisplacement": { type: "t", value: 4, texture: null },
  67. "uDisplacementBias": { type: "f", value: -0.5 },
  68. "uDisplacementScale": { type: "f", value: 2.5 },
  69. "uPointLightPos": { type: "v3", value: new THREE.Vector3() },
  70. "uPointLightColor": { type: "c", value: new THREE.Color( 0xeeeeee ) },
  71. "uDirLightPos": { type: "v3", value: new THREE.Vector3() },
  72. "uDirLightColor": { type: "c", value: new THREE.Color( 0xeeeeee ) },
  73. "uAmbientLightColor": { type: "c", value: new THREE.Color( 0x050505 ) },
  74. "uDiffuseColor": { type: "c", value: new THREE.Color( 0xeeeeee ) },
  75. "uSpecularColor": { type: "c", value: new THREE.Color( 0x111111 ) },
  76. "uAmbientColor": { type: "c", value: new THREE.Color( 0x050505 ) },
  77. "uShininess": { type: "f", value: 30 }
  78. },
  79. fragment_shader: [
  80. "uniform vec3 uDirLightPos;",
  81. "uniform vec3 uAmbientLightColor;",
  82. "uniform vec3 uDirLightColor;",
  83. "uniform vec3 uPointLightColor;",
  84. "uniform vec3 uAmbientColor;",
  85. "uniform vec3 uDiffuseColor;",
  86. "uniform vec3 uSpecularColor;",
  87. "uniform float uShininess;",
  88. "uniform bool enableDiffuse;",
  89. "uniform bool enableAO;",
  90. "uniform sampler2D tDiffuse;",
  91. "uniform sampler2D tNormal;",
  92. "uniform sampler2D tAO;",
  93. "uniform float uNormalScale;",
  94. "varying vec3 vTangent;",
  95. "varying vec3 vBinormal;",
  96. "varying vec3 vNormal;",
  97. "varying vec2 vUv;",
  98. "varying vec3 vPointLightVector;",
  99. "varying vec3 vViewPosition;",
  100. "void main() {",
  101. "vec3 diffuseTex = vec3( 1.0, 1.0, 1.0 );",
  102. "vec3 aoTex = vec3( 1.0, 1.0, 1.0 );",
  103. "vec3 normalTex = texture2D( tNormal, vUv ).xyz * 2.0 - 1.0;",
  104. "normalTex.xy *= uNormalScale;",
  105. "normalTex = normalize( normalTex );",
  106. "if( enableDiffuse )",
  107. "diffuseTex = texture2D( tDiffuse, vUv ).xyz;",
  108. "if( enableAO )",
  109. "aoTex = texture2D( tAO, vUv ).xyz;",
  110. "mat3 tsb = mat3( vTangent, vBinormal, vNormal );",
  111. "vec3 finalNormal = tsb * normalTex;",
  112. "vec3 normal = normalize( finalNormal );",
  113. "vec3 viewPosition = normalize( vViewPosition );",
  114. // point light
  115. "vec4 pointDiffuse = vec4( 0.0, 0.0, 0.0, 0.0 );",
  116. "vec4 pointSpecular = vec4( 0.0, 0.0, 0.0, 0.0 );",
  117. "vec3 pointVector = normalize( vPointLightVector );",
  118. "vec3 pointHalfVector = normalize( vPointLightVector + vViewPosition );",
  119. "float pointDotNormalHalf = dot( normal, pointHalfVector );",
  120. "float pointDiffuseWeight = max( dot( normal, pointVector ), 0.0 );",
  121. "float pointSpecularWeight = 0.0;",
  122. "if ( pointDotNormalHalf >= 0.0 )",
  123. "pointSpecularWeight = pow( pointDotNormalHalf, uShininess );",
  124. "pointDiffuse += vec4( uDiffuseColor, 1.0 ) * pointDiffuseWeight;",
  125. "pointSpecular += vec4( uSpecularColor, 1.0 ) * pointSpecularWeight;",
  126. // directional light
  127. "vec4 dirDiffuse = vec4( 0.0, 0.0, 0.0, 0.0 );",
  128. "vec4 dirSpecular = vec4( 0.0, 0.0, 0.0, 0.0 );",
  129. "vec4 lDirection = viewMatrix * vec4( uDirLightPos, 0.0 );",
  130. "vec3 dirVector = normalize( lDirection.xyz );",
  131. "vec3 dirHalfVector = normalize( lDirection.xyz + vViewPosition );",
  132. "float dirDotNormalHalf = dot( normal, dirHalfVector );",
  133. "float dirDiffuseWeight = max( dot( normal, dirVector ), 0.0 );",
  134. "float dirSpecularWeight = 0.0;",
  135. "if ( dirDotNormalHalf >= 0.0 )",
  136. "dirSpecularWeight = pow( dirDotNormalHalf, uShininess );",
  137. "dirDiffuse += vec4( uDiffuseColor, 1.0 ) * dirDiffuseWeight;",
  138. "dirSpecular += vec4( uSpecularColor, 1.0 ) * dirSpecularWeight;",
  139. // all lights contribution summation
  140. "vec4 totalLight = vec4( uAmbientLightColor * uAmbientColor, 1.0 );",
  141. "totalLight += vec4( uDirLightColor, 1.0 ) * ( dirDiffuse + dirSpecular );",
  142. "totalLight += vec4( uPointLightColor, 1.0 ) * ( pointDiffuse + pointSpecular );",
  143. "gl_FragColor = vec4( totalLight.xyz * aoTex * diffuseTex, 1.0 );",
  144. "}"
  145. ].join("\n"),
  146. vertex_shader: [
  147. "attribute vec4 tangent;",
  148. "uniform vec3 uPointLightPos;",
  149. "#ifdef VERTEX_TEXTURES",
  150. "uniform sampler2D tDisplacement;",
  151. "uniform float uDisplacementScale;",
  152. "uniform float uDisplacementBias;",
  153. "#endif",
  154. "varying vec3 vTangent;",
  155. "varying vec3 vBinormal;",
  156. "varying vec3 vNormal;",
  157. "varying vec2 vUv;",
  158. "varying vec3 vPointLightVector;",
  159. "varying vec3 vViewPosition;",
  160. "void main() {",
  161. "vec4 mPosition = objectMatrix * vec4( position, 1.0 );",
  162. "vViewPosition = cameraPosition - mPosition.xyz;",
  163. "vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
  164. "vNormal = normalize( normalMatrix * normal );",
  165. // tangent and binormal vectors
  166. "vTangent = normalize( normalMatrix * tangent.xyz );",
  167. "vBinormal = cross( vNormal, vTangent ) * tangent.w;",
  168. "vBinormal = normalize( vBinormal );",
  169. "vUv = uv;",
  170. // point light
  171. "vec4 lPosition = viewMatrix * vec4( uPointLightPos, 1.0 );",
  172. "vPointLightVector = normalize( lPosition.xyz - mvPosition.xyz );",
  173. // displacement mapping
  174. "#ifdef VERTEX_TEXTURES",
  175. "vec3 dv = texture2D( tDisplacement, uv ).xyz;",
  176. "float df = uDisplacementScale * dv.x + uDisplacementBias;",
  177. "vec4 displacedPosition = vec4( vNormal.xyz * df, 0.0 ) + mvPosition;",
  178. "gl_Position = projectionMatrix * displacedPosition;",
  179. "#else",
  180. "gl_Position = projectionMatrix * mvPosition;",
  181. "#endif",
  182. "}"
  183. ].join("\n")
  184. },
  185. /* -------------------------------------------------------------------------
  186. // Cube map shader
  187. ------------------------------------------------------------------------- */
  188. 'cube': {
  189. uniforms: { "tCube": { type: "t", value: 1, texture: null } },
  190. vertex_shader: [
  191. "varying vec3 vViewPosition;",
  192. "void main() {",
  193. "vec4 mPosition = objectMatrix * vec4( position, 1.0 );",
  194. "vViewPosition = cameraPosition - mPosition.xyz;",
  195. "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
  196. "}"
  197. ].join("\n"),
  198. fragment_shader: [
  199. "uniform samplerCube tCube;",
  200. "varying vec3 vViewPosition;",
  201. "void main() {",
  202. "vec3 wPos = cameraPosition - vViewPosition;",
  203. "gl_FragColor = textureCube( tCube, vec3( - wPos.x, wPos.yz ) );",
  204. "}"
  205. ].join("\n")
  206. },
  207. /* ------------------------------------------------------------------------
  208. // Convolution shader
  209. // - ported from o3d sample to WebGL / GLSL
  210. // http://o3d.googlecode.com/svn/trunk/samples/convolution.html
  211. ------------------------------------------------------------------------ */
  212. 'convolution': {
  213. uniforms: {
  214. "tDiffuse" : { type: "t", value: 0, texture: null },
  215. "uImageIncrement" : { type: "v2", value: new THREE.Vector2( 0.001953125, 0.0 ) },
  216. "cKernel" : { type: "fv1", value: [] }
  217. },
  218. vertex_shader: [
  219. "varying vec2 vUv;",
  220. "uniform vec2 uImageIncrement;",
  221. //"#define KERNEL_SIZE 25.0",
  222. "void main(void) {",
  223. "vUv = uv - ((KERNEL_SIZE - 1.0) / 2.0) * uImageIncrement;",
  224. "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
  225. "}"
  226. ].join("\n"),
  227. fragment_shader: [
  228. "varying vec2 vUv;",
  229. "uniform sampler2D tDiffuse;",
  230. "uniform vec2 uImageIncrement;",
  231. //"#define KERNEL_SIZE 25",
  232. "uniform float cKernel[KERNEL_SIZE];",
  233. "void main(void) {",
  234. "vec2 imageCoord = vUv;",
  235. "vec4 sum = vec4( 0.0, 0.0, 0.0, 0.0 );",
  236. "for( int i=0; i<KERNEL_SIZE; ++i ) {",
  237. "sum += texture2D( tDiffuse, imageCoord ) * cKernel[i];",
  238. "imageCoord += uImageIncrement;",
  239. "}",
  240. "gl_FragColor = sum;",
  241. "}"
  242. ].join("\n")
  243. },
  244. /* -------------------------------------------------------------------------
  245. // Film grain & scanlines shader
  246. // - ported from HLSL to WebGL / GLSL
  247. // http://www.truevision3d.com/forums/showcase/staticnoise_colorblackwhite_scanline_shaders-t18698.0.html
  248. // Screen Space Static Postprocessor
  249. //
  250. // Produces an analogue noise overlay similar to a film grain / TV static
  251. //
  252. // Original implementation and noise algorithm
  253. // Pat 'Hawthorne' Shearon
  254. //
  255. // Optimized scanlines + noise version with intensity scaling
  256. // Georg 'Leviathan' Steinrohder
  257. // This version is provided under a Creative Commons Attribution 3.0 License
  258. // http://creativecommons.org/licenses/by/3.0/
  259. ------------------------------------------------------------------------- */
  260. 'film': {
  261. uniforms: { tDiffuse: { type: "t", value: 0, texture: null },
  262. time: { type: "f", value: 0.0 },
  263. grayscale: { type: "i", value: 1 }
  264. },
  265. vertex_shader: [
  266. "varying vec2 vUv;",
  267. "void main() {",
  268. "vUv = vec2( uv.x, 1.0 - uv.y );",
  269. "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
  270. "}"
  271. ].join("\n"),
  272. fragment_shader: [
  273. "varying vec2 vUv;",
  274. "uniform sampler2D tDiffuse;",
  275. // control parameter
  276. "uniform float time;",
  277. "uniform bool grayscale;",
  278. // noise effect intensity value (0 = no effect, 1 = full effect)
  279. "const float fNintensity = 0.35;",
  280. // scanlines effect intensity value (0 = no effect, 1 = full effect)
  281. "const float fSintensity = 0.35;",
  282. // scanlines effect count value (0 = no effect, 4096 = full effect)
  283. "const float fScount = 4096.0;",
  284. "void main() {",
  285. // sample the source
  286. "vec4 cTextureScreen = texture2D( tDiffuse, vUv );",
  287. // make some noise
  288. "float x = vUv.x * vUv.y * time * 1000.0;",
  289. "x = mod( x, 13.0 ) * mod( x, 123.0 );",
  290. "float dx = mod( x, 0.01 );",
  291. // add noise
  292. "vec3 cResult = cTextureScreen.rgb + cTextureScreen.rgb * clamp( 0.1 + dx * 100.0, 0.0, 1.0 );",
  293. // get us a sine and cosine
  294. "vec2 sc = vec2( sin(vUv.y * fScount), cos(vUv.y * fScount) );",
  295. // add scanlines
  296. "cResult += cTextureScreen.rgb * vec3( sc.x, sc.y, sc.x ) * fSintensity;",
  297. // interpolate between source and result by intensity
  298. "cResult = cTextureScreen.rgb + clamp( fNintensity, 0.0,1.0 ) * ( cResult - cTextureScreen.rgb );",
  299. // convert to grayscale if desired
  300. "if( grayscale ) {",
  301. "cResult = vec3( cResult.r * 0.3 + cResult.g * 0.59 + cResult.b * 0.11 );",
  302. "}",
  303. "gl_FragColor = vec4( cResult, cTextureScreen.a );",
  304. "}"
  305. ].join("\n")
  306. },
  307. /* -------------------------------------------------------------------------
  308. // Full-screen textured quad shader
  309. ------------------------------------------------------------------------- */
  310. 'screen': {
  311. uniforms: { tDiffuse: { type: "t", value: 0, texture: null },
  312. opacity: { type: "f", value: 1.0 }
  313. },
  314. vertex_shader: [
  315. "varying vec2 vUv;",
  316. "void main() {",
  317. "vUv = vec2( uv.x, 1.0 - uv.y );",
  318. "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
  319. "}"
  320. ].join("\n"),
  321. fragment_shader: [
  322. "varying vec2 vUv;",
  323. "uniform sampler2D tDiffuse;",
  324. "uniform float opacity;",
  325. "void main() {",
  326. "vec4 texel = texture2D( tDiffuse, vUv );",
  327. "gl_FragColor = opacity * texel;",
  328. "}"
  329. ].join("\n")
  330. },
  331. /* -------------------------------------------------------------------------
  332. // Simple test shader
  333. ------------------------------------------------------------------------- */
  334. 'basic': {
  335. uniforms: {},
  336. vertex_shader: [
  337. "void main() {",
  338. "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
  339. "}"
  340. ].join("\n"),
  341. fragment_shader: [
  342. "void main() {",
  343. "gl_FragColor = vec4( 1.0, 0.0, 0.0, 0.5 );",
  344. "}"
  345. ].join("\n")
  346. }
  347. },
  348. buildKernel: function( sigma ) {
  349. // We lop off the sqrt(2 * pi) * sigma term, since we're going to normalize anyway.
  350. function gauss( x, sigma ) {
  351. return Math.exp( - (x * x) / (2.0 * sigma * sigma) );
  352. }
  353. var i, values, sum, halfWidth, kMaxKernelSize = 25, kernelSize = 2 * Math.ceil( sigma * 3.0 ) + 1;
  354. if ( kernelSize > kMaxKernelSize ) kernelSize = kMaxKernelSize;
  355. halfWidth = ( kernelSize - 1 ) * 0.5
  356. values = new Array( kernelSize );
  357. sum = 0.0;
  358. for( i = 0; i < kernelSize; ++i ) {
  359. values[ i ] = gauss( i - halfWidth, sigma );
  360. sum += values[ i ];
  361. }
  362. // normalize the kernel
  363. for( i = 0; i < kernelSize; ++i ) values[ i ] /= sum;
  364. return values;
  365. }
  366. };