{"id":13837643,"url":"https://github.com/mattdesl/webgl-wireframes","last_synced_at":"2025-04-05T10:09:14.864Z","repository":{"id":45809604,"uuid":"101211864","full_name":"mattdesl/webgl-wireframes","owner":"mattdesl","description":"Stylized Wireframe Rendering in WebGL","archived":false,"fork":false,"pushed_at":"2017-09-27T18:58:54.000Z","size":2910,"stargazers_count":732,"open_issues_count":3,"forks_count":54,"subscribers_count":17,"default_branch":"gh-pages","last_synced_at":"2025-03-29T07:50:38.877Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://mattdesl.github.io/webgl-wireframes/app/","language":"JavaScript","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/mattdesl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-08-23T18:20:32.000Z","updated_at":"2025-03-12T15:45:00.000Z","dependencies_parsed_at":"2022-09-16T07:51:28.566Z","dependency_job_id":null,"html_url":"https://github.com/mattdesl/webgl-wireframes","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattdesl%2Fwebgl-wireframes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattdesl%2Fwebgl-wireframes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattdesl%2Fwebgl-wireframes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattdesl%2Fwebgl-wireframes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mattdesl","download_url":"https://codeload.github.com/mattdesl/webgl-wireframes/tar.gz/refs/heads/gh-pages","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247318745,"owners_count":20919484,"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":[],"created_at":"2024-08-04T15:01:18.358Z","updated_at":"2025-04-05T10:09:14.847Z","avatar_url":"https://github.com/mattdesl.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# webgl-wireframes\n\n![banner](./screenshots/banner.jpg)\n\nThis is the code for a November 2017 net magazine tutorial, _Stylized Wireframe Rendering in WebGL_. Check out the article (when it's released) for more details.\n\n## Stylized Wireframe Rendering in WebGL\n\nThe code here uses barycentric coordinates to create stylized wireframes in ThreeJS and WebGL. Some features of the code and its shaders include:\n\n- Alpha to Coverage for crisp alpha cutouts and depth testing with Multisample Anti-Aliasing\n- Thick and anti-aliased single-pass wireframe rendering\n- Basic support for animated line dashes\n- Inner edge removal to render quads instead of triangles\n- A few other effects, such as noise, tapered lines, dual strokes and backface coloring\n\n## Demo\n\nClick [here](https://mattdesl.github.io/webgl-wireframes/app/) to see a live demo.\n\n[\u003cimg src=\"./screenshots/screenshot.png\" width=\"75%\" /\u003e](https://mattdesl.github.io/webgl-wireframes/app/)\n\n## Usage\n\nTo build \u0026 run this project locally, first clone the repository, then use npm to install and run it:\n\n```sh\nnpm install\nnpm start\n```\n\nNow open `localhost:9966` to see it in your browser.\n\nTo build:\n\n```sh\nnpm run build\n```\n\n## Further Reading\n\nThe technique here is just one approach to wireframe rendering. You may find these other articles interesting:\n\n- [Easy Wireframes with barycentric coordinates – Florian Bösch](http://codeflow.org/entries/2012/aug/02/easy-wireframe-display-with-barycentric-coordinates/)\n- [Two Methods for Antialiased Wireframe Drawing with Hidden Line Removal](http://dl.acm.org/citation.cfm?id=1921300)\n- [glsl-solid-wireframe – drawing wireframes and grids in a fragment shader by Ricky Reusser](https://github.com/rreusser/glsl-solid-wireframe)\n- [Drawing Lines is Hard](https://mattdesl.svbtle.com/drawing-lines-is-hard)\n\n## License\n\nMIT, see [LICENSE.md](http://github.com/mattdesl/webgl-wireframes/blob/master/LICENSE.md) for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmattdesl%2Fwebgl-wireframes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmattdesl%2Fwebgl-wireframes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmattdesl%2Fwebgl-wireframes/lists"}