Sphera — Documentation

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_153":154,"_155":156},"routes/_app.x.$handle.$name",{"_94":93,"_32":45,"_102":84,"_27":103,"_13":14,"_104":-5,"_11":105,"_106":107,"_108":109,"_110":111,"_112":113,"_20":-5,"_114":-5,"_115":-5,"_116":25,"_117":118,"_119":120,"_121":-5,"_122":-5,"_123":124},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":-5,"_56":25,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":77,"_78":79,"_80":81,"_82":25},"version",28,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","sphera.ts","latestPath","fileId","46bebfbe-2e0b-11f1-8474-42dde27851f2","name","fileType","http","content","export default async function handler(req: Request): Promise {\n const html = `\n\n\n\n\nSphera — Documentation\n\n\n\n\n\n\n\n\n

navigate mode — drag to rotate · press B to draw

\n\n \n

\n \n brush\n

\n\n \n

\n \n\n

colour

\n custom\n \n

\n\n

thickness

\n thin\n 3px\n thick\n

\n \n

\n\n

\n scroll for docs\n

\n \n

\n\n

\n start\n \n \n \n features\n \n \n \n api\n \n \n \n more\n \n \n

\n\n

Draw anywhere on a sphere

Sphera is an interactive 3D canvas. Rotate freely, zoom in, and paint directly on the sphere surface — strokes follow the curvature in real time.

Drag to rotate — two-finger swipe to rotate on trackpad — pinch to zoom — press B to toggle draw mode.

\n\n

Quickstart

import { Sphere } from 'sphera';\nconst sphere = new Sphere(canvas, {\n  radius: 1.0, showGrid: true,\n});\nsphere.mount();\nsphere.useTool('brush', { color: '#ff9057', size: 4 });

Install via npm install sphera or drop the CDN script. Mount on any <canvas> element.

\n\n

Core concepts

Every point on the surface is described by θ (longitude, −180°…180°) and φ (latitude, −90°…90°). Clicks cast a ray from the camera and intersect the sphere — strokes are sequences of geodesic segments, the shortest paths between sample points on the surface.

All drawing composites into a 4096×2048 equirectangular texture atlas; only dirty regions are re-uploaded to the GPU.

\n\n \n\n

Drawing tools

Brush BFreehand, anti-aliased, pressure-sensitive with stylus

Eraser EMasks strokes at composite level; non-destructive

Fill FFlood-fill closed regions on the sphere surface

Stamp SCircles, rects, arrows — warped to sphere surface

Text TRaster labels, editable by double-click — new in v1.4

\n\n

Layers

const layer = sphere.layers.add({\n  name: 'annotations', opacity: 0.8,\n  blendMode: 'multiply',\n});\nsphere.layers.setActive(layer.id);

Blend modes: normal multiply screen overlay darken lighten. Flatten layers with sphere.layers.flatten([id1, id2]) for performance.

\n\n

Sphere — constructor options

radiusnumberWorld-unit radius. Default 1.0

backgroundstringCanvas background colour

showGridbooleanLat/lon overlay. Default false

zoomMaxnumberMax zoom multiplier. Default 50

textureSizenumberAtlas width px, power of two. Default 4096

antialiasbooleanMSAA. Default true

\n\n

Brush — properties

colorstringCSS colour. Read/write.

sizenumberWidth in equator px at 1× zoom. Range 0.5–200.

opacitynumber0–1. Composited with layer opacity.

smoothingnumber0–1. Higher = smoother but laggier.

isDrawingbooleanRead-only. True while stroke is in progress.

\n\n

Events

readyWebGL context initialised

stroke:start{ point, layerId }

stroke:endFull Stroke object — id, points, style, bounds, timestamp

rotate{ theta, phi } — throttled to 60 fps

zoom{ level }

errorInternal error — always handle this

\n\n

Export & share

PNGsphere.toDataURL('png') — equirectangular atlas

OBJsphere.exportOBJ({ segments: 128 }) — mesh + texture

JSONsphere.toJSON() / sphere.fromJSON(data) — full vector state

Use JSON for save/load, PNG for sharing with external tools like Blender or Photoshop.

\n\n

Keyboard shortcuts

Brush / Eraser / Fill / Stamp / TextB E F S T

