最新代码
This commit is contained in:
154
public/sdk/three/jsm/effects/AnaglyphEffect.js
Normal file
154
public/sdk/three/jsm/effects/AnaglyphEffect.js
Normal file
@ -0,0 +1,154 @@
|
||||
import {
|
||||
LinearFilter,
|
||||
Matrix3,
|
||||
Mesh,
|
||||
NearestFilter,
|
||||
OrthographicCamera,
|
||||
PlaneGeometry,
|
||||
RGBAFormat,
|
||||
Scene,
|
||||
ShaderMaterial,
|
||||
StereoCamera,
|
||||
WebGLRenderTarget
|
||||
} from 'three';
|
||||
|
||||
class AnaglyphEffect {
|
||||
|
||||
constructor( renderer, width = 512, height = 512 ) {
|
||||
|
||||
// Dubois matrices from https://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.7.6968&rep=rep1&type=pdf#page=4
|
||||
|
||||
this.colorMatrixLeft = new Matrix3().fromArray( [
|
||||
0.456100, - 0.0400822, - 0.0152161,
|
||||
0.500484, - 0.0378246, - 0.0205971,
|
||||
0.176381, - 0.0157589, - 0.00546856
|
||||
] );
|
||||
|
||||
this.colorMatrixRight = new Matrix3().fromArray( [
|
||||
- 0.0434706, 0.378476, - 0.0721527,
|
||||
- 0.0879388, 0.73364, - 0.112961,
|
||||
- 0.00155529, - 0.0184503, 1.2264
|
||||
] );
|
||||
|
||||
const _camera = new OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
|
||||
|
||||
const _scene = new Scene();
|
||||
|
||||
const _stereo = new StereoCamera();
|
||||
|
||||
const _params = { minFilter: LinearFilter, magFilter: NearestFilter, format: RGBAFormat };
|
||||
|
||||
const _renderTargetL = new WebGLRenderTarget( width, height, _params );
|
||||
const _renderTargetR = new WebGLRenderTarget( width, height, _params );
|
||||
|
||||
const _material = new ShaderMaterial( {
|
||||
|
||||
uniforms: {
|
||||
|
||||
'mapLeft': { value: _renderTargetL.texture },
|
||||
'mapRight': { value: _renderTargetR.texture },
|
||||
|
||||
'colorMatrixLeft': { value: this.colorMatrixLeft },
|
||||
'colorMatrixRight': { value: this.colorMatrixRight }
|
||||
|
||||
},
|
||||
|
||||
vertexShader: [
|
||||
|
||||
'varying vec2 vUv;',
|
||||
|
||||
'void main() {',
|
||||
|
||||
' vUv = vec2( uv.x, uv.y );',
|
||||
' gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
|
||||
|
||||
'}'
|
||||
|
||||
].join( '\n' ),
|
||||
|
||||
fragmentShader: [
|
||||
|
||||
'uniform sampler2D mapLeft;',
|
||||
'uniform sampler2D mapRight;',
|
||||
'varying vec2 vUv;',
|
||||
|
||||
'uniform mat3 colorMatrixLeft;',
|
||||
'uniform mat3 colorMatrixRight;',
|
||||
|
||||
'void main() {',
|
||||
|
||||
' vec2 uv = vUv;',
|
||||
|
||||
' vec4 colorL = texture2D( mapLeft, uv );',
|
||||
' vec4 colorR = texture2D( mapRight, uv );',
|
||||
|
||||
' vec3 color = clamp(',
|
||||
' colorMatrixLeft * colorL.rgb +',
|
||||
' colorMatrixRight * colorR.rgb, 0., 1. );',
|
||||
|
||||
' gl_FragColor = vec4(',
|
||||
' color.r, color.g, color.b,',
|
||||
' max( colorL.a, colorR.a ) );',
|
||||
|
||||
' #include <tonemapping_fragment>',
|
||||
' #include <colorspace_fragment>',
|
||||
|
||||
'}'
|
||||
|
||||
].join( '\n' )
|
||||
|
||||
} );
|
||||
|
||||
const _mesh = new Mesh( new PlaneGeometry( 2, 2 ), _material );
|
||||
_scene.add( _mesh );
|
||||
|
||||
this.setSize = function ( width, height ) {
|
||||
|
||||
renderer.setSize( width, height );
|
||||
|
||||
const pixelRatio = renderer.getPixelRatio();
|
||||
|
||||
_renderTargetL.setSize( width * pixelRatio, height * pixelRatio );
|
||||
_renderTargetR.setSize( width * pixelRatio, height * pixelRatio );
|
||||
|
||||
};
|
||||
|
||||
this.render = function ( scene, camera ) {
|
||||
|
||||
const currentRenderTarget = renderer.getRenderTarget();
|
||||
|
||||
if ( scene.matrixWorldAutoUpdate === true ) scene.updateMatrixWorld();
|
||||
|
||||
if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) camera.updateMatrixWorld();
|
||||
|
||||
_stereo.update( camera );
|
||||
|
||||
renderer.setRenderTarget( _renderTargetL );
|
||||
renderer.clear();
|
||||
renderer.render( scene, _stereo.cameraL );
|
||||
|
||||
renderer.setRenderTarget( _renderTargetR );
|
||||
renderer.clear();
|
||||
renderer.render( scene, _stereo.cameraR );
|
||||
|
||||
renderer.setRenderTarget( null );
|
||||
renderer.render( _scene, _camera );
|
||||
|
||||
renderer.setRenderTarget( currentRenderTarget );
|
||||
|
||||
};
|
||||
|
||||
this.dispose = function () {
|
||||
|
||||
_renderTargetL.dispose();
|
||||
_renderTargetR.dispose();
|
||||
_mesh.geometry.dispose();
|
||||
_mesh.material.dispose();
|
||||
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export { AnaglyphEffect };
|
||||
263
public/sdk/three/jsm/effects/AsciiEffect.js
Normal file
263
public/sdk/three/jsm/effects/AsciiEffect.js
Normal file
@ -0,0 +1,263 @@
|
||||
/**
|
||||
* Ascii generation is based on https://github.com/hassadee/jsascii/blob/master/jsascii.js
|
||||
*
|
||||
* 16 April 2012 - @blurspline
|
||||
*/
|
||||
|
||||
class AsciiEffect {
|
||||
|
||||
constructor( renderer, charSet = ' .:-=+*#%@', options = {} ) {
|
||||
|
||||
// ' .,:;=|iI+hHOE#`$';
|
||||
// darker bolder character set from https://github.com/saw/Canvas-ASCII-Art/
|
||||
// ' .\'`^",:;Il!i~+_-?][}{1)(|/tfjrxnuvczXYUJCLQ0OZmwqpdbkhao*#MW&8%B@$'.split('');
|
||||
|
||||
// Some ASCII settings
|
||||
|
||||
const fResolution = options[ 'resolution' ] || 0.15; // Higher for more details
|
||||
const iScale = options[ 'scale' ] || 1;
|
||||
const bColor = options[ 'color' ] || false; // nice but slows down rendering!
|
||||
const bAlpha = options[ 'alpha' ] || false; // Transparency
|
||||
const bBlock = options[ 'block' ] || false; // blocked characters. like good O dos
|
||||
const bInvert = options[ 'invert' ] || false; // black is white, white is black
|
||||
const strResolution = options[ 'strResolution' ] || 'low';
|
||||
|
||||
let width, height;
|
||||
|
||||
const domElement = document.createElement( 'div' );
|
||||
domElement.style.cursor = 'default';
|
||||
|
||||
const oAscii = document.createElement( 'table' );
|
||||
domElement.appendChild( oAscii );
|
||||
|
||||
let iWidth, iHeight;
|
||||
let oImg;
|
||||
|
||||
this.setSize = function ( w, h ) {
|
||||
|
||||
width = w;
|
||||
height = h;
|
||||
|
||||
renderer.setSize( w, h );
|
||||
|
||||
initAsciiSize();
|
||||
|
||||
};
|
||||
|
||||
|
||||
this.render = function ( scene, camera ) {
|
||||
|
||||
renderer.render( scene, camera );
|
||||
asciifyImage( oAscii );
|
||||
|
||||
};
|
||||
|
||||
this.domElement = domElement;
|
||||
|
||||
|
||||
// Throw in ascii library from https://github.com/hassadee/jsascii/blob/master/jsascii.js (MIT License)
|
||||
|
||||
function initAsciiSize() {
|
||||
|
||||
iWidth = Math.floor( width * fResolution );
|
||||
iHeight = Math.floor( height * fResolution );
|
||||
|
||||
oCanvas.width = iWidth;
|
||||
oCanvas.height = iHeight;
|
||||
// oCanvas.style.display = "none";
|
||||
// oCanvas.style.width = iWidth;
|
||||
// oCanvas.style.height = iHeight;
|
||||
|
||||
oImg = renderer.domElement;
|
||||
|
||||
if ( oImg.style.backgroundColor ) {
|
||||
|
||||
oAscii.rows[ 0 ].cells[ 0 ].style.backgroundColor = oImg.style.backgroundColor;
|
||||
oAscii.rows[ 0 ].cells[ 0 ].style.color = oImg.style.color;
|
||||
|
||||
}
|
||||
|
||||
oAscii.cellSpacing = 0;
|
||||
oAscii.cellPadding = 0;
|
||||
|
||||
const oStyle = oAscii.style;
|
||||
oStyle.whiteSpace = 'pre';
|
||||
oStyle.margin = '0px';
|
||||
oStyle.padding = '0px';
|
||||
oStyle.letterSpacing = fLetterSpacing + 'px';
|
||||
oStyle.fontFamily = strFont;
|
||||
oStyle.fontSize = fFontSize + 'px';
|
||||
oStyle.lineHeight = fLineHeight + 'px';
|
||||
oStyle.textAlign = 'left';
|
||||
oStyle.textDecoration = 'none';
|
||||
|
||||
}
|
||||
|
||||
|
||||
const aDefaultCharList = ( ' .,:;i1tfLCG08@' ).split( '' );
|
||||
const aDefaultColorCharList = ( ' CGO08@' ).split( '' );
|
||||
const strFont = 'courier new, monospace';
|
||||
|
||||
const oCanvasImg = renderer.domElement;
|
||||
|
||||
const oCanvas = document.createElement( 'canvas' );
|
||||
if ( ! oCanvas.getContext ) {
|
||||
|
||||
return;
|
||||
|
||||
}
|
||||
|
||||
const oCtx = oCanvas.getContext( '2d' );
|
||||
if ( ! oCtx.getImageData ) {
|
||||
|
||||
return;
|
||||
|
||||
}
|
||||
|
||||
let aCharList = ( bColor ? aDefaultColorCharList : aDefaultCharList );
|
||||
|
||||
if ( charSet ) aCharList = charSet;
|
||||
|
||||
// Setup dom
|
||||
|
||||
const fFontSize = ( 2 / fResolution ) * iScale;
|
||||
const fLineHeight = ( 2 / fResolution ) * iScale;
|
||||
|
||||
// adjust letter-spacing for all combinations of scale and resolution to get it to fit the image width.
|
||||
|
||||
let fLetterSpacing = 0;
|
||||
|
||||
if ( strResolution == 'low' ) {
|
||||
|
||||
switch ( iScale ) {
|
||||
|
||||
case 1 : fLetterSpacing = - 1; break;
|
||||
case 2 :
|
||||
case 3 : fLetterSpacing = - 2.1; break;
|
||||
case 4 : fLetterSpacing = - 3.1; break;
|
||||
case 5 : fLetterSpacing = - 4.15; break;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if ( strResolution == 'medium' ) {
|
||||
|
||||
switch ( iScale ) {
|
||||
|
||||
case 1 : fLetterSpacing = 0; break;
|
||||
case 2 : fLetterSpacing = - 1; break;
|
||||
case 3 : fLetterSpacing = - 1.04; break;
|
||||
case 4 :
|
||||
case 5 : fLetterSpacing = - 2.1; break;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if ( strResolution == 'high' ) {
|
||||
|
||||
switch ( iScale ) {
|
||||
|
||||
case 1 :
|
||||
case 2 : fLetterSpacing = 0; break;
|
||||
case 3 :
|
||||
case 4 :
|
||||
case 5 : fLetterSpacing = - 1; break;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// can't get a span or div to flow like an img element, but a table works?
|
||||
|
||||
|
||||
// convert img element to ascii
|
||||
|
||||
function asciifyImage( oAscii ) {
|
||||
|
||||
oCtx.clearRect( 0, 0, iWidth, iHeight );
|
||||
oCtx.drawImage( oCanvasImg, 0, 0, iWidth, iHeight );
|
||||
const oImgData = oCtx.getImageData( 0, 0, iWidth, iHeight ).data;
|
||||
|
||||
// Coloring loop starts now
|
||||
let strChars = '';
|
||||
|
||||
// console.time('rendering');
|
||||
|
||||
for ( let y = 0; y < iHeight; y += 2 ) {
|
||||
|
||||
for ( let x = 0; x < iWidth; x ++ ) {
|
||||
|
||||
const iOffset = ( y * iWidth + x ) * 4;
|
||||
|
||||
const iRed = oImgData[ iOffset ];
|
||||
const iGreen = oImgData[ iOffset + 1 ];
|
||||
const iBlue = oImgData[ iOffset + 2 ];
|
||||
const iAlpha = oImgData[ iOffset + 3 ];
|
||||
let iCharIdx;
|
||||
|
||||
let fBrightness;
|
||||
|
||||
fBrightness = ( 0.3 * iRed + 0.59 * iGreen + 0.11 * iBlue ) / 255;
|
||||
// fBrightness = (0.3*iRed + 0.5*iGreen + 0.3*iBlue) / 255;
|
||||
|
||||
if ( iAlpha == 0 ) {
|
||||
|
||||
// should calculate alpha instead, but quick hack :)
|
||||
//fBrightness *= (iAlpha / 255);
|
||||
fBrightness = 1;
|
||||
|
||||
}
|
||||
|
||||
iCharIdx = Math.floor( ( 1 - fBrightness ) * ( aCharList.length - 1 ) );
|
||||
|
||||
if ( bInvert ) {
|
||||
|
||||
iCharIdx = aCharList.length - iCharIdx - 1;
|
||||
|
||||
}
|
||||
|
||||
// good for debugging
|
||||
//fBrightness = Math.floor(fBrightness * 10);
|
||||
//strThisChar = fBrightness;
|
||||
|
||||
let strThisChar = aCharList[ iCharIdx ];
|
||||
|
||||
if ( strThisChar === undefined || strThisChar == ' ' )
|
||||
strThisChar = ' ';
|
||||
|
||||
if ( bColor ) {
|
||||
|
||||
strChars += '<span style=\''
|
||||
+ 'color:rgb(' + iRed + ',' + iGreen + ',' + iBlue + ');'
|
||||
+ ( bBlock ? 'background-color:rgb(' + iRed + ',' + iGreen + ',' + iBlue + ');' : '' )
|
||||
+ ( bAlpha ? 'opacity:' + ( iAlpha / 255 ) + ';' : '' )
|
||||
+ '\'>' + strThisChar + '</span>';
|
||||
|
||||
} else {
|
||||
|
||||
strChars += strThisChar;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
strChars += '<br/>';
|
||||
|
||||
}
|
||||
|
||||
oAscii.innerHTML = `<tr><td style="display:block;width:${width}px;height:${height}px;overflow:hidden">${strChars}</td></tr>`;
|
||||
|
||||
// console.timeEnd('rendering');
|
||||
|
||||
// return oAscii;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export { AsciiEffect };
|
||||
539
public/sdk/three/jsm/effects/OutlineEffect.js
Normal file
539
public/sdk/three/jsm/effects/OutlineEffect.js
Normal file
@ -0,0 +1,539 @@
|
||||
import {
|
||||
BackSide,
|
||||
Color,
|
||||
ShaderMaterial,
|
||||
UniformsLib,
|
||||
UniformsUtils
|
||||
} from 'three';
|
||||
|
||||
/**
|
||||
* 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 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 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 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 <colorspace_fragment>',
|
||||
' #include <fog_fragment>',
|
||||
' #include <premultiplied_alpha_fragment>',
|
||||
|
||||
'}'
|
||||
|
||||
].join( '\n' );
|
||||
|
||||
function createMaterial() {
|
||||
|
||||
return new ShaderMaterial( {
|
||||
type: 'OutlineEffect',
|
||||
uniforms: UniformsUtils.merge( [
|
||||
UniformsLib[ 'fog' ],
|
||||
UniformsLib[ 'displacementmap' ],
|
||||
uniformsOutline
|
||||
] ),
|
||||
vertexShader: vertexShader,
|
||||
fragmentShader: fragmentShader,
|
||||
side: 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;
|
||||
const hasNormals = ( geometry !== undefined ) && ( geometry.attributes.normal !== undefined );
|
||||
|
||||
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 ) {
|
||||
|
||||
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.matrixWorldAutoUpdate;
|
||||
const currentSceneBackground = scene.background;
|
||||
const currentShadowMapEnabled = renderer.shadowMap.enabled;
|
||||
|
||||
scene.matrixWorldAutoUpdate = false;
|
||||
scene.background = null;
|
||||
renderer.autoClear = false;
|
||||
renderer.shadowMap.enabled = false;
|
||||
|
||||
scene.traverse( setOutlineMaterial );
|
||||
|
||||
renderer.render( scene, camera );
|
||||
|
||||
scene.traverse( restoreOriginalMaterial );
|
||||
|
||||
cleanupCache();
|
||||
|
||||
scene.matrixWorldAutoUpdate = 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 );
|
||||
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export { OutlineEffect };
|
||||
119
public/sdk/three/jsm/effects/ParallaxBarrierEffect.js
Normal file
119
public/sdk/three/jsm/effects/ParallaxBarrierEffect.js
Normal file
@ -0,0 +1,119 @@
|
||||
import {
|
||||
LinearFilter,
|
||||
Mesh,
|
||||
NearestFilter,
|
||||
OrthographicCamera,
|
||||
PlaneGeometry,
|
||||
RGBAFormat,
|
||||
Scene,
|
||||
ShaderMaterial,
|
||||
StereoCamera,
|
||||
WebGLRenderTarget
|
||||
} from 'three';
|
||||
|
||||
class ParallaxBarrierEffect {
|
||||
|
||||
constructor( renderer ) {
|
||||
|
||||
const _camera = new OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
|
||||
|
||||
const _scene = new Scene();
|
||||
|
||||
const _stereo = new StereoCamera();
|
||||
|
||||
const _params = { minFilter: LinearFilter, magFilter: NearestFilter, format: RGBAFormat };
|
||||
|
||||
const _renderTargetL = new WebGLRenderTarget( 512, 512, _params );
|
||||
const _renderTargetR = new WebGLRenderTarget( 512, 512, _params );
|
||||
|
||||
const _material = new ShaderMaterial( {
|
||||
|
||||
uniforms: {
|
||||
|
||||
'mapLeft': { value: _renderTargetL.texture },
|
||||
'mapRight': { value: _renderTargetR.texture }
|
||||
|
||||
},
|
||||
|
||||
vertexShader: [
|
||||
|
||||
'varying vec2 vUv;',
|
||||
|
||||
'void main() {',
|
||||
|
||||
' vUv = vec2( uv.x, uv.y );',
|
||||
' gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
|
||||
|
||||
'}'
|
||||
|
||||
].join( '\n' ),
|
||||
|
||||
fragmentShader: [
|
||||
|
||||
'uniform sampler2D mapLeft;',
|
||||
'uniform sampler2D mapRight;',
|
||||
'varying vec2 vUv;',
|
||||
|
||||
'void main() {',
|
||||
|
||||
' vec2 uv = vUv;',
|
||||
|
||||
' if ( ( mod( gl_FragCoord.y, 2.0 ) ) > 1.00 ) {',
|
||||
|
||||
' gl_FragColor = texture2D( mapLeft, uv );',
|
||||
|
||||
' } else {',
|
||||
|
||||
' gl_FragColor = texture2D( mapRight, uv );',
|
||||
|
||||
' }',
|
||||
|
||||
' #include <tonemapping_fragment>',
|
||||
' #include <colorspace_fragment>',
|
||||
|
||||
'}'
|
||||
|
||||
].join( '\n' )
|
||||
|
||||
} );
|
||||
|
||||
const mesh = new Mesh( new PlaneGeometry( 2, 2 ), _material );
|
||||
_scene.add( mesh );
|
||||
|
||||
this.setSize = function ( width, height ) {
|
||||
|
||||
renderer.setSize( width, height );
|
||||
|
||||
const pixelRatio = renderer.getPixelRatio();
|
||||
|
||||
_renderTargetL.setSize( width * pixelRatio, height * pixelRatio );
|
||||
_renderTargetR.setSize( width * pixelRatio, height * pixelRatio );
|
||||
|
||||
};
|
||||
|
||||
this.render = function ( scene, camera ) {
|
||||
|
||||
if ( scene.matrixWorldAutoUpdate === true ) scene.updateMatrixWorld();
|
||||
|
||||
if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) camera.updateMatrixWorld();
|
||||
|
||||
_stereo.update( camera );
|
||||
|
||||
renderer.setRenderTarget( _renderTargetL );
|
||||
renderer.clear();
|
||||
renderer.render( scene, _stereo.cameraL );
|
||||
|
||||
renderer.setRenderTarget( _renderTargetR );
|
||||
renderer.clear();
|
||||
renderer.render( scene, _stereo.cameraR );
|
||||
|
||||
renderer.setRenderTarget( null );
|
||||
renderer.render( _scene, _camera );
|
||||
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export { ParallaxBarrierEffect };
|
||||
153
public/sdk/three/jsm/effects/PeppersGhostEffect.js
Normal file
153
public/sdk/three/jsm/effects/PeppersGhostEffect.js
Normal file
@ -0,0 +1,153 @@
|
||||
import {
|
||||
PerspectiveCamera,
|
||||
Quaternion,
|
||||
Vector3
|
||||
} from 'three';
|
||||
|
||||
/**
|
||||
* peppers ghost effect based on http://www.instructables.com/id/Reflective-Prism/?ALLSTEPS
|
||||
*/
|
||||
|
||||
class PeppersGhostEffect {
|
||||
|
||||
constructor( renderer ) {
|
||||
|
||||
const scope = this;
|
||||
|
||||
scope.cameraDistance = 15;
|
||||
scope.reflectFromAbove = false;
|
||||
|
||||
// Internals
|
||||
let _halfWidth, _width, _height;
|
||||
|
||||
const _cameraF = new PerspectiveCamera(); //front
|
||||
const _cameraB = new PerspectiveCamera(); //back
|
||||
const _cameraL = new PerspectiveCamera(); //left
|
||||
const _cameraR = new PerspectiveCamera(); //right
|
||||
|
||||
const _position = new Vector3();
|
||||
const _quaternion = new Quaternion();
|
||||
const _scale = new Vector3();
|
||||
|
||||
// Initialization
|
||||
renderer.autoClear = false;
|
||||
|
||||
this.setSize = function ( width, height ) {
|
||||
|
||||
_halfWidth = width / 2;
|
||||
if ( width < height ) {
|
||||
|
||||
_width = width / 3;
|
||||
_height = width / 3;
|
||||
|
||||
} else {
|
||||
|
||||
_width = height / 3;
|
||||
_height = height / 3;
|
||||
|
||||
}
|
||||
|
||||
renderer.setSize( width, height );
|
||||
|
||||
};
|
||||
|
||||
this.render = function ( scene, camera ) {
|
||||
|
||||
if ( scene.matrixWorldAutoUpdate === true ) scene.updateMatrixWorld();
|
||||
|
||||
if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) camera.updateMatrixWorld();
|
||||
|
||||
camera.matrixWorld.decompose( _position, _quaternion, _scale );
|
||||
|
||||
// front
|
||||
_cameraF.position.copy( _position );
|
||||
_cameraF.quaternion.copy( _quaternion );
|
||||
_cameraF.translateZ( scope.cameraDistance );
|
||||
_cameraF.lookAt( scene.position );
|
||||
|
||||
// back
|
||||
_cameraB.position.copy( _position );
|
||||
_cameraB.quaternion.copy( _quaternion );
|
||||
_cameraB.translateZ( - ( scope.cameraDistance ) );
|
||||
_cameraB.lookAt( scene.position );
|
||||
_cameraB.rotation.z += 180 * ( Math.PI / 180 );
|
||||
|
||||
// left
|
||||
_cameraL.position.copy( _position );
|
||||
_cameraL.quaternion.copy( _quaternion );
|
||||
_cameraL.translateX( - ( scope.cameraDistance ) );
|
||||
_cameraL.lookAt( scene.position );
|
||||
_cameraL.rotation.x += 90 * ( Math.PI / 180 );
|
||||
|
||||
// right
|
||||
_cameraR.position.copy( _position );
|
||||
_cameraR.quaternion.copy( _quaternion );
|
||||
_cameraR.translateX( scope.cameraDistance );
|
||||
_cameraR.lookAt( scene.position );
|
||||
_cameraR.rotation.x += 90 * ( Math.PI / 180 );
|
||||
|
||||
|
||||
renderer.clear();
|
||||
renderer.setScissorTest( true );
|
||||
|
||||
renderer.setScissor( _halfWidth - ( _width / 2 ), ( _height * 2 ), _width, _height );
|
||||
renderer.setViewport( _halfWidth - ( _width / 2 ), ( _height * 2 ), _width, _height );
|
||||
|
||||
if ( scope.reflectFromAbove ) {
|
||||
|
||||
renderer.render( scene, _cameraB );
|
||||
|
||||
} else {
|
||||
|
||||
renderer.render( scene, _cameraF );
|
||||
|
||||
}
|
||||
|
||||
renderer.setScissor( _halfWidth - ( _width / 2 ), 0, _width, _height );
|
||||
renderer.setViewport( _halfWidth - ( _width / 2 ), 0, _width, _height );
|
||||
|
||||
if ( scope.reflectFromAbove ) {
|
||||
|
||||
renderer.render( scene, _cameraF );
|
||||
|
||||
} else {
|
||||
|
||||
renderer.render( scene, _cameraB );
|
||||
|
||||
}
|
||||
|
||||
renderer.setScissor( _halfWidth - ( _width / 2 ) - _width, _height, _width, _height );
|
||||
renderer.setViewport( _halfWidth - ( _width / 2 ) - _width, _height, _width, _height );
|
||||
|
||||
if ( scope.reflectFromAbove ) {
|
||||
|
||||
renderer.render( scene, _cameraR );
|
||||
|
||||
} else {
|
||||
|
||||
renderer.render( scene, _cameraL );
|
||||
|
||||
}
|
||||
|
||||
renderer.setScissor( _halfWidth + ( _width / 2 ), _height, _width, _height );
|
||||
renderer.setViewport( _halfWidth + ( _width / 2 ), _height, _width, _height );
|
||||
|
||||
if ( scope.reflectFromAbove ) {
|
||||
|
||||
renderer.render( scene, _cameraL );
|
||||
|
||||
} else {
|
||||
|
||||
renderer.render( scene, _cameraR );
|
||||
|
||||
}
|
||||
|
||||
renderer.setScissorTest( false );
|
||||
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export { PeppersGhostEffect };
|
||||
55
public/sdk/three/jsm/effects/StereoEffect.js
Normal file
55
public/sdk/three/jsm/effects/StereoEffect.js
Normal file
@ -0,0 +1,55 @@
|
||||
import {
|
||||
StereoCamera,
|
||||
Vector2
|
||||
} from 'three';
|
||||
|
||||
class StereoEffect {
|
||||
|
||||
constructor( renderer ) {
|
||||
|
||||
const _stereo = new StereoCamera();
|
||||
_stereo.aspect = 0.5;
|
||||
const size = new Vector2();
|
||||
|
||||
this.setEyeSeparation = function ( eyeSep ) {
|
||||
|
||||
_stereo.eyeSep = eyeSep;
|
||||
|
||||
};
|
||||
|
||||
this.setSize = function ( width, height ) {
|
||||
|
||||
renderer.setSize( width, height );
|
||||
|
||||
};
|
||||
|
||||
this.render = function ( scene, camera ) {
|
||||
|
||||
if ( scene.matrixWorldAutoUpdate === true ) scene.updateMatrixWorld();
|
||||
|
||||
if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) camera.updateMatrixWorld();
|
||||
|
||||
_stereo.update( camera );
|
||||
|
||||
renderer.getSize( size );
|
||||
|
||||
if ( renderer.autoClear ) renderer.clear();
|
||||
renderer.setScissorTest( true );
|
||||
|
||||
renderer.setScissor( 0, 0, size.width / 2, size.height );
|
||||
renderer.setViewport( 0, 0, size.width / 2, size.height );
|
||||
renderer.render( scene, _stereo.cameraL );
|
||||
|
||||
renderer.setScissor( size.width / 2, 0, size.width / 2, size.height );
|
||||
renderer.setViewport( size.width / 2, 0, size.width / 2, size.height );
|
||||
renderer.render( scene, _stereo.cameraR );
|
||||
|
||||
renderer.setScissorTest( false );
|
||||
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export { StereoEffect };
|
||||
Reference in New Issue
Block a user