Group rendering gets weird fast.

[different55]

Need to dig into this more at a later date, but something about Groups really freaks out Zdog.

Where I just ran into this, I have a bowtie anchor. Inside this, I added a "center" group so I could add separate fill and stroke ellipses and have the stroke render on top of the fill.

So far, all's well.

Then I add a "wings" group to hold either end of the bowtie and rendering breaks. Multiple groups, the two I'm using here, as well as groups elsewhere, start interfering with each other's rendering.

[different55]

This isn't a minimal example at all, but given this:

// Made with Zdog

// ----- setup ----- //

var sceneSize = 180;
var isSpinning = false;
var TAU = Zdog.TAU;

var illo = new Zdog.Illustration({
  element: '#illustrious',
  dragRotate: true,
  resize: 'fullscreen',
  onDragStart: function() {
    isSpinning = false;
  },
  onResize: function( width, height ) {
    this.zoom = Math.floor( Math.min( width, height ) / sceneSize );
  },
});

window.dispatchEvent(new Event('resize'));

function v(x, y, z) {
  return {x: x, y: y, z: z};
}

// ----- model ----- //

const black = '#000';
const lessBlack = '#334';
const dustDark = '#778';
const dust = '#989';
const dustLight = '#ccd';
const snow = '#fff';
const moonglow = '#feb';

const stroke = 3;

let moon = new Zdog.Anchor({
  addTo: illo,
  translate: { x: 90, y: -110 },
  rotate: { y: (TAU/16)*5 },
});

let moonLight = new Zdog.Hemisphere({
  addTo: moon,
  diameter: 100,
  color: moonglow,
});

let moonDark = new Zdog.Hemisphere({
  addTo: moon,
  diameter: 100,
  color: dustDark,
  rotate: { y: TAU/2 },
});

let bun = new Zdog.Anchor({ addTo: illo });

let noggin = new Zdog.Anchor({ addTo: bun });

let ear = new Zdog.Group({
  addTo: noggin,
  translate: { x: 16, y: -57, z: -10 },
  rotate: { z: -TAU*.98 },
  updateSort: true,
});

let outerEar = new Zdog.RoundedRect({
  addTo: ear,
  width: 25-8,
  height: 62-8,
  cornerRadius: 12.5,
  fill: true,
  color: snow,
  stroke: 8,
  translate: { z: -1 },
});

let innerEar = new Zdog.RoundedRect({
  addTo: ear,
  width: 19,
  height: 55,
  cornerRadius: 10,
  fill: true,
  stroke: false,
  color: dustLight,
  translate: { z: 1 },
});

let otherEar = ear.copyGraph({
  translate: { x: -38, y: -47, z: -15 },
  rotate: { z: -TAU*.605 },
});

let head = new Zdog.Shape({
  addTo: noggin,
  stroke: 80,
  color: snow,
});

let outlineNoggin = new Zdog.Anchor({
  addTo: illo,
});

let outlineHead = head.copy({
  addTo: outlineNoggin,
  color: black,
  stroke: 80 + stroke*2,
});

let outlineEar = outerEar.copy({
  addTo: outlineNoggin,
  color: black,
  stroke: 8 + stroke*2,
  translate: ear.translate.copy().add(outerEar.translate.copy().rotate(ear.rotate)),
  rotate: ear.rotate,
})

outlineEar.copy({
  translate: otherEar.translate.copy().add(outerEar.translate.copy().rotate(otherEar.rotate)),
  rotate: otherEar.rotate,
});

let outlineGroup = new Zdog.Group({
  addTo: illo,
});

outlineGroup.addChild(outlineNoggin);
outlineGroup.addChild(noggin);

let eye = new Zdog.Group({
  addTo: bun,
  translate: { x: 30, y: -15, z: 30, },
});

let eyeOuter = new Zdog.Shape({
  addTo: eye,
  stroke: 34 + stroke,
  color: black,
});

let eyeInner = new Zdog.Shape({
  addTo: eye,
  stroke: 34 - stroke,
  color: snow,
});

eye.copyGraph({
  translate: { x: -31, y: -15, z: 30 },
});

let noseGroup = new Zdog.Group({
  addTo: bun,
  translate: { z: 40 },
});

let nose = new Zdog.Ellipse({
  addTo: noseGroup,
  width: 16,
  height: 11,
  stroke: false,
  fill: true,
  color: snow,
});

let noseLine = nose.copy({
  fill: false,
  stroke: stroke,
  color: black,
})

let mouth = new Zdog.Group({
  addTo: bun,
});

let tongue = new Zdog.Shape({
  addTo: mouth,
  stroke: stroke,
  fill: true,
  color: dustDark,
  path: [
    { x: -12, y: 13.5 },
    { x: -12, y: 22 },
    {arc: [
      { x: -12, y: 27.5 },
      { x: -6.5, y: 27.5 },
    ]},
    {arc: [
      { x: -1, y: 27.5 },
      { x: -1, y: 22 },
    ]},
    { x: -1, y: 13.5 },
  ],
  translate: { z: 35 },
});

let toothSmall = new Zdog.Ellipse({
  addTo: mouth,
  stroke: false,
  fill: true,
  color: snow,
  width: 9,
  height: 9,
  quarters: 2,
  rotate: { z: TAU/4, y: -TAU*.97 },
  translate: { x: -11.4, y: 13.5, z: 36 }
});

let toothSmallOutline = toothSmall.copy({
  stroke: stroke,
  color: black,
  fill: false,
});

let toothBig = new Zdog.Shape({
  addTo: mouth,
  stroke: false,
  fill: true,
  color: snow,
  path: [
    { x: -3.2, y: 13.5 },
    { x: -3.2, y: 16 },
    {arc: [
      { x: -3.2, y: 20 },
      { x: 1.3, y: 20 },
    ]},
    {arc: [
      { x: 5.7, y: 20 },
      { x: 5.7, y: 16 },
    ]},
    { x: 5.7, y: 13.5 },
  ],
  translate: { z: 36 },
});

toothBigOutline = toothBig.copy({
  stroke: stroke,
  color: black,
  fill: false,
});

let lips = new Zdog.Shape({
  addTo: mouth,
  stroke: stroke,
  color: black,
  closed: false,
  path: [
    v( -20, 13, 32.5 ),
    {arc: [
      v( 0, 14, 43.22 ),
      v( 20, 13, 32.5 ),
    ]},
  ]
});

let blush = new Zdog.Ellipse({
  addTo: bun,
  width: 17,
  height: 11,
  fill: true,
  stroke: false,
  color: dustLight,
  translate: v( -25.5, 8, 31 ),
  rotate: { y: TAU*.0625 },
});

blush.copy({
  translate: v( 25.5, 7.5, 31 ),
});

let bowtie = new Zdog.Anchor({
  addTo: bun,
  translate: { x: -10.5, y: 45 },
});

let center = new Zdog.Group({
  addTo: bowtie,
});
let centerFill = new Zdog.Ellipse({
  addTo: center,
  diameter: 17,
  fill: true,
  color: dustDark,
  stroke: false,
});
let centerStroke = centerFill.copy({
  stroke: stroke,
  fill: false,
  color: black,
});

let wings = new Zdog.Group({
  addTo: bowtie,
  translate: bowtie.translate,
});



// ----- animate ----- //

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

animate();

The bun's face sorts behind the head fill+outline group. If you remove the empty wings group at the very end, or change the wing's parent bowtie to be parented to the root illo instead of the bun, then it renders correctly.