canvas

math / obb

What this shows

One hundred rotating boxes test oriented bounding boxes against each other every frame, turning red on collision; click a box to pick it with an OBB ray test.

Side by side with the three.js r186 original: webgl_math_obb.html

Differences from three.js

EASEL bakes Lambert and hemisphere lighting per vertex on the CPU, so box faces show flat shading instead of per-pixel lighting.
With the upstream hemisphere intensity of 4, EASEL's vertex lighting saturates nearly every face to full green or red, so the boxes look flatter than in three.js, where faces turned toward the ground color stay darker.
The black wireframe hitbox is drawn with EASEL's CPU wireframe rasterizer without anti-aliasing.
Both sides place, rotate, and scale the boxes with Math.random as upstream does, so the two canvases show different layouts and collisions.

EASEL (Canvas2D)

Loading scene…

three.js r186 (WebGL)

Loading scene…

Key API excerpt

import * as EASEL from "@xsyetopz/easel";


const geometry = new EASEL.BoxGeometry(10, 5, 6);
geometry.userData.obb = new EASEL.OBB();
geometry.userData.obb.halfSize.set(5, 2.5, 3);

const object = new EASEL.Mesh(
  geometry,
  new EASEL.LambertMaterial({ color: 0x00ff00, vertexColors: false }),
);
object.userData.obb = new EASEL.OBB();

object.updateMatrix();
object.updateMatrixWorld();
object.userData.obb.copy(geometry.userData.obb);
object.userData.obb.applyMatrix4(object.matrixWorld);

if (object.userData.obb.intersectsOBB(other.userData.obb)) {
  object.material.color.hex = 0xff0000;
}

const hit = object.userData.obb.intersectRay(raycaster.ray, point);
if (hit !== undefined) object.add(hitbox);