{"id":15379202,"url":"https://github.com/hmans/composer-suite","last_synced_at":"2025-04-08T02:36:51.279Z","repository":{"id":37010548,"uuid":"499672533","full_name":"hmans/composer-suite","owner":"hmans","description":"A suite of libraries for making game development with Three.js and React not only awesome, but so good, it would feel wrong to use anything else.","archived":false,"fork":false,"pushed_at":"2025-02-05T15:35:12.000Z","size":9457,"stargazers_count":511,"open_issues_count":66,"forks_count":30,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-04-01T01:37:08.687Z","etag":null,"topics":["game-development","react","threejs","vfx","webgl"],"latest_commit_sha":null,"homepage":"vfx-composer-hmans.vercel.app","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/hmans.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","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},"funding":{"github":["hmans"]}},"created_at":"2022-06-03T22:57:42.000Z","updated_at":"2025-03-28T08:00:47.000Z","dependencies_parsed_at":"2025-03-17T23:45:29.241Z","dependency_job_id":"b7227fb5-4163-474f-aa69-77d953f2575a","html_url":"https://github.com/hmans/composer-suite","commit_stats":null,"previous_names":[],"tags_count":91,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hmans%2Fcomposer-suite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hmans%2Fcomposer-suite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hmans%2Fcomposer-suite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hmans%2Fcomposer-suite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hmans","download_url":"https://codeload.github.com/hmans/composer-suite/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247765688,"owners_count":20992349,"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":["game-development","react","threejs","vfx","webgl"],"created_at":"2024-10-01T14:18:32.389Z","updated_at":"2025-04-08T02:36:51.259Z","avatar_url":"https://github.com/hmans.png","language":"TypeScript","funding_links":["https://github.com/sponsors/hmans","https://github.com/sponsors/hmans)!"],"categories":[],"sub_categories":[],"readme":"![Composer Suite](https://user-images.githubusercontent.com/1061/189347136-c81b7807-dbbc-4d8f-a890-b9d6639165b0.jpg)\n[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg?style=for-the-badge)](CODE_OF_CONDUCT.md)\n\n### A suite of libraries for making game development with Three.js and React not only awesome, but \"so good, it would feel wrong to use anything else.\" – [hmans](https://github.com/sponsors/hmans)\n\nBuilding games with React and Three.js is already pretty cool, but a lot of tooling you need to make those games _really nice_ is still missing. This project tries to fill some of these gaps by providing a collection of libraries for various aspects of game development, from **GPU-driven particle systems and VFX**, to **game UI**, **editor tooling**, **camera rigs**, **audio**, **multi-device input**, and more.\n\n\u003e **Note**\n\u003e While this suite of libraries targets building games with [React](https://reactjs.org/) and [React-Three-Fiber], some of them can also be used outside of React, just like some others are not specific to Three.js or React-Three-Fiber. But building games with React is where our hearts are at, which is why you will find most example code in this document to be written in React. 😎\n\n## Sponsors ❤️\n\nThis project wouldn't be possible without the support from its lovely [sponsors](https://github.com/sponsors/hmans). If you'd like to sponsor this project and help **make game development with React \u0026 Three.js incredible**, [click here](https://github.com/sponsors/hmans)!\n\n\u003c!-- sponsors --\u003e\u003ca href=\"https://github.com/LoV-blackpill\"\u003e\u003cimg src=\"https:\u0026#x2F;\u0026#x2F;github.com\u0026#x2F;LoV-blackpill.png\" width=\"60px\" alt=\"User avatar: bp\" /\u003e\u003c/a\u003e\u003c!-- sponsors --\u003e\n\n## Getting Started\n\n**Most of the packages in this repository are under heavy development**, and even though I regularly [push new bits to NPM](https://github.com/hmans/composer-suite/releases), expect much of it to be largely undocumented and unstable, particularly anything that has yet to reach version 1.0.0.\n\nIf you'd like to give this stuff a try today, the easiest way would be to either clone this repository to your local computer and run one of the many example apps (or the demo game, Space Rage; see below). Alternatively, you can also [open this repository on CodeSandbox](https://codesandbox.io/p/github/hmans/composer-suite/main?file=%2FREADME.md) and play with the code there!\n\n## Space Rage\n\n![spacerage-banner](https://user-images.githubusercontent.com/1061/194765077-4e1e1086-6596-474a-aab0-aec9d92f8fbd.jpg)\n\nThe development of the Composer Suite is primarily driven by that of **Space Rage**, an open-source top-down twin-stick shooter game that is also intended to be a showcase for the libraries here.\n\n- **[Play Space Rage](https://spacerage2.vercel.app/)** (development build!)\n- [Play and edit Space Rage in CodeSandbox](https://codesandbox.io/p/github/hmans/composer-suite/dev?selection=%5B%7B%22endColumn%22%3A31%2C%22endLineNumber%22%3A21%2C%22startColumn%22%3A31%2C%22startLineNumber%22%3A21%7D%5D\u0026file=%2Fapps%2Fspacerage%2Fsrc%2FGame.tsx\u0026workspace=%257B%2522activeFileId%2522%253A%2522cl90xdiuf00eblqjedryebrxi%2522%252C%2522openFiles%2522%253A%255B%2522%252Fapps%252Fspacerage%252Fsrc%252FGame.tsx%2522%255D%252C%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522gitSidebarPanel%2522%253A%2522COMMIT%2522%252C%2522sidekickItems%2522%253A%255B%257B%2522type%2522%253A%2522PREVIEW%2522%252C%2522taskId%2522%253A%2522dev%253Aspacerage%2522%252C%2522port%2522%253A5173%252C%2522key%2522%253A%2522cl91i035f01eu3b6me2xd6clq%2522%252C%2522isMinimized%2522%253Afalse%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%253Aspacerage%2522%252C%2522key%2522%253A%2522cl91hzzw2018b3b6mno4aayug%2522%252C%2522isMinimized%2522%253Afalse%257D%255D%257D)\n- [Source code](https://github.com/hmans/composer-suite/tree/main/apps/spacerage)\n\n## Packages 📦\n\n[![Shader Composer](https://user-images.githubusercontent.com/1061/187867434-1e8bc952-8fed-4e17-afc6-fca97951ba1a.jpg)](https://github.com/hmans/composer-suite/tree/main/packages/shader-composer)  \n![react] ![vanilla] ![three]\n\n**[Shader Composer]** takes a graph of nodes (here called \"units\") and compiles it to a working GLSL shader. It provides a library of ready-to-use shader units, but you can, of course, add your own. Parameterized sub-graphs of your shaders can be implemented as plain JavaScript functions.\n\n```jsx\nconst ShaderComposerExample = () =\u003e {\n  const shader = useShader(() =\u003e\n    ShaderMaterialMaster({\n      color: pipe(\n        Vec3(new Color(\"red\")),\n        (v) =\u003e Mix(v, new Color(\"white\"), NormalizePlusMinusOne(Sin(Time()))),\n        (v) =\u003e Add(v, Fresnel())\n      )\n    })\n  )\n\n  return (\n    \u003cmesh\u003e\n      \u003csphereGeometry /\u003e\n      \u003cshaderMaterial {...shader} /\u003e\n    \u003c/mesh\u003e\n  )\n}\n```\n\n[![material-composer-thin](https://user-images.githubusercontent.com/1061/187885049-cdbbd4c6-b974-4214-a0de-916d9ee412bb.jpg)](https://github.com/hmans/composer-suite/tree/main/packages/material-composer)  \n![react] ![vanilla] ![three]\n\n**[Material Composer]** provides a mechanism to hook into Three.js materials and customize their behavior using a sequence of material modules. Modules are higher-level implementations of Shader-based functionality, and implemented using [Shader Composer]. Material Composer provides a library of these material modules that are easy to extend and customize; but, as always, you can add your own.\n\n```jsx\nconst MaterialComposerExample = () =\u003e (\n  \u003cmesh position-y={1.5} castShadow\u003e\n    \u003csphereGeometry /\u003e\n\n    \u003cComposable.MeshStandardMaterial\u003e\n      \u003cModules.Color color=\"#d62828\" /\u003e\n\n      \u003cLayer opacity={NormalizePlusMinusOne(Sin(Time()))}\u003e\n        \u003cModules.Color color=\"#003049\" /\u003e\n      \u003c/Layer\u003e\n\n      \u003cModules.Fresnel intensity={0.2} /\u003e\n    \u003c/Composable.MeshStandardMaterial\u003e\n  \u003c/mesh\u003e\n)\n```\n\n[![VFX Composer](https://user-images.githubusercontent.com/1061/187867928-5cac4fa9-908c-4c78-93de-2a9ac3998dbd.jpg)](https://github.com/hmans/composer-suite/tree/main/packages/vfx-composer)  \n![react] ![vanilla] ![three]\n\n_TODO_\n\n[![timeline-composer-thin](https://user-images.githubusercontent.com/1061/187868484-5cd3ebd6-7961-4fd3-aef0-eca22f79417a.jpg)](https://github.com/hmans/composer-suite/tree/main/packages/timeline-composer)  \n![react]\n\n**[Timeline Composer]** provides a small, but powerful collection of React components that can be used to orchestrate an animation sequence:\n\n```jsx\n\u003cLifetime seconds={5}\u003e\n  \u003cSmokeRing /\u003e\n  \u003cFireball /\u003e\n\n  \u003cDelay seconds={0.3}\u003e\n    \u003cCameraShake decay /\u003e\n    \u003cFireball /\u003e\n\n    \u003cDelay seconds={0.2}\u003e\n      \u003cRocks /\u003e\n      \u003cSmokeCloud /\u003e\n    \u003c/Delay\u003e\n  \u003c/Delay\u003e\n\u003c/Lifetime\u003e\n```\n\n### [Render Composer](https://github.com/hmans/composer-suite/tree/main/packages/render-composer)\n\n![react] ![three]\n\nA preconfigured, opinionated render pipeline for your React-Three-Fiber games.\n\n_TODO_\n\n### Input Composer\n\n![react] ![vanilla]\n\nComposable multi-device game input.\n\n_TODO_\n\n### UI Composer\n\n![react]\n\nScreen-space UI for games and game tooling.\n\n_TODO_\n\n### Camera Composer\n\n![react] ![vanilla] ![three]\n\nComposable camera automation.\n\n_TODO_\n\n### [State Composer](https://github.com/hmans/composer-suite/tree/main/packages/state-composer)\n\n![react]\n\nHelpers for managing game state.\n\n_TODO_\n\n## Development 🛠\n\n### Repository Structure\n\nThe repository is structured as a monorepo. You will find all packages that are part of the Composer Suite inside the `packages` directory, and a collection of applications (examples and otherwise) inside `apps`.\n\n### Development Mode\n\nThis repository uses [Preconstruct](https://preconstruct.tools/) for building packages and providing a development environment. To start the development environment, run:\n\n```sh\npnpm dev:link\n```\n\nThis will cause Preconstruct to link all apps and packages together so they consume each others' TypeScript source, allowing you to modify code without having to rebuild after every change.\n\n### Running Example Apps\n\nUse the `pnpm dev` task to start up all available apps in development mode, or supply a `--filter` argument to just start one of them. Examples:\n\n```sh\n# Start all apps\npnpm dev\n\n# Start individual apps\npnpm dev --filter spacerage\npnpm dev --filter vfx-composer-examples\npnpm dev --filter shader-composer-examples\n```\n\n\u003e **Note** The `pnpm dev` task uses [Turborepo](https://turbo.build/repo). Please refer to their [CLI Documentation](https://turbo.build/repo/docs/reference/command-line-reference) to learn about additional options.\n\n### Core Tenets\n\nAll of the libraries in the Composer Suite are aiming for the following:\n\n- **Authored in and for TypeScript**.  \n  All libraries are authored in TypeScript, with first-class type support. This means that you can use these libraries in JavaScript, but you will get the best experience when using TypeScript. If you're using them from within JavaScript, please be aware that these libraries will not make any significant effort to provide runtime type checking or similar.\n- **Flawless HMR**.  \n  The libraries should provide a fun and flawless development experience with the best support for hot-module reloading possible. The user should be able to hot-reload their code and see the changes immediately in the browser. Where possible, state should be retained; there must never be errors when hot-reloading.\n- **Prefer Declarative over Imperative**.  \n  Where possible, allow the user to declare logic and data using JSX, instead of forcing them out of the declarative JSX layer and towards hooks (or even further into the imperative world.)\n- **Usable Individually, and Together**.  \n  Where possible, libraries should be designed so they can be used individually, but also together.\n\n## License 👩‍⚖️\n\n```\nCopyright (c) 2022 Hendrik Mans\n\nPermission is hereby granted, free of charge, to any person obtaining\na copy of this software and associated documentation files (the\n\"Software\"), to deal in the Software without restriction, including\nwithout limitation the rights to use, copy, modify, merge, publish,\ndistribute, sublicense, and/or sell copies of the Software, and to\npermit persons to whom the Software is furnished to do so, subject to\nthe following conditions:\n\nThe above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\nNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE\nLIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION\nOF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION\nWITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n```\n\n[react-three-fiber]: https://github.com/pmndrs/react-three-fiber\n[shader composer]: https://github.com/hmans/composer-suite/tree/main/packages/shader-composer\n[timeline composer]: https://github.com/hmans/composer-suite/tree/main/packages/timeline-composer\n[vfx composer]: https://github.com/hmans/composer-suite/tree/main/packages/vfx-composer\n[material composer]: https://github.com/hmans/composer-suite/tree/main/packages/material-composer\n[react]: https://img.shields.io/badge/-react-blue?style=for-the-badge\n[vanilla]: https://img.shields.io/badge/-vanilla-yellow?style=for-the-badge\n[three]: https://img.shields.io/badge/-three-brightgreen?style=for-the-badge\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhmans%2Fcomposer-suite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhmans%2Fcomposer-suite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhmans%2Fcomposer-suite/lists"}