DeferredHelper.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432
  1. /**
  2. * @author alteredq / http://alteredqualia.com/
  3. * @author MPanknin / http://www.redplant.de/
  4. */
  5. THREE.DeferredHelper = function ( parameters ) {
  6. var width = parameters.width;
  7. var height = parameters.height;
  8. var renderer = parameters.renderer;
  9. var additiveSpecular = parameters.additiveSpecular;
  10. // scene for light proxy geometry
  11. var lightScene = new THREE.Scene();
  12. lightNode = new THREE.Object3D();
  13. lightScene.add( lightNode );
  14. // scene for the coloured emitter spheres
  15. var emitterScene = new THREE.Scene();
  16. emitterNode = new THREE.Object3D();
  17. emitterScene.add( emitterNode );
  18. //
  19. var geometryEmitter = new THREE.SphereGeometry( 0.7, 7, 7 );
  20. var black = new THREE.Color( 0x000000 );
  21. var colorShader = THREE.ShaderDeferred[ "color" ];
  22. var normalShader = THREE.ShaderDeferred[ "normals" ];
  23. var bumpShader = THREE.ShaderDeferred[ "bump" ];
  24. var clipDepthShader = THREE.ShaderDeferred[ "clipDepth" ];
  25. //
  26. var unlitShader = THREE.ShaderDeferred[ "unlit" ];
  27. var lightShader = THREE.ShaderDeferred[ "light" ];
  28. var compositeShader = THREE.ShaderDeferred[ "composite" ];
  29. unlitShader.uniforms[ "viewWidth" ].value = width;
  30. unlitShader.uniforms[ "viewHeight" ].value = height;
  31. lightShader.uniforms[ "viewWidth" ].value = width;
  32. lightShader.uniforms[ "viewHeight" ].value = height;
  33. //
  34. var compColor, compNormal, compDepth, compEmitter, compLightBuffer, compFinal, compositePass;
  35. var passColor, passNormal, passDepth, passEmitter, passLight;
  36. //
  37. var defaultNormalMaterial = new THREE.ShaderMaterial( {
  38. uniforms: THREE.UniformsUtils.clone( normalShader.uniforms ),
  39. vertexShader: normalShader.vertexShader,
  40. fragmentShader: normalShader.fragmentShader
  41. } );
  42. var defaultDepthMaterial = new THREE.ShaderMaterial( {
  43. uniforms: THREE.UniformsUtils.clone( clipDepthShader.uniforms ),
  44. vertexShader: clipDepthShader.vertexShader,
  45. fragmentShader: clipDepthShader.fragmentShader
  46. } );
  47. //
  48. var rtParamsFloatLinear = { minFilter: THREE.NearestFilter, magFilter: THREE.LinearFilter, stencilBuffer: false,
  49. format: THREE.RGBAFormat, type: THREE.FloatType };
  50. var rtParamsFloatNearest = { minFilter: THREE.NearestFilter, magFilter: THREE.NearestFilter, stencilBuffer: false,
  51. format: THREE.RGBAFormat, type: THREE.FloatType };
  52. var rtParamsUByte = { minFilter: THREE.NearestFilter, magFilter: THREE.LinearFilter, stencilBuffer: false,
  53. format: THREE.RGBFormat, type: THREE.UnsignedByteType };
  54. //
  55. var addDeferredMaterials = function ( object ) {
  56. var originalMaterial = object.material;
  57. // color material
  58. // -----------------
  59. // diffuse color
  60. // specular color
  61. // shininess
  62. // diffuse map
  63. // vertex colors
  64. // alphaTest
  65. // morphs
  66. var uniforms = THREE.UniformsUtils.clone( colorShader.uniforms );
  67. var defines = { "USE_MAP": !! originalMaterial.map, "GAMMA_INPUT": true };
  68. var material = new THREE.ShaderMaterial( {
  69. fragmentShader: colorShader.fragmentShader,
  70. vertexShader: colorShader.vertexShader,
  71. uniforms: uniforms,
  72. defines: defines,
  73. shading: originalMaterial.shading
  74. } );
  75. var diffuse = originalMaterial.color;
  76. var specular = originalMaterial.specular !== undefined ? originalMaterial.specular : black;
  77. var shininess = originalMaterial.shininess !== undefined ? originalMaterial.shininess : 1;
  78. uniforms.diffuse.value.copy( diffuse );
  79. uniforms.specular.value.copy( specular );
  80. uniforms.shininess.value = shininess;
  81. uniforms.map.value = originalMaterial.map;
  82. material.vertexColors = originalMaterial.vertexColors;
  83. material.morphTargets = originalMaterial.morphTargets;
  84. material.morphNormals = originalMaterial.morphNormals;
  85. material.alphaTest = originalMaterial.alphaTest;
  86. if ( originalMaterial.bumpMap ) {
  87. var offset = originalMaterial.bumpMap.offset;
  88. var repeat = originalMaterial.bumpMap.repeat;
  89. uniforms.offsetRepeat.value.set( offset.x, offset.y, repeat.x, repeat.y );
  90. }
  91. object.properties.colorMaterial = material;
  92. // normal material
  93. // -----------------
  94. // vertex normals
  95. // morph normals
  96. // bump map
  97. // bump scale
  98. if ( originalMaterial.bumpMap ) {
  99. var uniforms = THREE.UniformsUtils.clone( bumpShader.uniforms );
  100. var normalMaterial = new THREE.ShaderMaterial( {
  101. uniforms: uniforms,
  102. vertexShader: bumpShader.vertexShader,
  103. fragmentShader: bumpShader.fragmentShader,
  104. defines: { "USE_BUMPMAP": true }
  105. } );
  106. uniforms.bumpMap.value = originalMaterial.bumpMap;
  107. uniforms.bumpScale.value = originalMaterial.bumpScale;
  108. var offset = originalMaterial.bumpMap.offset;
  109. var repeat = originalMaterial.bumpMap.repeat;
  110. uniforms.offsetRepeat.value.set( offset.x, offset.y, repeat.x, repeat.y );
  111. object.properties.normalMaterial = normalMaterial;
  112. } else if ( originalMaterial.morphTargets ) {
  113. var normalMaterial = new THREE.ShaderMaterial( {
  114. uniforms: THREE.UniformsUtils.clone( normalShader.uniforms ),
  115. vertexShader: normalShader.vertexShader,
  116. fragmentShader: normalShader.fragmentShader,
  117. shading: originalMaterial.shading
  118. } );
  119. normalMaterial.morphTargets = originalMaterial.morphTargets;
  120. normalMaterial.morphNormals = originalMaterial.morphNormals;
  121. object.properties.normalMaterial = normalMaterial;
  122. } else {
  123. object.properties.normalMaterial = defaultNormalMaterial;
  124. }
  125. // depth material
  126. if ( originalMaterial.morphTargets ) {
  127. var depthMaterial = new THREE.ShaderMaterial( {
  128. uniforms: THREE.UniformsUtils.clone( clipDepthShader.uniforms ),
  129. vertexShader: clipDepthShader.vertexShader,
  130. fragmentShader: clipDepthShader.fragmentShader
  131. } );
  132. depthMaterial.morphTargets = originalMaterial.morphTargets;
  133. object.properties.depthMaterial = depthMaterial;
  134. } else {
  135. object.properties.depthMaterial = defaultDepthMaterial;
  136. }
  137. object.properties.deferredInitialized = true;
  138. };
  139. var addDeferredPointLight = function ( light ) {
  140. // setup material
  141. var materialLight = new THREE.ShaderMaterial( {
  142. uniforms: THREE.UniformsUtils.clone( lightShader.uniforms ),
  143. vertexShader: lightShader.vertexShader,
  144. fragmentShader: lightShader.fragmentShader,
  145. defines: { "ADDITIVE_SPECULAR": additiveSpecular },
  146. blending: THREE.AdditiveBlending,
  147. depthWrite: false,
  148. transparent: true
  149. } );
  150. materialLight.uniforms[ "lightPos" ].value = light.position;
  151. materialLight.uniforms[ "lightRadius" ].value = light.distance;
  152. materialLight.uniforms[ "lightIntensity" ].value = light.intensity;
  153. materialLight.uniforms[ "lightColor" ].value = light.color;
  154. // setup proxy geometry for this light
  155. var geometryLight = new THREE.SphereGeometry( light.distance, 16, 8 );
  156. var meshLight = new THREE.Mesh( geometryLight, materialLight );
  157. meshLight.position = light.position;
  158. lightNode.add( meshLight );
  159. // create emitter sphere
  160. var matEmitter = new THREE.ShaderMaterial( {
  161. uniforms: THREE.UniformsUtils.clone( unlitShader.uniforms ),
  162. vertexShader: unlitShader.vertexShader,
  163. fragmentShader: unlitShader.fragmentShader
  164. } );
  165. matEmitter.uniforms[ "samplerDepth" ].value = compDepth.renderTarget2;
  166. matEmitter.uniforms[ "lightColor" ].value = light.color;
  167. var meshEmitter = new THREE.Mesh( geometryEmitter, matEmitter );
  168. meshEmitter.position = light.position;
  169. emitterNode.add( meshEmitter );
  170. // add emitter to light node
  171. meshLight.properties.emitter = meshEmitter;
  172. light.properties.deferredInitialized = true;
  173. };
  174. var initDeferredProperties = function ( object ) {
  175. if ( object.properties.deferredInitialized ) return;
  176. if ( object.material ) addDeferredMaterials( object );
  177. if ( object instanceof THREE.PointLight ) addDeferredPointLight( object );
  178. };
  179. //
  180. var setMaterialColor = function ( object ) {
  181. if ( object.material ) object.material = object.properties.colorMaterial;
  182. };
  183. var setMaterialDepth = function ( object ) {
  184. if ( object.material ) object.material = object.properties.depthMaterial;
  185. };
  186. var setMaterialNormal= function ( object ) {
  187. if ( object.material ) object.material = object.properties.normalMaterial;
  188. };
  189. //
  190. this.render = function ( scene, camera ) {
  191. passColor.camera = camera;
  192. passNormal.camera = camera;
  193. passDepth.camera = camera;
  194. passEmitter.camera = camera;
  195. passLight.camera = camera;
  196. passColor.scene = scene;
  197. passNormal.scene = scene;
  198. passDepth.scene = scene;
  199. scene.traverse( initDeferredProperties );
  200. // g-buffer color
  201. scene.traverse( setMaterialColor );
  202. compColor.render();
  203. // g-buffer depth
  204. scene.traverse( setMaterialDepth );
  205. compDepth.render();
  206. // g-buffer normals
  207. scene.traverse( setMaterialNormal );
  208. compNormal.render();
  209. // emitter pass
  210. compEmitter.render();
  211. // light pass
  212. camera.projectionMatrixInverse.getInverse( camera.projectionMatrix );
  213. for ( var i = 0, il = lightNode.children.length; i < il; i ++ ) {
  214. var uniforms = lightNode.children[ i ].material.uniforms;
  215. uniforms[ "matProjInverse" ].value = camera.projectionMatrixInverse;
  216. uniforms[ "matView" ].value = camera.matrixWorldInverse;
  217. }
  218. compLightBuffer.render();
  219. // composite pass
  220. compFinal.render( 0.1 );
  221. };
  222. var createRenderTargets = function ( ) {
  223. // g-buffers
  224. var rtColor = new THREE.WebGLRenderTarget( width, height, rtParamsFloatNearest );
  225. var rtNormal = new THREE.WebGLRenderTarget( width, height, rtParamsFloatLinear );
  226. var rtDepth = new THREE.WebGLRenderTarget( width, height, rtParamsFloatLinear );
  227. var rtLight = new THREE.WebGLRenderTarget( width, height, rtParamsFloatLinear );
  228. var rtEmitter = new THREE.WebGLRenderTarget( width, height, rtParamsUByte );
  229. var rtFinal = new THREE.WebGLRenderTarget( width, height, rtParamsUByte );
  230. rtColor.generateMipmaps = false;
  231. rtNormal.generateMipmaps = false;
  232. rtDepth.generateMipmaps = false;
  233. rtLight.generateMipmaps = false;
  234. rtEmitter.generateMipmaps = false;
  235. rtFinal.generateMipmaps = false;
  236. // composers
  237. passColor = new THREE.RenderPass();
  238. compColor = new THREE.EffectComposer( renderer, rtColor );
  239. compColor.addPass( passColor );
  240. passNormal = new THREE.RenderPass();
  241. compNormal = new THREE.EffectComposer( renderer, rtNormal );
  242. compNormal.addPass( passNormal );
  243. passDepth = new THREE.RenderPass();
  244. compDepth = new THREE.EffectComposer( renderer, rtDepth );
  245. compDepth.addPass( passDepth );
  246. passEmitter = new THREE.RenderPass( emitterScene );
  247. compEmitter = new THREE.EffectComposer( renderer, rtEmitter );
  248. compEmitter.addPass( passEmitter );
  249. passLight = new THREE.RenderPass( lightScene );
  250. compLightBuffer = new THREE.EffectComposer( renderer, rtLight );
  251. compLightBuffer.addPass( passLight );
  252. //
  253. lightShader.uniforms[ 'samplerColor' ].value = compColor.renderTarget2;
  254. lightShader.uniforms[ 'samplerNormals' ].value = compNormal.renderTarget2;
  255. lightShader.uniforms[ 'samplerDepth' ].value = compDepth.renderTarget2;
  256. lightShader.uniforms[ 'samplerLightBuffer' ].value = rtLight;
  257. compositeShader.uniforms[ 'samplerLightBuffer' ].value = compLightBuffer.renderTarget2;
  258. compositeShader.uniforms[ 'samplerEmitter' ].value = compEmitter.renderTarget2;
  259. // composite
  260. var compositePass = new THREE.ShaderPass( compositeShader );
  261. compositePass.needsSwap = true;
  262. var effectFXAA = new THREE.ShaderPass( THREE.FXAAShader );
  263. effectFXAA.uniforms[ 'resolution' ].value.set( 1 / width, 1 / height );
  264. var effectColor = new THREE.ShaderPass( THREE.ColorCorrectionShader );
  265. effectColor.renderToScreen = true;
  266. effectColor.uniforms[ 'powRGB' ].value.set( 1, 1, 1 );
  267. effectColor.uniforms[ 'mulRGB' ].value.set( 2, 2, 2 );
  268. compFinal = new THREE.EffectComposer( renderer, rtFinal );
  269. compFinal.addPass( compositePass );
  270. compFinal.addPass( effectFXAA );
  271. compFinal.addPass( effectColor );
  272. };
  273. // init
  274. createRenderTargets();
  275. };