WebGLDeferredRenderer.js 32 KB

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