Skewed is a Typescript package for generating SVG of 3D graphics in real-time. It has basic dynamic lighting, orthographic cameras, a set of built in shapes, and supports arbitrary meshes too.
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).
Here's a Live demo. Docs coming soon.
npm install skewed
- Reference the live demo's source code. More API examples coming soon. In the meantime
- Install dependencies
- Node.js
- pnpm
- Clone and go into the folder
git clone git@github.com:seflless/skewed.git cd skewed
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/
pnpm build
TBD
Do the usual npm version bump then publish.
# Make sure tests pass. `pnpm test` (we should automate this in a publish command)
pnpm build
npm version <major|minor|patch>
git push; git push --tags
npm publish
Using vitest, the test are rerun whenever you change related code.
pnpm test
TODO: Do we need to put in a difference command for the CLI?
Here are some cool existing project I found after starting this. In no particular order:
- 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.
- Supporting Perspective cameras, not just ortho