Brush size up / down] [

Undo / RedoCtrl+Z Ctrl+Shift+Z

Reset viewHome

Toggle gridG

Temp navigate while drawingAlt hold

Straight line snapShift hold

\n\n

\n\n\n\n`;\n\n return new Response(html, {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n });\n}","export default async function handler(req: Request): Promise {\n const html = `\n\n\n\n\nSphera\n\n\n\n\n\n\n\n\n

navigate mode — drag to rotate · press B to draw

\n\n \n

\n \n brush\n

\n\n \n

\n \n\n

colour

\n custom\n \n

\n\n

thickness

\n thin\n 3px\n thick\n

\n \n

\n\n

\n scroll for docs\n

\n \n

\n\n

\n start\n \n \n \n features\n \n \n \n api\n \n \n \n more\n \n \n

\n\n

Draw anywhere on a sphere

Sphera is an interactive 3D canvas. Rotate freely, zoom in, and paint directly on the sphere surface — strokes follow the curvature in real time.

Drag to rotate — two-finger swipe to rotate on trackpad — pinch to zoom — press B to toggle draw mode.

\n\n

Quickstart

import { Sphere } from 'sphera';\nconst sphere = new Sphere(canvas, {\n  radius: 1.0, showGrid: true,\n});\nsphere.mount();\nsphere.useTool('brush', { color: '#ff9057', size: 4 });

Install via npm install sphera or drop the CDN script. Mount on any <canvas> element.

\n\n

Core concepts

All drawing composites into a 4096×2048 equirectangular texture atlas; only dirty regions are re-uploaded to the GPU.

\n\n \n\n

Drawing tools

Brush BFreehand, anti-aliased, pressure-sensitive with stylus

Eraser EMasks strokes at composite level; non-destructive

Fill FFlood-fill closed regions on the sphere surface

Stamp SCircles, rects, arrows — warped to sphere surface

Text TRaster labels, editable by double-click — new in v1.4

\n\n

Layers

const layer = sphere.layers.add({\n  name: 'annotations', opacity: 0.8,\n  blendMode: 'multiply',\n});\nsphere.layers.setActive(layer.id);

Blend modes: normal multiply screen overlay darken lighten. Flatten layers with sphere.layers.flatten([id1, id2]) for performance.

\n\n

Sphere — constructor options

radiusnumberWorld-unit radius. Default 1.0

backgroundstringCanvas background colour

showGridbooleanLat/lon overlay. Default false

zoomMaxnumberMax zoom multiplier. Default 50

textureSizenumberAtlas width px, power of two. Default 4096

antialiasbooleanMSAA. Default true

\n\n

Brush — properties

colorstringCSS colour. Read/write.

sizenumberWidth in equator px at 1× zoom. Range 0.5–200.

opacitynumber0–1. Composited with layer opacity.

smoothingnumber0–1. Higher = smoother but laggier.

isDrawingbooleanRead-only. True while stroke is in progress.

\n\n

Events

readyWebGL context initialised

stroke:start{ point, layerId }

stroke:endFull Stroke object — id, points, style, bounds, timestamp

rotate{ theta, phi } — throttled to 60 fps

zoom{ level }

errorInternal error — always handle this

\n\n

Export & share

PNGsphere.toDataURL('png') — equirectangular atlas

OBJsphere.exportOBJ({ segments: 128 }) — mesh + texture

JSONsphere.toJSON() / sphere.fromJSON(data) — full vector state

Use JSON for save/load, PNG for sharing with external tools like Blender or Photoshop.

\n\n

Keyboard shortcuts

Brush / Eraser / Fill / Stamp / TextB E F S T

Brush size up / down] [

Undo / RedoCtrl+Z Ctrl+Shift+Z

Reset viewHome

Toggle gridG

Temp navigate while drawingAlt hold

Straight line snapShift hold

\n\n

\n\n\n\n`;\n\n return new Response(html, {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n });\n}","createdAt",["D",1775155395200],"branchVersion","branchId","44dfdd40-2523-11f1-8829-42dde27851f2","id","44de8468-2523-11f1-8829-42dde27851f2","sphera-project",["D",1774096883470],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","019c1c74-7b88-71cc-8562-fbd34a3494d5","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019c1c74-7b88-71cc-8562-fcd1274ee4eb","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_94":93,"_101":97},"org",{"_94":93,"_95":-5,"_96":97,"_18":54,"_98":99,"_100":25},"branch",{"_13":83,"_32":84,"_43":42,"_85":44,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":45,"_92":93},"isOwned",32,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","williamjaesunkang","handle","displayName","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/3b63dd6d-c869-4d45-4ab3-174597d14500/square512?exp=1789588279&sig=620213ac5d6a9d23919e23baf609e3ec5b0fb24d7decece289de9549dfb31982","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":149,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":-5,"_56":25,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":150,"_78":151,"_80":152,"_82":25},"tree",[144],"files",[144],"counts",{"_133":60,"_134":135,"_136":60,"_137":138,"_139":140},"contents",[125],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_43":126,"_32":28,"_30":31,"_127":-5,"_41":42,"_40":14,"_128":120,"_38":129,"_13":130,"_33":34,"_35":37,"_24":25,"_131":-5,"_27":132},"cf1525c0-2ec3-11f1-8cbf-42dde27851f2","parentId","latest",["D",1775155395200],15,"label",[28],"pulls","branches",1,"forks","envVars",{"_141":60,"_143":60},"connections",{"_141":60,"_142":60},"count","unfilledCount","emptyCount",{"_43":126,"_32":28,"_30":31,"_127":-5,"_41":42,"_40":14,"_128":120,"_38":145,"_13":130,"_33":34,"_35":37,"_24":25,"_131":-5,"_146":147,"_27":148},["D",1775155395200],"children",[],[28],["D",1774096883470],{"_94":93,"_101":97},{"_94":93,"_95":-5,"_96":97,"_18":54,"_98":99,"_100":25},{"_13":83,"_32":84,"_43":42,"_85":44,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":45,"_92":93},"ctx",{"_76":-5,"_122":186,"_187":188,"_189":190,"_191":25,"_192":25,"_193":25,"_194":120,"_195":-5,"_196":-7,"_197":-7,"_198":60,"_199":25,"_200":25,"_201":-5,"_202":25,"_203":25,"_204":25,"_205":-5},"ENV",{"_157":158,"_159":160,"_161":84,"_162":163,"_164":165,"_166":167,"_168":169,"_170":171,"_172":173,"_174":175,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v28