skewed

Skewed

Skewed is a Typescript package for generating SVG of 3D graphics in real-time or offline files.

Use it to make simple 3D infographics, 3D web-games, or generate 3D SVG files for importing into vector editors like Figma/Illustrator (Ie. make 3D icons).

• Camera Projections
  • Isometric
• Built in shapes:
  • Box
  • Cylinder

Usage

npm install skewed

Coordinate System

// TBD

Contributing

Setup

1. Install dependencies
   1. Node.js
   2. pnpm
2. Clone and go into the folder

   git clone [e-mail]:seflless/skewed.git
   cd skewed
   

Dev

To serve up the workbench web-page and rebuild on code changes run the following.

pnpm dev
# Open the workbench page at http://localhost:3000/

Building

pnpm build

Testing

TBD

Publishing to NPM

Do the usual npm version bump then publish.

npm version <major|minor|patch>
git push; git push --tags
npm publish

Test

Using vitest, the test are rerun whenever you change related code.

pnpm test

Watch Tests

TODO: Do we need to put in a difference command for the CLI?

Prio Art

Here are some cool existing project I found after starting this. In no particular order:

ZDog

• Project Website
• Github repo
• Great article covering it: https://css-tricks.com/zdog/
• I found this one when looking for ideas about how to light 3D spheres.
• Love the cool art style in the demos that it's well suited too.
• Finding a good artist/art-style to use as guodance (and demos) will go really far. The homepage demo is based on this 2D art: https://www.robindavey.co.uk/#/nippu/
• There's no lighting support, but that really simplifies things for this art style.
  • Here's an example mini town where stylistic lighting (really just contrasting planes) is used
• This influenced me into focusing on toon shading style lighting/graphics too (As allow specifying an amount of shades gradients)
• The documentation is great
  • The style is fun and matches the engines aesthetic
  • Love the coverage of topics like z-fighting, how it works, and how to work with it
• It's making me consider supporting a canvas renderer
  • Would be better for mixing into other canvas rendering (Is this true for WebGL, or is copying from canvas to WebGL textures slow?)
  • Read: Canvas or SVG?
• Rendering with SVG without Illustration
  • I'd been thinking about doing this same approach, allowing people to take control of rendering order to mix compositions into other HTML/SVG
• See some of the Feature Requests and discussions
  • Supporting Perspective cameras, not just ortho
    • I like encouraging ortho only (and variants like oblique/cabinet)
    • It should be more performant when only translating camera and objects, that's a good thing
    • I'm with this comment, it doesn't play well with SVG curve capabilities.