WebGLDeferredRenderer.js 15 KB

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