zdog

What is zdog?

Zdog is a 3D JavaScript engine for canvas and SVG. It is designed to be simple and easy to use, allowing you to create 3D models and animations with a minimal amount of code.

What are zdog's main functionalities?

Creating Shapes

This code demonstrates how to create a basic shape using Zdog. The `Illustration` object is the main container, and the `Shape` object is used to create a simple shape with a specified stroke and color.

const { Illustration, Shape } = require('zdog');

const illo = new Illustration({
  element: '.zdog-canvas',
});

new Shape({
  addTo: illo,
  stroke: 20,
  color: '#636',
});

illo.updateRenderGraph();

Animating Shapes

This code demonstrates how to animate a shape in Zdog. The `animate` function updates the rotation of the shape and re-renders the illustration in each frame.

const { Illustration, Shape, TAU } = require('zdog');

const illo = new Illustration({
  element: '.zdog-canvas',
  dragRotate: true,
});

const shape = new Shape({
  addTo: illo,
  stroke: 20,
  color: '#636',
});

function animate() {
  shape.rotate.y += 0.03;
  illo.updateRenderGraph();
  requestAnimationFrame(animate);
}

animate();

Creating Complex Models

This code demonstrates how to create a more complex model using Zdog. It uses `Group` to combine multiple shapes (`Ellipse` and `Rect`) into a single model.

const { Illustration, Ellipse, Rect, Group } = require('zdog');

const illo = new Illustration({
  element: '.zdog-canvas',
});

const group = new Group({
  addTo: illo,
});

new Ellipse({
  addTo: group,
  diameter: 80,
  stroke: 20,
  color: '#636',
});

new Rect({
  addTo: group,
  width: 60,
  height: 60,
  stroke: 20,
  color: '#E62',
  translate: { x: 40, y: 40 },
});

illo.updateRenderGraph();

Other packages similar to zdog

three

Three.js is a popular 3D library that provides a wide range of features for creating 3D graphics in the browser. Compared to Zdog, Three.js is more powerful and flexible, but also more complex and harder to learn.

p5

p5.js is a JavaScript library that makes coding accessible for artists, designers, educators, and beginners. It has a 3D mode that allows for the creation of 3D graphics. While p5.js is more general-purpose and easier for beginners, it is not as specialized for 3D as Zdog.

babylonjs

Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework. It is more feature-rich and suitable for complex 3D applications compared to Zdog, which is simpler and more focused on ease of use.

README

Zdog

Round, flat, designer-friendly pseudo-3D engine

View complete documentation and live demos at zzz.dog.

Install

Download

• zdog.dist.min.js minified, or
• zdog.dist.js un-minified

CDN

Link directly to Zdog JS on unpkg.

<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>

Package managers

npm: npm install zdog

Bower: bower install zdog

Hello world demo

Create 3D models with Zdog by adding shapes. See Getting started for a walk-through of this demo.

let isSpinning = true;

let illo = new Zdog.Illustration({
  element: '.zdog-canvas',
  zoom: 4,
  dragRotate: true,
  // stop spinning when drag starts
  onDragStart: function() {
    isSpinning = false;
  },
});

// circle
new Zdog.Ellipse({
  addTo: illo,
  diameter: 20,
  translate: { z: 10 },
  stroke: 5,
  color: '#636',
});

// square
new Zdog.Rect({
  addTo: illo,
  width: 20,
  height: 20,
  translate: { z: -10 },
  stroke: 3,
  color: '#E62',
  fill: true,
});

function animate() {
  illo.rotate.y += isSpinning ? 0.03 : 0;
  illo.updateRenderGraph();
  requestAnimationFrame( animate );
}
animate();

About Zdog

Hi, Dave here. I wanted to make a video game. I needed a 3D engine, but most engines were too powerful and complex for me. I made Zdog so I could design and display simple 3D models without a lot of overhead.

Zdog is directly inspired by Dogz, a virtual pet game by P.F. Magic released in 1995. It used flat 2D circle sprites to render the Dogz’ models, but in a 3D scene. See Dogz playthrough video here. Dogz were fully animated in real time, running, flopping, scratching (on Windows 3.1!). It was remarkable.

Zdog uses the same principle. It renders all shapes using the 2D drawing APIs in either <canvas> or <svg>. Spheres are actually dots. Toruses are actually circles. Capsules are actually thick lines. It’s a simple, but effective trick. The underlying 3D math comes from Rotating 3D Shapes by Peter Collingridge.

Zdog is pronounced "Zee-dog" in American parlance or "Zed-dog" in British.

Beta!

Zdog v1 is a beta-release, of sorts. This is my first time creating a 3D engine, so I probably got some stuff wrong. Expect lots of changes for v2. Provide input and select new features on the Zdog issue tracker on GitHub.

More Zdog resources

• Zdog demos CodePen Collection - Bigger, wilder Zdog demos
• zdog-demos - My repo for the bigger, wilder Zdog demos
• Made with Zdog CodePen Collection - Community Zdog creations
• Made with Zdog on Twitter
• zdog-docs - Documentation site source code for zzz.dog
• zDogPy - Python port of Zdog for DrawBot

---

Licensed MIT. Made by Metafizzy 🌈🐻