diff --git a/examples/js/loaders/MMDLoader.js b/examples/js/loaders/MMDLoader.js index 95aca48e440f4811939a0c4eac06afaff0b49281..402992f6f532c146a54d6c1aa9c0c23cea0ab391 100644 --- a/examples/js/loaders/MMDLoader.js +++ b/examples/js/loaders/MMDLoader.js @@ -94,15 +94,15 @@ THREE.MMDLoader.prototype.loadModel = function ( url, callback, onProgress, onEr this.loadFileAsBuffer( url, function ( buffer ) { - callback( scope.createModel( buffer, modelExtension, texturePath ) ); + callback( scope.createModel( buffer, modelExtension, texturePath, onProgress, onError ) ); }, onProgress, onError ); }; -THREE.MMDLoader.prototype.createModel = function ( buffer, modelExtension, texturePath ) { +THREE.MMDLoader.prototype.createModel = function ( buffer, modelExtension, texturePath, onProgress, onError ) { - return this.createMesh( this.parseModel( buffer, modelExtension ), texturePath ); + return this.createMesh( this.parseModel( buffer, modelExtension ), texturePath, onProgress, onError ); }; @@ -860,6 +860,8 @@ THREE.MMDLoader.prototype.createMesh = function ( model, texturePath, onProgress var textures = []; var textureLoader = new THREE.TextureLoader( scope.manager ); var tgaLoader = new THREE.TGALoader( scope.manager ); + var canvas = document.createElement( 'canvas' ); + var context = canvas.getContext( '2d' ); var offset = 0; var materialParams = []; @@ -902,7 +904,29 @@ THREE.MMDLoader.prototype.createMesh = function ( model, texturePath, onProgress var texture = loader.load( fullPath, function ( t ) { - t.flipY = ( params.isToonTexture === true ) ? true : false; + // 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 ) { + + var image = t.image; + var width = image.width; + var 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 ); + + t.image = context.getImageData( 0, 0, width, height ); + + } + + t.flipY = false; t.wrapS = THREE.RepeatWrapping; t.wrapT = THREE.RepeatWrapping; @@ -920,7 +944,7 @@ THREE.MMDLoader.prototype.createMesh = function ( model, texturePath, onProgress delete texture.readyCallbacks; - } ); + }, onProgress, onError ); texture.readyCallbacks = []; @@ -1265,7 +1289,6 @@ THREE.MMDLoader.prototype.createMesh = function ( model, texturePath, onProgress var toonFileName = ( p2.toonIndex === -1 ) ? 'toon00.bmp' : model.toonTextures[ p2.toonIndex ].fileName; var uuid = loadTexture( toonFileName, { isToonTexture: true, defaultTexturePath: isDefaultToonTexture( toonFileName ) } ); m.gradientMap = getTexture( uuid, textures ); - m.gradientMapAxisY = true; } else { @@ -1294,7 +1317,6 @@ THREE.MMDLoader.prototype.createMesh = function ( model, texturePath, onProgress var uuid = loadTexture( toonFileName, { isToonTexture: true, defaultTexturePath: isDefaultToon } ); m.gradientMap = getTexture( uuid, textures ); - m.gradientMapAxisY = true; } diff --git a/src/loaders/MaterialLoader.js b/src/loaders/MaterialLoader.js index 936ef21164110d88646135b6cc7b7a9257200f0f..22dc9cc8019b2844495ff673523e48151f8a0007 100644 --- a/src/loaders/MaterialLoader.js +++ b/src/loaders/MaterialLoader.js @@ -143,7 +143,6 @@ Object.assign( MaterialLoader.prototype, { if ( json.aoMapIntensity !== undefined ) material.aoMapIntensity = json.aoMapIntensity; if ( json.gradientMap !== undefined ) material.gradientMap = getTexture( json.gradientMap ); - if ( json.gradientMapAxisY !== undefined ) material.gradientMapAxisY = json.gradientMapAxisY; // MultiMaterial diff --git a/src/materials/Material.js b/src/materials/Material.js index ae92a41bab42ff0001693d675310a586c68359cf..72bb555dbbef0b3a6bd061b3bd511b17fb93196a 100644 --- a/src/materials/Material.js +++ b/src/materials/Material.js @@ -205,7 +205,6 @@ Material.prototype = { if ( this.gradientMap && this.gradientMap.isTexture ) { data.gradientMap = this.gradientMap.toJSON( meta ).uuid; - data.gradientMapAxisY = this.gradientMapAxisY; } diff --git a/src/materials/MeshPhongMaterial.js b/src/materials/MeshPhongMaterial.js index 1d0c5060e0b711b73d8211dc760f3fb50bd113e3..542a6731c86360a5366cf5b745549db994076d51 100644 --- a/src/materials/MeshPhongMaterial.js +++ b/src/materials/MeshPhongMaterial.js @@ -45,7 +45,6 @@ import { Color } from '../math/Color'; * refractionRatio: , * * gradientMap: new THREE.Texture( ), - * gradientMapAxisY: , * * wireframe: , * wireframeLinewidth: , @@ -98,7 +97,6 @@ function MeshPhongMaterial( parameters ) { this.refractionRatio = 0.98; this.gradientMap = null; - this.gradientMapAxisY = false; this.wireframe = false; this.wireframeLinewidth = 1; diff --git a/src/renderers/shaders/ShaderChunk/gradientmap_pars_fragment.glsl b/src/renderers/shaders/ShaderChunk/gradientmap_pars_fragment.glsl index 61f82a841810afccec0d6d2cedb67184e8b7189a..aabfe13bcea95433629a2912296e6e17ddce3efe 100644 --- a/src/renderers/shaders/ShaderChunk/gradientmap_pars_fragment.glsl +++ b/src/renderers/shaders/ShaderChunk/gradientmap_pars_fragment.glsl @@ -6,17 +6,7 @@ // dotNL will be from -1.0 to 1.0 float dotNL = dot( normal, lightDirection ); - - #ifdef GRADIENTMAP_AXIS_Y - - vec2 coord = vec2( 0.0, dotNL * 0.5 + 0.5 ); - - #else - - vec2 coord = vec2( dotNL * 0.5 + 0.5, 0.0 ); - - #endif - + vec2 coord = vec2( dotNL * 0.5 + 0.5, 0.0 ); return texture2D( gradientMap, coord ).rgb; } diff --git a/src/renderers/webgl/WebGLProgram.js b/src/renderers/webgl/WebGLProgram.js index 0d009ba3addb4c31aa239d477fabba83c72327d9..5084139b0084d6342732d201ba0020b7f064861c 100644 --- a/src/renderers/webgl/WebGLProgram.js +++ b/src/renderers/webgl/WebGLProgram.js @@ -447,7 +447,6 @@ function WebGLProgram( renderer, code, material, parameters ) { parameters.vertexColors ? '#define USE_COLOR' : '', parameters.gradientMap ? '#define USE_GRADIENTMAP' : '', - parameters.gradientMapAxisY ? '#define GRADIENTMAP_AXIS_Y' : '', parameters.flatShading ? '#define FLAT_SHADED' : '', diff --git a/src/renderers/webgl/WebGLPrograms.js b/src/renderers/webgl/WebGLPrograms.js index 226c6827d79762ff8141c3808a474890b96c3514..c64d5cfe672e835b933f17d429bc0b23845c25a0 100644 --- a/src/renderers/webgl/WebGLPrograms.js +++ b/src/renderers/webgl/WebGLPrograms.js @@ -154,7 +154,6 @@ function WebGLPrograms( renderer, capabilities ) { alphaMap: !! material.alphaMap, gradientMap: !! material.gradientMap, - gradientMapAxisY: !! material.gradientMapAxisY, combine: material.combine,