Skip to content
Unity MToon Shader WebGL porting to babylon.js.
TypeScript GLSL JavaScript Other
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
src fix(VertexBuffer): Fixed error when VertexData has no NormalKind Aug 20, 2019
test test: Add jest-puppeteer test suite Jun 18, 2019
.editorconfig test: Add jest-puppeteer test suite Jun 18, 2019
.gitattributes First Commit May 8, 2019
.gitignore feat(webpack): Build for assignation to window(dist/index.js) Jun 5, 2019
CONTRIBUTING.md feat(test): Add test(debug) environment May 13, 2019
LICENSE First Commit May 8, 2019
README.md docs(README): Improve README Jun 27, 2019
index.d.ts First Commit May 8, 2019
jest-puppeteer.config.js test: Add jest-puppeteer test suite Jun 18, 2019
jest.config.js test: Add jest-puppeteer test suite Jun 18, 2019
mtoon.png
package.json chore(release): 1.8.5 [skip ci] Aug 20, 2019
tsconfig.json First Commit May 8, 2019
tslint.json First Commit May 8, 2019
webpack.config.js feat(webpack): Build for assignation to window(dist/index.js) Jun 5, 2019
webpack.test.config.js feat(test): Add test(debug) environment May 13, 2019
yarn.lock chore(package): update lockfile yarn.lock Jul 3, 2019

README.md

babylon-mtoon-material

npm version Greenkeeper badge CircleCI semantic-release

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

This is Work In Progress. Some settings will be ignored or generates inconsistent lighting.

About MToon(ja)

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.

You can’t perform that action at this time.