Skip to content

phantom-software-AZ/babylon-mtoon-material

 
 

Repository files navigation

babylon-mtoon-material

npm version CircleCI semantic-release

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

Some settings will be ignored or generates inconsistent lighting.

About MToon(ja)

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 unreleased(will be ^4.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

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

Related Links

Licenses

see LICENSE.

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

This project is based on MToon with MIT License.

About

Unity MToon Shader WebGL porting to babylon.js.

Resources

License

Stars

Watchers

Forks

Languages

  • TypeScript 74.2%
  • GLSL 23.8%
  • JavaScript 1.7%
  • Other 0.3%