DeferredHelper.js 15 KB

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