{"id":13426199,"url":"https://github.com/metafizzy/zdog","last_synced_at":"2025-05-12T13:20:53.639Z","repository":{"id":41478912,"uuid":"174164624","full_name":"metafizzy/zdog","owner":"metafizzy","description":"Flat, round, designer-friendly pseudo-3D engine for canvas \u0026 SVG","archived":false,"fork":false,"pushed_at":"2023-07-18T21:43:53.000Z","size":659,"stargazers_count":10476,"open_issues_count":54,"forks_count":399,"subscribers_count":103,"default_branch":"master","last_synced_at":"2025-04-23T16:00:46.601Z","etag":null,"topics":["3d","canvas","svg"],"latest_commit_sha":null,"homepage":"https://zzz.dog","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/metafizzy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/contributing.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2019-03-06T14:52:39.000Z","updated_at":"2025-04-23T15:02:02.000Z","dependencies_parsed_at":"2022-08-10T02:27:28.721Z","dependency_job_id":"3554e0ca-d7bc-4427-8b80-46acd7a8d0c8","html_url":"https://github.com/metafizzy/zdog","commit_stats":{"total_commits":318,"total_committers":5,"mean_commits":63.6,"dds":0.01572327044025157,"last_synced_commit":"dde8684be686bc6d3cbedb6be49875c0a03a14c0"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metafizzy%2Fzdog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metafizzy%2Fzdog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metafizzy%2Fzdog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metafizzy%2Fzdog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/metafizzy","download_url":"https://codeload.github.com/metafizzy/zdog/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253745197,"owners_count":21957320,"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","canvas","svg"],"created_at":"2024-07-31T00:01:28.762Z","updated_at":"2025-05-12T13:20:53.596Z","avatar_url":"https://github.com/metafizzy.png","language":"JavaScript","readme":"# Zdog\n\n_Round, flat, designer-friendly pseudo-3D engine_\n\nView complete documentation and live demos at [zzz.dog](https://zzz.dog).\n\n## Install\n\n### Download\n\n+ [zdog.dist.min.js](https://unpkg.com/zdog@1/dist/zdog.dist.min.js) minified, or\n+ [zdog.dist.js](https://unpkg.com/zdog@1/dist/zdog.dist.js) un-minified\n\n### CDN\n\nLink directly to Zdog JS on [unpkg](https://unpkg.com).\n\n``` html\n\u003cscript src=\"https://unpkg.com/zdog@1/dist/zdog.dist.min.js\"\u003e\u003c/script\u003e\n```\n\n### Package managers\n\nnpm: `npm install zdog`\n\nBower: `bower install zdog`\n\n## Hello world demo\n\nCreate 3D models with Zdog by adding shapes. See [Getting started](https://zzz.dog/getting-started) for a walk-through of this demo.\n\n``` js\nlet isSpinning = true;\n\nlet illo = new Zdog.Illustration({\n  element: '.zdog-canvas',\n  zoom: 4,\n  dragRotate: true,\n  // stop spinning when drag starts\n  onDragStart: function() {\n    isSpinning = false;\n  },\n});\n\n// circle\nnew Zdog.Ellipse({\n  addTo: illo,\n  diameter: 20,\n  translate: { z: 10 },\n  stroke: 5,\n  color: '#636',\n});\n\n// square\nnew Zdog.Rect({\n  addTo: illo,\n  width: 20,\n  height: 20,\n  translate: { z: -10 },\n  stroke: 3,\n  color: '#E62',\n  fill: true,\n});\n\nfunction animate() {\n  illo.rotate.y += isSpinning ? 0.03 : 0;\n  illo.updateRenderGraph();\n  requestAnimationFrame( animate );\n}\nanimate();\n```\n\n## About Zdog\n\nHi, [Dave here](https://desandro.com). I wanted to make a video game. I needed a 3D engine, but most engines were too powerful and complex for me. I made Zdog so I could design and display simple 3D models without a lot of overhead.\n\nZdog is directly inspired by [Dogz](https://en.wikipedia.org/wiki/Petz), a virtual pet game by P.F. Magic released in 1995. It used flat 2D circle sprites to render the Dogz’ models, but in a 3D scene. [See Dogz playthrough video here.](https://www.youtube.com/watch?v=6lKSn_cHw5k) Dogz were fully animated in real time, running, flopping, scratching (on Windows 3.1!). It was remarkable.\n\nZdog uses the same principle. It renders all shapes using the 2D drawing APIs in either `\u003ccanvas\u003e` or `\u003csvg\u003e`. Spheres are actually dots. Toruses are actually circles. Capsules are actually thick lines. It’s a simple, but effective trick. The underlying 3D math comes from [Rotating 3D Shapes](https://www.khanacademy.org/computing/computer-programming/programming-games-visualizations/programming-3d-shapes/a/rotating-3d-shapes) by [Peter Collingridge](https://petercollingridge.appspot.com/3D-tutorial/rotating-objects).\n\nZdog is pronounced \"Zee-dog\" in American parlance or \"Zed-dog\" in British.\n\n### Beta!\n\nZdog v1 is a beta-release, of sorts. This is my first time creating a 3D engine, so I probably got some stuff wrong. Expect lots of changes for v2. Provide input and select new features on the [Zdog issue tracker on GitHub](https://github.com/metafizzy/zdog/issues).\n\n### More Zdog resources\n\nOther people's stuff:\n\n+ [Zfont](https://jaames.github.io/zfont/) - Text plugin for Zdog\n+ [vue-zdog](https://github.com/AlexandreBonaventure/vue-zdog) - Vue wrapper for Zdog\n+ [zDogPy](https://github.com/gferreira/zdogpy) - Python port of Zdog for DrawBot\n+ [Made with Zdog CodePen Collection](https://codepen.io/collection/DzdGMe/)\n+ [Made with Zdog on Twitter](https://twitter.com/i/moments/1135000612356206592)\n\nMy stuff:\n\n+ [Zdog demos on CodePen](https://github.com/metafizzy/zdog-demos), source code at [zdog-demos](https://github.com/metafizzy/zdog-demos)\n+ [zdog-docs](https://github.com/metafizzy/zdog-docs) - Docs site source code\n\n---\n\nLicensed MIT. Made by Metafizzy 🌈🐻\n","funding_links":[],"categories":["JavaScript","Libraries","Front End Development","HTML / CSS / SVG","Programming Languages","Frontend","Css \u0026\u0026 动画","Engines"],"sub_categories":["3D libraries","JavaScript","To draw using canvas"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetafizzy%2Fzdog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmetafizzy%2Fzdog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetafizzy%2Fzdog/lists"}