zdog README

The project's README from github.com/metafizzy/zdog. As one markdown file: README.md.

Zdog

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

View complete documentation and live demos at zzz.dog.

Install

Download

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

Other people's stuff:

My stuff:

Licensed MIT. Made by Metafizzy 🌈🐻

zdog (metafizzy/zdog)

Searching Database…

10.7K ·GitHub
Zdog
Что это такое?Zdog — это округлый, плоский, удобный для дизайнеров псевдо-3D-движок для веба: вы собираете 3D-модели на JavaScript, добавляя фигуры, а он отрисовывает их через 2D-API на canvas или SVG.
Это настоящий 3D-движок? И что значит «псевдо-3D»?Это такой трюк: Zdog рисует плоские 2D-фигуры, размещённые в трёхмерном пространстве — сферы на самом деле точки,торы — круги, капсулы — толстые линии. Математика вращения — настоящая 3D, плоская только отрисовка, по тому же принципу, что и в игре Dogz 1995 года, которая и вдохновила автора.
Как добавить его на страницу?Установите через npm install zdog (подходит и Bower), подключите zdog.dist.min.js с CDN unpkg или просто скачайте файл напрямую. Документация и живые примеры находятся на zzz.dog.
Нужны ли ему другие библиотеки или сборка?Нет. Он поставляется обычным JavaScript-файлом без единой зависимости в рантайме, так что достаточно тега script или одной команды npm install.
Он стабильный или ещё меняется?Считайте это бетой: автор называет v1 «своего рода бета-релизом» и предупреждает, что к v2 будет много изменений, так что API могут поменяться.
Почему автор сделал это, а не взял готовый 3D-движок?Дэйв из Metafizzy хотел сделать видеоигру, но настоящие движки оказались слишком мощными и сложными, поэтому он создал Zdog, чтобы создавать и показывать простые 3D-модели без лишней громоздкости. Вдохновением напрямую послужила Dogz — виртуальный питомец 1995 года.
Как с его помощью собрать модель?Модели создаются в коде: вы добавляете фигуры — сферы,торы, капсулы и тому подобное — на сцену. Гайд Getting started на zzz.dog проводит через полный hello-world-пример.
Есть ли вокруг него экосистема?Да: Zfont — плагин для текста, vue-zdog — обёртка для Vue, zDogPy — порт на Python для DrawBot, а ещё есть подборки Made with Zdog на CodePen и в Twitter для вдохновения.
Как произносится Zdog?«Зи-дог» по-американски или «Зед-дог» по-британски.
What are similar projects?matter-js, paper.js, pixijs, particles.js, rough, mojs, WebGL-Fluid-Simulation, phaser
Which topics is it in?2d, zero-dependency, creative-coding, canvas, rendering, game-development, svg, graphics, 3d, javascript-library, design, animation
Creator
metafizzy
Size
0.6 MB
Stars
10.7K
Updated
CommitJan 22Releasev1.1.1Oct 23
Age
7y
Commits · 90 Days