Awesome

babylon-mtoon-material

Unity Santarh/MToon Shader WebGL porting to babylon.js.

Some settings will be ignored or generates inconsistent lighting.

Supported version table

babylon.js version	babylon-mtoon-material version
~4.0.0	^1.0.0
~4.1.0	^2.0.0
~4.2.0	^3.0.0
~5.0.0-rc.0	^4.0.0
^5.19.0	^5.0.0

Features

Some StandardMaterial abilities
- Lighting
- Multiview
- LogarithmicDepth
- Fog
- Bones in shader
- MorphTargets in shader
- Shadow
- EffectFallback
- Instances
- ClipPlane
- AmbientColor
- Alpha CutOff
Textures & Color values
- Diffuse
- Emissive
- Bump
- Shade(shaded diffuse rate with red channel)
- Receive Shadow(received shadow rate with red channel)
- Shading Grade(shading grade rate with red channel)
- Rim
- MatCap
- Outline Width(outline width rate with red channel)
UV Animation(Scroll, Rotation)
Serialize Support

These are not covered.

Specular
Vertex Color
PrePass

Usage

This material will be automatically assined to VRM/VCI model within babylon-vrm-loader.

Also you can explicitly assign MToonMaterial to any meshes.

Browser

Live preview at CodePen is here.

<!DOCTYPE html>
<html>
    <head>
        <title>Babylon.js MToon Material</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no">
    </head>
    <body>
        <main id="wrapper">
            <canvas id="renderCanvas"></canvas>
        </main>
        <script src="https://preview.babylonjs.com/babylon.max.js"></script>
        <script src="https://unpkg.com/babylon-mtoon-material/dist/index.js"></script>
        <script>
            // example usage from https://github.com/BabylonJS/Babylon.js
            const canvas = document.getElementById('renderCanvas');
            const engine = new BABYLON.Engine(canvas, true, {preserveDrawingBuffer: true, stencil: true});
            const scene = new BABYLON.Scene(engine);
            const camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5, -10), scene);
            camera.setTarget(BABYLON.Vector3.Zero());
            camera.attachControl(canvas, false);
            new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), scene);
            const sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene, false, BABYLON.Mesh.FRONTSIDE);
            sphere.position.y = 1;

            // Assign MToonMaterial
            sphere.material = new MToonMaterial('mat1', scene);

            engine.runRenderLoop(function(){
                scene.render();
            });
            window.addEventListener('resize', function(){
                engine.resize();
            });
        </script>
    </body>
</html>

npm

$ npm install --save @babylonjs/core babylon-mtoon-material

// in index.js
import { Mesh } from '@babylonjs/core';
import { MToonMaterial } from 'babylon-mtoon-material';

// initializing

const sphere = BABYLON.Mesh.CreateSphere('Sphere', 16, 1, scene);
sphere.material = new MToonMaterial('MtoonMaterial', scene);

Contributing

See CONTRIBUTING.md.

Build

$ yarn install --frozen-lockfile
$ yarn build

Debugging MToonMaterial

$ yarn install --frozen-lockfile
$ yarn debug

You can see inspector on http://localhost:8080/

Test

# executes tslint
$ yarn lint
# executes jest testing with puppetter
$ yarn test

Licenses

see LICENSE.

This project uses babylon.js with Apache License, Version 2.0.

This project is based on MToon with MIT License.