WebGLDeferredRenderer.js 29 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138
  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 fullWidth = parameters.width !== undefined ? parameters.width : 800;
  8. var fullHeight = parameters.height !== undefined ? parameters.height : 600;
  9. var currentScale = parameters.scale !== undefined ? parameters.scale : 1;
  10. var scaledWidth = Math.floor( currentScale * fullWidth );
  11. var scaledHeight = Math.floor( currentScale * fullHeight );
  12. var brightness = parameters.brightness !== undefined ? parameters.brightness : 1;
  13. var antialias = parameters.antialias !== undefined ? parameters.antialias : false;
  14. this.renderer = parameters.renderer;
  15. if ( this.renderer === undefined ) {
  16. this.renderer = new THREE.WebGLRenderer( { alpha: false, antialias: false } );
  17. this.renderer.setSize( fullWidth, fullHeight );
  18. this.renderer.setClearColorHex( 0x000000, 0 );
  19. this.renderer.autoClear = false;
  20. }
  21. this.domElement = this.renderer.domElement;
  22. //
  23. var gl = this.renderer.context;
  24. //
  25. var positionVS = new THREE.Vector3();
  26. var directionVS = new THREE.Vector3();
  27. var rightVS = new THREE.Vector3();
  28. var normalVS = new THREE.Vector3();
  29. //
  30. var geometryLightSphere = new THREE.SphereGeometry( 1, 16, 8 );
  31. var geometryLightPlane = new THREE.PlaneGeometry( 2, 2 );
  32. var black = new THREE.Color( 0x000000 );
  33. var colorShader = THREE.ShaderDeferred[ "color" ];
  34. var normalDepthShader = THREE.ShaderDeferred[ "normalDepth" ];
  35. //
  36. var emissiveLightShader = THREE.ShaderDeferred[ "emissiveLight" ];
  37. var pointLightShader = THREE.ShaderDeferred[ "pointLight" ];
  38. var spotLightShader = THREE.ShaderDeferred[ "spotLight" ];
  39. var directionalLightShader = THREE.ShaderDeferred[ "directionalLight" ];
  40. var hemisphereLightShader = THREE.ShaderDeferred[ "hemisphereLight" ];
  41. var areaLightShader = THREE.ShaderDeferred[ "areaLight" ];
  42. var compositeShader = THREE.ShaderDeferred[ "composite" ];
  43. //
  44. var compColor, compNormal, compDepth, compLight, compFinal;
  45. var passColor, passNormal, passDepth, passLightFullscreen, passLightProxy, compositePass;
  46. var effectFXAA;
  47. //
  48. var lightSceneFullscreen, lightSceneProxy;
  49. //
  50. var resizableMaterials = [];
  51. //
  52. var invisibleMaterial = new THREE.ShaderMaterial();
  53. invisibleMaterial.visible = false;
  54. var defaultNormalDepthMaterial = new THREE.ShaderMaterial( {
  55. uniforms: THREE.UniformsUtils.clone( normalDepthShader.uniforms ),
  56. vertexShader: normalDepthShader.vertexShader,
  57. fragmentShader: normalDepthShader.fragmentShader,
  58. blending: THREE.NoBlending
  59. } );
  60. //
  61. var initDeferredMaterials = function ( object ) {
  62. if ( object.material instanceof THREE.MeshFaceMaterial ) {
  63. var colorMaterials = [];
  64. var normalDepthMaterials = [];
  65. var materials = object.material.materials;
  66. for ( var i = 0, il = materials.length; i < il; i ++ ) {
  67. var deferredMaterials = createDeferredMaterials( materials[ i ] );
  68. if ( deferredMaterials.transparent ) {
  69. colorMaterials.push( invisibleMaterial );
  70. normalDepthMaterials.push( invisibleMaterial );
  71. } else {
  72. colorMaterials.push( deferredMaterials.colorMaterial );
  73. normalDepthMaterials.push( deferredMaterials.normalDepthMaterial );
  74. }
  75. }
  76. object.properties.colorMaterial = new THREE.MeshFaceMaterial( colorMaterials );
  77. object.properties.normalDepthMaterial = new THREE.MeshFaceMaterial( normalDepthMaterials );
  78. } else {
  79. var deferredMaterials = createDeferredMaterials( object.material );
  80. object.properties.colorMaterial = deferredMaterials.colorMaterial;
  81. object.properties.normalDepthMaterial = deferredMaterials.normalDepthMaterial;
  82. object.properties.transparent = deferredMaterials.transparent;
  83. }
  84. };
  85. var createDeferredMaterials = function ( originalMaterial ) {
  86. var deferredMaterials = {};
  87. // color material
  88. // -----------------
  89. // diffuse color
  90. // specular color
  91. // shininess
  92. // diffuse map
  93. // vertex colors
  94. // alphaTest
  95. // morphs
  96. var uniforms = THREE.UniformsUtils.clone( colorShader.uniforms );
  97. var defines = { "USE_MAP": !! originalMaterial.map, "USE_ENVMAP": !! originalMaterial.envMap, "GAMMA_INPUT": true };
  98. var material = new THREE.ShaderMaterial( {
  99. fragmentShader: colorShader.fragmentShader,
  100. vertexShader: colorShader.vertexShader,
  101. uniforms: uniforms,
  102. defines: defines,
  103. shading: originalMaterial.shading
  104. } );
  105. if ( originalMaterial instanceof THREE.MeshBasicMaterial ) {
  106. var diffuse = black;
  107. var emissive = originalMaterial.color;
  108. } else {
  109. var diffuse = originalMaterial.color;
  110. var emissive = originalMaterial.emissive !== undefined ? originalMaterial.emissive : black;
  111. }
  112. var specular = originalMaterial.specular !== undefined ? originalMaterial.specular : black;
  113. var shininess = originalMaterial.shininess !== undefined ? originalMaterial.shininess : 1;
  114. var wrapAround = originalMaterial.wrapAround !== undefined ? ( originalMaterial.wrapAround ? -1 : 1 ) : 1;
  115. var additiveSpecular = originalMaterial.metal !== undefined ? ( originalMaterial.metal ? 1 : -1 ) : -1;
  116. uniforms.emissive.value.copyGammaToLinear( emissive );
  117. uniforms.diffuse.value.copyGammaToLinear( diffuse );
  118. uniforms.specular.value.copyGammaToLinear( specular );
  119. uniforms.shininess.value = shininess;
  120. uniforms.wrapAround.value = wrapAround;
  121. uniforms.additiveSpecular.value = additiveSpecular;
  122. uniforms.map.value = originalMaterial.map;
  123. if ( originalMaterial.envMap ) {
  124. uniforms.envMap.value = originalMaterial.envMap;
  125. uniforms.useRefract.value = originalMaterial.envMap.mapping instanceof THREE.CubeRefractionMapping;
  126. uniforms.refractionRatio.value = originalMaterial.refractionRatio;
  127. uniforms.combine.value = originalMaterial.combine;
  128. uniforms.reflectivity.value = originalMaterial.reflectivity;
  129. uniforms.flipEnvMap.value = ( originalMaterial.envMap instanceof THREE.WebGLRenderTargetCube ) ? 1 : -1;
  130. uniforms.samplerNormalDepth.value = compNormalDepth.renderTarget2;
  131. uniforms.viewWidth.value = scaledWidth;
  132. uniforms.viewHeight.value = scaledHeight;
  133. resizableMaterials.push( material );
  134. }
  135. material.vertexColors = originalMaterial.vertexColors;
  136. material.morphTargets = originalMaterial.morphTargets;
  137. material.morphNormals = originalMaterial.morphNormals;
  138. material.skinning = originalMaterial.skinning;
  139. material.alphaTest = originalMaterial.alphaTest;
  140. material.wireframe = originalMaterial.wireframe;
  141. // uv repeat and offset setting priorities
  142. // 1. color map
  143. // 2. specular map
  144. // 3. normal map
  145. // 4. bump map
  146. var uvScaleMap;
  147. if ( originalMaterial.map ) {
  148. uvScaleMap = originalMaterial.map;
  149. } else if ( originalMaterial.specularMap ) {
  150. uvScaleMap = originalMaterial.specularMap;
  151. } else if ( originalMaterial.normalMap ) {
  152. uvScaleMap = originalMaterial.normalMap;
  153. } else if ( originalMaterial.bumpMap ) {
  154. uvScaleMap = originalMaterial.bumpMap;
  155. }
  156. if ( uvScaleMap !== undefined ) {
  157. var offset = uvScaleMap.offset;
  158. var repeat = uvScaleMap.repeat;
  159. uniforms.offsetRepeat.value.set( offset.x, offset.y, repeat.x, repeat.y );
  160. }
  161. deferredMaterials.colorMaterial = material;
  162. // normal + depth material
  163. // -----------------
  164. // vertex normals
  165. // morph normals
  166. // bump map
  167. // bump scale
  168. // clip depth
  169. if ( originalMaterial.morphTargets || originalMaterial.skinning || originalMaterial.bumpMap ) {
  170. var uniforms = THREE.UniformsUtils.clone( normalDepthShader.uniforms );
  171. var defines = { "USE_BUMPMAP": !!originalMaterial.bumpMap };
  172. var normalDepthMaterial = new THREE.ShaderMaterial( {
  173. uniforms: uniforms,
  174. vertexShader: normalDepthShader.vertexShader,
  175. fragmentShader: normalDepthShader.fragmentShader,
  176. shading: originalMaterial.shading,
  177. defines: defines,
  178. blending: THREE.NoBlending
  179. } );
  180. normalDepthMaterial.morphTargets = originalMaterial.morphTargets;
  181. normalDepthMaterial.morphNormals = originalMaterial.morphNormals;
  182. normalDepthMaterial.skinning = originalMaterial.skinning;
  183. if ( originalMaterial.bumpMap ) {
  184. uniforms.bumpMap.value = originalMaterial.bumpMap;
  185. uniforms.bumpScale.value = originalMaterial.bumpScale;
  186. var offset = originalMaterial.bumpMap.offset;
  187. var repeat = originalMaterial.bumpMap.repeat;
  188. uniforms.offsetRepeat.value.set( offset.x, offset.y, repeat.x, repeat.y );
  189. }
  190. } else {
  191. var normalDepthMaterial = defaultNormalDepthMaterial.clone();
  192. }
  193. normalDepthMaterial.wireframe = originalMaterial.wireframe;
  194. normalDepthMaterial.vertexColors = originalMaterial.vertexColors;
  195. deferredMaterials.normalDepthMaterial = normalDepthMaterial;
  196. //
  197. deferredMaterials.transparent = originalMaterial.transparent;
  198. return deferredMaterials;
  199. };
  200. var updatePointLightProxy = function ( lightProxy ) {
  201. var light = lightProxy.properties.originalLight;
  202. var uniforms = lightProxy.material.uniforms;
  203. // skip infinite pointlights
  204. // right now you can't switch between infinite and finite pointlights
  205. // it's just too messy as they use different proxies
  206. var distance = light.distance;
  207. if ( distance > 0 ) {
  208. lightProxy.scale.set( 1, 1, 1 ).multiplyScalar( distance );
  209. uniforms[ "lightRadius" ].value = distance;
  210. positionVS.copy( light.matrixWorld.getPosition() );
  211. camera.matrixWorldInverse.multiplyVector3( positionVS );
  212. uniforms[ "lightPositionVS" ].value.copy( positionVS );
  213. lightProxy.position.copy( light.matrixWorld.getPosition() );
  214. } else {
  215. uniforms[ "lightRadius" ].value = Infinity;
  216. }
  217. // linear space colors
  218. var intensity = light.intensity * light.intensity;
  219. uniforms[ "lightIntensity" ].value = intensity;
  220. uniforms[ "lightColor" ].value.copyGammaToLinear( light.color );
  221. };
  222. var createDeferredPointLight = function ( light ) {
  223. // setup light material
  224. var materialLight = new THREE.ShaderMaterial( {
  225. uniforms: THREE.UniformsUtils.clone( pointLightShader.uniforms ),
  226. vertexShader: pointLightShader.vertexShader,
  227. fragmentShader: pointLightShader.fragmentShader,
  228. blending: THREE.AdditiveBlending,
  229. depthWrite: false,
  230. transparent: true,
  231. side: THREE.BackSide
  232. } );
  233. // infinite pointlights use full-screen quad proxy
  234. // regular pointlights use sphere proxy
  235. var geometry;
  236. if ( light.distance > 0 ) {
  237. geometry = geometryLightSphere;
  238. } else {
  239. geometry = geometryLightPlane;
  240. materialLight.depthTest = false;
  241. materialLight.side = THREE.FrontSide;
  242. }
  243. materialLight.uniforms[ "viewWidth" ].value = scaledWidth;
  244. materialLight.uniforms[ "viewHeight" ].value = scaledHeight;
  245. materialLight.uniforms[ 'samplerColor' ].value = compColor.renderTarget2;
  246. materialLight.uniforms[ 'samplerNormalDepth' ].value = compNormalDepth.renderTarget2;
  247. // create light proxy mesh
  248. var meshLight = new THREE.Mesh( geometry, materialLight );
  249. // keep reference for color and intensity updates
  250. meshLight.properties.originalLight = light;
  251. // keep reference for size reset
  252. resizableMaterials.push( materialLight );
  253. // sync proxy uniforms to the original light
  254. updatePointLightProxy( meshLight );
  255. return meshLight;
  256. };
  257. var updateSpotLightProxy = function ( lightProxy ) {
  258. var light = lightProxy.properties.originalLight;
  259. var uniforms = lightProxy.material.uniforms;
  260. var viewMatrix = camera.matrixWorldInverse;
  261. var modelMatrix = light.matrixWorld;
  262. positionVS.copy( modelMatrix.getPosition() );
  263. viewMatrix.multiplyVector3( positionVS );
  264. directionVS.copy( modelMatrix.getPosition() );
  265. directionVS.subSelf( light.target.matrixWorld.getPosition() );
  266. directionVS.normalize();
  267. viewMatrix.rotateAxis( directionVS );
  268. uniforms[ "lightPositionVS" ].value.copy( positionVS );
  269. uniforms[ "lightDirectionVS" ].value.copy( directionVS );
  270. uniforms[ "lightAngle" ].value = light.angle;
  271. uniforms[ "lightDistance" ].value = light.distance;
  272. // linear space colors
  273. var intensity = light.intensity * light.intensity;
  274. uniforms[ "lightIntensity" ].value = intensity;
  275. uniforms[ "lightColor" ].value.copyGammaToLinear( light.color );
  276. };
  277. var createDeferredSpotLight = function ( light ) {
  278. // setup light material
  279. var uniforms = THREE.UniformsUtils.clone( spotLightShader.uniforms );
  280. var materialLight = new THREE.ShaderMaterial( {
  281. uniforms: uniforms,
  282. vertexShader: spotLightShader.vertexShader,
  283. fragmentShader: spotLightShader.fragmentShader,
  284. blending: THREE.AdditiveBlending,
  285. depthWrite: false,
  286. depthTest: false,
  287. transparent: true
  288. } );
  289. uniforms[ "viewWidth" ].value = scaledWidth;
  290. uniforms[ "viewHeight" ].value = scaledHeight;
  291. uniforms[ 'samplerColor' ].value = compColor.renderTarget2;
  292. uniforms[ 'samplerNormalDepth' ].value = compNormalDepth.renderTarget2;
  293. // create light proxy mesh
  294. var meshLight = new THREE.Mesh( geometryLightPlane, materialLight );
  295. // keep reference for color and intensity updates
  296. meshLight.properties.originalLight = light;
  297. // keep reference for size reset
  298. resizableMaterials.push( materialLight );
  299. // sync proxy uniforms to the original light
  300. updateSpotLightProxy( meshLight );
  301. return meshLight;
  302. };
  303. var updateDirectionalLightProxy = function ( lightProxy ) {
  304. var light = lightProxy.properties.originalLight;
  305. var uniforms = lightProxy.material.uniforms;
  306. directionVS.copy( light.matrixWorld.getPosition() );
  307. directionVS.subSelf( light.target.matrixWorld.getPosition() );
  308. directionVS.normalize();
  309. camera.matrixWorldInverse.rotateAxis( directionVS );
  310. uniforms[ "lightDirectionVS" ].value.copy( directionVS );
  311. // linear space colors
  312. var intensity = light.intensity * light.intensity;
  313. uniforms[ "lightIntensity" ].value = intensity;
  314. uniforms[ "lightColor" ].value.copyGammaToLinear( light.color );
  315. };
  316. var createDeferredDirectionalLight = function ( light ) {
  317. // setup light material
  318. var uniforms = THREE.UniformsUtils.clone( directionalLightShader.uniforms );
  319. var materialLight = new THREE.ShaderMaterial( {
  320. uniforms: uniforms,
  321. vertexShader: directionalLightShader.vertexShader,
  322. fragmentShader: directionalLightShader.fragmentShader,
  323. blending: THREE.AdditiveBlending,
  324. depthWrite: false,
  325. depthTest: false,
  326. transparent: true
  327. } );
  328. uniforms[ "viewWidth" ].value = scaledWidth;
  329. uniforms[ "viewHeight" ].value = scaledHeight;
  330. uniforms[ 'samplerColor' ].value = compColor.renderTarget2;
  331. uniforms[ 'samplerNormalDepth' ].value = compNormalDepth.renderTarget2;
  332. // create light proxy mesh
  333. var meshLight = new THREE.Mesh( geometryLightPlane, materialLight );
  334. // keep reference for color and intensity updates
  335. meshLight.properties.originalLight = light;
  336. // keep reference for size reset
  337. resizableMaterials.push( materialLight );
  338. // sync proxy uniforms to the original light
  339. updateDirectionalLightProxy( meshLight );
  340. return meshLight;
  341. };
  342. var updateHemisphereLightProxy = function ( lightProxy ) {
  343. var light = lightProxy.properties.originalLight;
  344. var uniforms = lightProxy.material.uniforms;
  345. directionVS.copy( light.matrixWorld.getPosition() );
  346. directionVS.normalize();
  347. camera.matrixWorldInverse.rotateAxis( directionVS );
  348. uniforms[ "lightDirectionVS" ].value.copy( directionVS );
  349. // linear space colors
  350. var intensity = light.intensity * light.intensity;
  351. uniforms[ "lightIntensity" ].value = intensity;
  352. uniforms[ "lightColorSky" ].value.copyGammaToLinear( light.color );
  353. uniforms[ "lightColorGround" ].value.copyGammaToLinear( light.groundColor );
  354. };
  355. var createDeferredHemisphereLight = function ( light ) {
  356. // setup light material
  357. var uniforms = THREE.UniformsUtils.clone( hemisphereLightShader.uniforms );
  358. var materialLight = new THREE.ShaderMaterial( {
  359. uniforms: uniforms,
  360. vertexShader: hemisphereLightShader.vertexShader,
  361. fragmentShader: hemisphereLightShader.fragmentShader,
  362. blending: THREE.AdditiveBlending,
  363. depthWrite: false,
  364. depthTest: false,
  365. transparent: true
  366. } );
  367. uniforms[ "viewWidth" ].value = scaledWidth;
  368. uniforms[ "viewHeight" ].value = scaledHeight;
  369. uniforms[ 'samplerColor' ].value = compColor.renderTarget2;
  370. uniforms[ 'samplerNormalDepth' ].value = compNormalDepth.renderTarget2;
  371. // create light proxy mesh
  372. var meshLight = new THREE.Mesh( geometryLightPlane, materialLight );
  373. // keep reference for color and intensity updates
  374. meshLight.properties.originalLight = light;
  375. // keep reference for size reset
  376. resizableMaterials.push( materialLight );
  377. // sync proxy uniforms to the original light
  378. updateHemisphereLightProxy( meshLight );
  379. return meshLight;
  380. };
  381. var updateAreaLightProxy = function ( lightProxy ) {
  382. var light = lightProxy.properties.originalLight;
  383. var uniforms = lightProxy.material.uniforms;
  384. var modelMatrix = light.matrixWorld;
  385. var viewMatrix = camera.matrixWorldInverse;
  386. positionVS.copy( modelMatrix.getPosition() );
  387. viewMatrix.multiplyVector3( positionVS );
  388. uniforms[ "lightPositionVS" ].value.copy( positionVS );
  389. rightVS.copy( light.right );
  390. normalVS.copy( light.normal );
  391. modelMatrix.rotateAxis( rightVS );
  392. modelMatrix.rotateAxis( normalVS );
  393. viewMatrix.rotateAxis( rightVS );
  394. viewMatrix.rotateAxis( normalVS );
  395. uniforms[ "lightRightVS" ].value.copy( rightVS );
  396. uniforms[ "lightNormalVS" ].value.copy( normalVS );
  397. uniforms[ "lightWidth" ].value = light.width;
  398. uniforms[ "lightHeight" ].value = light.height;
  399. // linear space colors
  400. var intensity = light.intensity * light.intensity;
  401. uniforms[ "lightIntensity" ].value = intensity;
  402. uniforms[ "lightColor" ].value.copyGammaToLinear( light.color );
  403. };
  404. var createDeferredAreaLight = function ( light ) {
  405. // setup light material
  406. var uniforms = THREE.UniformsUtils.clone( areaLightShader.uniforms );
  407. var materialLight = new THREE.ShaderMaterial( {
  408. uniforms: uniforms,
  409. vertexShader: areaLightShader.vertexShader,
  410. fragmentShader: areaLightShader.fragmentShader,
  411. blending: THREE.AdditiveBlending,
  412. depthWrite: false,
  413. depthTest: false,
  414. transparent: true
  415. } );
  416. uniforms[ "viewWidth" ].value = scaledWidth;
  417. uniforms[ "viewHeight" ].value = scaledHeight;
  418. uniforms[ 'samplerColor' ].value = compColor.renderTarget2;
  419. uniforms[ 'samplerNormalDepth' ].value = compNormalDepth.renderTarget2;
  420. // create light proxy mesh
  421. var meshLight = new THREE.Mesh( geometryLightPlane, materialLight );
  422. // keep reference for color and intensity updates
  423. meshLight.properties.originalLight = light;
  424. // keep reference for size reset
  425. resizableMaterials.push( materialLight );
  426. // sync proxy uniforms to the original light
  427. updateAreaLightProxy( meshLight );
  428. return meshLight;
  429. };
  430. var createDeferredEmissiveLight = function () {
  431. // setup light material
  432. var materialLight = new THREE.ShaderMaterial( {
  433. uniforms: THREE.UniformsUtils.clone( emissiveLightShader.uniforms ),
  434. vertexShader: emissiveLightShader.vertexShader,
  435. fragmentShader: emissiveLightShader.fragmentShader,
  436. depthTest: false,
  437. depthWrite: false,
  438. blending: THREE.NoBlending
  439. } );
  440. materialLight.uniforms[ "viewWidth" ].value = scaledWidth;
  441. materialLight.uniforms[ "viewHeight" ].value = scaledHeight;
  442. materialLight.uniforms[ 'samplerColor' ].value = compColor.renderTarget2;
  443. // create light proxy mesh
  444. var meshLight = new THREE.Mesh( geometryLightPlane, materialLight );
  445. // keep reference for size reset
  446. resizableMaterials.push( materialLight );
  447. return meshLight;
  448. };
  449. var initDeferredProperties = function ( object ) {
  450. if ( object.properties.deferredInitialized ) return;
  451. if ( object.material ) initDeferredMaterials( object );
  452. if ( object instanceof THREE.PointLight ) {
  453. var proxy = createDeferredPointLight( object );
  454. if ( object.distance > 0 ) {
  455. lightSceneProxy.add( proxy );
  456. } else {
  457. lightSceneFullscreen.add( proxy );
  458. }
  459. } else if ( object instanceof THREE.SpotLight ) {
  460. var proxy = createDeferredSpotLight( object );
  461. lightSceneFullscreen.add( proxy );
  462. } else if ( object instanceof THREE.DirectionalLight ) {
  463. var proxy = createDeferredDirectionalLight( object );
  464. lightSceneFullscreen.add( proxy );
  465. } else if ( object instanceof THREE.HemisphereLight ) {
  466. var proxy = createDeferredHemisphereLight( object );
  467. lightSceneFullscreen.add( proxy );
  468. } else if ( object instanceof THREE.AreaLight ) {
  469. var proxy = createDeferredAreaLight( object );
  470. lightSceneFullscreen.add( proxy );
  471. }
  472. object.properties.deferredInitialized = true;
  473. };
  474. //
  475. var setMaterialColor = function ( object ) {
  476. if ( object.material ) {
  477. if ( object.properties.transparent ) {
  478. object.material = invisibleMaterial;
  479. } else {
  480. object.material = object.properties.colorMaterial;
  481. }
  482. }
  483. };
  484. var setMaterialNormalDepth = function ( object ) {
  485. if ( object.material ) {
  486. if ( object.properties.transparent ) {
  487. object.material = invisibleMaterial;
  488. } else {
  489. object.material = object.properties.normalDepthMaterial;
  490. }
  491. }
  492. };
  493. // external API
  494. this.setAntialias = function ( enabled ) {
  495. antialias = enabled;
  496. if ( antialias ) {
  497. effectFXAA.enabled = true;
  498. compositePass.renderToScreen = false;
  499. } else {
  500. effectFXAA.enabled = false;
  501. compositePass.renderToScreen = true;
  502. }
  503. };
  504. this.getAntialias = function () {
  505. return antialias;
  506. };
  507. this.setScale = function ( scale ) {
  508. currentScale = scale;
  509. scaledWidth = Math.floor( currentScale * fullWidth );
  510. scaledHeight = Math.floor( currentScale * fullHeight );
  511. compNormalDepth.setSize( scaledWidth, scaledHeight );
  512. compColor.setSize( scaledWidth, scaledHeight );
  513. compLight.setSize( scaledWidth, scaledHeight );
  514. compFinal.setSize( scaledWidth, scaledHeight );
  515. compColor.renderTarget2.shareDepthFrom = compNormalDepth.renderTarget2;
  516. compLight.renderTarget2.shareDepthFrom = compNormalDepth.renderTarget2;
  517. for ( var i = 0, il = resizableMaterials.length; i < il; i ++ ) {
  518. var uniforms = resizableMaterials[ i ].uniforms;
  519. uniforms[ "viewWidth" ].value = scaledWidth;
  520. uniforms[ "viewHeight" ].value = scaledHeight;
  521. if ( uniforms[ 'samplerColor' ] ) uniforms[ 'samplerColor' ].value = compColor.renderTarget2;
  522. if ( uniforms[ 'samplerNormalDepth' ] ) uniforms[ 'samplerNormalDepth' ].value = compNormalDepth.renderTarget2;
  523. }
  524. compositePass.uniforms[ 'samplerLight' ].value = compLight.renderTarget2;
  525. effectFXAA.uniforms[ 'resolution' ].value.set( 1 / fullWidth, 1 / fullHeight );
  526. };
  527. this.setSize = function ( width, height ) {
  528. fullWidth = width;
  529. fullHeight = height;
  530. this.renderer.setSize( fullWidth, fullHeight );
  531. this.setScale( currentScale );
  532. };
  533. //
  534. function updateLightProxy ( proxy, camera ) {
  535. var uniforms = proxy.material.uniforms;
  536. if ( uniforms[ "matProjInverse" ] ) uniforms[ "matProjInverse" ].value = camera.projectionMatrixInverse;
  537. if ( uniforms[ "matView" ] ) uniforms[ "matView" ].value = camera.matrixWorldInverse;
  538. var originalLight = proxy.properties.originalLight;
  539. if ( originalLight ) {
  540. proxy.visible = originalLight.visible;
  541. if ( originalLight instanceof THREE.PointLight ) {
  542. updatePointLightProxy( proxy );
  543. } else if ( originalLight instanceof THREE.SpotLight ) {
  544. updateSpotLightProxy( proxy );
  545. } else if ( originalLight instanceof THREE.DirectionalLight ) {
  546. updateDirectionalLightProxy( proxy );
  547. } else if ( originalLight instanceof THREE.HemisphereLight ) {
  548. updateHemisphereLightProxy( proxy );
  549. } else if ( originalLight instanceof THREE.AreaLight ) {
  550. updateAreaLightProxy( proxy );
  551. }
  552. }
  553. };
  554. this.render = function ( scene, camera ) {
  555. // setup deferred properties
  556. if ( ! scene.properties.lightSceneProxy ) {
  557. scene.properties.lightSceneProxy = new THREE.Scene();
  558. scene.properties.lightSceneFullscreen = new THREE.Scene();
  559. var meshLight = createDeferredEmissiveLight();
  560. scene.properties.lightSceneFullscreen.add( meshLight );
  561. }
  562. lightSceneProxy = scene.properties.lightSceneProxy;
  563. lightSceneFullscreen = scene.properties.lightSceneFullscreen;
  564. passColor.camera = camera;
  565. passNormalDepth.camera = camera;
  566. passLightProxy.camera = camera;
  567. passLightFullscreen.camera = THREE.EffectComposer.camera;
  568. passColor.scene = scene;
  569. passNormalDepth.scene = scene;
  570. passLightFullscreen.scene = lightSceneFullscreen;
  571. passLightProxy.scene = lightSceneProxy;
  572. scene.traverse( initDeferredProperties );
  573. // update scene graph only once per frame
  574. // (both color and normalDepth passes use exactly the same scene state)
  575. this.renderer.autoUpdateScene = false;
  576. scene.updateMatrixWorld();
  577. // 1) g-buffer normals + depth pass
  578. scene.traverse( setMaterialNormalDepth );
  579. // clear shared depth buffer
  580. this.renderer.autoClearDepth = true;
  581. this.renderer.autoClearStencil = true;
  582. // write 1 to shared stencil buffer
  583. // for non-background pixels
  584. //gl.enable( gl.STENCIL_TEST );
  585. gl.stencilOp( gl.REPLACE, gl.REPLACE, gl.REPLACE );
  586. gl.stencilFunc( gl.ALWAYS, 1, 0xffffffff );
  587. gl.clearStencil( 0 );
  588. compNormalDepth.render();
  589. // just touch foreground pixels (stencil == 1)
  590. // both in color and light passes
  591. gl.stencilFunc( gl.EQUAL, 1, 0xffffffff );
  592. gl.stencilOp( gl.KEEP, gl.KEEP, gl.KEEP );
  593. // 2) g-buffer color pass
  594. scene.traverse( setMaterialColor );
  595. // must use clean slate depth buffer
  596. // otherwise there are z-fighting glitches
  597. // not enough precision between two geometry passes
  598. // just to use EQUAL depth test
  599. this.renderer.autoClearDepth = true;
  600. this.renderer.autoClearStencil = false;
  601. compColor.render();
  602. // 3) light pass
  603. // do not clear depth buffer in this pass
  604. // depth from geometry pass is used for light culling
  605. // (write light proxy color pixel if behind scene pixel)
  606. this.renderer.autoClearDepth = false;
  607. this.renderer.autoUpdateScene = true;
  608. gl.depthFunc( gl.GEQUAL );
  609. camera.projectionMatrixInverse.getInverse( camera.projectionMatrix );
  610. for ( var i = 0, il = lightSceneProxy.children.length; i < il; i ++ ) {
  611. var proxy = lightSceneProxy.children[ i ];
  612. updateLightProxy( proxy, camera );
  613. }
  614. for ( var i = 0, il = lightSceneFullscreen.children.length; i < il; i ++ ) {
  615. var proxy = lightSceneFullscreen.children[ i ];
  616. updateLightProxy( proxy, camera );
  617. }
  618. compLight.render();
  619. // 4) composite pass
  620. // return back to usual depth and stencil handling state
  621. this.renderer.autoClearDepth = true;
  622. this.renderer.autoClearStencil = true;
  623. gl.depthFunc( gl.LEQUAL );
  624. gl.disable( gl.STENCIL_TEST );
  625. compFinal.render( 0.1 );
  626. };
  627. //
  628. var createRenderTargets = function ( ) {
  629. var rtParamsFloatLinear = { minFilter: THREE.NearestFilter, magFilter: THREE.LinearFilter, stencilBuffer: true,
  630. format: THREE.RGBAFormat, type: THREE.FloatType };
  631. var rtParamsFloatNearest = { minFilter: THREE.NearestFilter, magFilter: THREE.NearestFilter, stencilBuffer: true,
  632. format: THREE.RGBAFormat, type: THREE.FloatType };
  633. var rtParamsUByte = { minFilter: THREE.NearestFilter, magFilter: THREE.LinearFilter, stencilBuffer: false,
  634. format: THREE.RGBFormat, type: THREE.UnsignedByteType };
  635. // g-buffers
  636. var rtColor = new THREE.WebGLRenderTarget( scaledWidth, scaledHeight, rtParamsFloatNearest );
  637. var rtNormalDepth = new THREE.WebGLRenderTarget( scaledWidth, scaledHeight, rtParamsFloatNearest );
  638. var rtLight = new THREE.WebGLRenderTarget( scaledWidth, scaledHeight, rtParamsFloatLinear );
  639. var rtFinal = new THREE.WebGLRenderTarget( scaledWidth, scaledHeight, rtParamsUByte );
  640. rtColor.generateMipmaps = false;
  641. rtNormalDepth.generateMipmaps = false;
  642. rtLight.generateMipmaps = false;
  643. rtFinal.generateMipmaps = false;
  644. // normal + depth composer
  645. passNormalDepth = new THREE.RenderPass();
  646. passNormalDepth.clear = true;
  647. compNormalDepth = new THREE.EffectComposer( _this.renderer, rtNormalDepth );
  648. compNormalDepth.addPass( passNormalDepth );
  649. // color composer
  650. passColor = new THREE.RenderPass();
  651. passColor.clear = true;
  652. compColor = new THREE.EffectComposer( _this.renderer, rtColor );
  653. compColor.addPass( passColor );
  654. compColor.renderTarget2.shareDepthFrom = compNormalDepth.renderTarget2;
  655. // light composer
  656. passLightFullscreen = new THREE.RenderPass();
  657. passLightFullscreen.clear = true;
  658. passLightProxy = new THREE.RenderPass();
  659. passLightProxy.clear = false;
  660. compLight = new THREE.EffectComposer( _this.renderer, rtLight );
  661. compLight.addPass( passLightFullscreen );
  662. compLight.addPass( passLightProxy );
  663. compLight.renderTarget2.shareDepthFrom = compNormalDepth.renderTarget2;
  664. // final composer
  665. compositePass = new THREE.ShaderPass( compositeShader );
  666. compositePass.uniforms[ 'samplerLight' ].value = compLight.renderTarget2;
  667. compositePass.uniforms[ 'brightness' ].value = brightness;
  668. compositePass.material.blending = THREE.NoBlending;
  669. compositePass.clear = true;
  670. // FXAA
  671. effectFXAA = new THREE.ShaderPass( THREE.FXAAShader );
  672. effectFXAA.uniforms[ 'resolution' ].value.set( 1 / fullWidth, 1 / fullHeight );
  673. effectFXAA.renderToScreen = true;
  674. //
  675. compFinal = new THREE.EffectComposer( _this.renderer, rtFinal );
  676. compFinal.addPass( compositePass );
  677. compFinal.addPass( effectFXAA );
  678. if ( antialias ) {
  679. effectFXAA.enabled = true;
  680. compositePass.renderToScreen = false;
  681. } else {
  682. effectFXAA.enabled = false;
  683. compositePass.renderToScreen = true;
  684. }
  685. };
  686. // init
  687. createRenderTargets();
  688. };