WebGLDeferredRenderer.js 27 KB

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