WebGLDeferredRenderer.js 25 KB

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