|
|
@@ -1,2298 +0,0 @@
|
|
|
-import {
|
|
|
- AddOperation,
|
|
|
- AnimationClip,
|
|
|
- Bone,
|
|
|
- BufferGeometry,
|
|
|
- Color,
|
|
|
- CustomBlending,
|
|
|
- TangentSpaceNormalMap,
|
|
|
- DoubleSide,
|
|
|
- DstAlphaFactor,
|
|
|
- Euler,
|
|
|
- FileLoader,
|
|
|
- Float32BufferAttribute,
|
|
|
- FrontSide,
|
|
|
- Interpolant,
|
|
|
- Loader,
|
|
|
- LoaderUtils,
|
|
|
- UniformsUtils,
|
|
|
- ShaderMaterial,
|
|
|
- MultiplyOperation,
|
|
|
- NearestFilter,
|
|
|
- NumberKeyframeTrack,
|
|
|
- OneMinusSrcAlphaFactor,
|
|
|
- Quaternion,
|
|
|
- QuaternionKeyframeTrack,
|
|
|
- RepeatWrapping,
|
|
|
- Skeleton,
|
|
|
- SkinnedMesh,
|
|
|
- SrcAlphaFactor,
|
|
|
- SRGBColorSpace,
|
|
|
- TextureLoader,
|
|
|
- Uint16BufferAttribute,
|
|
|
- Vector3,
|
|
|
- VectorKeyframeTrack,
|
|
|
- RGB_S3TC_DXT1_Format,
|
|
|
- RGB_PVRTC_4BPPV1_Format,
|
|
|
- RGB_PVRTC_2BPPV1_Format,
|
|
|
- RGB_ETC1_Format,
|
|
|
- RGB_ETC2_Format
|
|
|
-} from 'three';
|
|
|
-import { MMDToonShader } from '../shaders/MMDToonShader.js';
|
|
|
-import { TGALoader } from '../loaders/TGALoader.js';
|
|
|
-import { MMDParser } from '../libs/mmdparser.module.js';
|
|
|
-
|
|
|
-/**
|
|
|
- * Dependencies
|
|
|
- * - mmd-parser https://github.com/takahirox/mmd-parser
|
|
|
- * - TGALoader
|
|
|
- * - OutlineEffect
|
|
|
- *
|
|
|
- * MMDLoader creates Three.js Objects from MMD resources as
|
|
|
- * PMD, PMX, VMD, and VPD files.
|
|
|
- *
|
|
|
- * PMD/PMX is a model data format, VMD is a motion data format
|
|
|
- * VPD is a posing data format used in MMD(Miku Miku Dance).
|
|
|
- *
|
|
|
- * MMD official site
|
|
|
- * - https://sites.google.com/view/evpvp/
|
|
|
- *
|
|
|
- * PMD, VMD format (in Japanese)
|
|
|
- * - http://blog.goo.ne.jp/torisu_tetosuki/e/209ad341d3ece2b1b4df24abf619d6e4
|
|
|
- *
|
|
|
- * PMX format
|
|
|
- * - https://gist.github.com/felixjones/f8a06bd48f9da9a4539f
|
|
|
- *
|
|
|
- * TODO
|
|
|
- * - light motion in vmd support.
|
|
|
- * - SDEF support.
|
|
|
- * - uv/material/bone morphing support.
|
|
|
- * - more precise grant skinning support.
|
|
|
- * - shadow support.
|
|
|
- */
|
|
|
-
|
|
|
-/**
|
|
|
- * @param {THREE.LoadingManager} manager
|
|
|
- */
|
|
|
-class MMDLoader extends Loader {
|
|
|
-
|
|
|
- constructor( manager ) {
|
|
|
-
|
|
|
- super( manager );
|
|
|
-
|
|
|
- this.loader = new FileLoader( this.manager );
|
|
|
-
|
|
|
- this.parser = null; // lazy generation
|
|
|
- this.meshBuilder = new MeshBuilder( this.manager );
|
|
|
- this.animationBuilder = new AnimationBuilder();
|
|
|
-
|
|
|
- console.warn( 'THREE.MMDLoader: The module has been deprecated and will be removed with r172. Please migrate to https://github.com/takahirox/three-mmd-loader instead.' );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * @param {string} animationPath
|
|
|
- * @return {MMDLoader}
|
|
|
- */
|
|
|
- setAnimationPath( animationPath ) {
|
|
|
-
|
|
|
- this.animationPath = animationPath;
|
|
|
- return this;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- // Load MMD assets as Three.js Object
|
|
|
-
|
|
|
- /**
|
|
|
- * Loads Model file (.pmd or .pmx) as a SkinnedMesh.
|
|
|
- *
|
|
|
- * @param {string} url - url to Model(.pmd or .pmx) file
|
|
|
- * @param {function} onLoad
|
|
|
- * @param {function} onProgress
|
|
|
- * @param {function} onError
|
|
|
- */
|
|
|
- load( url, onLoad, onProgress, onError ) {
|
|
|
-
|
|
|
- const builder = this.meshBuilder.setCrossOrigin( this.crossOrigin );
|
|
|
-
|
|
|
- // resource path
|
|
|
-
|
|
|
- let resourcePath;
|
|
|
-
|
|
|
- if ( this.resourcePath !== '' ) {
|
|
|
-
|
|
|
- resourcePath = this.resourcePath;
|
|
|
-
|
|
|
- } else if ( this.path !== '' ) {
|
|
|
-
|
|
|
- resourcePath = this.path;
|
|
|
-
|
|
|
- } else {
|
|
|
-
|
|
|
- resourcePath = LoaderUtils.extractUrlBase( url );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- const parser = this._getParser();
|
|
|
- const extractModelExtension = this._extractModelExtension;
|
|
|
-
|
|
|
- this.loader
|
|
|
- .setMimeType( undefined )
|
|
|
- .setPath( this.path )
|
|
|
- .setResponseType( 'arraybuffer' )
|
|
|
- .setRequestHeader( this.requestHeader )
|
|
|
- .setWithCredentials( this.withCredentials )
|
|
|
- .load( url, function ( buffer ) {
|
|
|
-
|
|
|
- try {
|
|
|
-
|
|
|
- const modelExtension = extractModelExtension( buffer );
|
|
|
-
|
|
|
- if ( modelExtension !== 'pmd' && modelExtension !== 'pmx' ) {
|
|
|
-
|
|
|
- if ( onError ) onError( new Error( 'THREE.MMDLoader: Unknown model file extension .' + modelExtension + '.' ) );
|
|
|
-
|
|
|
- return;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- const data = modelExtension === 'pmd' ? parser.parsePmd( buffer, true ) : parser.parsePmx( buffer, true );
|
|
|
-
|
|
|
- onLoad( builder.build( data, resourcePath, onProgress, onError ) );
|
|
|
-
|
|
|
- } catch ( e ) {
|
|
|
-
|
|
|
- if ( onError ) onError( e );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }, onProgress, onError );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * Loads Motion file(s) (.vmd) as a AnimationClip.
|
|
|
- * If two or more files are specified, they'll be merged.
|
|
|
- *
|
|
|
- * @param {string|Array<string>} url - url(s) to animation(.vmd) file(s)
|
|
|
- * @param {SkinnedMesh|THREE.Camera} object - tracks will be fitting to this object
|
|
|
- * @param {function} onLoad
|
|
|
- * @param {function} onProgress
|
|
|
- * @param {function} onError
|
|
|
- */
|
|
|
- loadAnimation( url, object, onLoad, onProgress, onError ) {
|
|
|
-
|
|
|
- const builder = this.animationBuilder;
|
|
|
-
|
|
|
- this.loadVMD( url, function ( vmd ) {
|
|
|
-
|
|
|
- onLoad( object.isCamera
|
|
|
- ? builder.buildCameraAnimation( vmd )
|
|
|
- : builder.build( vmd, object ) );
|
|
|
-
|
|
|
- }, onProgress, onError );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * Loads mode file and motion file(s) as an object containing
|
|
|
- * a SkinnedMesh and a AnimationClip.
|
|
|
- * Tracks of AnimationClip are fitting to the model.
|
|
|
- *
|
|
|
- * @param {string} modelUrl - url to Model(.pmd or .pmx) file
|
|
|
- * @param {string|Array{string}} vmdUrl - url(s) to animation(.vmd) file
|
|
|
- * @param {function} onLoad
|
|
|
- * @param {function} onProgress
|
|
|
- * @param {function} onError
|
|
|
- */
|
|
|
- loadWithAnimation( modelUrl, vmdUrl, onLoad, onProgress, onError ) {
|
|
|
-
|
|
|
- const scope = this;
|
|
|
-
|
|
|
- this.load( modelUrl, function ( mesh ) {
|
|
|
-
|
|
|
- scope.loadAnimation( vmdUrl, mesh, function ( animation ) {
|
|
|
-
|
|
|
- onLoad( {
|
|
|
- mesh: mesh,
|
|
|
- animation: animation
|
|
|
- } );
|
|
|
-
|
|
|
- }, onProgress, onError );
|
|
|
-
|
|
|
- }, onProgress, onError );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- // Load MMD assets as Object data parsed by MMDParser
|
|
|
-
|
|
|
- /**
|
|
|
- * Loads .pmd file as an Object.
|
|
|
- *
|
|
|
- * @param {string} url - url to .pmd file
|
|
|
- * @param {function} onLoad
|
|
|
- * @param {function} onProgress
|
|
|
- * @param {function} onError
|
|
|
- */
|
|
|
- loadPMD( url, onLoad, onProgress, onError ) {
|
|
|
-
|
|
|
- const parser = this._getParser();
|
|
|
-
|
|
|
- this.loader
|
|
|
- .setMimeType( undefined )
|
|
|
- .setPath( this.path )
|
|
|
- .setResponseType( 'arraybuffer' )
|
|
|
- .setRequestHeader( this.requestHeader )
|
|
|
- .setWithCredentials( this.withCredentials )
|
|
|
- .load( url, function ( buffer ) {
|
|
|
-
|
|
|
- try {
|
|
|
-
|
|
|
- onLoad( parser.parsePmd( buffer, true ) );
|
|
|
-
|
|
|
- } catch ( e ) {
|
|
|
-
|
|
|
- if ( onError ) onError( e );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }, onProgress, onError );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * Loads .pmx file as an Object.
|
|
|
- *
|
|
|
- * @param {string} url - url to .pmx file
|
|
|
- * @param {function} onLoad
|
|
|
- * @param {function} onProgress
|
|
|
- * @param {function} onError
|
|
|
- */
|
|
|
- loadPMX( url, onLoad, onProgress, onError ) {
|
|
|
-
|
|
|
- const parser = this._getParser();
|
|
|
-
|
|
|
- this.loader
|
|
|
- .setMimeType( undefined )
|
|
|
- .setPath( this.path )
|
|
|
- .setResponseType( 'arraybuffer' )
|
|
|
- .setRequestHeader( this.requestHeader )
|
|
|
- .setWithCredentials( this.withCredentials )
|
|
|
- .load( url, function ( buffer ) {
|
|
|
-
|
|
|
- try {
|
|
|
-
|
|
|
- onLoad( parser.parsePmx( buffer, true ) );
|
|
|
-
|
|
|
- } catch ( e ) {
|
|
|
-
|
|
|
- if ( onError ) onError( e );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }, onProgress, onError );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * Loads .vmd file as an Object. If two or more files are specified
|
|
|
- * they'll be merged.
|
|
|
- *
|
|
|
- * @param {string|Array<string>} url - url(s) to .vmd file(s)
|
|
|
- * @param {function} onLoad
|
|
|
- * @param {function} onProgress
|
|
|
- * @param {function} onError
|
|
|
- */
|
|
|
- loadVMD( url, onLoad, onProgress, onError ) {
|
|
|
-
|
|
|
- const urls = Array.isArray( url ) ? url : [ url ];
|
|
|
-
|
|
|
- const vmds = [];
|
|
|
- const vmdNum = urls.length;
|
|
|
-
|
|
|
- const parser = this._getParser();
|
|
|
-
|
|
|
- this.loader
|
|
|
- .setMimeType( undefined )
|
|
|
- .setPath( this.animationPath )
|
|
|
- .setResponseType( 'arraybuffer' )
|
|
|
- .setRequestHeader( this.requestHeader )
|
|
|
- .setWithCredentials( this.withCredentials );
|
|
|
-
|
|
|
- for ( let i = 0, il = urls.length; i < il; i ++ ) {
|
|
|
-
|
|
|
- this.loader.load( urls[ i ], function ( buffer ) {
|
|
|
-
|
|
|
- try {
|
|
|
-
|
|
|
- vmds.push( parser.parseVmd( buffer, true ) );
|
|
|
-
|
|
|
- if ( vmds.length === vmdNum ) onLoad( parser.mergeVmds( vmds ) );
|
|
|
-
|
|
|
- } catch ( e ) {
|
|
|
-
|
|
|
- if ( onError ) onError( e );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }, onProgress, onError );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * Loads .vpd file as an Object.
|
|
|
- *
|
|
|
- * @param {string} url - url to .vpd file
|
|
|
- * @param {boolean} isUnicode
|
|
|
- * @param {function} onLoad
|
|
|
- * @param {function} onProgress
|
|
|
- * @param {function} onError
|
|
|
- */
|
|
|
- loadVPD( url, isUnicode, onLoad, onProgress, onError ) {
|
|
|
-
|
|
|
- const parser = this._getParser();
|
|
|
-
|
|
|
- this.loader
|
|
|
- .setMimeType( isUnicode ? undefined : 'text/plain; charset=shift_jis' )
|
|
|
- .setPath( this.animationPath )
|
|
|
- .setResponseType( 'text' )
|
|
|
- .setRequestHeader( this.requestHeader )
|
|
|
- .setWithCredentials( this.withCredentials )
|
|
|
- .load( url, function ( text ) {
|
|
|
-
|
|
|
- try {
|
|
|
-
|
|
|
- onLoad( parser.parseVpd( text, true ) );
|
|
|
-
|
|
|
- } catch ( e ) {
|
|
|
-
|
|
|
- if ( onError ) onError( e );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }, onProgress, onError );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- // private methods
|
|
|
-
|
|
|
- _extractModelExtension( buffer ) {
|
|
|
-
|
|
|
- const decoder = new TextDecoder( 'utf-8' );
|
|
|
- const bytes = new Uint8Array( buffer, 0, 3 );
|
|
|
- return decoder.decode( bytes ).toLowerCase();
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- _getParser() {
|
|
|
-
|
|
|
- if ( this.parser === null ) {
|
|
|
-
|
|
|
- this.parser = new MMDParser.Parser();
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- return this.parser;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-// Utilities
|
|
|
-
|
|
|
-/*
|
|
|
- * base64 encoded defalut toon textures toon00.bmp - toon10.bmp.
|
|
|
- * We don't need to request external toon image files.
|
|
|
- */
|
|
|
-const DEFAULT_TOON_TEXTURES = [
|
|
|
- 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAL0lEQVRYR+3QQREAAAzCsOFfNJPBJ1XQS9r2hsUAAQIECBAgQIAAAQIECBAgsBZ4MUx/ofm2I/kAAAAASUVORK5CYII=',
|
|
|
- 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAN0lEQVRYR+3WQREAMBACsZ5/bWiiMvgEBTt5cW37hjsBBAgQIECAwFwgyfYPCCBAgAABAgTWAh8aBHZBl14e8wAAAABJRU5ErkJggg==',
|
|
|
- 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAOUlEQVRYR+3WMREAMAwDsYY/yoDI7MLwIiP40+RJklfcCCBAgAABAgTqArfb/QMCCBAgQIAAgbbAB3z/e0F3js2cAAAAAElFTkSuQmCC',
|
|
|
- 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAN0lEQVRYR+3WQREAMBACsZ5/B5ilMvgEBTt5cW37hjsBBAgQIECAwFwgyfYPCCBAgAABAgTWAh81dWyx0gFwKAAAAABJRU5ErkJggg==',
|
|
|
- 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAOklEQVRYR+3WoREAMAwDsWb/UQtCy9wxTOQJ/oQ8SXKKGwEECBAgQIBAXeDt7f4BAQQIECBAgEBb4AOz8Hzx7WLY4wAAAABJRU5ErkJggg==',
|
|
|
- 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABPUlEQVRYR+1XwW7CMAy1+f9fZOMysSEOEweEOPRNdm3HbdOyIhAcklPrOs/PLy9RygBALxzcCDQFmgJNgaZAU6Ap0BR4PwX8gsRMVLssMRH5HcpzJEaWL7EVg9F1IHRlyqQohgVr4FGUlUcMJSjcUlDw0zvjeun70cLWmneoyf7NgBTQSniBTQQSuJAZsOnnaczjIMb5hCiuHKxokCrJfVnrctyZL0PkJAJe1HMil4nxeyi3Ypfn1kX51jpPvo/JeCNC4PhVdHdJw2XjBR8brF8PEIhNVn12AgP7uHsTBguBn53MUZCqv7Lp07Pn5k1Ro+uWmUNn7D+M57rtk7aG0Vo73xyF/fbFf0bPJjDXngnGocDTdFhygZjwUQrMNrDcmZlQT50VJ/g/UwNyHpu778+yW+/ksOz/BFo54P4AsUXMfRq7XWsAAAAASUVORK5CYII=',
|
|
|
- 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACMElEQVRYR+2Xv4pTQRTGf2dubhLdICiii2KnYKHVolhauKWPoGAnNr6BD6CvIVaihYuI2i1ia0BY0MZGRHQXjZj/mSPnnskfNWiWZUlzJ5k7M2cm833nO5Mziej2DWWJRUoCpQKlAntSQCqgw39/iUWAGmh37jrRnVsKlgpiqmkoGVABA7E57fvY+pJDdgKqF6HzFCSADkDq+F6AHABtQ+UMVE5D7zXod7fFNhTEckTbj5XQgHzNN+5tQvc5NG7C6BNkp6D3EmpXHDR+dQAjFLchW3VS9rlw3JBh+B7ys5Cf9z0GW1C/7P32AyBAOAz1q4jGliIH3YPuBnSfQX4OGreTIgEYQb/pBDtPnEQ4CivXYPAWBk13oHrB54yA9QuSn2H4AcKRpEILDt0BUzj+RLR1V5EqjD66NPRBVpLcQwjHoHYJOhsQv6U4mnzmrIXJCFr4LDwm/xBUoboG9XX4cc9VKdYoSA2yk5NQLJaKDUjTBoveG3Z2TElTxwjNK4M3LEZgUdDdruvcXzKBpStgp2NPiWi3ks9ZXxIoFVi+AvHLdc9TqtjL3/aYjpPlrzOcEnK62Szhimdd7xX232zFDTgtxezOu3WNMRLjiKgjtOhHVMd1loynVHvOgjuIIJMaELEqhJAV/RCSLbWTcfPFakFgFlALTRRvx+ok6Hlp/Q+v3fmx90bMyUzaEAhmM3KvHlXTL5DxnbGf/1M8RNNACLL5MNtPxP/mypJAqcDSFfgFhpYqWUzhTEAAAAAASUVORK5CYII=',
|
|
|
- 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAL0lEQVRYR+3QQREAAAzCsOFfNJPBJ1XQS9r2hsUAAQIECBAgQIAAAQIECBAgsBZ4MUx/ofm2I/kAAAAASUVORK5CYII=',
|
|
|
- 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAL0lEQVRYR+3QQREAAAzCsOFfNJPBJ1XQS9r2hsUAAQIECBAgQIAAAQIECBAgsBZ4MUx/ofm2I/kAAAAASUVORK5CYII=',
|
|
|
- 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAL0lEQVRYR+3QQREAAAzCsOFfNJPBJ1XQS9r2hsUAAQIECBAgQIAAAQIECBAgsBZ4MUx/ofm2I/kAAAAASUVORK5CYII=',
|
|
|
- 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAL0lEQVRYR+3QQREAAAzCsOFfNJPBJ1XQS9r2hsUAAQIECBAgQIAAAQIECBAgsBZ4MUx/ofm2I/kAAAAASUVORK5CYII='
|
|
|
-];
|
|
|
-
|
|
|
-const NON_ALPHA_CHANNEL_FORMATS = [
|
|
|
- RGB_S3TC_DXT1_Format,
|
|
|
- RGB_PVRTC_4BPPV1_Format,
|
|
|
- RGB_PVRTC_2BPPV1_Format,
|
|
|
- RGB_ETC1_Format,
|
|
|
- RGB_ETC2_Format
|
|
|
-];
|
|
|
-
|
|
|
-// Builders. They build Three.js object from Object data parsed by MMDParser.
|
|
|
-
|
|
|
-/**
|
|
|
- * @param {THREE.LoadingManager} manager
|
|
|
- */
|
|
|
-class MeshBuilder {
|
|
|
-
|
|
|
- constructor( manager ) {
|
|
|
-
|
|
|
- this.crossOrigin = 'anonymous';
|
|
|
- this.geometryBuilder = new GeometryBuilder();
|
|
|
- this.materialBuilder = new MaterialBuilder( manager );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * @param {string} crossOrigin
|
|
|
- * @return {MeshBuilder}
|
|
|
- */
|
|
|
- setCrossOrigin( crossOrigin ) {
|
|
|
-
|
|
|
- this.crossOrigin = crossOrigin;
|
|
|
- return this;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * @param {Object} data - parsed PMD/PMX data
|
|
|
- * @param {string} resourcePath
|
|
|
- * @param {function} onProgress
|
|
|
- * @param {function} onError
|
|
|
- * @return {SkinnedMesh}
|
|
|
- */
|
|
|
- build( data, resourcePath, onProgress, onError ) {
|
|
|
-
|
|
|
- const geometry = this.geometryBuilder.build( data );
|
|
|
- const material = this.materialBuilder
|
|
|
- .setCrossOrigin( this.crossOrigin )
|
|
|
- .setResourcePath( resourcePath )
|
|
|
- .build( data, geometry, onProgress, onError );
|
|
|
-
|
|
|
- const mesh = new SkinnedMesh( geometry, material );
|
|
|
-
|
|
|
- const skeleton = new Skeleton( initBones( mesh ) );
|
|
|
- mesh.bind( skeleton );
|
|
|
-
|
|
|
- // console.log( mesh ); // for console debug
|
|
|
-
|
|
|
- return mesh;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-// TODO: Try to remove this function
|
|
|
-
|
|
|
-function initBones( mesh ) {
|
|
|
-
|
|
|
- const geometry = mesh.geometry;
|
|
|
-
|
|
|
- const bones = [];
|
|
|
-
|
|
|
- if ( geometry && geometry.bones !== undefined ) {
|
|
|
-
|
|
|
- // first, create array of 'Bone' objects from geometry data
|
|
|
-
|
|
|
- for ( let i = 0, il = geometry.bones.length; i < il; i ++ ) {
|
|
|
-
|
|
|
- const gbone = geometry.bones[ i ];
|
|
|
-
|
|
|
- // create new 'Bone' object
|
|
|
-
|
|
|
- const bone = new Bone();
|
|
|
- bones.push( bone );
|
|
|
-
|
|
|
- // apply values
|
|
|
-
|
|
|
- bone.name = gbone.name;
|
|
|
- bone.position.fromArray( gbone.pos );
|
|
|
- bone.quaternion.fromArray( gbone.rotq );
|
|
|
- if ( gbone.scl !== undefined ) bone.scale.fromArray( gbone.scl );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- // second, create bone hierarchy
|
|
|
-
|
|
|
- for ( let i = 0, il = geometry.bones.length; i < il; i ++ ) {
|
|
|
-
|
|
|
- const gbone = geometry.bones[ i ];
|
|
|
-
|
|
|
- if ( ( gbone.parent !== - 1 ) && ( gbone.parent !== null ) && ( bones[ gbone.parent ] !== undefined ) ) {
|
|
|
-
|
|
|
- // subsequent bones in the hierarchy
|
|
|
-
|
|
|
- bones[ gbone.parent ].add( bones[ i ] );
|
|
|
-
|
|
|
- } else {
|
|
|
-
|
|
|
- // topmost bone, immediate child of the skinned mesh
|
|
|
-
|
|
|
- mesh.add( bones[ i ] );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- // now the bones are part of the scene graph and children of the skinned mesh.
|
|
|
- // let's update the corresponding matrices
|
|
|
-
|
|
|
- mesh.updateMatrixWorld( true );
|
|
|
-
|
|
|
- return bones;
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-//
|
|
|
-
|
|
|
-class GeometryBuilder {
|
|
|
-
|
|
|
- /**
|
|
|
- * @param {Object} data - parsed PMD/PMX data
|
|
|
- * @return {BufferGeometry}
|
|
|
- */
|
|
|
- build( data ) {
|
|
|
-
|
|
|
- // for geometry
|
|
|
- const positions = [];
|
|
|
- const uvs = [];
|
|
|
- const normals = [];
|
|
|
-
|
|
|
- const indices = [];
|
|
|
-
|
|
|
- const groups = [];
|
|
|
-
|
|
|
- const bones = [];
|
|
|
- const skinIndices = [];
|
|
|
- const skinWeights = [];
|
|
|
-
|
|
|
- const morphTargets = [];
|
|
|
- const morphPositions = [];
|
|
|
-
|
|
|
- const iks = [];
|
|
|
- const grants = [];
|
|
|
-
|
|
|
- const rigidBodies = [];
|
|
|
- const constraints = [];
|
|
|
-
|
|
|
- // for work
|
|
|
- let offset = 0;
|
|
|
- const boneTypeTable = {};
|
|
|
-
|
|
|
- // positions, normals, uvs, skinIndices, skinWeights
|
|
|
-
|
|
|
- for ( let i = 0; i < data.metadata.vertexCount; i ++ ) {
|
|
|
-
|
|
|
- const v = data.vertices[ i ];
|
|
|
-
|
|
|
- for ( let j = 0, jl = v.position.length; j < jl; j ++ ) {
|
|
|
-
|
|
|
- positions.push( v.position[ j ] );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- for ( let j = 0, jl = v.normal.length; j < jl; j ++ ) {
|
|
|
-
|
|
|
- normals.push( v.normal[ j ] );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- for ( let j = 0, jl = v.uv.length; j < jl; j ++ ) {
|
|
|
-
|
|
|
- uvs.push( v.uv[ j ] );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- for ( let j = 0; j < 4; j ++ ) {
|
|
|
-
|
|
|
- skinIndices.push( v.skinIndices.length - 1 >= j ? v.skinIndices[ j ] : 0.0 );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- for ( let j = 0; j < 4; j ++ ) {
|
|
|
-
|
|
|
- skinWeights.push( v.skinWeights.length - 1 >= j ? v.skinWeights[ j ] : 0.0 );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- // indices
|
|
|
-
|
|
|
- for ( let i = 0; i < data.metadata.faceCount; i ++ ) {
|
|
|
-
|
|
|
- const face = data.faces[ i ];
|
|
|
-
|
|
|
- for ( let j = 0, jl = face.indices.length; j < jl; j ++ ) {
|
|
|
-
|
|
|
- indices.push( face.indices[ j ] );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- // groups
|
|
|
-
|
|
|
- for ( let i = 0; i < data.metadata.materialCount; i ++ ) {
|
|
|
-
|
|
|
- const material = data.materials[ i ];
|
|
|
-
|
|
|
- groups.push( {
|
|
|
- offset: offset * 3,
|
|
|
- count: material.faceCount * 3
|
|
|
- } );
|
|
|
-
|
|
|
- offset += material.faceCount;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- // bones
|
|
|
-
|
|
|
- for ( let i = 0; i < data.metadata.rigidBodyCount; i ++ ) {
|
|
|
-
|
|
|
- const body = data.rigidBodies[ i ];
|
|
|
- let value = boneTypeTable[ body.boneIndex ];
|
|
|
-
|
|
|
- // keeps greater number if already value is set without any special reasons
|
|
|
- value = value === undefined ? body.type : Math.max( body.type, value );
|
|
|
-
|
|
|
- boneTypeTable[ body.boneIndex ] = value;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- for ( let i = 0; i < data.metadata.boneCount; i ++ ) {
|
|
|
-
|
|
|
- const boneData = data.bones[ i ];
|
|
|
-
|
|
|
- const bone = {
|
|
|
- index: i,
|
|
|
- transformationClass: boneData.transformationClass,
|
|
|
- parent: boneData.parentIndex,
|
|
|
- name: boneData.name,
|
|
|
- pos: boneData.position.slice( 0, 3 ),
|
|
|
- rotq: [ 0, 0, 0, 1 ],
|
|
|
- scl: [ 1, 1, 1 ],
|
|
|
- rigidBodyType: boneTypeTable[ i ] !== undefined ? boneTypeTable[ i ] : - 1
|
|
|
- };
|
|
|
-
|
|
|
- if ( bone.parent !== - 1 ) {
|
|
|
-
|
|
|
- bone.pos[ 0 ] -= data.bones[ bone.parent ].position[ 0 ];
|
|
|
- bone.pos[ 1 ] -= data.bones[ bone.parent ].position[ 1 ];
|
|
|
- bone.pos[ 2 ] -= data.bones[ bone.parent ].position[ 2 ];
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- bones.push( bone );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- // iks
|
|
|
-
|
|
|
- // TODO: remove duplicated codes between PMD and PMX
|
|
|
- if ( data.metadata.format === 'pmd' ) {
|
|
|
-
|
|
|
- for ( let i = 0; i < data.metadata.ikCount; i ++ ) {
|
|
|
-
|
|
|
- const ik = data.iks[ i ];
|
|
|
-
|
|
|
- const param = {
|
|
|
- target: ik.target,
|
|
|
- effector: ik.effector,
|
|
|
- iteration: ik.iteration,
|
|
|
- maxAngle: ik.maxAngle * 4,
|
|
|
- links: []
|
|
|
- };
|
|
|
-
|
|
|
- for ( let j = 0, jl = ik.links.length; j < jl; j ++ ) {
|
|
|
-
|
|
|
- const link = {};
|
|
|
- link.index = ik.links[ j ].index;
|
|
|
- link.enabled = true;
|
|
|
-
|
|
|
- if ( data.bones[ link.index ].name.indexOf( 'ひざ' ) >= 0 ) {
|
|
|
-
|
|
|
- link.limitation = new Vector3( 1.0, 0.0, 0.0 );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- param.links.push( link );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- iks.push( param );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- } else {
|
|
|
-
|
|
|
- for ( let i = 0; i < data.metadata.boneCount; i ++ ) {
|
|
|
-
|
|
|
- const ik = data.bones[ i ].ik;
|
|
|
-
|
|
|
- if ( ik === undefined ) continue;
|
|
|
-
|
|
|
- const param = {
|
|
|
- target: i,
|
|
|
- effector: ik.effector,
|
|
|
- iteration: ik.iteration,
|
|
|
- maxAngle: ik.maxAngle,
|
|
|
- links: []
|
|
|
- };
|
|
|
-
|
|
|
- for ( let j = 0, jl = ik.links.length; j < jl; j ++ ) {
|
|
|
-
|
|
|
- const link = {};
|
|
|
- link.index = ik.links[ j ].index;
|
|
|
- link.enabled = true;
|
|
|
-
|
|
|
- if ( ik.links[ j ].angleLimitation === 1 ) {
|
|
|
-
|
|
|
- // Revert if rotationMin/Max doesn't work well
|
|
|
- // link.limitation = new Vector3( 1.0, 0.0, 0.0 );
|
|
|
-
|
|
|
- const rotationMin = ik.links[ j ].lowerLimitationAngle;
|
|
|
- const rotationMax = ik.links[ j ].upperLimitationAngle;
|
|
|
-
|
|
|
- // Convert Left to Right coordinate by myself because
|
|
|
- // MMDParser doesn't convert. It's a MMDParser's bug
|
|
|
-
|
|
|
- const tmp1 = - rotationMax[ 0 ];
|
|
|
- const tmp2 = - rotationMax[ 1 ];
|
|
|
- rotationMax[ 0 ] = - rotationMin[ 0 ];
|
|
|
- rotationMax[ 1 ] = - rotationMin[ 1 ];
|
|
|
- rotationMin[ 0 ] = tmp1;
|
|
|
- rotationMin[ 1 ] = tmp2;
|
|
|
-
|
|
|
- link.rotationMin = new Vector3().fromArray( rotationMin );
|
|
|
- link.rotationMax = new Vector3().fromArray( rotationMax );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- param.links.push( link );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- iks.push( param );
|
|
|
-
|
|
|
- // Save the reference even from bone data for efficiently
|
|
|
- // simulating PMX animation system
|
|
|
- bones[ i ].ik = param;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- // grants
|
|
|
-
|
|
|
- if ( data.metadata.format === 'pmx' ) {
|
|
|
-
|
|
|
- // bone index -> grant entry map
|
|
|
- const grantEntryMap = {};
|
|
|
-
|
|
|
- for ( let i = 0; i < data.metadata.boneCount; i ++ ) {
|
|
|
-
|
|
|
- const boneData = data.bones[ i ];
|
|
|
- const grant = boneData.grant;
|
|
|
-
|
|
|
- if ( grant === undefined ) continue;
|
|
|
-
|
|
|
- const param = {
|
|
|
- index: i,
|
|
|
- parentIndex: grant.parentIndex,
|
|
|
- ratio: grant.ratio,
|
|
|
- isLocal: grant.isLocal,
|
|
|
- affectRotation: grant.affectRotation,
|
|
|
- affectPosition: grant.affectPosition,
|
|
|
- transformationClass: boneData.transformationClass
|
|
|
- };
|
|
|
-
|
|
|
- grantEntryMap[ i ] = { parent: null, children: [], param: param, visited: false };
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- const rootEntry = { parent: null, children: [], param: null, visited: false };
|
|
|
-
|
|
|
- // Build a tree representing grant hierarchy
|
|
|
-
|
|
|
- for ( const boneIndex in grantEntryMap ) {
|
|
|
-
|
|
|
- const grantEntry = grantEntryMap[ boneIndex ];
|
|
|
- const parentGrantEntry = grantEntryMap[ grantEntry.parentIndex ] || rootEntry;
|
|
|
-
|
|
|
- grantEntry.parent = parentGrantEntry;
|
|
|
- parentGrantEntry.children.push( grantEntry );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- // Sort grant parameters from parents to children because
|
|
|
- // grant uses parent's transform that parent's grant is already applied
|
|
|
- // so grant should be applied in order from parents to children
|
|
|
-
|
|
|
- function traverse( entry ) {
|
|
|
-
|
|
|
- if ( entry.param ) {
|
|
|
-
|
|
|
- grants.push( entry.param );
|
|
|
-
|
|
|
- // Save the reference even from bone data for efficiently
|
|
|
- // simulating PMX animation system
|
|
|
- bones[ entry.param.index ].grant = entry.param;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- entry.visited = true;
|
|
|
-
|
|
|
- for ( let i = 0, il = entry.children.length; i < il; i ++ ) {
|
|
|
-
|
|
|
- const child = entry.children[ i ];
|
|
|
-
|
|
|
- // Cut off a loop if exists. (Is a grant loop invalid?)
|
|
|
- if ( ! child.visited ) traverse( child );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- traverse( rootEntry );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- // morph
|
|
|
-
|
|
|
- function updateAttributes( attribute, morph, ratio ) {
|
|
|
-
|
|
|
- for ( let i = 0; i < morph.elementCount; i ++ ) {
|
|
|
-
|
|
|
- const element = morph.elements[ i ];
|
|
|
-
|
|
|
- let index;
|
|
|
-
|
|
|
- if ( data.metadata.format === 'pmd' ) {
|
|
|
-
|
|
|
- index = data.morphs[ 0 ].elements[ element.index ].index;
|
|
|
-
|
|
|
- } else {
|
|
|
-
|
|
|
- index = element.index;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- attribute.array[ index * 3 + 0 ] += element.position[ 0 ] * ratio;
|
|
|
- attribute.array[ index * 3 + 1 ] += element.position[ 1 ] * ratio;
|
|
|
- attribute.array[ index * 3 + 2 ] += element.position[ 2 ] * ratio;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- for ( let i = 0; i < data.metadata.morphCount; i ++ ) {
|
|
|
-
|
|
|
- const morph = data.morphs[ i ];
|
|
|
- const params = { name: morph.name };
|
|
|
-
|
|
|
- const attribute = new Float32BufferAttribute( data.metadata.vertexCount * 3, 3 );
|
|
|
- attribute.name = morph.name;
|
|
|
-
|
|
|
- for ( let j = 0; j < data.metadata.vertexCount * 3; j ++ ) {
|
|
|
-
|
|
|
- attribute.array[ j ] = positions[ j ];
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- if ( data.metadata.format === 'pmd' ) {
|
|
|
-
|
|
|
- if ( i !== 0 ) {
|
|
|
-
|
|
|
- updateAttributes( attribute, morph, 1.0 );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- } else {
|
|
|
-
|
|
|
- if ( morph.type === 0 ) { // group
|
|
|
-
|
|
|
- for ( let j = 0; j < morph.elementCount; j ++ ) {
|
|
|
-
|
|
|
- const morph2 = data.morphs[ morph.elements[ j ].index ];
|
|
|
- const ratio = morph.elements[ j ].ratio;
|
|
|
-
|
|
|
- if ( morph2.type === 1 ) {
|
|
|
-
|
|
|
- updateAttributes( attribute, morph2, ratio );
|
|
|
-
|
|
|
- } else {
|
|
|
-
|
|
|
- // TODO: implement
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- } else if ( morph.type === 1 ) { // vertex
|
|
|
-
|
|
|
- updateAttributes( attribute, morph, 1.0 );
|
|
|
-
|
|
|
- } else if ( morph.type === 2 ) { // bone
|
|
|
-
|
|
|
- // TODO: implement
|
|
|
-
|
|
|
- } else if ( morph.type === 3 ) { // uv
|
|
|
-
|
|
|
- // TODO: implement
|
|
|
-
|
|
|
- } else if ( morph.type === 4 ) { // additional uv1
|
|
|
-
|
|
|
- // TODO: implement
|
|
|
-
|
|
|
- } else if ( morph.type === 5 ) { // additional uv2
|
|
|
-
|
|
|
- // TODO: implement
|
|
|
-
|
|
|
- } else if ( morph.type === 6 ) { // additional uv3
|
|
|
-
|
|
|
- // TODO: implement
|
|
|
-
|
|
|
- } else if ( morph.type === 7 ) { // additional uv4
|
|
|
-
|
|
|
- // TODO: implement
|
|
|
-
|
|
|
- } else if ( morph.type === 8 ) { // material
|
|
|
-
|
|
|
- // TODO: implement
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- morphTargets.push( params );
|
|
|
- morphPositions.push( attribute );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- // rigid bodies from rigidBodies field.
|
|
|
-
|
|
|
- for ( let i = 0; i < data.metadata.rigidBodyCount; i ++ ) {
|
|
|
-
|
|
|
- const rigidBody = data.rigidBodies[ i ];
|
|
|
- const params = {};
|
|
|
-
|
|
|
- for ( const key in rigidBody ) {
|
|
|
-
|
|
|
- params[ key ] = rigidBody[ key ];
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- /*
|
|
|
- * RigidBody position parameter in PMX seems global position
|
|
|
- * while the one in PMD seems offset from corresponding bone.
|
|
|
- * So unify being offset.
|
|
|
- */
|
|
|
- if ( data.metadata.format === 'pmx' ) {
|
|
|
-
|
|
|
- if ( params.boneIndex !== - 1 ) {
|
|
|
-
|
|
|
- const bone = data.bones[ params.boneIndex ];
|
|
|
- params.position[ 0 ] -= bone.position[ 0 ];
|
|
|
- params.position[ 1 ] -= bone.position[ 1 ];
|
|
|
- params.position[ 2 ] -= bone.position[ 2 ];
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- rigidBodies.push( params );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- // constraints from constraints field.
|
|
|
-
|
|
|
- for ( let i = 0; i < data.metadata.constraintCount; i ++ ) {
|
|
|
-
|
|
|
- const constraint = data.constraints[ i ];
|
|
|
- const params = {};
|
|
|
-
|
|
|
- for ( const key in constraint ) {
|
|
|
-
|
|
|
- params[ key ] = constraint[ key ];
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- const bodyA = rigidBodies[ params.rigidBodyIndex1 ];
|
|
|
- const bodyB = rigidBodies[ params.rigidBodyIndex2 ];
|
|
|
-
|
|
|
- // Refer to http://www20.atpages.jp/katwat/wp/?p=4135
|
|
|
- if ( bodyA.type !== 0 && bodyB.type === 2 ) {
|
|
|
-
|
|
|
- if ( bodyA.boneIndex !== - 1 && bodyB.boneIndex !== - 1 &&
|
|
|
- data.bones[ bodyB.boneIndex ].parentIndex === bodyA.boneIndex ) {
|
|
|
-
|
|
|
- bodyB.type = 1;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- constraints.push( params );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- // build BufferGeometry.
|
|
|
-
|
|
|
- const geometry = new BufferGeometry();
|
|
|
-
|
|
|
- geometry.setAttribute( 'position', new Float32BufferAttribute( positions, 3 ) );
|
|
|
- geometry.setAttribute( 'normal', new Float32BufferAttribute( normals, 3 ) );
|
|
|
- geometry.setAttribute( 'uv', new Float32BufferAttribute( uvs, 2 ) );
|
|
|
- geometry.setAttribute( 'skinIndex', new Uint16BufferAttribute( skinIndices, 4 ) );
|
|
|
- geometry.setAttribute( 'skinWeight', new Float32BufferAttribute( skinWeights, 4 ) );
|
|
|
- geometry.setIndex( indices );
|
|
|
-
|
|
|
- for ( let i = 0, il = groups.length; i < il; i ++ ) {
|
|
|
-
|
|
|
- geometry.addGroup( groups[ i ].offset, groups[ i ].count, i );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- geometry.bones = bones;
|
|
|
-
|
|
|
- geometry.morphTargets = morphTargets;
|
|
|
- geometry.morphAttributes.position = morphPositions;
|
|
|
- geometry.morphTargetsRelative = false;
|
|
|
-
|
|
|
- geometry.userData.MMD = {
|
|
|
- bones: bones,
|
|
|
- iks: iks,
|
|
|
- grants: grants,
|
|
|
- rigidBodies: rigidBodies,
|
|
|
- constraints: constraints,
|
|
|
- format: data.metadata.format
|
|
|
- };
|
|
|
-
|
|
|
- geometry.computeBoundingSphere();
|
|
|
-
|
|
|
- return geometry;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-//
|
|
|
-
|
|
|
-/**
|
|
|
- * @param {THREE.LoadingManager} manager
|
|
|
- */
|
|
|
-class MaterialBuilder {
|
|
|
-
|
|
|
- constructor( manager ) {
|
|
|
-
|
|
|
- this.manager = manager;
|
|
|
-
|
|
|
- this.textureLoader = new TextureLoader( this.manager );
|
|
|
- this.tgaLoader = null; // lazy generation
|
|
|
-
|
|
|
- this.crossOrigin = 'anonymous';
|
|
|
- this.resourcePath = undefined;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * @param {string} crossOrigin
|
|
|
- * @return {MaterialBuilder}
|
|
|
- */
|
|
|
- setCrossOrigin( crossOrigin ) {
|
|
|
-
|
|
|
- this.crossOrigin = crossOrigin;
|
|
|
- return this;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * @param {string} resourcePath
|
|
|
- * @return {MaterialBuilder}
|
|
|
- */
|
|
|
- setResourcePath( resourcePath ) {
|
|
|
-
|
|
|
- this.resourcePath = resourcePath;
|
|
|
- return this;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * @param {Object} data - parsed PMD/PMX data
|
|
|
- * @param {BufferGeometry} geometry - some properties are dependend on geometry
|
|
|
- * @param {function} onProgress
|
|
|
- * @param {function} onError
|
|
|
- * @return {Array<MMDToonMaterial>}
|
|
|
- */
|
|
|
- build( data, geometry /*, onProgress, onError */ ) {
|
|
|
-
|
|
|
- const materials = [];
|
|
|
-
|
|
|
- const textures = {};
|
|
|
-
|
|
|
- this.textureLoader.setCrossOrigin( this.crossOrigin );
|
|
|
-
|
|
|
- // materials
|
|
|
-
|
|
|
- for ( let i = 0; i < data.metadata.materialCount; i ++ ) {
|
|
|
-
|
|
|
- const material = data.materials[ i ];
|
|
|
-
|
|
|
- const params = { userData: { MMD: {} } };
|
|
|
-
|
|
|
- if ( material.name !== undefined ) params.name = material.name;
|
|
|
-
|
|
|
- /*
|
|
|
- * Color
|
|
|
- *
|
|
|
- * MMD MMDToonMaterial
|
|
|
- * ambient - emissive * a
|
|
|
- * (a = 1.0 without map texture or 0.2 with map texture)
|
|
|
- *
|
|
|
- * MMDToonMaterial doesn't have ambient. Set it to emissive instead.
|
|
|
- * It'll be too bright if material has map texture so using coef 0.2.
|
|
|
- */
|
|
|
- params.diffuse = new Color().setRGB(
|
|
|
- material.diffuse[ 0 ],
|
|
|
- material.diffuse[ 1 ],
|
|
|
- material.diffuse[ 2 ],
|
|
|
- SRGBColorSpace
|
|
|
- );
|
|
|
- params.opacity = material.diffuse[ 3 ];
|
|
|
- params.specular = new Color().setRGB( ...material.specular, SRGBColorSpace );
|
|
|
- params.shininess = material.shininess;
|
|
|
- params.emissive = new Color().setRGB( ...material.ambient, SRGBColorSpace );
|
|
|
- params.transparent = params.opacity !== 1.0;
|
|
|
-
|
|
|
- //
|
|
|
-
|
|
|
- params.fog = true;
|
|
|
-
|
|
|
- // blend
|
|
|
-
|
|
|
- params.blending = CustomBlending;
|
|
|
- params.blendSrc = SrcAlphaFactor;
|
|
|
- params.blendDst = OneMinusSrcAlphaFactor;
|
|
|
- params.blendSrcAlpha = SrcAlphaFactor;
|
|
|
- params.blendDstAlpha = DstAlphaFactor;
|
|
|
-
|
|
|
- // side
|
|
|
-
|
|
|
- if ( data.metadata.format === 'pmx' && ( material.flag & 0x1 ) === 1 ) {
|
|
|
-
|
|
|
- params.side = DoubleSide;
|
|
|
-
|
|
|
- } else {
|
|
|
-
|
|
|
- params.side = params.opacity === 1.0 ? FrontSide : DoubleSide;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- if ( data.metadata.format === 'pmd' ) {
|
|
|
-
|
|
|
- // map, matcap
|
|
|
-
|
|
|
- if ( material.fileName ) {
|
|
|
-
|
|
|
- const fileName = material.fileName;
|
|
|
- const fileNames = fileName.split( '*' );
|
|
|
-
|
|
|
- // fileNames[ 0 ]: mapFileName
|
|
|
- // fileNames[ 1 ]: matcapFileName( optional )
|
|
|
-
|
|
|
- params.map = this._loadTexture( fileNames[ 0 ], textures );
|
|
|
-
|
|
|
- if ( fileNames.length > 1 ) {
|
|
|
-
|
|
|
- const extension = fileNames[ 1 ].slice( - 4 ).toLowerCase();
|
|
|
-
|
|
|
- params.matcap = this._loadTexture(
|
|
|
- fileNames[ 1 ],
|
|
|
- textures
|
|
|
- );
|
|
|
-
|
|
|
- params.matcapCombine = extension === '.sph'
|
|
|
- ? MultiplyOperation
|
|
|
- : AddOperation;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- // gradientMap
|
|
|
-
|
|
|
- const toonFileName = ( material.toonIndex === - 1 )
|
|
|
- ? 'toon00.bmp'
|
|
|
- : data.toonTextures[ material.toonIndex ].fileName;
|
|
|
-
|
|
|
- params.gradientMap = this._loadTexture(
|
|
|
- toonFileName,
|
|
|
- textures,
|
|
|
- {
|
|
|
- isToonTexture: true,
|
|
|
- isDefaultToonTexture: this._isDefaultToonTexture( toonFileName )
|
|
|
- }
|
|
|
- );
|
|
|
-
|
|
|
- // parameters for OutlineEffect
|
|
|
-
|
|
|
- params.userData.outlineParameters = {
|
|
|
- thickness: material.edgeFlag === 1 ? 0.003 : 0.0,
|
|
|
- color: [ 0, 0, 0 ],
|
|
|
- alpha: 1.0,
|
|
|
- visible: material.edgeFlag === 1
|
|
|
- };
|
|
|
-
|
|
|
- } else {
|
|
|
-
|
|
|
- // map
|
|
|
-
|
|
|
- if ( material.textureIndex !== - 1 ) {
|
|
|
-
|
|
|
- params.map = this._loadTexture( data.textures[ material.textureIndex ], textures );
|
|
|
-
|
|
|
- // Since PMX spec don't have standard to list map files except color map and env map,
|
|
|
- // we need to save file name for further mapping, like matching normal map file names after model loaded.
|
|
|
- // ref: https://gist.github.com/felixjones/f8a06bd48f9da9a4539f#texture
|
|
|
- params.userData.MMD.mapFileName = data.textures[ material.textureIndex ];
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- // matcap TODO: support m.envFlag === 3
|
|
|
-
|
|
|
- if ( material.envTextureIndex !== - 1 && ( material.envFlag === 1 || material.envFlag == 2 ) ) {
|
|
|
-
|
|
|
- params.matcap = this._loadTexture(
|
|
|
- data.textures[ material.envTextureIndex ],
|
|
|
- textures
|
|
|
- );
|
|
|
-
|
|
|
- // Same as color map above, keep file name in userData for further usage.
|
|
|
- params.userData.MMD.matcapFileName = data.textures[ material.envTextureIndex ];
|
|
|
-
|
|
|
- params.matcapCombine = material.envFlag === 1
|
|
|
- ? MultiplyOperation
|
|
|
- : AddOperation;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- // gradientMap
|
|
|
-
|
|
|
- let toonFileName, isDefaultToon;
|
|
|
-
|
|
|
- if ( material.toonIndex === - 1 || material.toonFlag !== 0 ) {
|
|
|
-
|
|
|
- toonFileName = 'toon' + ( '0' + ( material.toonIndex + 1 ) ).slice( - 2 ) + '.bmp';
|
|
|
- isDefaultToon = true;
|
|
|
-
|
|
|
- } else {
|
|
|
-
|
|
|
- toonFileName = data.textures[ material.toonIndex ];
|
|
|
- isDefaultToon = false;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- params.gradientMap = this._loadTexture(
|
|
|
- toonFileName,
|
|
|
- textures,
|
|
|
- {
|
|
|
- isToonTexture: true,
|
|
|
- isDefaultToonTexture: isDefaultToon
|
|
|
- }
|
|
|
- );
|
|
|
-
|
|
|
- // parameters for OutlineEffect
|
|
|
- params.userData.outlineParameters = {
|
|
|
- thickness: material.edgeSize / 300, // TODO: better calculation?
|
|
|
- color: material.edgeColor.slice( 0, 3 ),
|
|
|
- alpha: material.edgeColor[ 3 ],
|
|
|
- visible: ( material.flag & 0x10 ) !== 0 && material.edgeSize > 0.0
|
|
|
- };
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- if ( params.map !== undefined ) {
|
|
|
-
|
|
|
- if ( ! params.transparent ) {
|
|
|
-
|
|
|
- this._checkImageTransparency( params.map, geometry, i );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- params.emissive.multiplyScalar( 0.2 );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- materials.push( new MMDToonMaterial( params ) );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- if ( data.metadata.format === 'pmx' ) {
|
|
|
-
|
|
|
- // set transparent true if alpha morph is defined.
|
|
|
-
|
|
|
- function checkAlphaMorph( elements, materials ) {
|
|
|
-
|
|
|
- for ( let i = 0, il = elements.length; i < il; i ++ ) {
|
|
|
-
|
|
|
- const element = elements[ i ];
|
|
|
-
|
|
|
- if ( element.index === - 1 ) continue;
|
|
|
-
|
|
|
- const material = materials[ element.index ];
|
|
|
-
|
|
|
- if ( material.opacity !== element.diffuse[ 3 ] ) {
|
|
|
-
|
|
|
- material.transparent = true;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- for ( let i = 0, il = data.morphs.length; i < il; i ++ ) {
|
|
|
-
|
|
|
- const morph = data.morphs[ i ];
|
|
|
- const elements = morph.elements;
|
|
|
-
|
|
|
- if ( morph.type === 0 ) {
|
|
|
-
|
|
|
- for ( let j = 0, jl = elements.length; j < jl; j ++ ) {
|
|
|
-
|
|
|
- const morph2 = data.morphs[ elements[ j ].index ];
|
|
|
-
|
|
|
- if ( morph2.type !== 8 ) continue;
|
|
|
-
|
|
|
- checkAlphaMorph( morph2.elements, materials );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- } else if ( morph.type === 8 ) {
|
|
|
-
|
|
|
- checkAlphaMorph( elements, materials );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- return materials;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- // private methods
|
|
|
-
|
|
|
- _getTGALoader() {
|
|
|
-
|
|
|
- if ( this.tgaLoader === null ) {
|
|
|
-
|
|
|
- if ( TGALoader === undefined ) {
|
|
|
-
|
|
|
- throw new Error( 'THREE.MMDLoader: Import TGALoader' );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- this.tgaLoader = new TGALoader( this.manager );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- return this.tgaLoader;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- _isDefaultToonTexture( name ) {
|
|
|
-
|
|
|
- if ( name.length !== 10 ) return false;
|
|
|
-
|
|
|
- return /toon(10|0[0-9])\.bmp/.test( name );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- _loadTexture( filePath, textures, params, onProgress, onError ) {
|
|
|
-
|
|
|
- params = params || {};
|
|
|
-
|
|
|
- const scope = this;
|
|
|
-
|
|
|
- let fullPath;
|
|
|
-
|
|
|
- if ( params.isDefaultToonTexture === true ) {
|
|
|
-
|
|
|
- let index;
|
|
|
-
|
|
|
- try {
|
|
|
-
|
|
|
- index = parseInt( filePath.match( /toon([0-9]{2})\.bmp$/ )[ 1 ] );
|
|
|
-
|
|
|
- } catch ( e ) {
|
|
|
-
|
|
|
- console.warn( 'THREE.MMDLoader: ' + filePath + ' seems like a '
|
|
|
- + 'not right default texture path. Using toon00.bmp instead.' );
|
|
|
-
|
|
|
- index = 0;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- fullPath = DEFAULT_TOON_TEXTURES[ index ];
|
|
|
-
|
|
|
- } else {
|
|
|
-
|
|
|
- fullPath = this.resourcePath + filePath;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- if ( textures[ fullPath ] !== undefined ) return textures[ fullPath ];
|
|
|
-
|
|
|
- let loader = this.manager.getHandler( fullPath );
|
|
|
-
|
|
|
- if ( loader === null ) {
|
|
|
-
|
|
|
- loader = ( filePath.slice( - 4 ).toLowerCase() === '.tga' )
|
|
|
- ? this._getTGALoader()
|
|
|
- : this.textureLoader;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- const texture = loader.load( fullPath, function ( t ) {
|
|
|
-
|
|
|
- // MMD toon texture is Axis-Y oriented
|
|
|
- // but Three.js gradient map is Axis-X oriented.
|
|
|
- // So here replaces the toon texture image with the rotated one.
|
|
|
- if ( params.isToonTexture === true ) {
|
|
|
-
|
|
|
- t.image = scope._getRotatedImage( t.image );
|
|
|
-
|
|
|
- t.magFilter = NearestFilter;
|
|
|
- t.minFilter = NearestFilter;
|
|
|
- t.generateMipmaps = false;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- t.flipY = false;
|
|
|
- t.wrapS = RepeatWrapping;
|
|
|
- t.wrapT = RepeatWrapping;
|
|
|
- t.colorSpace = SRGBColorSpace;
|
|
|
-
|
|
|
- for ( let i = 0; i < texture.readyCallbacks.length; i ++ ) {
|
|
|
-
|
|
|
- texture.readyCallbacks[ i ]( texture );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- delete texture.readyCallbacks;
|
|
|
-
|
|
|
- }, onProgress, onError );
|
|
|
-
|
|
|
- texture.readyCallbacks = [];
|
|
|
-
|
|
|
- textures[ fullPath ] = texture;
|
|
|
-
|
|
|
- return texture;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- _getRotatedImage( image ) {
|
|
|
-
|
|
|
- const canvas = document.createElement( 'canvas' );
|
|
|
- const context = canvas.getContext( '2d' );
|
|
|
-
|
|
|
- const width = image.width;
|
|
|
- const height = image.height;
|
|
|
-
|
|
|
- canvas.width = width;
|
|
|
- canvas.height = height;
|
|
|
-
|
|
|
- context.clearRect( 0, 0, width, height );
|
|
|
- context.translate( width / 2.0, height / 2.0 );
|
|
|
- context.rotate( 0.5 * Math.PI ); // 90.0 * Math.PI / 180.0
|
|
|
- context.translate( - width / 2.0, - height / 2.0 );
|
|
|
- context.drawImage( image, 0, 0 );
|
|
|
-
|
|
|
- return context.getImageData( 0, 0, width, height );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- // Check if the partial image area used by the texture is transparent.
|
|
|
- _checkImageTransparency( map, geometry, groupIndex ) {
|
|
|
-
|
|
|
- map.readyCallbacks.push( function ( texture ) {
|
|
|
-
|
|
|
- // Is there any efficient ways?
|
|
|
- function createImageData( image ) {
|
|
|
-
|
|
|
- const canvas = document.createElement( 'canvas' );
|
|
|
- canvas.width = image.width;
|
|
|
- canvas.height = image.height;
|
|
|
-
|
|
|
- const context = canvas.getContext( '2d' );
|
|
|
- context.drawImage( image, 0, 0 );
|
|
|
-
|
|
|
- return context.getImageData( 0, 0, canvas.width, canvas.height );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- function detectImageTransparency( image, uvs, indices ) {
|
|
|
-
|
|
|
- const width = image.width;
|
|
|
- const height = image.height;
|
|
|
- const data = image.data;
|
|
|
- const threshold = 253;
|
|
|
-
|
|
|
- if ( data.length / ( width * height ) !== 4 ) return false;
|
|
|
-
|
|
|
- for ( let i = 0; i < indices.length; i += 3 ) {
|
|
|
-
|
|
|
- const centerUV = { x: 0.0, y: 0.0 };
|
|
|
-
|
|
|
- for ( let j = 0; j < 3; j ++ ) {
|
|
|
-
|
|
|
- const index = indices[ i * 3 + j ];
|
|
|
- const uv = { x: uvs[ index * 2 + 0 ], y: uvs[ index * 2 + 1 ] };
|
|
|
-
|
|
|
- if ( getAlphaByUv( image, uv ) < threshold ) return true;
|
|
|
-
|
|
|
- centerUV.x += uv.x;
|
|
|
- centerUV.y += uv.y;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- centerUV.x /= 3;
|
|
|
- centerUV.y /= 3;
|
|
|
-
|
|
|
- if ( getAlphaByUv( image, centerUV ) < threshold ) return true;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- return false;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- /*
|
|
|
- * This method expects
|
|
|
- * texture.flipY = false
|
|
|
- * texture.wrapS = RepeatWrapping
|
|
|
- * texture.wrapT = RepeatWrapping
|
|
|
- * TODO: more precise
|
|
|
- */
|
|
|
- function getAlphaByUv( image, uv ) {
|
|
|
-
|
|
|
- const width = image.width;
|
|
|
- const height = image.height;
|
|
|
-
|
|
|
- let x = Math.round( uv.x * width ) % width;
|
|
|
- let y = Math.round( uv.y * height ) % height;
|
|
|
-
|
|
|
- if ( x < 0 ) x += width;
|
|
|
- if ( y < 0 ) y += height;
|
|
|
-
|
|
|
- const index = y * width + x;
|
|
|
-
|
|
|
- return image.data[ index * 4 + 3 ];
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- if ( texture.isCompressedTexture === true ) {
|
|
|
-
|
|
|
- if ( NON_ALPHA_CHANNEL_FORMATS.includes( texture.format ) ) {
|
|
|
-
|
|
|
- map.transparent = false;
|
|
|
-
|
|
|
- } else {
|
|
|
-
|
|
|
- // any other way to check transparency of CompressedTexture?
|
|
|
- map.transparent = true;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- return;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- const imageData = texture.image.data !== undefined
|
|
|
- ? texture.image
|
|
|
- : createImageData( texture.image );
|
|
|
-
|
|
|
- const group = geometry.groups[ groupIndex ];
|
|
|
-
|
|
|
- if ( detectImageTransparency(
|
|
|
- imageData,
|
|
|
- geometry.attributes.uv.array,
|
|
|
- geometry.index.array.slice( group.start, group.start + group.count ) ) ) {
|
|
|
-
|
|
|
- map.transparent = true;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- } );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-//
|
|
|
-
|
|
|
-class AnimationBuilder {
|
|
|
-
|
|
|
- /**
|
|
|
- * @param {Object} vmd - parsed VMD data
|
|
|
- * @param {SkinnedMesh} mesh - tracks will be fitting to mesh
|
|
|
- * @return {AnimationClip}
|
|
|
- */
|
|
|
- build( vmd, mesh ) {
|
|
|
-
|
|
|
- // combine skeletal and morph animations
|
|
|
-
|
|
|
- const tracks = this.buildSkeletalAnimation( vmd, mesh ).tracks;
|
|
|
- const tracks2 = this.buildMorphAnimation( vmd, mesh ).tracks;
|
|
|
-
|
|
|
- for ( let i = 0, il = tracks2.length; i < il; i ++ ) {
|
|
|
-
|
|
|
- tracks.push( tracks2[ i ] );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- return new AnimationClip( '', - 1, tracks );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * @param {Object} vmd - parsed VMD data
|
|
|
- * @param {SkinnedMesh} mesh - tracks will be fitting to mesh
|
|
|
- * @return {AnimationClip}
|
|
|
- */
|
|
|
- buildSkeletalAnimation( vmd, mesh ) {
|
|
|
-
|
|
|
- function pushInterpolation( array, interpolation, index ) {
|
|
|
-
|
|
|
- array.push( interpolation[ index + 0 ] / 127 ); // x1
|
|
|
- array.push( interpolation[ index + 8 ] / 127 ); // x2
|
|
|
- array.push( interpolation[ index + 4 ] / 127 ); // y1
|
|
|
- array.push( interpolation[ index + 12 ] / 127 ); // y2
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- const tracks = [];
|
|
|
-
|
|
|
- const motions = {};
|
|
|
- const bones = mesh.skeleton.bones;
|
|
|
- const boneNameDictionary = {};
|
|
|
-
|
|
|
- for ( let i = 0, il = bones.length; i < il; i ++ ) {
|
|
|
-
|
|
|
- boneNameDictionary[ bones[ i ].name ] = true;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- for ( let i = 0; i < vmd.metadata.motionCount; i ++ ) {
|
|
|
-
|
|
|
- const motion = vmd.motions[ i ];
|
|
|
- const boneName = motion.boneName;
|
|
|
-
|
|
|
- if ( boneNameDictionary[ boneName ] === undefined ) continue;
|
|
|
-
|
|
|
- motions[ boneName ] = motions[ boneName ] || [];
|
|
|
- motions[ boneName ].push( motion );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- for ( const key in motions ) {
|
|
|
-
|
|
|
- const array = motions[ key ];
|
|
|
-
|
|
|
- array.sort( function ( a, b ) {
|
|
|
-
|
|
|
- return a.frameNum - b.frameNum;
|
|
|
-
|
|
|
- } );
|
|
|
-
|
|
|
- const times = [];
|
|
|
- const positions = [];
|
|
|
- const rotations = [];
|
|
|
- const pInterpolations = [];
|
|
|
- const rInterpolations = [];
|
|
|
-
|
|
|
- const basePosition = mesh.skeleton.getBoneByName( key ).position.toArray();
|
|
|
-
|
|
|
- for ( let i = 0, il = array.length; i < il; i ++ ) {
|
|
|
-
|
|
|
- const time = array[ i ].frameNum / 30;
|
|
|
- const position = array[ i ].position;
|
|
|
- const rotation = array[ i ].rotation;
|
|
|
- const interpolation = array[ i ].interpolation;
|
|
|
-
|
|
|
- times.push( time );
|
|
|
-
|
|
|
- for ( let j = 0; j < 3; j ++ ) positions.push( basePosition[ j ] + position[ j ] );
|
|
|
- for ( let j = 0; j < 4; j ++ ) rotations.push( rotation[ j ] );
|
|
|
- for ( let j = 0; j < 3; j ++ ) pushInterpolation( pInterpolations, interpolation, j );
|
|
|
-
|
|
|
- pushInterpolation( rInterpolations, interpolation, 3 );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- const targetName = '.bones[' + key + ']';
|
|
|
-
|
|
|
- tracks.push( this._createTrack( targetName + '.position', VectorKeyframeTrack, times, positions, pInterpolations ) );
|
|
|
- tracks.push( this._createTrack( targetName + '.quaternion', QuaternionKeyframeTrack, times, rotations, rInterpolations ) );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- return new AnimationClip( '', - 1, tracks );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * @param {Object} vmd - parsed VMD data
|
|
|
- * @param {SkinnedMesh} mesh - tracks will be fitting to mesh
|
|
|
- * @return {AnimationClip}
|
|
|
- */
|
|
|
- buildMorphAnimation( vmd, mesh ) {
|
|
|
-
|
|
|
- const tracks = [];
|
|
|
-
|
|
|
- const morphs = {};
|
|
|
- const morphTargetDictionary = mesh.morphTargetDictionary;
|
|
|
-
|
|
|
- for ( let i = 0; i < vmd.metadata.morphCount; i ++ ) {
|
|
|
-
|
|
|
- const morph = vmd.morphs[ i ];
|
|
|
- const morphName = morph.morphName;
|
|
|
-
|
|
|
- if ( morphTargetDictionary[ morphName ] === undefined ) continue;
|
|
|
-
|
|
|
- morphs[ morphName ] = morphs[ morphName ] || [];
|
|
|
- morphs[ morphName ].push( morph );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- for ( const key in morphs ) {
|
|
|
-
|
|
|
- const array = morphs[ key ];
|
|
|
-
|
|
|
- array.sort( function ( a, b ) {
|
|
|
-
|
|
|
- return a.frameNum - b.frameNum;
|
|
|
-
|
|
|
- } );
|
|
|
-
|
|
|
- const times = [];
|
|
|
- const values = [];
|
|
|
-
|
|
|
- for ( let i = 0, il = array.length; i < il; i ++ ) {
|
|
|
-
|
|
|
- times.push( array[ i ].frameNum / 30 );
|
|
|
- values.push( array[ i ].weight );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- tracks.push( new NumberKeyframeTrack( '.morphTargetInfluences[' + morphTargetDictionary[ key ] + ']', times, values ) );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- return new AnimationClip( '', - 1, tracks );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * @param {Object} vmd - parsed VMD data
|
|
|
- * @return {AnimationClip}
|
|
|
- */
|
|
|
- buildCameraAnimation( vmd ) {
|
|
|
-
|
|
|
- function pushVector3( array, vec ) {
|
|
|
-
|
|
|
- array.push( vec.x );
|
|
|
- array.push( vec.y );
|
|
|
- array.push( vec.z );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- function pushQuaternion( array, q ) {
|
|
|
-
|
|
|
- array.push( q.x );
|
|
|
- array.push( q.y );
|
|
|
- array.push( q.z );
|
|
|
- array.push( q.w );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- function pushInterpolation( array, interpolation, index ) {
|
|
|
-
|
|
|
- array.push( interpolation[ index * 4 + 0 ] / 127 ); // x1
|
|
|
- array.push( interpolation[ index * 4 + 1 ] / 127 ); // x2
|
|
|
- array.push( interpolation[ index * 4 + 2 ] / 127 ); // y1
|
|
|
- array.push( interpolation[ index * 4 + 3 ] / 127 ); // y2
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- const cameras = vmd.cameras === undefined ? [] : vmd.cameras.slice();
|
|
|
-
|
|
|
- cameras.sort( function ( a, b ) {
|
|
|
-
|
|
|
- return a.frameNum - b.frameNum;
|
|
|
-
|
|
|
- } );
|
|
|
-
|
|
|
- const times = [];
|
|
|
- const centers = [];
|
|
|
- const quaternions = [];
|
|
|
- const positions = [];
|
|
|
- const fovs = [];
|
|
|
-
|
|
|
- const cInterpolations = [];
|
|
|
- const qInterpolations = [];
|
|
|
- const pInterpolations = [];
|
|
|
- const fInterpolations = [];
|
|
|
-
|
|
|
- const quaternion = new Quaternion();
|
|
|
- const euler = new Euler();
|
|
|
- const position = new Vector3();
|
|
|
- const center = new Vector3();
|
|
|
-
|
|
|
- for ( let i = 0, il = cameras.length; i < il; i ++ ) {
|
|
|
-
|
|
|
- const motion = cameras[ i ];
|
|
|
-
|
|
|
- const time = motion.frameNum / 30;
|
|
|
- const pos = motion.position;
|
|
|
- const rot = motion.rotation;
|
|
|
- const distance = motion.distance;
|
|
|
- const fov = motion.fov;
|
|
|
- const interpolation = motion.interpolation;
|
|
|
-
|
|
|
- times.push( time );
|
|
|
-
|
|
|
- position.set( 0, 0, - distance );
|
|
|
- center.set( pos[ 0 ], pos[ 1 ], pos[ 2 ] );
|
|
|
-
|
|
|
- euler.set( - rot[ 0 ], - rot[ 1 ], - rot[ 2 ] );
|
|
|
- quaternion.setFromEuler( euler );
|
|
|
-
|
|
|
- position.add( center );
|
|
|
- position.applyQuaternion( quaternion );
|
|
|
-
|
|
|
- pushVector3( centers, center );
|
|
|
- pushQuaternion( quaternions, quaternion );
|
|
|
- pushVector3( positions, position );
|
|
|
-
|
|
|
- fovs.push( fov );
|
|
|
-
|
|
|
- for ( let j = 0; j < 3; j ++ ) {
|
|
|
-
|
|
|
- pushInterpolation( cInterpolations, interpolation, j );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- pushInterpolation( qInterpolations, interpolation, 3 );
|
|
|
-
|
|
|
- // use the same parameter for x, y, z axis.
|
|
|
- for ( let j = 0; j < 3; j ++ ) {
|
|
|
-
|
|
|
- pushInterpolation( pInterpolations, interpolation, 4 );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- pushInterpolation( fInterpolations, interpolation, 5 );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- const tracks = [];
|
|
|
-
|
|
|
- // I expect an object whose name 'target' exists under THREE.Camera
|
|
|
- tracks.push( this._createTrack( 'target.position', VectorKeyframeTrack, times, centers, cInterpolations ) );
|
|
|
-
|
|
|
- tracks.push( this._createTrack( '.quaternion', QuaternionKeyframeTrack, times, quaternions, qInterpolations ) );
|
|
|
- tracks.push( this._createTrack( '.position', VectorKeyframeTrack, times, positions, pInterpolations ) );
|
|
|
- tracks.push( this._createTrack( '.fov', NumberKeyframeTrack, times, fovs, fInterpolations ) );
|
|
|
-
|
|
|
- return new AnimationClip( '', - 1, tracks );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- // private method
|
|
|
-
|
|
|
- _createTrack( node, typedKeyframeTrack, times, values, interpolations ) {
|
|
|
-
|
|
|
- /*
|
|
|
- * optimizes here not to let KeyframeTrackPrototype optimize
|
|
|
- * because KeyframeTrackPrototype optimizes times and values but
|
|
|
- * doesn't optimize interpolations.
|
|
|
- */
|
|
|
- if ( times.length > 2 ) {
|
|
|
-
|
|
|
- times = times.slice();
|
|
|
- values = values.slice();
|
|
|
- interpolations = interpolations.slice();
|
|
|
-
|
|
|
- const stride = values.length / times.length;
|
|
|
- const interpolateStride = interpolations.length / times.length;
|
|
|
-
|
|
|
- let index = 1;
|
|
|
-
|
|
|
- for ( let aheadIndex = 2, endIndex = times.length; aheadIndex < endIndex; aheadIndex ++ ) {
|
|
|
-
|
|
|
- for ( let i = 0; i < stride; i ++ ) {
|
|
|
-
|
|
|
- if ( values[ index * stride + i ] !== values[ ( index - 1 ) * stride + i ] ||
|
|
|
- values[ index * stride + i ] !== values[ aheadIndex * stride + i ] ) {
|
|
|
-
|
|
|
- index ++;
|
|
|
- break;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- if ( aheadIndex > index ) {
|
|
|
-
|
|
|
- times[ index ] = times[ aheadIndex ];
|
|
|
-
|
|
|
- for ( let i = 0; i < stride; i ++ ) {
|
|
|
-
|
|
|
- values[ index * stride + i ] = values[ aheadIndex * stride + i ];
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- for ( let i = 0; i < interpolateStride; i ++ ) {
|
|
|
-
|
|
|
- interpolations[ index * interpolateStride + i ] = interpolations[ aheadIndex * interpolateStride + i ];
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- times.length = index + 1;
|
|
|
- values.length = ( index + 1 ) * stride;
|
|
|
- interpolations.length = ( index + 1 ) * interpolateStride;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- const track = new typedKeyframeTrack( node, times, values );
|
|
|
-
|
|
|
- track.createInterpolant = function InterpolantFactoryMethodCubicBezier( result ) {
|
|
|
-
|
|
|
- return new CubicBezierInterpolation( this.times, this.values, this.getValueSize(), result, new Float32Array( interpolations ) );
|
|
|
-
|
|
|
- };
|
|
|
-
|
|
|
- return track;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-// interpolation
|
|
|
-
|
|
|
-class CubicBezierInterpolation extends Interpolant {
|
|
|
-
|
|
|
- constructor( parameterPositions, sampleValues, sampleSize, resultBuffer, params ) {
|
|
|
-
|
|
|
- super( parameterPositions, sampleValues, sampleSize, resultBuffer );
|
|
|
-
|
|
|
- this.interpolationParams = params;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- interpolate_( i1, t0, t, t1 ) {
|
|
|
-
|
|
|
- const result = this.resultBuffer;
|
|
|
- const values = this.sampleValues;
|
|
|
- const stride = this.valueSize;
|
|
|
- const params = this.interpolationParams;
|
|
|
-
|
|
|
- const offset1 = i1 * stride;
|
|
|
- const offset0 = offset1 - stride;
|
|
|
-
|
|
|
- // No interpolation if next key frame is in one frame in 30fps.
|
|
|
- // This is from MMD animation spec.
|
|
|
- // '1.5' is for precision loss. times are Float32 in Three.js Animation system.
|
|
|
- const weight1 = ( ( t1 - t0 ) < 1 / 30 * 1.5 ) ? 0.0 : ( t - t0 ) / ( t1 - t0 );
|
|
|
-
|
|
|
- if ( stride === 4 ) { // Quaternion
|
|
|
-
|
|
|
- const x1 = params[ i1 * 4 + 0 ];
|
|
|
- const x2 = params[ i1 * 4 + 1 ];
|
|
|
- const y1 = params[ i1 * 4 + 2 ];
|
|
|
- const y2 = params[ i1 * 4 + 3 ];
|
|
|
-
|
|
|
- const ratio = this._calculate( x1, x2, y1, y2, weight1 );
|
|
|
-
|
|
|
- Quaternion.slerpFlat( result, 0, values, offset0, values, offset1, ratio );
|
|
|
-
|
|
|
- } else if ( stride === 3 ) { // Vector3
|
|
|
-
|
|
|
- for ( let i = 0; i !== stride; ++ i ) {
|
|
|
-
|
|
|
- const x1 = params[ i1 * 12 + i * 4 + 0 ];
|
|
|
- const x2 = params[ i1 * 12 + i * 4 + 1 ];
|
|
|
- const y1 = params[ i1 * 12 + i * 4 + 2 ];
|
|
|
- const y2 = params[ i1 * 12 + i * 4 + 3 ];
|
|
|
-
|
|
|
- const ratio = this._calculate( x1, x2, y1, y2, weight1 );
|
|
|
-
|
|
|
- result[ i ] = values[ offset0 + i ] * ( 1 - ratio ) + values[ offset1 + i ] * ratio;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- } else { // Number
|
|
|
-
|
|
|
- const x1 = params[ i1 * 4 + 0 ];
|
|
|
- const x2 = params[ i1 * 4 + 1 ];
|
|
|
- const y1 = params[ i1 * 4 + 2 ];
|
|
|
- const y2 = params[ i1 * 4 + 3 ];
|
|
|
-
|
|
|
- const ratio = this._calculate( x1, x2, y1, y2, weight1 );
|
|
|
-
|
|
|
- result[ 0 ] = values[ offset0 ] * ( 1 - ratio ) + values[ offset1 ] * ratio;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- return result;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- _calculate( x1, x2, y1, y2, x ) {
|
|
|
-
|
|
|
- /*
|
|
|
- * Cubic Bezier curves
|
|
|
- * https://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves
|
|
|
- *
|
|
|
- * B(t) = ( 1 - t ) ^ 3 * P0
|
|
|
- * + 3 * ( 1 - t ) ^ 2 * t * P1
|
|
|
- * + 3 * ( 1 - t ) * t^2 * P2
|
|
|
- * + t ^ 3 * P3
|
|
|
- * ( 0 <= t <= 1 )
|
|
|
- *
|
|
|
- * MMD uses Cubic Bezier curves for bone and camera animation interpolation.
|
|
|
- * http://d.hatena.ne.jp/edvakf/20111016/1318716097
|
|
|
- *
|
|
|
- * x = ( 1 - t ) ^ 3 * x0
|
|
|
- * + 3 * ( 1 - t ) ^ 2 * t * x1
|
|
|
- * + 3 * ( 1 - t ) * t^2 * x2
|
|
|
- * + t ^ 3 * x3
|
|
|
- * y = ( 1 - t ) ^ 3 * y0
|
|
|
- * + 3 * ( 1 - t ) ^ 2 * t * y1
|
|
|
- * + 3 * ( 1 - t ) * t^2 * y2
|
|
|
- * + t ^ 3 * y3
|
|
|
- * ( x0 = 0, y0 = 0 )
|
|
|
- * ( x3 = 1, y3 = 1 )
|
|
|
- * ( 0 <= t, x1, x2, y1, y2 <= 1 )
|
|
|
- *
|
|
|
- * Here solves this equation with Bisection method,
|
|
|
- * https://en.wikipedia.org/wiki/Bisection_method
|
|
|
- * gets t, and then calculate y.
|
|
|
- *
|
|
|
- * f(t) = 3 * ( 1 - t ) ^ 2 * t * x1
|
|
|
- * + 3 * ( 1 - t ) * t^2 * x2
|
|
|
- * + t ^ 3 - x = 0
|
|
|
- *
|
|
|
- * (Another option: Newton's method
|
|
|
- * https://en.wikipedia.org/wiki/Newton%27s_method)
|
|
|
- */
|
|
|
-
|
|
|
- let c = 0.5;
|
|
|
- let t = c;
|
|
|
- let s = 1.0 - t;
|
|
|
- const loop = 15;
|
|
|
- const eps = 1e-5;
|
|
|
- const math = Math;
|
|
|
-
|
|
|
- let sst3, stt3, ttt;
|
|
|
-
|
|
|
- for ( let i = 0; i < loop; i ++ ) {
|
|
|
-
|
|
|
- sst3 = 3.0 * s * s * t;
|
|
|
- stt3 = 3.0 * s * t * t;
|
|
|
- ttt = t * t * t;
|
|
|
-
|
|
|
- const ft = ( sst3 * x1 ) + ( stt3 * x2 ) + ( ttt ) - x;
|
|
|
-
|
|
|
- if ( math.abs( ft ) < eps ) break;
|
|
|
-
|
|
|
- c /= 2.0;
|
|
|
-
|
|
|
- t += ( ft < 0 ) ? c : - c;
|
|
|
- s = 1.0 - t;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- return ( sst3 * y1 ) + ( stt3 * y2 ) + ttt;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-class MMDToonMaterial extends ShaderMaterial {
|
|
|
-
|
|
|
- constructor( parameters ) {
|
|
|
-
|
|
|
- super();
|
|
|
-
|
|
|
- this.isMMDToonMaterial = true;
|
|
|
-
|
|
|
- this.type = 'MMDToonMaterial';
|
|
|
-
|
|
|
- this._matcapCombine = AddOperation;
|
|
|
- this.emissiveIntensity = 1.0;
|
|
|
- this.normalMapType = TangentSpaceNormalMap;
|
|
|
-
|
|
|
- this.combine = MultiplyOperation;
|
|
|
-
|
|
|
- this.wireframeLinecap = 'round';
|
|
|
- this.wireframeLinejoin = 'round';
|
|
|
-
|
|
|
- this.flatShading = false;
|
|
|
-
|
|
|
- this.lights = true;
|
|
|
-
|
|
|
- this.vertexShader = MMDToonShader.vertexShader;
|
|
|
- this.fragmentShader = MMDToonShader.fragmentShader;
|
|
|
-
|
|
|
- this.defines = Object.assign( {}, MMDToonShader.defines );
|
|
|
- Object.defineProperty( this, 'matcapCombine', {
|
|
|
-
|
|
|
- get: function () {
|
|
|
-
|
|
|
- return this._matcapCombine;
|
|
|
-
|
|
|
- },
|
|
|
-
|
|
|
- set: function ( value ) {
|
|
|
-
|
|
|
- this._matcapCombine = value;
|
|
|
-
|
|
|
- switch ( value ) {
|
|
|
-
|
|
|
- case MultiplyOperation:
|
|
|
- this.defines.MATCAP_BLENDING_MULTIPLY = true;
|
|
|
- delete this.defines.MATCAP_BLENDING_ADD;
|
|
|
- break;
|
|
|
-
|
|
|
- default:
|
|
|
- case AddOperation:
|
|
|
- this.defines.MATCAP_BLENDING_ADD = true;
|
|
|
- delete this.defines.MATCAP_BLENDING_MULTIPLY;
|
|
|
- break;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
-
|
|
|
- } );
|
|
|
-
|
|
|
- this.uniforms = UniformsUtils.clone( MMDToonShader.uniforms );
|
|
|
-
|
|
|
- // merged from MeshToon/Phong/MatcapMaterial
|
|
|
- const exposePropertyNames = [
|
|
|
- 'specular',
|
|
|
- 'opacity',
|
|
|
- 'diffuse',
|
|
|
-
|
|
|
- 'map',
|
|
|
- 'matcap',
|
|
|
- 'gradientMap',
|
|
|
-
|
|
|
- 'lightMap',
|
|
|
- 'lightMapIntensity',
|
|
|
-
|
|
|
- 'aoMap',
|
|
|
- 'aoMapIntensity',
|
|
|
-
|
|
|
- 'emissive',
|
|
|
- 'emissiveMap',
|
|
|
-
|
|
|
- 'bumpMap',
|
|
|
- 'bumpScale',
|
|
|
-
|
|
|
- 'normalMap',
|
|
|
- 'normalScale',
|
|
|
-
|
|
|
- 'displacemantBias',
|
|
|
- 'displacemantMap',
|
|
|
- 'displacemantScale',
|
|
|
-
|
|
|
- 'specularMap',
|
|
|
-
|
|
|
- 'alphaMap',
|
|
|
-
|
|
|
- 'reflectivity',
|
|
|
- 'refractionRatio',
|
|
|
- ];
|
|
|
- for ( const propertyName of exposePropertyNames ) {
|
|
|
-
|
|
|
- Object.defineProperty( this, propertyName, {
|
|
|
-
|
|
|
- get: function () {
|
|
|
-
|
|
|
- return this.uniforms[ propertyName ].value;
|
|
|
-
|
|
|
- },
|
|
|
-
|
|
|
- set: function ( value ) {
|
|
|
-
|
|
|
- this.uniforms[ propertyName ].value = value;
|
|
|
-
|
|
|
- },
|
|
|
-
|
|
|
- } );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- // Special path for shininess to handle zero shininess properly
|
|
|
- this._shininess = 30;
|
|
|
- Object.defineProperty( this, 'shininess', {
|
|
|
-
|
|
|
- get: function () {
|
|
|
-
|
|
|
- return this._shininess;
|
|
|
-
|
|
|
- },
|
|
|
-
|
|
|
- set: function ( value ) {
|
|
|
-
|
|
|
- this._shininess = value;
|
|
|
- this.uniforms.shininess.value = Math.max( this._shininess, 1e-4 ); // To prevent pow( 0.0, 0.0 )
|
|
|
-
|
|
|
- },
|
|
|
-
|
|
|
- } );
|
|
|
-
|
|
|
- Object.defineProperty(
|
|
|
- this,
|
|
|
- 'color',
|
|
|
- Object.getOwnPropertyDescriptor( this, 'diffuse' )
|
|
|
- );
|
|
|
-
|
|
|
- this.setValues( parameters );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- copy( source ) {
|
|
|
-
|
|
|
- super.copy( source );
|
|
|
-
|
|
|
- this.matcapCombine = source.matcapCombine;
|
|
|
- this.emissiveIntensity = source.emissiveIntensity;
|
|
|
- this.normalMapType = source.normalMapType;
|
|
|
-
|
|
|
- this.combine = source.combine;
|
|
|
-
|
|
|
- this.wireframeLinecap = source.wireframeLinecap;
|
|
|
- this.wireframeLinejoin = source.wireframeLinejoin;
|
|
|
-
|
|
|
- this.flatShading = source.flatShading;
|
|
|
-
|
|
|
- return this;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-export { MMDLoader };
|