Incorrect Rendering for Transparent models

[ku3mich]

Subj,

examples:
correct(w/o transparency):

one transparent:

incorrect(two transparent)

const jscad = require('@jscad/modeling')

const { cuboid, sphere, cylinder } = jscad.primitives
const { translate, rotate, scale } = jscad.transforms
const { hull } = jscad.hulls
const { colorize } = jscad.colors
const { union, subtract, intersect } = jscad.booleans
const { degToRad } = jscad.utils

// real 71.3x52.2
const width = 52.8
const length = 72
const height = 15
const deep = 1
const wall = 3
const z_side = 0.8

// specific
const audio_dia = 5.6
const pcb_height = 1.6
// --

const body_color = [1, 0, 0, 0.4]

const main = () => {
  const a_body = colorize(
    body_color,
    cuboid({
      size: [width, length, height],
      center: [0, 0, height / 2]
    })
  )

  const a_bottom_subs = colorize(
    body_color,
    cuboid({
      size: [width - wall, length, height],
      center: [0, 0, height / 2]
    })
  )

  const a_bottom_box = colorize(
    body_color,
    cuboid({
      size: [width + 2 * wall, length + 2 * wall, z_side + height / 2],
      center: [0, 0, (z_side + height / 2) / 2]
    })
  )

  const lowest = -z_side

  const mic_hole = translate(
    [
      width / 2 + wall / 2,
      length / 2 - 14 - audio_dia / 2,
      audio_dia / 2 + pcb_height + deep + z_side
    ],
    rotate(
      [degToRad(90), 0, degToRad(90)],
      cylinder({
        radius: audio_dia / 2,
        height: 2 * audio_dia
      })
    )
  )

  const hand_height = height + z_side + wall

  const pin = translate(
    [0, 0, wall / 2],
    rotate(
      [degToRad(90), degToRad(90), 0],
      cylinder({
        height: length / 3,
        radius: wall / 2,
        segments: 6,
        center: [0, 0, 0]
      })
    )
  )

  const hand = translate(
    [width / 2 + wall / 4 + wall / 2, 0, hand_height / 2],
    union(
      cuboid({
        size: [wall / 2, length / 3, hand_height],
        center: [0, 0, 0]
      }),
      translate([-wall / 4, 0, hand_height / 2 - wall], pin)
    )
  )

  const mic_hull = hull(mic_hole, translate([0, 0, height / 2], mic_hole))

  const a_bottom = colorize(
    [0, 1, 1, 0.6],
    union(
      subtract(
        translate([0, 0, lowest], a_bottom_box),
        translate([0, 0, deep], a_body),
        translate([0, 0, lowest + z_side], a_bottom_subs),
        mic_hull
      ),
      hand,
      rotate([0, 0, degToRad(180)], hand)
    )
  )

  return [
    translate([0, 0, -lowest], a_bottom),
    translate([0, 0, -lowest + deep], a_body)
  ]
}

module.exports = { main }

[ku3mich]

@tsuckow pls assign this to me, I'm going to fix by changing the renderer to THREE.js