WebGLDeferredRenderer.js 16 KB

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