{"id":13573949,"url":"https://github.com/virtual-cast/babylon-mtoon-material","last_synced_at":"2025-04-04T13:30:34.979Z","repository":{"id":34866891,"uuid":"185508614","full_name":"virtual-cast/babylon-mtoon-material","owner":"virtual-cast","description":"Unity MToon Shader WebGL porting to babylon.js.","archived":false,"fork":false,"pushed_at":"2024-01-09T19:10:46.000Z","size":25059,"stargazers_count":63,"open_issues_count":9,"forks_count":17,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-23T07:19:53.652Z","etag":null,"topics":["babylonjs","shader","vrm","webgl"],"latest_commit_sha":null,"homepage":"https://virtual-cast.github.io/babylon-mtoon-material/?shadow","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/virtual-cast.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-05-08T01:58:09.000Z","updated_at":"2025-03-12T17:03:43.000Z","dependencies_parsed_at":"2024-06-18T20:09:09.455Z","dependency_job_id":"ffe1ef74-5b6c-48ca-ad6e-360d0b9e0d38","html_url":"https://github.com/virtual-cast/babylon-mtoon-material","commit_stats":{"total_commits":180,"total_committers":8,"mean_commits":22.5,"dds":0.6944444444444444,"last_synced_commit":"2167159bcd706445cbb8d028b7542d684cb6fe75"},"previous_names":[],"tags_count":35,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/virtual-cast%2Fbabylon-mtoon-material","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/virtual-cast%2Fbabylon-mtoon-material/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/virtual-cast%2Fbabylon-mtoon-material/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/virtual-cast%2Fbabylon-mtoon-material/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/virtual-cast","download_url":"https://codeload.github.com/virtual-cast/babylon-mtoon-material/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247184860,"owners_count":20897844,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babylonjs","shader","vrm","webgl"],"created_at":"2024-08-01T15:00:43.992Z","updated_at":"2025-04-04T13:30:31.879Z","avatar_url":"https://github.com/virtual-cast.png","language":"TypeScript","funding_links":[],"categories":["Projects"],"sub_categories":[],"readme":"# babylon-mtoon-material\r\n\r\n[![npm version](https://badge.fury.io/js/babylon-mtoon-material.svg)](https://badge.fury.io/js/babylon-mtoon-material) [![CircleCI](https://circleci.com/gh/virtual-cast/babylon-mtoon-material.svg?style=svg)](https://circleci.com/gh/virtual-cast/babylon-mtoon-material) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\r\n\r\n![](mtoon.png)\r\n\r\n[Unity Santarh/MToon Shader](https://github.com/Santarh/MToon/) WebGL porting to [babylon.js](https://www.babylonjs.com/).\r\n\r\nSome settings will be ignored or generates inconsistent lighting.\r\n\r\n[About MToon](https://vrm.dev/en/univrm/shaders/shader_mtoon)([ja](https://vrm.dev/univrm/shaders/shader_mtoon)\r\n\r\n## Supported version table\r\n\r\n|babylon.js version|babylon-mtoon-material version|\r\n|---|---|\r\n|~4.0.0|^1.0.0|\r\n|~4.1.0|^2.0.0|\r\n|~4.2.0|^3.0.0|\r\n|~5.0.0-rc.0|^4.0.0|\r\n|^5.19.0|^5.0.0|\r\n\r\n## Features\r\n\r\n- Some [StandardMaterial](https://doc.babylonjs.com/typedoc/classes/BABYLON.StandardMaterial) abilities\r\n    - Lighting\r\n    - Multiview\r\n    - LogarithmicDepth\r\n    - Fog\r\n    - Bones in shader\r\n    - MorphTargets in shader\r\n    - Shadow\r\n    - EffectFallback\r\n    - Instances\r\n    - ClipPlane\r\n    - AmbientColor\r\n    - Alpha CutOff\r\n- Textures \u0026 Color values\r\n    - Diffuse\r\n    - Emissive\r\n    - Bump\r\n    - Shade(shaded diffuse rate with red channel)\r\n    - Receive Shadow(received shadow rate with red channel)\r\n    - Shading Grade(shading grade rate with red channel)\r\n    - Rim\r\n    - MatCap\r\n    - Outline Width(outline width rate with red channel)\r\n- UV Animation(Scroll, Rotation)\r\n- Serialize Support\r\n\r\nThese are not covered.\r\n\r\n- Specular\r\n- Vertex Color\r\n- PrePass\r\n\r\n## Usage\r\n\r\nThis material will be automatically assined to VRM/VCI model within [babylon-vrm-loader](https://github.com/virtual-cast/babylon-vrm-loader).\r\n\r\nAlso you can explicitly assign MToonMaterial to any meshes.\r\n\r\n### Browser\r\n\r\nLive preview at CodePen is [here](https://codepen.io/akai_inu/pen/EBwGxE).\r\n\r\n```html\r\n\u003c!DOCTYPE html\u003e\r\n\u003chtml\u003e\r\n    \u003chead\u003e\r\n        \u003ctitle\u003eBabylon.js MToon Material\u003c/title\u003e\r\n        \u003cmeta charset=\"utf-8\"\u003e\r\n        \u003cmeta name=\"viewport\" content=\"width=device-width, user-scalable=no\"\u003e\r\n    \u003c/head\u003e\r\n    \u003cbody\u003e\r\n        \u003cmain id=\"wrapper\"\u003e\r\n            \u003ccanvas id=\"renderCanvas\"\u003e\u003c/canvas\u003e\r\n        \u003c/main\u003e\r\n        \u003cscript src=\"https://preview.babylonjs.com/babylon.max.js\"\u003e\u003c/script\u003e\r\n        \u003cscript src=\"https://unpkg.com/babylon-mtoon-material/dist/index.js\"\u003e\u003c/script\u003e\r\n        \u003cscript\u003e\r\n            // example usage from https://github.com/BabylonJS/Babylon.js\r\n            const canvas = document.getElementById('renderCanvas');\r\n            const engine = new BABYLON.Engine(canvas, true, {preserveDrawingBuffer: true, stencil: true});\r\n            const scene = new BABYLON.Scene(engine);\r\n            const camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5, -10), scene);\r\n            camera.setTarget(BABYLON.Vector3.Zero());\r\n            camera.attachControl(canvas, false);\r\n            new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), scene);\r\n            const sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene, false, BABYLON.Mesh.FRONTSIDE);\r\n            sphere.position.y = 1;\r\n\r\n            // Assign MToonMaterial\r\n            sphere.material = new MToonMaterial('mat1', scene);\r\n\r\n            engine.runRenderLoop(function(){\r\n                scene.render();\r\n            });\r\n            window.addEventListener('resize', function(){\r\n                engine.resize();\r\n            });\r\n        \u003c/script\u003e\r\n    \u003c/body\u003e\r\n\u003c/html\u003e\r\n```\r\n\r\n### npm\r\n\r\n```s\r\n$ npm install --save @babylonjs/core babylon-mtoon-material\r\n```\r\n\r\n```js\r\n// in index.js\r\nimport { Mesh } from '@babylonjs/core';\r\nimport { MToonMaterial } from 'babylon-mtoon-material';\r\n\r\n// initializing\r\n\r\nconst sphere = BABYLON.Mesh.CreateSphere('Sphere', 16, 1, scene);\r\nsphere.material = new MToonMaterial('MtoonMaterial', scene);\r\n```\r\n\r\n## Contributing\r\n\r\nSee [CONTRIBUTING.md](./CONTRIBUTING.md).\r\n\r\n### Build\r\n\r\n```s\r\n$ yarn install --frozen-lockfile\r\n$ yarn build\r\n```\r\n\r\n### Debugging MToonMaterial\r\n\r\n```s\r\n$ yarn install --frozen-lockfile\r\n$ yarn debug\r\n```\r\n\r\nYou can see inspector on http://localhost:8080/\r\n\r\n### Test\r\n\r\n```s\r\n# executes tslint\r\n$ yarn lint\r\n# executes jest testing with puppetter\r\n$ yarn test\r\n```\r\n\r\n## Related Links\r\n\r\n- [BabylonJS/Babylon.js: Babylon.js: a complete JavaScript framework for building 3D games with HTML 5 and WebGL](https://github.com/BabylonJS/Babylon.js)\r\n- [Santarh/MToon: Toon Shader with Unity Global Illumination](https://github.com/Santarh/MToon/)\r\n- [vrm-c/UniVRM: Unity package that can import and export VRM format](https://github.com/vrm-c/UniVRM)\r\n- [Create a Material For The Material Library | Babylon.js Documentation](https://doc.babylonjs.com/divingDeeper/developWithBjs/matForMatLibrary)\r\n- [Introduction To Materials | Babylon.js Documentation](https://doc.babylonjs.com/divingDeeper/materials/using/materials_introduction)\r\n\r\n## Licenses\r\n\r\nsee [LICENSE](./LICENSE).\r\n\r\nThis project uses [babylon.js with Apache License, Version 2.0](https://github.com/BabylonJS/Babylon.js/blob/master/license.md).\r\n\r\nThis project is based on [MToon with MIT License](https://github.com/Santarh/MToon/blob/master/LICENSE).\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvirtual-cast%2Fbabylon-mtoon-material","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvirtual-cast%2Fbabylon-mtoon-material","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvirtual-cast%2Fbabylon-mtoon-material/lists"}