Babylon Mtoon Material Save Abandoned
Unity MToon Shader WebGL porting to babylon.js.
Project README
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
Related Links
- BabylonJS/Babylon.js: Babylon.js: a complete JavaScript framework for building 3D games with HTML 5 and WebGL
- Santarh/MToon: Toon Shader with Unity Global Illumination
- vrm-c/UniVRM: Unity package that can import and export VRM format
- Create a Material For The Material Library | Babylon.js Documentation
- Introduction To Materials | Babylon.js Documentation
Licenses
see LICENSE.
This project uses babylon.js with Apache License, Version 2.0.
This project is based on MToon with MIT License.
Open Source Agenda is not affiliated with "Babylon Mtoon Material" Project. README Source: virtual-cast/babylon-mtoon-material
Open Source Agenda Badge
