{"id":13523114,"url":"https://github.com/polygonjs/polygonjs","last_synced_at":"2025-05-14T14:08:55.667Z","repository":{"id":37406330,"uuid":"230947317","full_name":"polygonjs/polygonjs","owner":"polygonjs","description":"node-based WebGL design tool","archived":false,"fork":false,"pushed_at":"2025-02-19T15:22:56.000Z","size":147300,"stargazers_count":702,"open_issues_count":10,"forks_count":58,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-05-13T18:58:26.950Z","etag":null,"topics":["3d","3d-engine","animation","computer-graphics","creative-coding","geometry-processing","glsl","javascript","nocode","node-based","procedural","procedural-generation","rendering","tech-art","threejs","visual-programming","webgl","webgl-library"],"latest_commit_sha":null,"homepage":"https://polygonjs.com","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/polygonjs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2019-12-30T16:33:29.000Z","updated_at":"2025-05-11T02:47:13.000Z","dependencies_parsed_at":"2025-03-22T22:12:25.255Z","dependency_job_id":null,"html_url":"https://github.com/polygonjs/polygonjs","commit_stats":{"total_commits":2663,"total_committers":4,"mean_commits":665.75,"dds":0.01840030041306795,"last_synced_commit":"4260474f58715fab90a5a6c171cc86ee883b924e"},"previous_names":["polygonjs/polygonjs-engine"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polygonjs%2Fpolygonjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polygonjs%2Fpolygonjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polygonjs%2Fpolygonjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polygonjs%2Fpolygonjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/polygonjs","download_url":"https://codeload.github.com/polygonjs/polygonjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254020892,"owners_count":22000804,"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":["3d","3d-engine","animation","computer-graphics","creative-coding","geometry-processing","glsl","javascript","nocode","node-based","procedural","procedural-generation","rendering","tech-art","threejs","visual-programming","webgl","webgl-library"],"created_at":"2024-08-01T06:00:55.616Z","updated_at":"2025-05-14T14:08:50.658Z","avatar_url":"https://github.com/polygonjs.png","language":"TypeScript","readme":"# Polygonjs\n\n[![NPM package][npm]][npm-url]\n[![Twitter][twitter-img]][twitter-url]\n[![Discord][discord-img]][discord-url]\n[![Forum][forum-img]][forum-url]\n\nPolygonjs is a node-based **3D WebGL design tool**.\n\n--- [Home Page](https://polygonjs.com/) --- [Documentation](https://polygonjs.com/docs) --- [Try Demo](https://polygonjs.com/demo) ---\n\nPolygonjs helps creating 3D interactives experiences for the web, **without having to code**.\n\nA 3D scene is built by creating and connecting nodes. This gives you a non-destructive worflow, where you can try different ideas quickly, without fearing of breaking anything.\n\nPolygonjs is also **designed to be extended**. This means that if it does not have a feature you need, you can add it, either by using its API, or by reading in this repository how the existing nodes are implemented and using that as a starting point.\n\nThe editor can be used both from the web or locally. The web version is convenient to discover the editor, but the local version is recommended for production, since it has the following advantages:\n\n-   quick access to models and textures on your computer\n-   tree shaked exports: It exports only the nodes you use.\n-   git integration: Every files is saved as text, either json or javascript.\n-   version tracking: It is an npm module, and has its version in package.json just like other dependencies\n-   integration to any web project (such as threejs, vuejs, react, vanilla)\n\n![Inside Polygonjs node-based Editor](https://raw.githubusercontent.com/polygonjs/polygonjs-assets/master/demo/media/demo.003.jpg?v=1)\n\n## Start a project:\n\nThe easiest way to start a project is by using the cli tool:\n\n`npm create polygonjs@latest`\n\nor\n\n`yarn create polygonjs`\n\nYou'll then be able to choose one of the templates for vanilla js, threejs, vuejs, react or react-three-fiber.\n\n## Add to an existing project:\n\nIf you already have an npm project, you can easily add it with:\n\n`npm add polygonjs-editor`\n\nor\n\n`yarn add polygonjs-editor`\n\nAnd you can then start the editor with:\n\n`npm run polygonjs-editor`\n\nor\n\n`yarn polygonjs-editor`\n\n## Node-based\n\nThe nodes are grouped in contexts, each for a specific type of task:\n\n-   [ANIM](https://polygonjs.com/docs/nodes/anim) nodes create animations.\n-   [AUDIO](https://polygonjs.com/docs/nodes/audio) nodes generate and modify audio.\n-   [COP](https://polygonjs.com/docs/nodes/cop) nodes import and update textures.\n-   [EVENT](https://polygonjs.com/docs/nodes/event) nodes trigger or react to scene events.\n-   [GL](https://polygonjs.com/docs/nodes/gl) nodes create GLSL shaders.\n-   [JS](https://polygonjs.com/docs/nodes/js) nodes add state \u0026 events to scene objects.\n-   [MAT](https://polygonjs.com/docs/nodes/mat) nodes create materials.\n-   [OBJ](https://polygonjs.com/docs/nodes/obj) nodes add objects to your scene.\n-   [POST](https://polygonjs.com/docs/nodes/post) nodes set up post processing.\n-   [ROP](https://polygonjs.com/docs/nodes/rop) nodes set up the renderers.\n-   [SOP](https://polygonjs.com/docs/nodes/sop) nodes handle procedural modelling.\n\n## Plugins\n\nPolygonjs is designed to be extensible. You can create your own plugins to add custom nodes. There are currently 4 official plugins:\n\n-   [Mapbox](https://github.com/polygonjs/polygonjs-plugin-mapbox) to add 3D objects to Mapbox maps.\n-   [Occlusion](https://github.com/polygonjs/polygonjs-plugin-occlusion) to calculate occlusion on a geometry and get more pleasant lighting.\n-   [Mediapipe Facemesh](https://github.com/polygonjs/polygonjs-plugin-mediapipe-facemesh) to track a face from a webcam feed\n-   [Physics](https://github.com/polygonjs/polygonjs-plugin-physics) to create and simulate rigid bodies.\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/polygonjs/plugin-mapbox\" target=\"_blank\"\u003e\u003cimg width=\"256\" src=\"https://raw.githubusercontent.com/polygonjs/example-plugin-mapbox/main/doc/mapbox_examples.256.jpg\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/polygonjs/plugin-occlusion\" target=\"_blank\"\u003e\u003cimg width=\"256\" src=\"https://raw.githubusercontent.com/polygonjs/example-plugin-occlusion/main/doc/occlusion_examples.256.jpg\" /\u003e\u003c/a\u003e\n\u003c/div\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/polygonjs/plugin-mediapipe-facemesh\" target=\"_blank\"\u003e\u003cimg width=\"256\" src=\"https://github.com/polygonjs/example-plugin-mediapipe_facemesh/blob/main/public/images/metal.jpg?raw=true\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/polygonjs/plugin-physics\" target=\"_blank\"\u003e\u003cimg width=\"256\" src=\"https://raw.githubusercontent.com/polygonjs/example-plugin-physics/main/doc/physics_examples.256.jpg\" /\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n[npm]: https://img.shields.io/npm/v/@polygonjs/polygonjs.svg\n[npm-url]: https://www.npmjs.com/package/@polygonjs/polygonjs\n[lgtm]: https://img.shields.io/lgtm/grade/javascript/g/polygonjs/polygonjs.svg?label=code%20quality\n[lgtm-url]: https://lgtm.com/projects/g/polygonjs/polygonjs/\n[twitter-img]: https://img.shields.io/twitter/follow/polygonjs.svg?style=social\u0026label=Follow\n[twitter-url]: https://twitter.com/polygonjs\n[discord-img]: https://img.shields.io/discord/957773366419406888\n[discord-url]: https://polygonjs.com/discord\n[forum-img]: https://img.shields.io/discourse/status?server=https%3A%2F%2Fforum.polygonjs.com\n[forum-url]: https://polygonjs.com/forum\n\n## Based on Threejs\n\nPolygonjs is based on the powerful webgl library [Threejs](https://threejs.org/). While Polygonjs offers many nodes for many different types of 3D scenes, there are times where you may want to dig deeper and update the scenes in specific ways.\n\nFor this, you can directly access the threejs objects. There are 2 ways to do so:\n\n-   **From the scene**\n\n```javascript\nconst scene = new PolyScene(); // this is the polygonjs scene\nconst threejsScene = scene.threejsScene(); // and it contains the threejs scene\n```\n\n-   **From any node**\n\n```javascript\nconst scene = new PolyScene();\nconst rootNode = scene.root();\nconst geo = rootNode.createNode('geo');\nconst plane = geo.createNode('plane');\n\n// now let's get the content of the plane node\nconst container = await plane.compute();\n// the container is an envelope that contains a coreGroup\nconst coreGroup = container.coreContent();\n// and we can now get an array of THREE.Object3D:\nconst objects = coreGroup.threejsObjects();\n// and we can use threejs API:\nconst object = objects[0];\nobject.position.set(0, 1, 0);\nobject.updateMatrix();\n```\n","funding_links":[],"categories":["Applications"],"sub_categories":["3D \u0026 Visuals"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolygonjs%2Fpolygonjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpolygonjs%2Fpolygonjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolygonjs%2Fpolygonjs/lists"}