{"id":15063565,"url":"https://github.com/spearwolf/twopoint5d","last_synced_at":"2025-07-28T17:07:18.939Z","repository":{"id":42393614,"uuid":"361553015","full_name":"spearwolf/twopoint5d","owner":"spearwolf","description":"a library to create 2.5d realtime graphics and pixelart with three.js","archived":false,"fork":false,"pushed_at":"2025-07-23T08:53:22.000Z","size":160268,"stargazers_count":20,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-26T03:07:08.148Z","etag":null,"topics":["creative-coding","instanced-rendering","instancing","javascript","particles","pixelart","react","react-three-fiber","sprites","three","threejs","typescript","webgl"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/spearwolf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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,"zenodo":null}},"created_at":"2021-04-25T22:30:37.000Z","updated_at":"2025-07-23T08:53:26.000Z","dependencies_parsed_at":"2024-01-01T04:55:02.409Z","dependency_job_id":"dc3d323a-ac0c-4f63-8de3-b44614b1355d","html_url":"https://github.com/spearwolf/twopoint5d","commit_stats":{"total_commits":859,"total_committers":1,"mean_commits":859.0,"dds":0.0,"last_synced_commit":"8d0cb3a226d25729e45fdb8a1b5a5187e9216336"},"previous_names":["spearwolf/three-vertex-objects"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/spearwolf/twopoint5d","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spearwolf%2Ftwopoint5d","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spearwolf%2Ftwopoint5d/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spearwolf%2Ftwopoint5d/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spearwolf%2Ftwopoint5d/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/spearwolf","download_url":"https://codeload.github.com/spearwolf/twopoint5d/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spearwolf%2Ftwopoint5d/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267272236,"owners_count":24062433,"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-07-26T02:00:08.937Z","response_time":62,"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":["creative-coding","instanced-rendering","instancing","javascript","particles","pixelart","react","react-three-fiber","sprites","three","threejs","typescript","webgl"],"created_at":"2024-09-25T00:04:34.004Z","updated_at":"2025-07-28T17:07:18.899Z","avatar_url":"https://github.com/spearwolf.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg width=\"350\" src=\"docs/images/twopoint5d-700x168.png\"\u003e\n  \u003cbr\u003e\n  \u003cem\u003eA javascript side project about rendering 2.5D realtime graphics on the web.\u003c/em\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cb\u003e\n    ultra fast rendering of 2D sprites in 3D space \u0026bull; billboards \u0026bull; texture atlas \u0026bull; frame-based animations \u0026bull; parallax \u0026bull; tiled 2D maps \u0026bull; pixelart\n  \u003c/b\u003e\n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n![github actions main workflow status](https://github.com/spearwolf/twopoint5d/actions/workflows/main.yml/badge.svg)\n[![License](https://img.shields.io/badge/License-Apache_2.0-yellowgreen.svg)](https://opensource.org/licenses/Apache-2.0)\n\n\u003c/div\u003e\n\n![twopoint5d cover](cover.png)\n\n## Introduction\n\nIt all started with the desire to render 2d sprites (lots of them!) in the browser. it has been a long way, starting with a naive html-canvas-based solution. the second iteration used a custom webgl renderer, which turned out to be quite complex in the long run. today, in its current form, the library uses three.js as the rendering layer.\n\nA declarative description (called a \"vertex object description\") is used to describe the sprite properties (how many vertices, indices, texture coords, etc.).\n\nUsing the _vertex object description_, the library can create javascript objects that provide getters and setters for the respective sprite properties. the actual data ends up in internal buffers that are efficiently rendered in batches by three.js/webgl, usually via instanced rendering.\n\nWhile the developer can use the \"sprites\" / _vertex objects_ comfortably and conveniently via javascript objects, the \"backend\" of the library ensures that webgl can render the current sprite pool with high performance with a single draw call. the cumbersome handling of webgl buffers and state setup becomes transparent for the developer.\n\nWhether a \"sprite\" is a classic quad with a texture or a freeform polygon with special properties used in a custom vertex shader is completely up to the creator of the vertex object description and the associated shaders that use those properties.\n\n\u003e :rocket: In other words, this library wants to empower the developer's creativity by allowing him to quickly and easily create his own sprites, particles or whatever using instanced rendering and his own custom shaders, without having to study the documentation every time to understand the boring details of the WebGL API.  \n\nOf course, this library offers several ready-to-use sprite shaders (better known as `Mesh` in three.js) based on this. the developer can just use them and doesn't have to worry about how.\n\nThere are sprite shaders that render textured quads as billboards or on a plane in the 3d space. there is also a sprite shader that uses animated  textures (using frame-based animations). and there are other highly specialized sprite shaders that are used for rendering tiled 2d maps, among other things.\n\nObviously, textures can be loaded from _texture atlases_ or _tilesets_.\n\n\u003e ‼️ However, the developer should not expect an all-encompassing sprite engine, that is not the intention of this library, it rather wants to reduce and speed up the developer's workload to do what he wants to do (but without hiding the rendering API three.js).\n\n_There are a few more features that this library offers to make the life of a creative web developer easier, but not to take all the fun out of discovering them, let's just mention them here_ :wink:\n\n## What's in this repository 👀\n\n_twopoint5d_ is a monorepo that contains the following javascript / typescript libraries:\n\n- [@spearwolf/twopoint5d](packages/twopoint5d) : is the \"vanilla\" core library and relies on [three.js](https://threejs.org/) as a rendering framework\n\n- ~~[@spearwolf/twopoint5d-r3f](packages/twopoint5d-r3f) : builds on top of this and provides react components based on [@react-three/fiber](https://github.com/pmndrs/react-three-fiber/)~~\n- ~~In contrast, [@spearwolf/twopoint5d-elements](packages/twopoint5d-elements) goes the way of vanilla web components~~\n\n~~So it's up to you if you want to go the _react_, _web components_ or \"vanilla\" way :wink:~~\n\n| 🔎 ~~However, it should also be mentioned at this point that the _vanilla_ library is the only real and stable library here. both the react / r3f library and the _web components_ library are rather experimental in nature. in the end, i do not consider either technology to be optimal for a rendering engine.~~ currently (as a side note), i am working on a component architecture that works offscreen in web workers, for the brave among you who dare to take a look at it, here is the link: [spearwolf/shadow-objects](https://github.com/spearwolf/shadow-objects)\n\n\u003e [!NOTE]\n\u003e So, the react-three-fiber and custom web components libraries are out!\n\u003e The maintenance effort for these additional libraries is too high. I will now focus much more on the core features of the twopoint5d library.\n\n## 📖 Documentation\n\nSome features have been around for a long time and are stable, others are in flux and highly experimental. as an independent solo developer, it is not possible for me to create detailed written documentation and keep it up to date. this is a living open source project and is subject to constant change. therefore, the developer is advised to do the following\n\n\u003e _\"Read the source, Luke!\"_\n\nTo take this to the extreme, there is a LOOKBOOK app with lots of code examples, all of which can be used as a starting point for new projects or as documentation for one or the other feature.\n\n\u003e :rocket: The LOOKBOOK app can easily be started locally using `pnpm lookbook`. See next section [Development Setup](#development-setup) for details.\n\nAnd of course there are one or two READMEs in the `**/src/*` subdirectories that provide a high-level overview of the features. _Enjoy exploring!_\n\n\n## Development Setup\n\nThis repository is structured as a monorepo; based on [nx](https://nx.dev/) !\n\n### 1. Install dependencies\n\nFirst, you need a current [node v18+](https://nodejs.org/) with [PNpm as package manager](https://pnpm.io/) setup.\nInstall the dependencies with:\n\n```sh\n$ pnpm install\n```\n\n### 2. Build and test everything\n\n```sh\n$ pnpm cbt  # =\u003e pnpm run clean \u003e build \u003e test\n```\n\n### 3. Run the local LOOKBOOK app\n\n```sh\n$ pnpm lookbook\n```\n\n## Getting involved\n\nEveryone is welcome to contribute to this project, no matter if it's just bug-fixes, new features, ideas or documentation or graphics!\n\n\n## Copyright and License\n\nCopyright \u0026copy; 2021-2025 by [Wolfger Schramm](mailto:wolfger@spearwolf.de?subject=[GitHub]%20twopoint5d).\n\nThe source code is licensed under the [Apache-2.0 License](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspearwolf%2Ftwopoint5d","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspearwolf%2Ftwopoint5d","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspearwolf%2Ftwopoint5d/lists"}