{"id":13626539,"url":"https://github.com/vaneenige/phenomenon","last_synced_at":"2025-05-14T15:06:10.912Z","repository":{"id":40558574,"uuid":"140527556","full_name":"vaneenige/phenomenon","owner":"vaneenige","description":"⚡️ A fast 2kB low-level WebGL API.","archived":false,"fork":false,"pushed_at":"2023-11-10T18:43:14.000Z","size":290,"stargazers_count":1808,"open_issues_count":2,"forks_count":43,"subscribers_count":32,"default_branch":"master","last_synced_at":"2025-05-12T10:45:11.428Z","etag":null,"topics":["gpu","low-level","particles","rendering","shaders","webgl"],"latest_commit_sha":null,"homepage":"","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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-07-11T05:49:34.000Z","updated_at":"2025-05-12T05:42:38.000Z","dependencies_parsed_at":"2024-01-15T20:47:00.833Z","dependency_job_id":"73eef584-fafa-4da6-bbc8-412bff7175a1","html_url":"https://github.com/vaneenige/phenomenon","commit_stats":{"total_commits":42,"total_committers":4,"mean_commits":10.5,"dds":"0.11904761904761907","last_synced_commit":"3cc0ce8908394768f2e9aa07a3afdffcf71d2326"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vaneenige%2Fphenomenon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vaneenige%2Fphenomenon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vaneenige%2Fphenomenon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vaneenige%2Fphenomenon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vaneenige","download_url":"https://codeload.github.com/vaneenige/phenomenon/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253961111,"owners_count":21990975,"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":["gpu","low-level","particles","rendering","shaders","webgl"],"created_at":"2024-08-01T21:02:22.624Z","updated_at":"2025-05-14T15:06:10.885Z","avatar_url":"https://github.com/vaneenige.png","language":"TypeScript","funding_links":[],"categories":["JavaScript","TypeScript","Graphics","📦 Legacy \u0026 Inactive Projects","Uncategorized","Libraries"],"sub_categories":["Uncategorized","Compute (GPGPU)"],"readme":"\n# Phenomenon\n\n[![npm version](https://img.shields.io/npm/v/phenomenon.svg)](https://www.npmjs.com/package/phenomenon)\n[![travis build](https://img.shields.io/travis/vaneenige/phenomenon.svg)](https://travis-ci.org/vaneenige/phenomenon)\n[![gzip size](http://img.badgesize.io/https://unpkg.com/phenomenon/dist/phenomenon.umd.js?compression=gzip)](https://unpkg.com/phenomenon)\n[![license](https://img.shields.io/npm/l/phenomenon.svg)](https://github.com/vaneenige/phenomenon/blob/master/LICENSE)\n[![dependencies](https://img.shields.io/badge/dependencies-none-ff69b4.svg)](https://github.com/vaneenige/phenomenon/blob/master/package.json)\n[![TypeScript](https://img.shields.io/static/v1.svg?label=\u0026message=TypeScript\u0026color=294E80)](https://www.typescriptlang.org/)\n\nPhenomenon is a very small, low-level WebGL library that provides the essentials to deliver a high performance experience. Its core functionality is built around the idea of moving *millions of particles* around using the power of the GPU.\n\n#### Features:\n\n- Small in size, no dependencies\n- GPU based for high performance\n- Low-level \u0026 highly configurable\n- Helper functions with options\n- Add \u0026 destroy instances dynamically\n- Dynamic attribute switching\n\n*Want to see some magic right away? Have a look \u003ca href=\"https://codepen.io/collection/AOpMrm/\"\u003ehere\u003c/a\u003e!*\n\n## Install\n\n```\n$ npm install --save phenomenon\n```\n\n## Usage\n\n```js\n// Import the library\nimport Phenomenon from 'phenomenon';\n\n// Create a renderer\nconst phenomenon = new Phenomenon(options);\n\n// Add an instance\nphenomenon.add(\"particles\", options);\n```\n\n\u003e For a better understanding of how to use the library, read along or have a look at the demo!\n\n## API\n\n### Phenomenon(options)\n\nReturns an instance of Phenomenon.\n\n\u003e Throughout this documentation we'll refer to an instance of this as `renderer`.\n\n#### options.canvas\nType: `HTMLElement` \u003cbr/\u003e\nDefault: `document.querySelector('canvas')` \u003cbr/\u003e\n\nThe element where the scene, with all of its instances, will be rendered to. The provided element has to be `\u003ccanvas\u003e` otherwise it won't work.\n\n#### options.context\nType: `Object`\u003cbr/\u003e\nDefault: `{}`\u003cbr/\u003e\n\nOverrides that are used when getting the WebGL context from the canvas. The library overrides two settings by default.\n\n| Name      | Default | Description                                                                                                                             |\n| --------- | --------| --------------------------------------------------------------------------------------------------------------------------------------- |\n| Alpha     | `false` | Setting this property to `true` will result in the canvas having a transparent background. By default clearColor is used instead.   |\n| Antialias | `false` | Setting this property to `true` will make the edges sharper, but could negatively impact performance. See for yourself if it's worth it! |\n\n\u003e Read more about all the possible overrides on \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext\"\u003eMDN\u003c/a\u003e.\n\n#### options.contextType\nType: `String` \u003cbr/\u003e\nDefault: `webgl`\n\nThe context identifier defining the drawing context associated to the canvas. For WebGL 2.0 use `webgl2`.\n\n#### options.settings\nType: `Object`\u003cbr/\u003e\nDefault: `{}`\u003cbr/\u003e\n\nOverrides that can be used to alter the behaviour of the experience.\n\n| Name                                     | Value      | Default         | Description                                                                 |\n| ---------------------------------------- | ---------- | --------------- | --------------------------------------------------------------------------- |\n| devicePixelRatio                         | `number`   | `1`             | The resolution multiplier by which the scene is rendered relative to the canvas' resolution. Use `window.devicePixelRatio` for the highest possible quality, `1` for the best performance. |\n| clearColor                               | `array`    | `[1,1,1,1]`     | The color in `rgba` that is used as the background of the scene. |\n| clip                                     | `array`    | `[0.001, 100]`  | The near and far clip plane in 3D space. |\n| position                                 | `number`   | `{x:0,y:0,z:2}` | The distance in 3D space between the center of the scene and the camera. |\n| shouldRender                             | `boolean`  | `true`          | A boolean indicating whether the scene should start rendering automatically. |\n| uniforms                                 | `object`   | `{}`            | Shared values between all instances that can be updated at any given moment. By default this feature is used to render all the instances with the same `uProjectionMatrix`, `uModelMatrix` and `uViewMatrix`. It's also useful for moving everything around with the same progress value; `uProgress`. |\n| onSetup(gl)                              | `function` | `undefined`     | A setup hook that is called before first render which can be used for gl context changes. |\n| onRender(renderer)                       | `function` | `undefined`     | A render hook that is invoked after every rendered frame. Use this to update `renderer.uniforms`. |\n| debug                                    | `boolean`  | `false`         | Whether or not the console should log shader compilation warnings. |\n\n\n### .resize()\n\nUpdate all values that are based on the dimensions of the canvas to make it look good on all screen sizes.\n\n### .toggle(shouldRender)\n\nToggle the rendering state of the scene. When shouldRender is false `requestAnimationFrame` is disabled so no resources are used.\n\n#### shouldRender\nType: `Boolean` \u003cbr/\u003e\nDefault: `undefined` \u003cbr/\u003e\n\nAn optional boolean to set the rendering state to a specific value. Leaving this value empty will result in a regular boolean switch.\n\n### .add(key, settings)\n\nThis function is used to add instances to the renderer. These instances can be as *simple* or *complex* as you'd like them to be. There's no limit to how many of these you can add. Make sure they all have a different key!\n\n#### key\nType: `String`\u003cbr/\u003e\nDefault: `undefined`\u003cbr/\u003e\n\nEvery instance should have a unique name. This name can also be used to destroy the instance specifically later.\n\n#### settings\nType: `Object`\u003cbr/\u003e\nDefault: `{}`\u003cbr/\u003e\n\nAn object containing overrides for parameters that are used when getting the WebGL context from the canvas.\n\n| Name        | Value      | Default      | Description                                                                 |\n| ----------- | ---------- | ------------ | --------------------------------------------------------------------------- |\n| attributes  | `array`    | `[]`         | Values used in the program that are stored once, directly on the GPU.       |\n| uniforms    | `object`   | `{}`         | Values used in the program that can be updated on the fly.                  |\n| vertex      | `string`   | -            | The vertex shader is used to position the geometry in 3D space.             |\n| fragment    | `string`   | -            | The fragment shader is used to provide the geometry with color or texture.  |\n| multiplier  | `number`   | `1`          | The amount of duplicates that will be created for the same instance.        |\n| mode        | `number`   | `0`          | The way the instance will be rendered. Particles = 0, triangles = 4.        |\n| geometry    | `object`   | `{}`         | Vertices (and optional normals) of a model.                                 |\n| modifiers   | `object`   | `{}`         | Modifiers to alter the attributes data on initialize.                       |\n| onRender    | `function` | `undefined`  | A render hook that is invoked after every rendered frame.                   |\n\n\u003e Note: Less instances with a higher multiplier will be faster than more instances with a lower multiplier!\n\n### .remove(key)\n\nRemove an instance from the scene (and from memory) by its key.\n\n### .destroy()\n\nRemove all instances and the renderer itself. The canvas element will remain in the DOM.\n\n### .prepareAttribute(attribute)\n\nDynamically override an attribute with the same logic that is used during initial creation of the instance. The function requires an object with a name, size and data attribute.\n\n\u003e Note: The calculation of the data function is done on the CPU. Be sure to check for dropped frames with a lot of particles.\n\nAttributes can also be switched. In the demo this is used to continue with a new start position identical to the end position. This can be achieved with `.prepareBuffer(attribute)` in which the data function is replaced with the final array.\n\n## Examples\n\n1. \u003ca href=\"https://codepen.io/cvaneenige/full/odpVPW\"\u003eParticles\u003c/a\u003e\n2. \u003ca href=\"https://codepen.io/cvaneenige/full/GdGpaN\"\u003eTypes\u003c/a\u003e\n3. \u003ca href=\"https://codepen.io/cvaneenige/full/Lmrzmd\"\u003eTransition\u003c/a\u003e\n4. \u003ca href=\"https://codepen.io/cvaneenige/full/zjaydg\"\u003eEasing\u003c/a\u003e\n5. \u003ca href=\"https://codepen.io/cvaneenige/full/wjXVgr\"\u003eShapes\u003c/a\u003e\n6. \u003ca href=\"https://codepen.io/cvaneenige/full/MGBZpB\"\u003eInstances\u003c/a\u003e\n7. \u003ca href=\"https://codepen.io/cvaneenige/full/LmXWeM\"\u003eMovement\u003c/a\u003e\n8. \u003ca href=\"https://codepen.io/cvaneenige/full/QBwbEY\"\u003eParticle cube\u003c/a\u003e\n9. \u003ca href=\"https://codepen.io/cvaneenige/full/ajNjaN\"\u003eDynamic intances\u003c/a\u003e\n\n## Contribute\n\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\n\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%2Fphenomenon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvaneenige%2Fphenomenon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvaneenige%2Fphenomenon/lists"}