WebGLDeferredRenderer.js 29 KB

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