Export Gradient Map from MMDLoader to let it reusable #9912

Merged
merged 13 commits into from Nov 20, 2016

Projects

None yet

3 participants

@takahirox
Contributor
takahirox commented Oct 21, 2016 edited

I exported toon map cel shading technique from MMDLoader to MeshPhongMaterial
to make it reusable for non-MMD.

With toonMap and OutlintEffect you can easily render toon style objects on Three.js.

Left: Cel Shading On (toonMap + OutlineEffect)
Right: Cel Shading Off

image
(Model: Tda's Miku append http://seiga.nicovideo.jp/seiga/im2018614)

How to use:

var material = new THREE.MeshPhongMaterial();
material.toonMap = new THREE.Texture( toonImage );
material.toonMapDirectionY = <bool>; // default is false

toonImage should be like this

image

The technique this PR includes is a very basic cel shading technique.

float dotNL = dot( geometry.normal, directLight.direction );
vec2 coord = vec2( dotNL * 0.5 + 0.5, 0.0 );
return texture2D( toonMap, coord ).rgb;

This RGB color will be used for calculating irradiance.
This is the trick which makes objects look like flat.

In general, direction X in toonImage is used for that
but sometimes direction Y is used, for example in MMD.
So I enabled users to specify it with toonMapDirectionY.

Note:
specular can be more cel-ish but I'm not sure what technique is the most standard.
It'll be a future work.

src/materials/MeshPhongMaterial.js
@@ -94,6 +97,9 @@ function MeshPhongMaterial( parameters ) {
this.reflectivity = 1;
this.refractionRatio = 0.98;
+ this.toonMap = null;
@mrdoob
mrdoob Oct 22, 2016 Owner

Hmm, what's a toonMap?

@takahirox
takahirox Oct 22, 2016 edited Contributor

Reference: http://gamedev.stackexchange.com/questions/51063/what-is-ramp-shading-or-lighting

rampMap would be better than toonMap?

And I'm gonna rename toonMapDirectionY with toonMapAxisY.

@mrdoob
mrdoob Oct 22, 2016 Owner

Ah, it's a gradient? And it takes lights into account, right?

@takahirox
takahirox Oct 22, 2016 edited Contributor

Yes. Summary code in phong light calculation is

#ifdef USE_TOONMAP

    float dotNL = dot( geometry.normal, directLight.direction );
    vec2 coord = vec2( dotNL * 0.5 + 0.5, 0.0 );
    vec3 irradiance = texture2D( toonMap, coord ).rgb * directLight.color;

#else

    float dotNL = saturate( dot( geometry.normal, directLight.direction ) );
    vec3 irradiance = dotNL * directLight.color;

#endif

With like the toonImage I put above
it can make object look like flat=toon-style.

@takahirox
takahirox Oct 23, 2016 Contributor

I think I should rename toonMap.
gradientMap sounds good?

@takahirox
Contributor

I've renamed toonMap with gradientMap.
How does this PR sound to you now?

@takahirox
Contributor

\ping @mrdoob

@takahirox takahirox changed the title from Export Toon Map from MMDLoader to Export Gradient Map from MMDLoader to let it reusable Nov 7, 2016
@takahirox
Contributor

BTW, by applying this PR legacy code UniformsUtils.merge() and UniformsUtils.clone() will be removed from MMDLoader.

@takahirox takahirox Merge branch 'dev' into toonMap
Conflicts:
	examples/js/loaders/MMDLoader.js
c5a0ac8
src/materials/MeshPhongMaterial.js
@@ -94,6 +97,9 @@ function MeshPhongMaterial( parameters ) {
this.reflectivity = 1;
this.refractionRatio = 0.98;
+ this.gradientMap = null;
+ this.gradientMapAxisY = false;
@mrdoob
mrdoob Nov 19, 2016 edited Owner

Do you mind removing gradientMapAxisY and the related code? I think I would prefer "forcing" to X axis gradient.

@takahirox
takahirox Nov 19, 2016 Contributor

Alright!

@mrdoob
mrdoob Nov 19, 2016 Owner

I'm also thinking that, maybe MeshToonMaterial could be more appropriate here... 😶

@takahirox
Contributor

I've removed gradientMapAxisY.
About MeshToonMaterial, hm let me try.

@takahirox
Contributor

I've made MeshToonMaterial!

@mrdoob
Owner
mrdoob commented Nov 19, 2016

Thanks! Let me double-check with @WestLangley though...

@WestLangley What do you think? Just adding gradientMap to MeshPhongMaterial or creating MeshToonMaterial which extends MeshPhongMaterial?

We definitely need to do some ifdefs clean up one way or another...

@WestLangley
Collaborator

@WestLangley What do you think? Just adding gradientMap to MeshPhongMaterial or creating MeshToonMaterial which extends MeshPhongMaterial?

I think creating MeshToonMaterial is best.

However, I also think we should refactor and remove the material-case-statements from the renderer; in other words, make the renderer material-agnostic.

@mrdoob mrdoob merged commit b163435 into mrdoob:dev Nov 20, 2016
@mrdoob
Owner
mrdoob commented Nov 20, 2016

Thanks!

@takahirox takahirox deleted the takahirox:toonMap branch Nov 20, 2016
@mrdoob
Owner
mrdoob commented Nov 20, 2016

Seems like you forgot to include meshtoon_vert.glsl and meshtoon_frag.glsl.

@takahirox
Contributor

Oops! I'll add now!

@takahirox
Contributor

Done!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment