WebGLDeferredRenderer.js 31 KB

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