{"id":19014417,"url":"https://github.com/vaneenige/three.phenomenon","last_synced_at":"2025-04-05T16:10:41.748Z","repository":{"id":46512246,"uuid":"168037910","full_name":"vaneenige/THREE.Phenomenon","owner":"vaneenige","description":"⭐️ A tiny wrapper around three.js built for high-performance WebGL experiences.","archived":false,"fork":false,"pushed_at":"2019-05-21T16:37:50.000Z","size":19,"stargazers_count":358,"open_issues_count":2,"forks_count":12,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-03-29T15:05:22.339Z","etag":null,"topics":["instances","particles","shader","threejs","webgl","wrapper"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/three.phenomenon","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/vaneenige.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}},"created_at":"2019-01-28T21:09:20.000Z","updated_at":"2025-03-26T10:10:03.000Z","dependencies_parsed_at":"2022-09-05T03:01:06.048Z","dependency_job_id":null,"html_url":"https://github.com/vaneenige/THREE.Phenomenon","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vaneenige%2FTHREE.Phenomenon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vaneenige%2FTHREE.Phenomenon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vaneenige%2FTHREE.Phenomenon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vaneenige%2FTHREE.Phenomenon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vaneenige","download_url":"https://codeload.github.com/vaneenige/THREE.Phenomenon/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247361695,"owners_count":20926643,"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":["instances","particles","shader","threejs","webgl","wrapper"],"created_at":"2024-11-08T19:29:24.954Z","updated_at":"2025-04-05T16:10:41.705Z","avatar_url":"https://github.com/vaneenige.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# THREE.Phenomenon\n\n[![npm version](https://img.shields.io/npm/v/three.phenomenon.svg)](https://www.npmjs.com/package/three.phenomenon)\n[![gzip size](http://img.badgesize.io/https://unpkg.com/three.phenomenon/dist/three.phenomenon.mjs?compression=gzip)](https://unpkg.com/three.phenomenon)\n[![license](https://img.shields.io/badge/license-MIT-green.svg)](https://github.com/vaneenige/three.phenomenon/blob/master/LICENSE)\n[![dependencies](https://img.shields.io/badge/dependencies-three.js-ff69b4.svg)](https://github.com/mrdoob/three.js/)\n[![TypeScript](https://img.shields.io/static/v1.svg?label=\u0026message=TypeScript\u0026color=294E80)](https://www.typescriptlang.org/)\n\nTHREE.Phenomenon is a tiny wrapper around \u003ca href=\"https://threejs.org/\"\u003ethree.js\u003c/a\u003e built for high-performance WebGL experiences.\n\nWith it's simple API a mesh can be created that contains multiple instances of a geometry combined with a material. With access to the vertex shader, attributes per instance and uniforms this mesh can be transformed in any way possible (and on the GPU).\n\n#### Features:\n- Below 1kb in size (gzip)\n- Custom instanced geometries\n- Attributes for every instance\n- Support for default materials\n- Compatible with three.js \u003ca href=\"https://github.com/mrdoob/three.js/releases/tag/r104\"\u003er104\u003c/a\u003e\n\n## Install\n```\n$ npm install --save three.phenomenon\n```\n\n## Usage\n```js\n// Import the library\nimport Phenomenon from 'three.phenomenon';\n\n// Create an instance\nPhenomenon({ ... });\n```\n\n\u003e The wrapper is also available through THREE.Phenomenon.\n\n## API\n### Phenomenon(options)\n\nReturns an instance of Phenomenon.\n\n\u003e The instance provides access to the mesh (with the compiled vertex and fragment shader) and uniforms.\n\n#### options.attributes\nType: `Array` \u003cbr/\u003e\n\nValues used in the program that are stored once, directly on the GPU. Every item in this array needs to have a:\n- `name` for referencing data in the vertex shader.\n- `data` function to create the data for each instance.\n- `size` so it's clear what comes back from the data.\n\n\u003e The data function receives the index of the current instance and the total number of instances so calculations can be done based on these values.\n\n#### options.uniforms\nType: `Object` \u003cbr/\u003e\n\nVariables used in the program that can be adjusted on the fly. These are accessible through the instance variable and can be updated directly.\n\n#### options.vertex\nType: `String` \u003cbr/\u003e\n\nThe vertex shader of the program which will calculate the position of every instance. This will automatically get merged with the shaders that's created based on the provided geometry.\n\n#### options.fragment\nType: `Array` \u003cbr/\u003e\n\nThe fragment parameter is optional and can be used to modify specific parts of the provided material's fragment shader. For example: Give every instance a unique color or manually use its position for calculations.\n\n#### options.geometry\nType: `THREE.Geometry` \u003cbr/\u003e\n\nThe geometry that will be multiplied. See \u003ca href=\"https://threejs.org/docs/#api/en/core/Geometry\"\u003eGeometry\u003c/a\u003e for more information.\n\n#### options.material\nType: `THREE.Material` \u003cbr/\u003e\n\nThe material that is used for the geometry. See \u003ca href=\"https://threejs.org/docs/#api/en/materials/Material\"\u003eMaterial\u003c/a\u003e for more information.\n\n#### options.multiplier\nType: `Number` \u003cbr/\u003e\nThe amount of instances that will be created.\n\n#### options.castShadow\nType: `Boolean` \u003cbr/\u003e\nShould the mesh cast a shadow?\n\n## Contribute\nAre you excited about this library and have interesting ideas on how to improve it? Please tell me or contribute directly!\n\n```\nnpm install \u003e npm start \u003e http://localhost:8080\n```\n\n## License\nMIT © \u003ca href=\"https://use-the-platform.com\"\u003eColin van Eenige\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvaneenige%2Fthree.phenomenon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvaneenige%2Fthree.phenomenon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvaneenige%2Fthree.phenomenon/lists"}