DeferredHelper.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498
  1. /**
  2. * @author alteredq / http://alteredqualia.com/
  3. * @author MPanknin / http://www.redplant.de/
  4. */
  5. THREE.DeferredHelper = function ( parameters ) {
  6. var width = parameters.width;
  7. var height = parameters.height;
  8. var renderer = parameters.renderer;
  9. var additiveSpecular = parameters.additiveSpecular;
  10. //
  11. var geometryEmitter = new THREE.SphereGeometry( 0.7, 7, 7 );
  12. var black = new THREE.Color( 0x000000 );
  13. var colorShader = THREE.ShaderDeferred[ "color" ];
  14. var normalShader = THREE.ShaderDeferred[ "normals" ];
  15. var bumpShader = THREE.ShaderDeferred[ "bump" ];
  16. var clipDepthShader = THREE.ShaderDeferred[ "clipDepth" ];
  17. //
  18. var unlitShader = THREE.ShaderDeferred[ "unlit" ];
  19. var lightShader = THREE.ShaderDeferred[ "light" ];
  20. var compositeShader = THREE.ShaderDeferred[ "composite" ];
  21. var unlitMaterials = [];
  22. var lightMaterials = [];
  23. //
  24. var compColor, compNormal, compDepth, compEmitter, compLight, compFinal;
  25. var passColor, passNormal, passDepth, passEmitter, passLight, compositePass;
  26. var effectFXAA;
  27. var emitterScene, lightScene;
  28. //
  29. var defaultNormalMaterial = new THREE.ShaderMaterial( {
  30. uniforms: THREE.UniformsUtils.clone( normalShader.uniforms ),
  31. vertexShader: normalShader.vertexShader,
  32. fragmentShader: normalShader.fragmentShader
  33. } );
  34. var defaultDepthMaterial = new THREE.ShaderMaterial( {
  35. uniforms: THREE.UniformsUtils.clone( clipDepthShader.uniforms ),
  36. vertexShader: clipDepthShader.vertexShader,
  37. fragmentShader: clipDepthShader.fragmentShader
  38. } );
  39. //
  40. var rtParamsFloatLinear = { minFilter: THREE.NearestFilter, magFilter: THREE.LinearFilter, stencilBuffer: false,
  41. format: THREE.RGBAFormat, type: THREE.FloatType };
  42. var rtParamsFloatNearest = { minFilter: THREE.NearestFilter, magFilter: THREE.NearestFilter, stencilBuffer: false,
  43. format: THREE.RGBAFormat, type: THREE.FloatType };
  44. var rtParamsUByte = { minFilter: THREE.NearestFilter, magFilter: THREE.LinearFilter, stencilBuffer: false,
  45. format: THREE.RGBFormat, type: THREE.UnsignedByteType };
  46. //
  47. var initDeferredMaterials = function ( object ) {
  48. var originalMaterial = object.material;
  49. // color material
  50. // -----------------
  51. // diffuse color
  52. // specular color
  53. // shininess
  54. // diffuse map
  55. // vertex colors
  56. // alphaTest
  57. // morphs
  58. var uniforms = THREE.UniformsUtils.clone( colorShader.uniforms );
  59. var defines = { "USE_MAP": !! originalMaterial.map, "GAMMA_INPUT": true };
  60. var material = new THREE.ShaderMaterial( {
  61. fragmentShader: colorShader.fragmentShader,
  62. vertexShader: colorShader.vertexShader,
  63. uniforms: uniforms,
  64. defines: defines,
  65. shading: originalMaterial.shading
  66. } );
  67. var diffuse = originalMaterial.color;
  68. var specular = originalMaterial.specular !== undefined ? originalMaterial.specular : black;
  69. var shininess = originalMaterial.shininess !== undefined ? originalMaterial.shininess : 1;
  70. uniforms.diffuse.value.copy( diffuse );
  71. uniforms.specular.value.copy( specular );
  72. uniforms.shininess.value = shininess;
  73. uniforms.map.value = originalMaterial.map;
  74. material.vertexColors = originalMaterial.vertexColors;
  75. material.morphTargets = originalMaterial.morphTargets;
  76. material.morphNormals = originalMaterial.morphNormals;
  77. material.alphaTest = originalMaterial.alphaTest;
  78. if ( originalMaterial.bumpMap ) {
  79. var offset = originalMaterial.bumpMap.offset;
  80. var repeat = originalMaterial.bumpMap.repeat;
  81. uniforms.offsetRepeat.value.set( offset.x, offset.y, repeat.x, repeat.y );
  82. }
  83. object.properties.colorMaterial = material;
  84. // normal material
  85. // -----------------
  86. // vertex normals
  87. // morph normals
  88. // bump map
  89. // bump scale
  90. if ( originalMaterial.bumpMap ) {
  91. var uniforms = THREE.UniformsUtils.clone( bumpShader.uniforms );
  92. var normalMaterial = new THREE.ShaderMaterial( {
  93. uniforms: uniforms,
  94. vertexShader: bumpShader.vertexShader,
  95. fragmentShader: bumpShader.fragmentShader,
  96. defines: { "USE_BUMPMAP": true }
  97. } );
  98. uniforms.bumpMap.value = originalMaterial.bumpMap;
  99. uniforms.bumpScale.value = originalMaterial.bumpScale;
  100. var offset = originalMaterial.bumpMap.offset;
  101. var repeat = originalMaterial.bumpMap.repeat;
  102. uniforms.offsetRepeat.value.set( offset.x, offset.y, repeat.x, repeat.y );
  103. object.properties.normalMaterial = normalMaterial;
  104. } else if ( originalMaterial.morphTargets ) {
  105. var normalMaterial = new THREE.ShaderMaterial( {
  106. uniforms: THREE.UniformsUtils.clone( normalShader.uniforms ),
  107. vertexShader: normalShader.vertexShader,
  108. fragmentShader: normalShader.fragmentShader,
  109. shading: originalMaterial.shading
  110. } );
  111. normalMaterial.morphTargets = originalMaterial.morphTargets;
  112. normalMaterial.morphNormals = originalMaterial.morphNormals;
  113. object.properties.normalMaterial = normalMaterial;
  114. } else {
  115. object.properties.normalMaterial = defaultNormalMaterial;
  116. }
  117. // depth material
  118. if ( originalMaterial.morphTargets ) {
  119. var depthMaterial = new THREE.ShaderMaterial( {
  120. uniforms: THREE.UniformsUtils.clone( clipDepthShader.uniforms ),
  121. vertexShader: clipDepthShader.vertexShader,
  122. fragmentShader: clipDepthShader.fragmentShader
  123. } );
  124. depthMaterial.morphTargets = originalMaterial.morphTargets;
  125. object.properties.depthMaterial = depthMaterial;
  126. } else {
  127. object.properties.depthMaterial = defaultDepthMaterial;
  128. }
  129. };
  130. var createDeferredPointLight = function ( light ) {
  131. // setup light material
  132. var materialLight = new THREE.ShaderMaterial( {
  133. uniforms: THREE.UniformsUtils.clone( lightShader.uniforms ),
  134. vertexShader: lightShader.vertexShader,
  135. fragmentShader: lightShader.fragmentShader,
  136. defines: { "ADDITIVE_SPECULAR": additiveSpecular },
  137. blending: THREE.AdditiveBlending,
  138. depthWrite: false,
  139. transparent: true
  140. } );
  141. materialLight.uniforms[ "lightPos" ].value = light.position;
  142. materialLight.uniforms[ "lightRadius" ].value = light.distance;
  143. materialLight.uniforms[ "lightIntensity" ].value = light.intensity;
  144. materialLight.uniforms[ "lightColor" ].value = light.color;
  145. materialLight.uniforms[ "viewWidth" ].value = width;
  146. materialLight.uniforms[ "viewHeight" ].value = height;
  147. materialLight.uniforms[ 'samplerColor' ].value = compColor.renderTarget2;
  148. materialLight.uniforms[ 'samplerNormals' ].value = compNormal.renderTarget2;
  149. materialLight.uniforms[ 'samplerDepth' ].value = compDepth.renderTarget2;
  150. // create light proxy mesh
  151. var geometryLight = new THREE.SphereGeometry( light.distance, 16, 8 );
  152. var meshLight = new THREE.Mesh( geometryLight, materialLight );
  153. meshLight.position = light.position;
  154. // keep reference for size reset
  155. lightMaterials.push( materialLight );
  156. return meshLight;
  157. };
  158. var createEmitter = function ( light ) {
  159. // setup emitter material
  160. var matEmitter = new THREE.ShaderMaterial( {
  161. uniforms: THREE.UniformsUtils.clone( unlitShader.uniforms ),
  162. vertexShader: unlitShader.vertexShader,
  163. fragmentShader: unlitShader.fragmentShader
  164. } );
  165. matEmitter.uniforms[ "viewWidth" ].value = width;
  166. matEmitter.uniforms[ "viewHeight" ].value = height;
  167. matEmitter.uniforms[ "samplerDepth" ].value = compDepth.renderTarget2;
  168. matEmitter.uniforms[ "lightColor" ].value = light.color;
  169. // create emitter mesh
  170. var meshEmitter = new THREE.Mesh( geometryEmitter, matEmitter );
  171. meshEmitter.position = light.position;
  172. // keep reference for size reset
  173. unlitMaterials.push( matEmitter );
  174. return meshEmitter;
  175. };
  176. var initDeferredProperties = function ( object ) {
  177. if ( object.properties.deferredInitialized ) return;
  178. if ( object.material ) initDeferredMaterials( object );
  179. if ( object instanceof THREE.PointLight ) {
  180. var meshEmitter = createEmitter( object );
  181. var meshLight = createDeferredPointLight( object );
  182. lightScene.add( meshLight );
  183. emitterScene.add( meshEmitter );
  184. }
  185. object.properties.deferredInitialized = true;
  186. };
  187. //
  188. var setMaterialColor = function ( object ) {
  189. if ( object.material ) object.material = object.properties.colorMaterial;
  190. };
  191. var setMaterialDepth = function ( object ) {
  192. if ( object.material ) object.material = object.properties.depthMaterial;
  193. };
  194. var setMaterialNormal= function ( object ) {
  195. if ( object.material ) object.material = object.properties.normalMaterial;
  196. };
  197. //
  198. this.setSize = function ( width, height ) {
  199. compColor.setSize( width, height );
  200. compNormal.setSize( width, height );
  201. compDepth.setSize( width, height );
  202. compEmitter.setSize( width, height );
  203. compLight.setSize( width, height );
  204. compFinal.setSize( width, height );
  205. for ( var i = 0, il = unlitMaterials.length; i < il; i ++ ) {
  206. var uniforms = unlitMaterials[ i ].uniforms;
  207. uniforms[ "viewWidth" ].value = width;
  208. uniforms[ "viewHeight" ].value = height;
  209. }
  210. for ( var i = 0, il = lightMaterials.length; i < il; i ++ ) {
  211. var uniforms = lightMaterials[ i ].uniforms;
  212. uniforms[ "viewWidth" ].value = width;
  213. uniforms[ "viewHeight" ].value = height;
  214. uniforms[ 'samplerColor' ].value = compColor.renderTarget2;
  215. uniforms[ 'samplerNormals' ].value = compNormal.renderTarget2;
  216. uniforms[ 'samplerDepth' ].value = compDepth.renderTarget2;
  217. }
  218. compositePass.uniforms[ 'samplerLight' ].value = compLight.renderTarget2;
  219. compositePass.uniforms[ 'samplerEmitter' ].value = compEmitter.renderTarget2;
  220. effectFXAA.uniforms[ 'resolution' ].value.set( 1 / width, 1 / height );
  221. };
  222. //
  223. this.render = function ( scene, camera ) {
  224. // setup deferred properties
  225. if ( ! scene.properties.emitterScene ) scene.properties.emitterScene = new THREE.Scene();
  226. if ( ! scene.properties.lightScene ) scene.properties.lightScene = new THREE.Scene();
  227. emitterScene = scene.properties.emitterScene;
  228. lightScene = scene.properties.lightScene;
  229. passColor.camera = camera;
  230. passNormal.camera = camera;
  231. passDepth.camera = camera;
  232. passEmitter.camera = camera;
  233. passLight.camera = camera;
  234. passColor.scene = scene;
  235. passNormal.scene = scene;
  236. passDepth.scene = scene;
  237. passEmitter.scene = emitterScene;
  238. passLight.scene = lightScene;
  239. scene.traverse( initDeferredProperties );
  240. // g-buffer color
  241. scene.traverse( setMaterialColor );
  242. compColor.render();
  243. // g-buffer depth
  244. scene.traverse( setMaterialDepth );
  245. compDepth.render();
  246. // g-buffer normals
  247. scene.traverse( setMaterialNormal );
  248. compNormal.render();
  249. // emitter pass
  250. compEmitter.render();
  251. // light pass
  252. camera.projectionMatrixInverse.getInverse( camera.projectionMatrix );
  253. for ( var i = 0, il = lightScene.children.length; i < il; i ++ ) {
  254. var uniforms = lightScene.children[ i ].material.uniforms;
  255. uniforms[ "matProjInverse" ].value = camera.projectionMatrixInverse;
  256. uniforms[ "matView" ].value = camera.matrixWorldInverse;
  257. }
  258. compLight.render();
  259. // composite pass
  260. compFinal.render( 0.1 );
  261. };
  262. var createRenderTargets = function ( ) {
  263. // g-buffers
  264. var rtColor = new THREE.WebGLRenderTarget( width, height, rtParamsFloatNearest );
  265. var rtNormal = new THREE.WebGLRenderTarget( width, height, rtParamsFloatLinear );
  266. var rtDepth = new THREE.WebGLRenderTarget( width, height, rtParamsFloatLinear );
  267. var rtLight = new THREE.WebGLRenderTarget( width, height, rtParamsFloatLinear );
  268. var rtEmitter = new THREE.WebGLRenderTarget( width, height, rtParamsUByte );
  269. var rtFinal = new THREE.WebGLRenderTarget( width, height, rtParamsUByte );
  270. rtColor.generateMipmaps = false;
  271. rtNormal.generateMipmaps = false;
  272. rtDepth.generateMipmaps = false;
  273. rtLight.generateMipmaps = false;
  274. rtEmitter.generateMipmaps = false;
  275. rtFinal.generateMipmaps = false;
  276. // composers
  277. passColor = new THREE.RenderPass();
  278. compColor = new THREE.EffectComposer( renderer, rtColor );
  279. compColor.addPass( passColor );
  280. passNormal = new THREE.RenderPass();
  281. compNormal = new THREE.EffectComposer( renderer, rtNormal );
  282. compNormal.addPass( passNormal );
  283. passDepth = new THREE.RenderPass();
  284. compDepth = new THREE.EffectComposer( renderer, rtDepth );
  285. compDepth.addPass( passDepth );
  286. passEmitter = new THREE.RenderPass();
  287. compEmitter = new THREE.EffectComposer( renderer, rtEmitter );
  288. compEmitter.addPass( passEmitter );
  289. passLight = new THREE.RenderPass();
  290. compLight = new THREE.EffectComposer( renderer, rtLight );
  291. compLight.addPass( passLight );
  292. // composite
  293. compositePass = new THREE.ShaderPass( compositeShader );
  294. compositePass.needsSwap = true;
  295. compositePass.uniforms[ 'samplerLight' ].value = compLight.renderTarget2;
  296. compositePass.uniforms[ 'samplerEmitter' ].value = compEmitter.renderTarget2;
  297. // FXAA
  298. effectFXAA = new THREE.ShaderPass( THREE.FXAAShader );
  299. effectFXAA.uniforms[ 'resolution' ].value.set( 1 / width, 1 / height );
  300. // color correction
  301. var effectColor = new THREE.ShaderPass( THREE.ColorCorrectionShader );
  302. effectColor.renderToScreen = true;
  303. effectColor.uniforms[ 'powRGB' ].value.set( 1, 1, 1 );
  304. effectColor.uniforms[ 'mulRGB' ].value.set( 2, 2, 2 );
  305. //
  306. compFinal = new THREE.EffectComposer( renderer, rtFinal );
  307. compFinal.addPass( compositePass );
  308. compFinal.addPass( effectFXAA );
  309. compFinal.addPass( effectColor );
  310. };
  311. // init
  312. createRenderTargets();
  313. };