{"id":46092845,"url":"https://github.com/daidr/minecraft-skin-renderer","last_synced_at":"2026-03-01T18:04:55.078Z","repository":{"id":336114714,"uuid":"1148274898","full_name":"daidr/minecraft-skin-renderer","owner":"daidr","description":"A zero-dependency Minecraft skin renderer with WebGL and WebGPU support","archived":false,"fork":false,"pushed_at":"2026-02-27T17:37:38.000Z","size":4088,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-02-27T21:39:28.932Z","etag":null,"topics":["cape","minecraft","minecraft-skin","skin","webgl","webgpu"],"latest_commit_sha":null,"homepage":"https://mcskin.daidr.me","language":"TypeScript","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/daidr.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":null,"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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"buy_me_a_coffee":"daidr","github":"daidr","patreon":"daidr","issuehunt":"daidr","custom":["https://afdian.com/a/daidr"]}},"created_at":"2026-02-02T19:24:50.000Z","updated_at":"2026-02-27T17:37:32.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/daidr/minecraft-skin-renderer","commit_stats":null,"previous_names":["daidr/minecraft-skin-renderer"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/daidr/minecraft-skin-renderer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daidr%2Fminecraft-skin-renderer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daidr%2Fminecraft-skin-renderer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daidr%2Fminecraft-skin-renderer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daidr%2Fminecraft-skin-renderer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/daidr","download_url":"https://codeload.github.com/daidr/minecraft-skin-renderer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daidr%2Fminecraft-skin-renderer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29977971,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-01T16:35:47.903Z","status":"ssl_error","status_checked_at":"2026-03-01T16:35:44.899Z","response_time":124,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["cape","minecraft","minecraft-skin","skin","webgl","webgpu"],"created_at":"2026-03-01T18:04:54.575Z","updated_at":"2026-03-01T18:04:55.071Z","avatar_url":"https://github.com/daidr.png","language":"TypeScript","funding_links":["https://buymeacoffee.com/daidr","https://github.com/sponsors/daidr","https://patreon.com/daidr","https://issuehunt.io/r/daidr","https://afdian.com/a/daidr"],"categories":[],"sub_categories":[],"readme":"# minecraft-skin-renderer\n\n[![npm version](https://img.shields.io/npm/v/@daidr/minecraft-skin-renderer.svg)](https://www.npmjs.com/package/@daidr/minecraft-skin-renderer)\n[![JSR](https://jsr.io/badges/@daidr/minecraft-skin-renderer)](https://jsr.io/@daidr/minecraft-skin-renderer)\n[![JSR Score](https://jsr.io/badges/@daidr/minecraft-skin-renderer/score)](https://jsr.io/@daidr/minecraft-skin-renderer)\n[![GitHub Packages](https://img.shields.io/badge/GitHub%20Packages-available-blue?logo=github)](https://github.com/daidr/minecraft-skin-renderer/pkgs/npm/minecraft-skin-renderer)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\nA high-performance, browser-based 3D Minecraft skin renderer with WebGL and WebGPU support.\n\n[Online Documentation](https://mcskin.daidr.me)\n\n[Online Demo](https://mcskin.daidr.me/playground/)\n\n## Features\n\n- **Dual Rendering Backends** - WebGL2 for broad compatibility, WebGPU for modern performance\n- **Skin Variants** - Classic (4px arms) and slim (3px arms) model support\n- **Back Equipment** - Cape and elytra rendering\n- **Animations** - Built-in presets (idle, walk, run, fly) with custom animation support\n- **Camera Controls** - Orbit controls with zoom, rotation, and auto-rotate\n- **Panorama Backgrounds** - Equirectangular panorama support via plugin\n- **2D Static Rendering** - Lightweight Canvas 2D renders (avatar, full body, isometric, big head)\n- **Screenshot Export** - Export renders as PNG or JPEG\n- **Tree-Shakable** - Plugin architecture for minimal bundle size\n\n## Quick Start\n\n### Installation\n\n```bash\n# npm\nnpm install minecraft-skin-renderer\n\n# pnpm\npnpm add minecraft-skin-renderer\n\n# yarn\nyarn add minecraft-skin-renderer\n\n# bun\nbun add minecraft-skin-renderer\n```\n\n### Basic Usage\n\n```typescript\nimport { use, createSkinViewer } from \"minecraft-skin-renderer\";\nimport { WebGLRendererPlugin } from \"minecraft-skin-renderer/webgl\";\n\n// Register renderer plugin (required before creating viewer)\nuse(WebGLRendererPlugin);\n\n// Create viewer\nconst viewer = await createSkinViewer({\n  canvas: document.getElementById(\"canvas\") as HTMLCanvasElement,\n  skin: \"https://example.com/skin.png\",\n});\n\n// Start rendering\nviewer.startRenderLoop();\n\n// Play animation\nviewer.playAnimation(\"walk\");\n```\n\n## API Reference\n\n### `use(plugin)`\n\nRegister a renderer or feature plugin. Must be called before `createSkinViewer()`.\n\n```typescript\nimport { use } from \"minecraft-skin-renderer\";\nimport { WebGLRendererPlugin } from \"minecraft-skin-renderer/webgl\";\nimport { WebGPURendererPlugin } from \"minecraft-skin-renderer/webgpu\";\nimport { PanoramaPlugin } from \"minecraft-skin-renderer/panorama\";\n\nuse(WebGLRendererPlugin);\nuse(WebGPURendererPlugin);\nuse(PanoramaPlugin);\n```\n\n### `createSkinViewer(options)`\n\nCreate and initialize a skin viewer instance.\n\n```typescript\nconst viewer = await createSkinViewer({\n  canvas: HTMLCanvasElement, // Required: canvas element\n  preferredBackend: \"auto\", // 'webgl' | 'webgpu' | 'auto'\n  antialias: true, // Enable antialiasing\n  pixelRatio: window.devicePixelRatio,\n  skin: \"url\" | File | Blob, // Skin texture source\n  cape: \"url\" | File | Blob, // Cape texture (64x32)\n  backEquipment: \"none\", // 'cape' | 'elytra' | 'none'\n  slim: false, // Use slim model variant\n  fov: 70, // Field of view in degrees\n  zoom: 60, // Initial zoom distance\n  enableRotate: true, // Enable orbit rotation\n  enableZoom: true, // Enable zoom controls\n  autoRotate: false, // Auto-rotate camera\n  autoRotateSpeed: 30, // Degrees per second\n  panorama: \"url\", // Panorama background (requires PanoramaPlugin)\n});\n```\n\n### SkinViewer Methods\n\n#### Textures\n\n```typescript\nawait viewer.setSkin(source); // Set skin texture\nawait viewer.setCape(source); // Set cape texture\nviewer.setSlim(true); // Switch to slim model\nviewer.setBackEquipment(\"cape\"); // 'cape' | 'elytra' | 'none'\n```\n\n#### Visibility\n\n```typescript\n// Get current visibility state\nconst visibility = viewer.getPartsVisibility();\n\n// Set visibility for all parts\nviewer.setPartsVisibility({\n  head: { inner: true, outer: true },\n  body: { inner: true, outer: false },\n  // ...\n});\n\n// Set single part visibility\nviewer.setPartVisibility(\"head\", \"outer\", false);\n```\n\n#### Animation\n\n```typescript\nviewer.playAnimation(\"walk\"); // Play animation\nviewer.playAnimation(\"walk\", {\n  // With options\n  speed: 1.5,\n  amplitude: 1.0,\n});\nviewer.pauseAnimation(); // Pause\nviewer.resumeAnimation(); // Resume\nviewer.stopAnimation(); // Stop\n```\n\n#### Camera\n\n```typescript\nviewer.setRotation(theta, phi); // Set camera angles\nconst { theta, phi } = viewer.getRotation();\nviewer.setZoom(80); // Set zoom distance\nviewer.getZoom(); // Get current zoom\nviewer.setAutoRotate(true); // Toggle auto-rotate\nviewer.resetCamera(); // Reset to default\n```\n\n#### Rendering\n\n```typescript\nviewer.render(); // Manual render\nviewer.startRenderLoop(); // Start RAF loop\nviewer.stopRenderLoop(); // Stop RAF loop\nviewer.resize(width, height); // Resize canvas\nconst dataUrl = viewer.screenshot(\"png\", 0.9); // Export\n```\n\n#### Lifecycle\n\n```typescript\nviewer.dispose(); // Clean up resources\n```\n\n#### Properties\n\n```typescript\nviewer.backend; // 'webgl' | 'webgpu' (readonly)\nviewer.isPlaying; // Animation playing (readonly)\nviewer.currentAnimation; // Current animation name (readonly)\nviewer.backEquipment; // Current back equipment (readonly)\n```\n\n### Plugins\n\n| Plugin   | Import Path                        | Description                 |\n| -------- | ---------------------------------- | --------------------------- |\n| WebGL    | `minecraft-skin-renderer/webgl`    | WebGL2 rendering backend    |\n| WebGPU   | `minecraft-skin-renderer/webgpu`   | WebGPU rendering backend    |\n| Panorama | `minecraft-skin-renderer/panorama` | Panorama background support |\n| Canvas2D | `minecraft-skin-renderer/canvas2d` | 2D static rendering module  |\n\n### Canvas 2D Rendering\n\nLightweight 2D rendering module using Canvas 2D API — no WebGL/WebGPU required.\n\n```typescript\nimport {\n  renderAvatar,\n  renderSkinFront,\n  renderSkinBack,\n  renderSkinSide,\n  renderSkinIsometric,\n  renderHalfBody,\n  renderBigHead,\n} from \"minecraft-skin-renderer/canvas2d\";\n\nconst canvas = document.getElementById(\"canvas\") as HTMLCanvasElement;\n\n// Render head avatar\nawait renderAvatar(canvas, {\n  skin: \"https://example.com/skin.png\",\n});\n\n// Render full body front view\nawait renderSkinFront(canvas, {\n  skin: \"https://example.com/skin.png\",\n  slim: true, // Use slim model variant\n  scale: 8, // 1 MC pixel = 8 screen pixels (default)\n  showOverlay: true, // Show outer overlay layer (default)\n  overlayInflated: false, // Inflate overlay like 3D (default false)\n});\n\n// Render big head (Q-version) style\nawait renderBigHead(canvas, {\n  skin: \"https://example.com/skin.png\",\n  border: 2, // Border width in virtual pixels (default 2)\n  borderColor: \"black\", // Border color (default 'black')\n});\n```\n\n#### Render Functions\n\n| Function              | Description                            |\n| --------------------- | -------------------------------------- |\n| `renderAvatar`        | Head front face (8×8 MC pixels)        |\n| `renderSkinFront`     | Full body front view                   |\n| `renderSkinBack`      | Full body back view                    |\n| `renderSkinSide`      | Full body side view                    |\n| `renderSkinIsometric` | 2.5D isometric view                    |\n| `renderHalfBody`      | Upper body portrait                    |\n| `renderBigHead`       | Big head (Q-version) style with border |\n\n#### Common Options (`BaseRenderOptions`)\n\n| Option            | Type            | Default  | Description                                                |\n| ----------------- | --------------- | -------- | ---------------------------------------------------------- |\n| `skin`            | `TextureSource` | required | Skin texture (URL, Blob, HTMLImageElement, or ImageBitmap) |\n| `slim`            | `boolean`       | `false`  | Use slim (3px) arm model                                   |\n| `showOverlay`     | `boolean`       | `true`   | Show outer overlay layer                                   |\n| `scale`           | `number`        | `8`      | Pixel scale (1 MC pixel = scale screen pixels)             |\n| `overlayInflated` | `boolean`       | `false`  | Render overlay slightly larger (3D-like)                   |\n\n`renderBigHead` also accepts `border` (default `2`) and `borderColor` (default `'black'`).\n\nAll functions accept `(canvas: HTMLCanvasElement, options)` and return `Promise\u003cvoid\u003e`. The canvas is automatically resized to fit the rendered content.\n\n### Built-in Animations\n\n| Name   | Description              |\n| ------ | ------------------------ |\n| `idle` | Standing idle animation  |\n| `walk` | Walking animation        |\n| `run`  | Running animation        |\n| `fly`  | Flying/gliding animation |\n\n## Development\n\n### Prerequisites\n\n- Node.js 18+ or Bun\n\n### Setup\n\n```bash\n# Install dependencies\nbun install\n```\n\n### Scripts\n\n| Command              | Description               |\n| -------------------- | ------------------------- |\n| `bun run build`      | Build library with tsdown |\n| `bun dev`            | Build in watch mode       |\n| `bun dev:playground` | Run playground dev server |\n| `bun test`           | Run tests                 |\n| `bun test:coverage`  | Run tests with coverage   |\n| `bun lint`           | Lint with oxlint          |\n| `bun lint:fix`       | Lint and auto-fix         |\n| `bun fmt`            | Format with oxfmt         |\n\n### Project Structure\n\n```\nsrc/\n├── core/\n│   ├── renderer/     # Renderer abstraction (WebGL/WebGPU)\n│   ├── math/         # Math utilities (Vec3, Mat4, Quat)\n│   ├── camera/       # Camera system\n│   └── plugins/      # Plugin registry\n├── model/            # Skeleton and geometry\n├── animation/        # Animation system\n├── viewer/           # Main SkinViewer\n└── plugins/          # Plugin implementations\n```\n\n### Contributing\n\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'feat: add amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaidr%2Fminecraft-skin-renderer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdaidr%2Fminecraft-skin-renderer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaidr%2Fminecraft-skin-renderer/lists"}