echoVic/sky-canvas

echoVic のプロフィール

記録された最新のソース活動: 2026年8月3日 04:22

SkillsMP カタログ更新: 2026年10月17日 00:09

収集済み skills: 1

GitHub スター: 2
GitHub フォーク: 0

リポジトリの README

README の元ファイル：README.md

README の元ファイルを読む

README 全文を表示

# Sky Canvas WebGPU Instanced Rendering Engine + AI Agent Canvas Editing Protocol <a href="https://www.npmjs.com/package/@sky-canvas/renderer"><img src="https://img.shields.io/npm/v/@sky-canvas/renderer.svg" alt="npm version" /></a> <a href="https://github.com/echoVic/sky-canvas/actions/workflows/render-engine-ci.yml"><img src="https://github.com/echoVic/sky-canvas/actions/workflows/render-engine-ci.yml/badge.svg" alt="CI Status" /></a> <a href="https://github.com/echoVic/sky-canvas/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/@sky-canvas/renderer.svg" alt="License" /></a> <img src="https://img.shields.io/badge/TypeScript-100%25-blue" alt="TypeScript" /> <a href="https://skills.sh/echoVic/sky-canvas"><img src="https://skills.sh/b/echoVic/sky-canvas" alt="skills.sh" /></a> <a href="./README.zh-CN.md">中文</a> | English --- ## Highlights - **WebGPU Instanced Rendering** — 500K rectangles at stable 60fps; circles, lines, SDF text - **Snapshot-Ops Protocol** — AI agents edit the canvas via "read snapshot → reference #id → send ops" - **Multi-backend Fallback** — WebGPU → WebGL → Canvas2D, zero-config - **Viewport Culling + Batching** — QuadTree spatial index, only visible objects get rendered ## Install ```bash pnpm add @sky-canvas/renderer # rendering engine pnpm add @sky-canvas/sdk # canvas SDK (includes renderer) ``` ### Agent Skill Give AI agents the ability to draw on canvas (Claude Code / OpenCode / Codex): ```bash npx skills add echoVic/sky-canvas --skill sky-draw ``` ## Quick Start ### WebGPU Rendering ```typescript import { WebGPURenderer, buildGlyphAtlas } from '@sky-canvas/renderer/adapters/webgpu' const canvas = document.querySelector('canvas')! const renderer = new WebGPURenderer(canvas) await renderer.initialize() const atlas = await buildGlyphAtlas(renderer, 'monospace', 32) renderer.render({ rectangles: [ { x: 50, y: 50, w: 200, h: 120, color: [0.26, 0.52, 0.96, 1] } ], circles: [ { cx: 400, cy: 200, radius: 60, color: [0.96, 0.26, 0.21, 1] } ], texts: [ { text: 'Hello Sky Canvas', x: 50, y: 300, atlas } ] }) ``` ### Scene SDK (for Agents) Agents manipulate the canvas through declarative ops — no rendering knowledge needed: ```typescript import { SceneDocument, SceneRenderer, applyOps, snapshotText } from '@sky-canvas/renderer/scene' const doc = new SceneDocument() // 1. Describe changes with ops applyOps(doc, [ { op: 'add', id: 'title', type: 'text', x: 100, y: 50, text: 'Architecture', fontSize: 24 }, { op: 'add', id: 'box1', type: 'rect', x: 80, y: 100, w: 200, h: 80, fill: '#4285f4' }, { op: 'add', id: 'box2', type: 'rect', x: 400, y: 100, w: 200, h: 80, fill: '#34a853' }, { op: 'connect', from: 'box1', to: 'box2' }, ]) // 2. Read snapshot to verify console.log(snapshotText(doc)) // @1 #title text (100,50) "Architecture" // @2 #box1 rect (80,100,200,80) #4285f4 // @3 #box2 rect (400,100,200,80) #34a853 // @4 edge box1→box2 // 3. Render to canvas const sceneRenderer = new SceneRenderer(renderer) sceneRenderer.render(doc.scene) ``` ## Packages | Package | Description | Version | |---------|-------------|---------| | [`@sky-canvas/renderer`](./packages/render-engine) | Rendering engine (WebGPU/WebGL/Canvas2D) | ![npm](https://img.shields.io/npm/v/@sky-canvas/renderer) | | [`@sky-canvas/sdk`](./packages/canvas-sdk) | Canvas SDK (interaction, tools, history) | ![npm](https://img.shields.io/npm/v/@sky-canvas/sdk) | ## Development ```bash git clone https://github.com/echoVic/sky-canvas.git && cd sky-canvas pnpm install pnpm dev:full # build packages + start dev server pnpm test # run all tests pnpm build:packages # build all packages ``` Requires Node >= 22, pnpm >= 10. ## Docs - [Architecture Overview](./docs/architecture/README.md) - [Render Pipeline](./docs/architecture/render-pipeline.md) - [Canvas SDK Architecture](./packages/canvas-sdk/docs/ARCHITECTURE.md) - [Contributing](./CONTRIBUTING.md) ## License [MIT](./LICENSE)

リポジトリの README を読み込んでいます…

このリポジトリの skills

ソフトウェア開発者

1 件の職業カテゴリ · 100% 分類済み

skill

職業分類

説明

更新

sky-draw

ソフトウェア開発者

用 Sky Canvas 的声明式场景 SDK 操作画布——先读 snapshot,再按稳定 id 发一组 ops 增量编辑,再读 snapshot 验证。适用于 agent 需要生成或持续编辑一张画布(卡片/图表/流程图/节点图)的场景。

原文の言語: 中国語

2026-08-03

収集済み skill 1 件中 1 件を表示しています。

AI アシスタントでインストール

このプロンプトをコピーして、使用中の AI アシスタントに送ってください。

Follow https://skillsmp.com/skill-install/prompt.md to install Agent Skills from https://github.com/echoVic/sky-canvas.