Shaku Gfx Demo: 3D

The following is a code example on how to draw 3D quads with vertices.

// init shaku with depth enabled
// this is important for z-order
Shaku.gfx.setContextAttributes({depth:true});
await Shaku.init();

// load a test texture
let texture = await Shaku.assets.loadTexture('assets/sprite.png');

// create 3d sprites batch and set default perspective camera (check out setPerspectiveCamera params for more options)
let spritesBatch3d = new Shaku.gfx.SpriteBatch3D();
spritesBatch3d.setPerspectiveCamera();

// do a main loop step.
function step() {
  
  // start frame and clear buffers + depth
  // you need to clear depth in addition to color when using z buffers
  Shaku.startFrame();
  Shaku.gfx.clear(Shaku.utils.Color.cornflowerblue);
  Shaku.gfx.clearDepth();

  // set camera view matrix
  // eyePosition should be Vector3 with the position of your camera
  // lookatPosition should be Vector3 with the position the camera looks at
  spritesBatch3d.camera.setViewLookat(
    eyePosition, 
    lookatPosition
  );

  // create vertices for our 3d quad
  const spriteSize = new Shaku.utils.Vector2(texture.width, texture.height);
  const spritePosition = new Shaku.utils.Vector2(Math.random() * maxPosOffset - maxPosOffset / 2, Math.random() * maxPosOffset - maxPosOffset / 2);
  const spriteOffsetY = 0;
  const v1 = (new Shaku.gfx.Vertex())
              .setPosition(new Shaku.utils.Vector3(-spriteSize.x / 2 + spritePosition.x, spriteOffsetY, spritePosition.y))
              .setTextureCoords(new Shaku.utils.Vector2(0, 1));
  const v2 = (new Shaku.gfx.Vertex())
              .setPosition(new Shaku.utils.Vector3(spriteSize.x / 2 + spritePosition.x, spriteOffsetY, spritePosition.y))
              .setTextureCoords(new Shaku.utils.Vector2(1, 1));
  const v3 = (new Shaku.gfx.Vertex())
              .setPosition(new Shaku.utils.Vector3(-spriteSize.x / 2 + spritePosition.x, spriteSize.y + spriteOffsetY, spritePosition.y))
              .setTextureCoords(new Shaku.utils.Vector2(0, 0));
  const v4 = (new Shaku.gfx.Vertex())
              .setPosition(new Shaku.utils.Vector3(spriteSize.x / 2 + spritePosition.x, spriteSize.y + spriteOffsetY, spritePosition.y))
              .setTextureCoords(new Shaku.utils.Vector2(1, 0));

  // draw a 3D quad (note: quad origin point is bottom-center, making it appear as if its standing)
  // vertices should be an array with 4 Vertex objects that have 3d Vectors for positions
  spritesBatch3d.begin();
  spritesBatch3d.drawVertices(texture, [v1,v2,v3,v4]);
  spritesBatch3d.end();

  // end frame and request next one
  Shaku.endFrame();
  Shaku.requestAnimationFrame(step);
}

step();