123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474 |
- ( function () {
- /**
- * Reference: https://en.wikipedia.org/wiki/Cel_shading
- *
- * API
- *
- * 1. Traditional
- *
- * const effect = new OutlineEffect( renderer );
- *
- * function render() {
- *
- * effect.render( scene, camera );
- *
- * }
- *
- * 2. VR compatible
- *
- * const effect = new OutlineEffect( renderer );
- * let renderingOutline = false;
- *
- * scene.onAfterRender = function () {
- *
- * if ( renderingOutline ) return;
- *
- * renderingOutline = true;
- *
- * effect.renderOutline( scene, camera );
- *
- * renderingOutline = false;
- *
- * };
- *
- * function render() {
- *
- * renderer.render( scene, camera );
- *
- * }
- *
- * // How to set default outline parameters
- * new OutlineEffect( renderer, {
- * defaultThickness: 0.01,
- * defaultColor: [ 0, 0, 0 ],
- * defaultAlpha: 0.8,
- * defaultKeepAlive: true // keeps outline material in cache even if material is removed from scene
- * } );
- *
- * // How to set outline parameters for each material
- * material.userData.outlineParameters = {
- * thickness: 0.01,
- * color: [ 0, 0, 0 ]
- * alpha: 0.8,
- * visible: true,
- * keepAlive: true
- * };
- */
- class OutlineEffect {
- constructor( renderer, parameters = {} ) {
- this.enabled = true;
- const defaultThickness = parameters.defaultThickness !== undefined ? parameters.defaultThickness : 0.003;
- const defaultColor = new THREE.Color().fromArray( parameters.defaultColor !== undefined ? parameters.defaultColor : [ 0, 0, 0 ] );
- const defaultAlpha = parameters.defaultAlpha !== undefined ? parameters.defaultAlpha : 1.0;
- const defaultKeepAlive = parameters.defaultKeepAlive !== undefined ? parameters.defaultKeepAlive : false; // object.material.uuid -> outlineMaterial or
- // object.material[ n ].uuid -> outlineMaterial
- // save at the outline material creation and release
- // if it's unused removeThresholdCount frames
- // unless keepAlive is true.
- const cache = {};
- const removeThresholdCount = 60; // outlineMaterial.uuid -> object.material or
- // outlineMaterial.uuid -> object.material[ n ]
- // save before render and release after render.
- const originalMaterials = {}; // object.uuid -> originalOnBeforeRender
- // save before render and release after render.
- const originalOnBeforeRenders = {}; //this.cache = cache; // for debug
- const uniformsOutline = {
- outlineThickness: {
- value: defaultThickness
- },
- outlineColor: {
- value: defaultColor
- },
- outlineAlpha: {
- value: defaultAlpha
- }
- };
- const vertexShader = [ '#include <common>', '#include <uv_pars_vertex>', '#include <displacementmap_pars_vertex>', '#include <fog_pars_vertex>', '#include <morphtarget_pars_vertex>', '#include <skinning_pars_vertex>', '#include <logdepthbuf_pars_vertex>', '#include <clipping_planes_pars_vertex>', 'uniform float outlineThickness;', 'vec4 calculateOutline( vec4 pos, vec3 normal, vec4 skinned ) {', ' float thickness = outlineThickness;', ' const float ratio = 1.0;', // TODO: support outline thickness ratio for each vertex
- ' vec4 pos2 = projectionMatrix * modelViewMatrix * vec4( skinned.xyz + normal, 1.0 );', // NOTE: subtract pos2 from pos because THREE.BackSide objectNormal is negative
- ' vec4 norm = normalize( pos - pos2 );', ' return pos + norm * thickness * pos.w * ratio;', '}', 'void main() {', ' #include <uv_vertex>', ' #include <beginnormal_vertex>', ' #include <morphnormal_vertex>', ' #include <skinbase_vertex>', ' #include <skinnormal_vertex>', ' #include <begin_vertex>', ' #include <morphtarget_vertex>', ' #include <skinning_vertex>', ' #include <displacementmap_vertex>', ' #include <project_vertex>', ' vec3 outlineNormal = - objectNormal;', // the outline material is always rendered with THREE.BackSide
- ' gl_Position = calculateOutline( gl_Position, outlineNormal, vec4( transformed, 1.0 ) );', ' #include <logdepthbuf_vertex>', ' #include <clipping_planes_vertex>', ' #include <fog_vertex>', '}' ].join( '\n' );
- const fragmentShader = [ '#include <common>', '#include <fog_pars_fragment>', '#include <logdepthbuf_pars_fragment>', '#include <clipping_planes_pars_fragment>', 'uniform vec3 outlineColor;', 'uniform float outlineAlpha;', 'void main() {', ' #include <clipping_planes_fragment>', ' #include <logdepthbuf_fragment>', ' gl_FragColor = vec4( outlineColor, outlineAlpha );', ' #include <tonemapping_fragment>', ' #include <encodings_fragment>', ' #include <fog_fragment>', ' #include <premultiplied_alpha_fragment>', '}' ].join( '\n' );
- function createMaterial() {
- return new THREE.ShaderMaterial( {
- type: 'OutlineEffect',
- uniforms: THREE.UniformsUtils.merge( [ THREE.UniformsLib[ 'fog' ], THREE.UniformsLib[ 'displacementmap' ], uniformsOutline ] ),
- vertexShader: vertexShader,
- fragmentShader: fragmentShader,
- side: THREE.BackSide
- } );
- }
- function getOutlineMaterialFromCache( originalMaterial ) {
- let data = cache[ originalMaterial.uuid ];
- if ( data === undefined ) {
- data = {
- material: createMaterial(),
- used: true,
- keepAlive: defaultKeepAlive,
- count: 0
- };
- cache[ originalMaterial.uuid ] = data;
- }
- data.used = true;
- return data.material;
- }
- function getOutlineMaterial( originalMaterial ) {
- const outlineMaterial = getOutlineMaterialFromCache( originalMaterial );
- originalMaterials[ outlineMaterial.uuid ] = originalMaterial;
- updateOutlineMaterial( outlineMaterial, originalMaterial );
- return outlineMaterial;
- }
- function isCompatible( object ) {
- const geometry = object.geometry;
- let hasNormals = false;
- if ( object.geometry !== undefined ) {
- if ( geometry.isBufferGeometry ) {
- hasNormals = geometry.attributes.normal !== undefined;
- } else {
- hasNormals = true; // the renderer always produces a normal attribute for Geometry
- }
- }
- return object.isMesh === true && object.material !== undefined && hasNormals === true;
- }
- function setOutlineMaterial( object ) {
- if ( isCompatible( object ) === false ) return;
- if ( Array.isArray( object.material ) ) {
- for ( let i = 0, il = object.material.length; i < il; i ++ ) {
- object.material[ i ] = getOutlineMaterial( object.material[ i ] );
- }
- } else {
- object.material = getOutlineMaterial( object.material );
- }
- originalOnBeforeRenders[ object.uuid ] = object.onBeforeRender;
- object.onBeforeRender = onBeforeRender;
- }
- function restoreOriginalMaterial( object ) {
- if ( isCompatible( object ) === false ) return;
- if ( Array.isArray( object.material ) ) {
- for ( let i = 0, il = object.material.length; i < il; i ++ ) {
- object.material[ i ] = originalMaterials[ object.material[ i ].uuid ];
- }
- } else {
- object.material = originalMaterials[ object.material.uuid ];
- }
- object.onBeforeRender = originalOnBeforeRenders[ object.uuid ];
- }
- function onBeforeRender( renderer, scene, camera, geometry, material ) {
- const originalMaterial = originalMaterials[ material.uuid ]; // just in case
- if ( originalMaterial === undefined ) return;
- updateUniforms( material, originalMaterial );
- }
- function updateUniforms( material, originalMaterial ) {
- const outlineParameters = originalMaterial.userData.outlineParameters;
- material.uniforms.outlineAlpha.value = originalMaterial.opacity;
- if ( outlineParameters !== undefined ) {
- if ( outlineParameters.thickness !== undefined ) material.uniforms.outlineThickness.value = outlineParameters.thickness;
- if ( outlineParameters.color !== undefined ) material.uniforms.outlineColor.value.fromArray( outlineParameters.color );
- if ( outlineParameters.alpha !== undefined ) material.uniforms.outlineAlpha.value = outlineParameters.alpha;
- }
- if ( originalMaterial.displacementMap ) {
- material.uniforms.displacementMap.value = originalMaterial.displacementMap;
- material.uniforms.displacementScale.value = originalMaterial.displacementScale;
- material.uniforms.displacementBias.value = originalMaterial.displacementBias;
- }
- }
- function updateOutlineMaterial( material, originalMaterial ) {
- if ( material.name === 'invisible' ) return;
- const outlineParameters = originalMaterial.userData.outlineParameters;
- material.fog = originalMaterial.fog;
- material.toneMapped = originalMaterial.toneMapped;
- material.premultipliedAlpha = originalMaterial.premultipliedAlpha;
- material.displacementMap = originalMaterial.displacementMap;
- if ( outlineParameters !== undefined ) {
- if ( originalMaterial.visible === false ) {
- material.visible = false;
- } else {
- material.visible = outlineParameters.visible !== undefined ? outlineParameters.visible : true;
- }
- material.transparent = outlineParameters.alpha !== undefined && outlineParameters.alpha < 1.0 ? true : originalMaterial.transparent;
- if ( outlineParameters.keepAlive !== undefined ) cache[ originalMaterial.uuid ].keepAlive = outlineParameters.keepAlive;
- } else {
- material.transparent = originalMaterial.transparent;
- material.visible = originalMaterial.visible;
- }
- if ( originalMaterial.wireframe === true || originalMaterial.depthTest === false ) material.visible = false;
- if ( originalMaterial.clippingPlanes ) {
- material.clipping = true;
- material.clippingPlanes = originalMaterial.clippingPlanes;
- material.clipIntersection = originalMaterial.clipIntersection;
- material.clipShadows = originalMaterial.clipShadows;
- }
- material.version = originalMaterial.version; // update outline material if necessary
- }
- function cleanupCache() {
- let keys; // clear originialMaterials
- keys = Object.keys( originalMaterials );
- for ( let i = 0, il = keys.length; i < il; i ++ ) {
- originalMaterials[ keys[ i ] ] = undefined;
- } // clear originalOnBeforeRenders
- keys = Object.keys( originalOnBeforeRenders );
- for ( let i = 0, il = keys.length; i < il; i ++ ) {
- originalOnBeforeRenders[ keys[ i ] ] = undefined;
- } // remove unused outlineMaterial from cache
- keys = Object.keys( cache );
- for ( let i = 0, il = keys.length; i < il; i ++ ) {
- const key = keys[ i ];
- if ( cache[ key ].used === false ) {
- cache[ key ].count ++;
- if ( cache[ key ].keepAlive === false && cache[ key ].count > removeThresholdCount ) {
- delete cache[ key ];
- }
- } else {
- cache[ key ].used = false;
- cache[ key ].count = 0;
- }
- }
- }
- this.render = function ( scene, camera ) {
- let renderTarget;
- let forceClear = false;
- if ( arguments[ 2 ] !== undefined ) {
- console.warn( 'THREE.OutlineEffect.render(): the renderTarget argument has been removed. Use .setRenderTarget() instead.' );
- renderTarget = arguments[ 2 ];
- }
- if ( arguments[ 3 ] !== undefined ) {
- console.warn( 'THREE.OutlineEffect.render(): the forceClear argument has been removed. Use .clear() instead.' );
- forceClear = arguments[ 3 ];
- }
- if ( renderTarget !== undefined ) renderer.setRenderTarget( renderTarget );
- if ( forceClear ) renderer.clear();
- if ( this.enabled === false ) {
- renderer.render( scene, camera );
- return;
- }
- const currentAutoClear = renderer.autoClear;
- renderer.autoClear = this.autoClear;
- renderer.render( scene, camera );
- renderer.autoClear = currentAutoClear;
- this.renderOutline( scene, camera );
- };
- this.renderOutline = function ( scene, camera ) {
- const currentAutoClear = renderer.autoClear;
- const currentSceneAutoUpdate = scene.autoUpdate;
- const currentSceneBackground = scene.background;
- const currentShadowMapEnabled = renderer.shadowMap.enabled;
- scene.autoUpdate = false;
- scene.background = null;
- renderer.autoClear = false;
- renderer.shadowMap.enabled = false;
- scene.traverse( setOutlineMaterial );
- renderer.render( scene, camera );
- scene.traverse( restoreOriginalMaterial );
- cleanupCache();
- scene.autoUpdate = currentSceneAutoUpdate;
- scene.background = currentSceneBackground;
- renderer.autoClear = currentAutoClear;
- renderer.shadowMap.enabled = currentShadowMapEnabled;
- };
- /*
- * See #9918
- *
- * The following property copies and wrapper methods enable
- * OutlineEffect to be called from other *Effect, like
- *
- * effect = new StereoEffect( new OutlineEffect( renderer ) );
- *
- * function render () {
- *
- * effect.render( scene, camera );
- *
- * }
- */
- this.autoClear = renderer.autoClear;
- this.domElement = renderer.domElement;
- this.shadowMap = renderer.shadowMap;
- this.clear = function ( color, depth, stencil ) {
- renderer.clear( color, depth, stencil );
- };
- this.getPixelRatio = function () {
- return renderer.getPixelRatio();
- };
- this.setPixelRatio = function ( value ) {
- renderer.setPixelRatio( value );
- };
- this.getSize = function ( target ) {
- return renderer.getSize( target );
- };
- this.setSize = function ( width, height, updateStyle ) {
- renderer.setSize( width, height, updateStyle );
- };
- this.setViewport = function ( x, y, width, height ) {
- renderer.setViewport( x, y, width, height );
- };
- this.setScissor = function ( x, y, width, height ) {
- renderer.setScissor( x, y, width, height );
- };
- this.setScissorTest = function ( boolean ) {
- renderer.setScissorTest( boolean );
- };
- this.setRenderTarget = function ( renderTarget ) {
- renderer.setRenderTarget( renderTarget );
- };
- }
- }
- THREE.OutlineEffect = OutlineEffect;
- } )();
|