OutlinePass.js 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592
  1. ( function () {
  2. class OutlinePass extends THREE.Pass {
  3. constructor( resolution, scene, camera, selectedObjects ) {
  4. super();
  5. this.renderScene = scene;
  6. this.renderCamera = camera;
  7. this.selectedObjects = selectedObjects !== undefined ? selectedObjects : [];
  8. this.visibleEdgeColor = new THREE.Color( 1, 1, 1 );
  9. this.hiddenEdgeColor = new THREE.Color( 0.1, 0.04, 0.02 );
  10. this.edgeGlow = 0.0;
  11. this.usePatternTexture = false;
  12. this.edgeThickness = 1.0;
  13. this.edgeStrength = 3.0;
  14. this.downSampleRatio = 2;
  15. this.pulsePeriod = 0;
  16. this._visibilityCache = new Map();
  17. this.resolution = resolution !== undefined ? new THREE.Vector2( resolution.x, resolution.y ) : new THREE.Vector2( 256, 256 );
  18. const pars = {
  19. minFilter: THREE.LinearFilter,
  20. magFilter: THREE.LinearFilter,
  21. format: THREE.RGBAFormat
  22. };
  23. const resx = Math.round( this.resolution.x / this.downSampleRatio );
  24. const resy = Math.round( this.resolution.y / this.downSampleRatio );
  25. this.renderTargetMaskBuffer = new THREE.WebGLRenderTarget( this.resolution.x, this.resolution.y, pars );
  26. this.renderTargetMaskBuffer.texture.name = 'OutlinePass.mask';
  27. this.renderTargetMaskBuffer.texture.generateMipmaps = false;
  28. this.depthMaterial = new THREE.MeshDepthMaterial();
  29. this.depthMaterial.side = THREE.DoubleSide;
  30. this.depthMaterial.depthPacking = THREE.RGBADepthPacking;
  31. this.depthMaterial.blending = THREE.NoBlending;
  32. this.prepareMaskMaterial = this.getPrepareMaskMaterial();
  33. this.prepareMaskMaterial.side = THREE.DoubleSide;
  34. this.prepareMaskMaterial.fragmentShader = replaceDepthToViewZ( this.prepareMaskMaterial.fragmentShader, this.renderCamera );
  35. this.renderTargetDepthBuffer = new THREE.WebGLRenderTarget( this.resolution.x, this.resolution.y, pars );
  36. this.renderTargetDepthBuffer.texture.name = 'OutlinePass.depth';
  37. this.renderTargetDepthBuffer.texture.generateMipmaps = false;
  38. this.renderTargetMaskDownSampleBuffer = new THREE.WebGLRenderTarget( resx, resy, pars );
  39. this.renderTargetMaskDownSampleBuffer.texture.name = 'OutlinePass.depthDownSample';
  40. this.renderTargetMaskDownSampleBuffer.texture.generateMipmaps = false;
  41. this.renderTargetBlurBuffer1 = new THREE.WebGLRenderTarget( resx, resy, pars );
  42. this.renderTargetBlurBuffer1.texture.name = 'OutlinePass.blur1';
  43. this.renderTargetBlurBuffer1.texture.generateMipmaps = false;
  44. this.renderTargetBlurBuffer2 = new THREE.WebGLRenderTarget( Math.round( resx / 2 ), Math.round( resy / 2 ), pars );
  45. this.renderTargetBlurBuffer2.texture.name = 'OutlinePass.blur2';
  46. this.renderTargetBlurBuffer2.texture.generateMipmaps = false;
  47. this.edgeDetectionMaterial = this.getEdgeDetectionMaterial();
  48. this.renderTargetEdgeBuffer1 = new THREE.WebGLRenderTarget( resx, resy, pars );
  49. this.renderTargetEdgeBuffer1.texture.name = 'OutlinePass.edge1';
  50. this.renderTargetEdgeBuffer1.texture.generateMipmaps = false;
  51. this.renderTargetEdgeBuffer2 = new THREE.WebGLRenderTarget( Math.round( resx / 2 ), Math.round( resy / 2 ), pars );
  52. this.renderTargetEdgeBuffer2.texture.name = 'OutlinePass.edge2';
  53. this.renderTargetEdgeBuffer2.texture.generateMipmaps = false;
  54. const MAX_EDGE_THICKNESS = 4;
  55. const MAX_EDGE_GLOW = 4;
  56. this.separableBlurMaterial1 = this.getSeperableBlurMaterial( MAX_EDGE_THICKNESS );
  57. this.separableBlurMaterial1.uniforms[ 'texSize' ].value.set( resx, resy );
  58. this.separableBlurMaterial1.uniforms[ 'kernelRadius' ].value = 1;
  59. this.separableBlurMaterial2 = this.getSeperableBlurMaterial( MAX_EDGE_GLOW );
  60. this.separableBlurMaterial2.uniforms[ 'texSize' ].value.set( Math.round( resx / 2 ), Math.round( resy / 2 ) );
  61. this.separableBlurMaterial2.uniforms[ 'kernelRadius' ].value = MAX_EDGE_GLOW; // Overlay material
  62. this.overlayMaterial = this.getOverlayMaterial(); // copy material
  63. if ( THREE.CopyShader === undefined ) console.error( 'THREE.OutlinePass relies on THREE.CopyShader' );
  64. const copyShader = THREE.CopyShader;
  65. this.copyUniforms = THREE.UniformsUtils.clone( copyShader.uniforms );
  66. this.copyUniforms[ 'opacity' ].value = 1.0;
  67. this.materialCopy = new THREE.ShaderMaterial( {
  68. uniforms: this.copyUniforms,
  69. vertexShader: copyShader.vertexShader,
  70. fragmentShader: copyShader.fragmentShader,
  71. blending: THREE.NoBlending,
  72. depthTest: false,
  73. depthWrite: false,
  74. transparent: true
  75. } );
  76. this.enabled = true;
  77. this.needsSwap = false;
  78. this._oldClearColor = new THREE.Color();
  79. this.oldClearAlpha = 1;
  80. this.fsQuad = new THREE.FullScreenQuad( null );
  81. this.tempPulseColor1 = new THREE.Color();
  82. this.tempPulseColor2 = new THREE.Color();
  83. this.textureMatrix = new THREE.Matrix4();
  84. function replaceDepthToViewZ( string, camera ) {
  85. const type = camera.isPerspectiveCamera ? 'perspective' : 'orthographic';
  86. return string.replace( /DEPTH_TO_VIEW_Z/g, type + 'DepthToViewZ' );
  87. }
  88. }
  89. dispose() {
  90. this.renderTargetMaskBuffer.dispose();
  91. this.renderTargetDepthBuffer.dispose();
  92. this.renderTargetMaskDownSampleBuffer.dispose();
  93. this.renderTargetBlurBuffer1.dispose();
  94. this.renderTargetBlurBuffer2.dispose();
  95. this.renderTargetEdgeBuffer1.dispose();
  96. this.renderTargetEdgeBuffer2.dispose();
  97. }
  98. setSize( width, height ) {
  99. this.renderTargetMaskBuffer.setSize( width, height );
  100. this.renderTargetDepthBuffer.setSize( width, height );
  101. let resx = Math.round( width / this.downSampleRatio );
  102. let resy = Math.round( height / this.downSampleRatio );
  103. this.renderTargetMaskDownSampleBuffer.setSize( resx, resy );
  104. this.renderTargetBlurBuffer1.setSize( resx, resy );
  105. this.renderTargetEdgeBuffer1.setSize( resx, resy );
  106. this.separableBlurMaterial1.uniforms[ 'texSize' ].value.set( resx, resy );
  107. resx = Math.round( resx / 2 );
  108. resy = Math.round( resy / 2 );
  109. this.renderTargetBlurBuffer2.setSize( resx, resy );
  110. this.renderTargetEdgeBuffer2.setSize( resx, resy );
  111. this.separableBlurMaterial2.uniforms[ 'texSize' ].value.set( resx, resy );
  112. }
  113. changeVisibilityOfSelectedObjects( bVisible ) {
  114. const cache = this._visibilityCache;
  115. function gatherSelectedMeshesCallBack( object ) {
  116. if ( object.isMesh ) {
  117. if ( bVisible === true ) {
  118. object.visible = cache.get( object );
  119. } else {
  120. cache.set( object, object.visible );
  121. object.visible = bVisible;
  122. }
  123. }
  124. }
  125. for ( let i = 0; i < this.selectedObjects.length; i ++ ) {
  126. const selectedObject = this.selectedObjects[ i ];
  127. selectedObject.traverse( gatherSelectedMeshesCallBack );
  128. }
  129. }
  130. changeVisibilityOfNonSelectedObjects( bVisible ) {
  131. const cache = this._visibilityCache;
  132. const selectedMeshes = [];
  133. function gatherSelectedMeshesCallBack( object ) {
  134. if ( object.isMesh ) selectedMeshes.push( object );
  135. }
  136. for ( let i = 0; i < this.selectedObjects.length; i ++ ) {
  137. const selectedObject = this.selectedObjects[ i ];
  138. selectedObject.traverse( gatherSelectedMeshesCallBack );
  139. }
  140. function VisibilityChangeCallBack( object ) {
  141. if ( object.isMesh || object.isSprite ) {
  142. // only meshes and sprites are supported by OutlinePass
  143. let bFound = false;
  144. for ( let i = 0; i < selectedMeshes.length; i ++ ) {
  145. const selectedObjectId = selectedMeshes[ i ].id;
  146. if ( selectedObjectId === object.id ) {
  147. bFound = true;
  148. break;
  149. }
  150. }
  151. if ( bFound === false ) {
  152. const visibility = object.visible;
  153. if ( bVisible === false || cache.get( object ) === true ) {
  154. object.visible = bVisible;
  155. }
  156. cache.set( object, visibility );
  157. }
  158. } else if ( object.isPoints || object.isLine ) {
  159. // the visibilty of points and lines is always set to false in order to
  160. // not affect the outline computation
  161. if ( bVisible === true ) {
  162. object.visible = cache.get( object ); // restore
  163. } else {
  164. cache.set( object, object.visible );
  165. object.visible = bVisible;
  166. }
  167. }
  168. }
  169. this.renderScene.traverse( VisibilityChangeCallBack );
  170. }
  171. updateTextureMatrix() {
  172. this.textureMatrix.set( 0.5, 0.0, 0.0, 0.5, 0.0, 0.5, 0.0, 0.5, 0.0, 0.0, 0.5, 0.5, 0.0, 0.0, 0.0, 1.0 );
  173. this.textureMatrix.multiply( this.renderCamera.projectionMatrix );
  174. this.textureMatrix.multiply( this.renderCamera.matrixWorldInverse );
  175. }
  176. render( renderer, writeBuffer, readBuffer, deltaTime, maskActive ) {
  177. if ( this.selectedObjects.length > 0 ) {
  178. renderer.getClearColor( this._oldClearColor );
  179. this.oldClearAlpha = renderer.getClearAlpha();
  180. const oldAutoClear = renderer.autoClear;
  181. renderer.autoClear = false;
  182. if ( maskActive ) renderer.state.buffers.stencil.setTest( false );
  183. renderer.setClearColor( 0xffffff, 1 ); // Make selected objects invisible
  184. this.changeVisibilityOfSelectedObjects( false );
  185. const currentBackground = this.renderScene.background;
  186. this.renderScene.background = null; // 1. Draw Non Selected objects in the depth buffer
  187. this.renderScene.overrideMaterial = this.depthMaterial;
  188. renderer.setRenderTarget( this.renderTargetDepthBuffer );
  189. renderer.clear();
  190. renderer.render( this.renderScene, this.renderCamera ); // Make selected objects visible
  191. this.changeVisibilityOfSelectedObjects( true );
  192. this._visibilityCache.clear(); // Update Texture Matrix for Depth compare
  193. this.updateTextureMatrix(); // Make non selected objects invisible, and draw only the selected objects, by comparing the depth buffer of non selected objects
  194. this.changeVisibilityOfNonSelectedObjects( false );
  195. this.renderScene.overrideMaterial = this.prepareMaskMaterial;
  196. this.prepareMaskMaterial.uniforms[ 'cameraNearFar' ].value.set( this.renderCamera.near, this.renderCamera.far );
  197. this.prepareMaskMaterial.uniforms[ 'depthTexture' ].value = this.renderTargetDepthBuffer.texture;
  198. this.prepareMaskMaterial.uniforms[ 'textureMatrix' ].value = this.textureMatrix;
  199. renderer.setRenderTarget( this.renderTargetMaskBuffer );
  200. renderer.clear();
  201. renderer.render( this.renderScene, this.renderCamera );
  202. this.renderScene.overrideMaterial = null;
  203. this.changeVisibilityOfNonSelectedObjects( true );
  204. this._visibilityCache.clear();
  205. this.renderScene.background = currentBackground; // 2. Downsample to Half resolution
  206. this.fsQuad.material = this.materialCopy;
  207. this.copyUniforms[ 'tDiffuse' ].value = this.renderTargetMaskBuffer.texture;
  208. renderer.setRenderTarget( this.renderTargetMaskDownSampleBuffer );
  209. renderer.clear();
  210. this.fsQuad.render( renderer );
  211. this.tempPulseColor1.copy( this.visibleEdgeColor );
  212. this.tempPulseColor2.copy( this.hiddenEdgeColor );
  213. if ( this.pulsePeriod > 0 ) {
  214. const scalar = ( 1 + 0.25 ) / 2 + Math.cos( performance.now() * 0.01 / this.pulsePeriod ) * ( 1.0 - 0.25 ) / 2;
  215. this.tempPulseColor1.multiplyScalar( scalar );
  216. this.tempPulseColor2.multiplyScalar( scalar );
  217. } // 3. Apply Edge Detection THREE.Pass
  218. this.fsQuad.material = this.edgeDetectionMaterial;
  219. this.edgeDetectionMaterial.uniforms[ 'maskTexture' ].value = this.renderTargetMaskDownSampleBuffer.texture;
  220. this.edgeDetectionMaterial.uniforms[ 'texSize' ].value.set( this.renderTargetMaskDownSampleBuffer.width, this.renderTargetMaskDownSampleBuffer.height );
  221. this.edgeDetectionMaterial.uniforms[ 'visibleEdgeColor' ].value = this.tempPulseColor1;
  222. this.edgeDetectionMaterial.uniforms[ 'hiddenEdgeColor' ].value = this.tempPulseColor2;
  223. renderer.setRenderTarget( this.renderTargetEdgeBuffer1 );
  224. renderer.clear();
  225. this.fsQuad.render( renderer ); // 4. Apply Blur on Half res
  226. this.fsQuad.material = this.separableBlurMaterial1;
  227. this.separableBlurMaterial1.uniforms[ 'colorTexture' ].value = this.renderTargetEdgeBuffer1.texture;
  228. this.separableBlurMaterial1.uniforms[ 'direction' ].value = OutlinePass.BlurDirectionX;
  229. this.separableBlurMaterial1.uniforms[ 'kernelRadius' ].value = this.edgeThickness;
  230. renderer.setRenderTarget( this.renderTargetBlurBuffer1 );
  231. renderer.clear();
  232. this.fsQuad.render( renderer );
  233. this.separableBlurMaterial1.uniforms[ 'colorTexture' ].value = this.renderTargetBlurBuffer1.texture;
  234. this.separableBlurMaterial1.uniforms[ 'direction' ].value = OutlinePass.BlurDirectionY;
  235. renderer.setRenderTarget( this.renderTargetEdgeBuffer1 );
  236. renderer.clear();
  237. this.fsQuad.render( renderer ); // Apply Blur on quarter res
  238. this.fsQuad.material = this.separableBlurMaterial2;
  239. this.separableBlurMaterial2.uniforms[ 'colorTexture' ].value = this.renderTargetEdgeBuffer1.texture;
  240. this.separableBlurMaterial2.uniforms[ 'direction' ].value = OutlinePass.BlurDirectionX;
  241. renderer.setRenderTarget( this.renderTargetBlurBuffer2 );
  242. renderer.clear();
  243. this.fsQuad.render( renderer );
  244. this.separableBlurMaterial2.uniforms[ 'colorTexture' ].value = this.renderTargetBlurBuffer2.texture;
  245. this.separableBlurMaterial2.uniforms[ 'direction' ].value = OutlinePass.BlurDirectionY;
  246. renderer.setRenderTarget( this.renderTargetEdgeBuffer2 );
  247. renderer.clear();
  248. this.fsQuad.render( renderer ); // Blend it additively over the input texture
  249. this.fsQuad.material = this.overlayMaterial;
  250. this.overlayMaterial.uniforms[ 'maskTexture' ].value = this.renderTargetMaskBuffer.texture;
  251. this.overlayMaterial.uniforms[ 'edgeTexture1' ].value = this.renderTargetEdgeBuffer1.texture;
  252. this.overlayMaterial.uniforms[ 'edgeTexture2' ].value = this.renderTargetEdgeBuffer2.texture;
  253. this.overlayMaterial.uniforms[ 'patternTexture' ].value = this.patternTexture;
  254. this.overlayMaterial.uniforms[ 'edgeStrength' ].value = this.edgeStrength;
  255. this.overlayMaterial.uniforms[ 'edgeGlow' ].value = this.edgeGlow;
  256. this.overlayMaterial.uniforms[ 'usePatternTexture' ].value = this.usePatternTexture;
  257. if ( maskActive ) renderer.state.buffers.stencil.setTest( true );
  258. renderer.setRenderTarget( readBuffer );
  259. this.fsQuad.render( renderer );
  260. renderer.setClearColor( this._oldClearColor, this.oldClearAlpha );
  261. renderer.autoClear = oldAutoClear;
  262. }
  263. if ( this.renderToScreen ) {
  264. this.fsQuad.material = this.materialCopy;
  265. this.copyUniforms[ 'tDiffuse' ].value = readBuffer.texture;
  266. renderer.setRenderTarget( null );
  267. this.fsQuad.render( renderer );
  268. }
  269. }
  270. getPrepareMaskMaterial() {
  271. return new THREE.ShaderMaterial( {
  272. uniforms: {
  273. 'depthTexture': {
  274. value: null
  275. },
  276. 'cameraNearFar': {
  277. value: new THREE.Vector2( 0.5, 0.5 )
  278. },
  279. 'textureMatrix': {
  280. value: null
  281. }
  282. },
  283. vertexShader: `#include <morphtarget_pars_vertex>
  284. #include <skinning_pars_vertex>
  285. varying vec4 projTexCoord;
  286. varying vec4 vPosition;
  287. uniform mat4 textureMatrix;
  288. void main() {
  289. #include <skinbase_vertex>
  290. #include <begin_vertex>
  291. #include <morphtarget_vertex>
  292. #include <skinning_vertex>
  293. #include <project_vertex>
  294. vPosition = mvPosition;
  295. vec4 worldPosition = modelMatrix * vec4( transformed, 1.0 );
  296. projTexCoord = textureMatrix * worldPosition;
  297. }`,
  298. fragmentShader: `#include <packing>
  299. varying vec4 vPosition;
  300. varying vec4 projTexCoord;
  301. uniform sampler2D depthTexture;
  302. uniform vec2 cameraNearFar;
  303. void main() {
  304. float depth = unpackRGBAToDepth(texture2DProj( depthTexture, projTexCoord ));
  305. float viewZ = - DEPTH_TO_VIEW_Z( depth, cameraNearFar.x, cameraNearFar.y );
  306. float depthTest = (-vPosition.z > viewZ) ? 1.0 : 0.0;
  307. gl_FragColor = vec4(0.0, depthTest, 1.0, 1.0);
  308. }`
  309. } );
  310. }
  311. getEdgeDetectionMaterial() {
  312. return new THREE.ShaderMaterial( {
  313. uniforms: {
  314. 'maskTexture': {
  315. value: null
  316. },
  317. 'texSize': {
  318. value: new THREE.Vector2( 0.5, 0.5 )
  319. },
  320. 'visibleEdgeColor': {
  321. value: new THREE.Vector3( 1.0, 1.0, 1.0 )
  322. },
  323. 'hiddenEdgeColor': {
  324. value: new THREE.Vector3( 1.0, 1.0, 1.0 )
  325. }
  326. },
  327. vertexShader: `varying vec2 vUv;
  328. void main() {
  329. vUv = uv;
  330. gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  331. }`,
  332. fragmentShader: `varying vec2 vUv;
  333. uniform sampler2D maskTexture;
  334. uniform vec2 texSize;
  335. uniform vec3 visibleEdgeColor;
  336. uniform vec3 hiddenEdgeColor;
  337. void main() {
  338. vec2 invSize = 1.0 / texSize;
  339. vec4 uvOffset = vec4(1.0, 0.0, 0.0, 1.0) * vec4(invSize, invSize);
  340. vec4 c1 = texture2D( maskTexture, vUv + uvOffset.xy);
  341. vec4 c2 = texture2D( maskTexture, vUv - uvOffset.xy);
  342. vec4 c3 = texture2D( maskTexture, vUv + uvOffset.yw);
  343. vec4 c4 = texture2D( maskTexture, vUv - uvOffset.yw);
  344. float diff1 = (c1.r - c2.r)*0.5;
  345. float diff2 = (c3.r - c4.r)*0.5;
  346. float d = length( vec2(diff1, diff2) );
  347. float a1 = min(c1.g, c2.g);
  348. float a2 = min(c3.g, c4.g);
  349. float visibilityFactor = min(a1, a2);
  350. vec3 edgeColor = 1.0 - visibilityFactor > 0.001 ? visibleEdgeColor : hiddenEdgeColor;
  351. gl_FragColor = vec4(edgeColor, 1.0) * vec4(d);
  352. }`
  353. } );
  354. }
  355. getSeperableBlurMaterial( maxRadius ) {
  356. return new THREE.ShaderMaterial( {
  357. defines: {
  358. 'MAX_RADIUS': maxRadius
  359. },
  360. uniforms: {
  361. 'colorTexture': {
  362. value: null
  363. },
  364. 'texSize': {
  365. value: new THREE.Vector2( 0.5, 0.5 )
  366. },
  367. 'direction': {
  368. value: new THREE.Vector2( 0.5, 0.5 )
  369. },
  370. 'kernelRadius': {
  371. value: 1.0
  372. }
  373. },
  374. vertexShader: `varying vec2 vUv;
  375. void main() {
  376. vUv = uv;
  377. gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  378. }`,
  379. fragmentShader: `#include <common>
  380. varying vec2 vUv;
  381. uniform sampler2D colorTexture;
  382. uniform vec2 texSize;
  383. uniform vec2 direction;
  384. uniform float kernelRadius;
  385. float gaussianPdf(in float x, in float sigma) {
  386. return 0.39894 * exp( -0.5 * x * x/( sigma * sigma))/sigma;
  387. }
  388. void main() {
  389. vec2 invSize = 1.0 / texSize;
  390. float weightSum = gaussianPdf(0.0, kernelRadius);
  391. vec4 diffuseSum = texture2D( colorTexture, vUv) * weightSum;
  392. vec2 delta = direction * invSize * kernelRadius/float(MAX_RADIUS);
  393. vec2 uvOffset = delta;
  394. for( int i = 1; i <= MAX_RADIUS; i ++ ) {
  395. float w = gaussianPdf(uvOffset.x, kernelRadius);
  396. vec4 sample1 = texture2D( colorTexture, vUv + uvOffset);
  397. vec4 sample2 = texture2D( colorTexture, vUv - uvOffset);
  398. diffuseSum += ((sample1 + sample2) * w);
  399. weightSum += (2.0 * w);
  400. uvOffset += delta;
  401. }
  402. gl_FragColor = diffuseSum/weightSum;
  403. }`
  404. } );
  405. }
  406. getOverlayMaterial() {
  407. return new THREE.ShaderMaterial( {
  408. uniforms: {
  409. 'maskTexture': {
  410. value: null
  411. },
  412. 'edgeTexture1': {
  413. value: null
  414. },
  415. 'edgeTexture2': {
  416. value: null
  417. },
  418. 'patternTexture': {
  419. value: null
  420. },
  421. 'edgeStrength': {
  422. value: 1.0
  423. },
  424. 'edgeGlow': {
  425. value: 1.0
  426. },
  427. 'usePatternTexture': {
  428. value: 0.0
  429. }
  430. },
  431. vertexShader: `varying vec2 vUv;
  432. void main() {
  433. vUv = uv;
  434. gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  435. }`,
  436. fragmentShader: `varying vec2 vUv;
  437. uniform sampler2D maskTexture;
  438. uniform sampler2D edgeTexture1;
  439. uniform sampler2D edgeTexture2;
  440. uniform sampler2D patternTexture;
  441. uniform float edgeStrength;
  442. uniform float edgeGlow;
  443. uniform bool usePatternTexture;
  444. void main() {
  445. vec4 edgeValue1 = texture2D(edgeTexture1, vUv);
  446. vec4 edgeValue2 = texture2D(edgeTexture2, vUv);
  447. vec4 maskColor = texture2D(maskTexture, vUv);
  448. vec4 patternColor = texture2D(patternTexture, 6.0 * vUv);
  449. float visibilityFactor = 1.0 - maskColor.g > 0.0 ? 1.0 : 0.5;
  450. vec4 edgeValue = edgeValue1 + edgeValue2 * edgeGlow;
  451. vec4 finalColor = edgeStrength * maskColor.r * edgeValue;
  452. if(usePatternTexture)
  453. finalColor += + visibilityFactor * (1.0 - maskColor.r) * (1.0 - patternColor.r);
  454. gl_FragColor = finalColor;
  455. }`,
  456. blending: THREE.AdditiveBlending,
  457. depthTest: false,
  458. depthWrite: false,
  459. transparent: true
  460. } );
  461. }
  462. }
  463. OutlinePass.BlurDirectionX = new THREE.Vector2( 1.0, 0.0 );
  464. OutlinePass.BlurDirectionY = new THREE.Vector2( 0.0, 1.0 );
  465. THREE.OutlinePass = OutlinePass;
  466. } )();