{"id":13574008,"url":"https://github.com/simonihmig/ecsy-babylon","last_synced_at":"2025-10-08T10:44:48.230Z","repository":{"id":37615687,"uuid":"229619561","full_name":"simonihmig/ecsy-babylon","owner":"simonihmig","description":"Experimental implementation of ECSY for babylon.js.","archived":false,"fork":false,"pushed_at":"2023-02-03T05:12:41.000Z","size":4610,"stargazers_count":36,"open_issues_count":17,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-09-16T23:51:08.061Z","etag":null,"topics":["babylonjs","ecsy"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/simonihmig.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-12-22T19:30:25.000Z","updated_at":"2025-08-14T04:22:27.000Z","dependencies_parsed_at":"2023-02-18T03:45:47.223Z","dependency_job_id":null,"html_url":"https://github.com/simonihmig/ecsy-babylon","commit_stats":null,"previous_names":["kaliber5/ecsy-babylon"],"tags_count":36,"template":false,"template_full_name":null,"purl":"pkg:github/simonihmig/ecsy-babylon","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonihmig%2Fecsy-babylon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonihmig%2Fecsy-babylon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonihmig%2Fecsy-babylon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonihmig%2Fecsy-babylon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/simonihmig","download_url":"https://codeload.github.com/simonihmig/ecsy-babylon/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonihmig%2Fecsy-babylon/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278614467,"owners_count":26015967,"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","status":"online","status_checked_at":"2025-10-06T02:00:05.630Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","ecsy"],"created_at":"2024-08-01T15:00:44.991Z","updated_at":"2025-10-08T10:44:48.196Z","avatar_url":"https://github.com/simonihmig.png","language":"TypeScript","funding_links":[],"categories":["Projects"],"sub_categories":[],"readme":"# ecsy-babylon\n\n[![CI](https://github.com/kaliber5/ecsy-babylon/actions/workflows/ci.yml/badge.svg)](https://github.com/kaliber5/ecsy-babylon/actions/workflows/ci.yml)\n\necsy-babylon is an experimental implementation of [ECSY](https://ecsy.io/) in [babylon.js](https://www.babylonjs.com/).\n\n## Example\n\nIn the spirit of learning-by-doing lets walk through how a simple babylon app would be converted to ecsy-babylon.\n\n### Vanilla babylon.js\n\nConsider the following code:\n\n```ts\n\t// initialize the core elements\n\tconst canvas = document.getElementsByTagName(\"canvas\")[0];\n\tconst engine = new BABYLON.Engine(canvas, true);\n\tconst scene = new BABYLON.Scene(engine);\n\n\t// create objects to inhabit the scene\n\tconst camera = new BABYLON.ArcRotateCamera(\"camera\", \n\t\t-Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0), scene);\n\tcamera.attachControl(canvas, true);\n\tconst light = new BABYLON.HemisphericLight(\"light\", \n\t\tnew BABYLON.Vector3(0, 1, 0), scene);\n\tconst box = BABYLON.MeshBuilder.CreateBox(\"box\", {}, scene);\n\n\n\t// set variables\n\tconst freq = Math.PI; //0.5 Hz\n\tconst amp = 0.1;\n\n\t// apply behaviour on each frame\n\tengine.runRenderLoop(() =\u003e {\n\t\tbox.position.y = Math.sin(Date.now() * 0.001 * freq) * amp;\n\t\tscene.render();\n\t});\n\n```\n\nWe create a scene and then a box to bob up and down within it. At the moment our app is fairly simple but as it expands we will need to consider how to manage the increasing complexity.\n\n### ecsy-babylon\n\nECS design will help us to write more organized apps by introducing some strict rules as to how they shall be structured:\n1. Conceptual elements of the app are organized into **entities**\n2. All game state and data are fields of **components**\n3. All behaviour exists in **systems**\n\nFor more information please check out the [ECSY architecture docs](https://ecsy.io/docs/#/manual/Architecture).\n\nIn keeping with rule 1, lets use ecsy-babylon to convert our existing objects to components on entities.\n\n```ts\nimport {\n  ArcRotateCamera,\n  BabylonCore,\n  Box,\n  components,\n  HemisphericLight,\n  Parent,\n  Position,\n  systems,\n  World,\n} from 'ecsy-babylon';\nimport { Vector3 } from '@babylonjs/core/Maths/math.vector';\nimport { Component, Types, System } from 'ecsy';\n\n// ...\n\nconst world = new World();\ncomponents.forEach((component) =\u003e world.registerComponent(component));\nsystems.forEach((system) =\u003e world.registerSystem(system));\n\nworld.registerComponent(BoxMoveComponent).registerSystem(BoxMoveSystem);\n\nworld.createEntity('singleton').addComponent(BabylonCore, {\n  world,\n  canvas: document.getElementsByTagName('canvas')[0],\n});\n\nworld\n  .createEntity('camera')\n  .addComponent(Parent)\n  .addComponent(ArcRotateCamera, {\n    alpha: -Math.PI / 2,\n    beta: Math.PI / 2.5,\n    radius: 3,\n    target: new Vector3(0, 0, 0),\n  });\n\nworld\n  .createEntity('light')\n  .addComponent(Parent)\n  .addComponent(HemisphericLight, {\n    direction: new Vector3(0, 1, 0),\n  });\n\nworld\n  .createEntity('box')\n  .addComponent(Parent)\n  .addComponent(Position)\n  .addComponent(Box)\n  .addComponent(BoxMoveComponent, {\n    freq: Math.PI, // 0.5 Hz\n    amp: 0.1,\n  });\n\nworld.execute(0, 0);\n```\n\nNow we need to implement our BoxMoveComponent\n\n```ts\nclass BoxMoveComponent extends Component\u003cBoxMoveComponent\u003e{\n\tfreq!: number\n\tamp!: number\n\tstatic schema = {\n\t\tfreq: {\n\t\t\ttype: Types.Number,\n\t\t\tdefault: Math.PI * 2\n\t\t},\n\t\tamp: {\n\t\t\ttype: Types.Number,\n\t\t\tdefault: 1\n\t\t}\n\t}\n}\n```\n\nFinaly our BoxMoveSystem will manage state\n\n```ts\nclass BoxMoveSystem extends System {\n\n\texecute(): void {\n\t\tthis.queries.movableBoxes.results.forEach(entity =\u003e {\n\t\t\tconst boxMove = entity.getComponent(BoxMoveComponent)!;\n\t\t\tconst position = entity.getMutableComponent(ecsyBabylon.Position)!\n\t\t\tposition.value.y = Math.sin(Date.now() * 0.001 * boxMove.freq) * boxMove.amp;\n\t\t})\n\t}\n\tstatic queries = {\n\t\tmovableBoxes: {\n\t\t\tcomponents: [BoxMoveComponent, ecsyBabylon.Position]\n\t\t}\n\t}\n}\n```\n\nA couple of notes regarding the above example:\n- Every ecsy-babylon app requires a singleton entity with a `BabylonCore` component\n- All objects placed in the scene require a `Parent` component\n\nFeel free to check out the demo's complete [source code](demos/hello-world).\n\n## Further Reading\n- [ecsy documentation](https://ecsy.io/docs/#/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonihmig%2Fecsy-babylon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimonihmig%2Fecsy-babylon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonihmig%2Fecsy-babylon/lists"}