chorama 0.0.0

package/src/cameracontrols/index.js

@@ -0,0 +1,258 @@
+import { Affine3, clamp, Vector2, Vector3 } from "../math/index.js"
+import { Camera } from "../objects/index.js"
+
+export class OrbitCameraControls {
+  #targetElement
+  #mousedown
+  #mouseup
+  #mousemove
+  #pointercancel
+  #wheel
+  #contextmenu
+  #blur
+  elevation = 0
+  azimuth = 0
+  distance = 5
+  minDistance = 0.01
+  maxDistance = Infinity
+  tideLocked = true
+  offset = new Vector3()
+  minElevation = -Math.PI / 2
+  maxElevation = Math.PI / 2
+  sensitivity = 0.02
+  moveSensitivity = 0.002
+  zoomSensitivity = 0.001
+  camera
+  /**
+   * @type {Set<string>}
+   */
+  keys = new Set()
+  mousePosition = new Vector2()
+  mouseDelta = new Vector2()
+  /**
+   * @type {Map<number, Vector2>}
+   */
+  touchPointers = new Map()
+  /**
+   * @param {Camera} camera
+   */
+  constructor(camera, targetElement = document.body) {
+    this.camera = camera
+    this.#targetElement = targetElement
+    if (targetElement instanceof HTMLElement) {
+      targetElement.style.touchAction = 'none'
+    }
+    this.#mousedown = mouseDown.bind(this)
+    this.#mouseup = mouseUp.bind(this)
+    this.#mousemove = mousemove.bind(this)
+    this.#pointercancel = cancelInput.bind(this)
+    this.#wheel = mouseWheel.bind(this)
+    this.#contextmenu = (/** @type {MouseEvent} */ e) => e.preventDefault()
+    this.#blur = cancelInput.bind(this)
+
+    targetElement.addEventListener('pointerdown', this.#mousedown)
+    targetElement.addEventListener('pointerup', this.#mouseup)
+    targetElement.addEventListener('pointermove', this.#mousemove)
+    targetElement.addEventListener('pointercancel', this.#pointercancel)
+    targetElement.addEventListener('lostpointercapture', this.#pointercancel)
+    targetElement.addEventListener('wheel', this.#wheel, { passive: false })
+    targetElement.addEventListener('contextmenu', this.#contextmenu)
+    window.addEventListener('blur', this.#blur)
+  }
+
+  updateOrbit() {
+    const { position, orientation } = this.camera.transform
+    const { offset: target } = this
+    const eye = new Vector3(
+      this.distance * Math.sin(this.azimuth) * Math.cos(this.elevation),
+      this.distance * Math.sin(this.elevation),
+      this.distance * Math.cos(this.azimuth) * Math.cos(this.elevation)
+    ).add(target)
+    const initial = Affine3.lookAt(eye, target, Vector3.Y)
+    const [finalPos, finalOrient, _] = initial.decompose()
+
+    position.x = finalPos.x
+    position.y = finalPos.y
+    position.z = finalPos.z
+
+    if (this.tideLocked) {
+      orientation.x = finalOrient.x
+      orientation.y = finalOrient.y
+      orientation.z = finalOrient.z
+      orientation.w = finalOrient.w
+    }
+  }
+
+  updateInput() {
+    const delta = this.mouseDelta
+    const input = new Vector2()
+
+    if (this.keys.has('mouseright')) {
+      const temp = Vector2.set(-this.moveSensitivity, -this.moveSensitivity)
+      input.add(temp.multiply(delta))
+    } else if (this.keys.has('mouseleft')) {
+
+      this.azimuth += -delta.x * this.sensitivity
+      this.elevation += delta.y * this.sensitivity
+      this.elevation = clamp(this.elevation, this.minElevation, this.maxElevation)
+    }
+
+
+    Vector2.rotate(input, -this.azimuth, input)
+    this.offset.x += input.x
+    this.offset.z += input.y
+    this.mouseDelta.set(0, 0)
+  }
+
+  update() {
+    this.updateInput()
+    this.updateOrbit()
+  }
+
+  dispose(){
+    const targetElement = this.#targetElement
+    targetElement.removeEventListener('pointerdown', this.#mousedown)
+    targetElement.removeEventListener('pointerup', this.#mouseup)
+    targetElement.removeEventListener('pointermove', this.#mousemove)
+    targetElement.removeEventListener('pointercancel', this.#pointercancel)
+    targetElement.removeEventListener('lostpointercapture', this.#pointercancel)
+    targetElement.removeEventListener('wheel', this.#wheel)
+    targetElement.removeEventListener('contextmenu', this.#contextmenu)
+    window.removeEventListener('blur', this.#blur)
+  }
+}
+
+/**
+ * @this {OrbitCameraControls}
+ * @param {PointerEvent} event
+ */
+function mouseDown(event) {
+  event.preventDefault()
+  this.mousePosition.set(event.clientX, event.clientY)
+  this.mouseDelta.set(0, 0)
+
+  if (event.pointerType === 'touch') {
+    this.touchPointers.set(event.pointerId, new Vector2(event.clientX, event.clientY))
+  }
+
+  if (event.currentTarget instanceof Element) {
+    event.currentTarget.setPointerCapture?.(event.pointerId)
+  }
+  switch (event.button) {
+    case 0:
+      this.keys.add('mouseleft')
+      break;
+    case 2:
+      this.keys.add('mouseright')
+      break;
+  }
+}
+
+/**
+ * @this {OrbitCameraControls}
+ * @param {PointerEvent} event
+ */
+function mouseUp(event) {
+  event.preventDefault()
+  if (event.pointerType === 'touch') {
+    this.touchPointers.delete(event.pointerId)
+  }
+  if (event.currentTarget instanceof Element) {
+    event.currentTarget.releasePointerCapture?.(event.pointerId)
+  }
+  switch (event.button) {
+    case 0:
+      this.keys.delete('mouseleft')
+      break;
+    case 2:
+      this.keys.delete('mouseright')
+      break;
+  }
+}
+
+/**
+ * @this {OrbitCameraControls}
+ */
+function cancelInput() {
+  this.keys.clear()
+  this.mouseDelta.set(0, 0)
+  this.touchPointers.clear()
+}
+
+/**
+ * @this {OrbitCameraControls}
+ * @param {PointerEvent} event
+ */
+function mousemove(event) {
+  if (event.pointerType === 'touch') {
+    const pointer = this.touchPointers.get(event.pointerId)
+    if (!pointer) return
+    event.preventDefault()
+
+    const prevX = pointer.x
+    const prevY = pointer.y
+    pointer.set(event.clientX, event.clientY)
+
+    if (this.touchPointers.size === 1) {
+      this.azimuth += -(event.clientX - prevX) * this.sensitivity
+      this.elevation += (event.clientY - prevY) * this.sensitivity
+      this.elevation = clamp(this.elevation, this.minElevation, this.maxElevation)
+      return
+    }
+
+    if (this.touchPointers.size >= 2) {
+      const entries = /**@type {[[number, Vector2], [number, Vector2]]}*/([...this.touchPointers.entries()])
+      const [id1, p1] = entries[0]
+      const [id2, p2] = entries[1]
+
+      const prevP1X = id1 === event.pointerId ? prevX : p1.x
+      const prevP1Y = id1 === event.pointerId ? prevY : p1.y
+      const prevP2X = id2 === event.pointerId ? prevX : p2.x
+      const prevP2Y = id2 === event.pointerId ? prevY : p2.y
+
+      const prevCenterX = (prevP1X + prevP2X) * 0.5
+      const prevCenterY = (prevP1Y + prevP2Y) * 0.5
+      const currCenterX = (p1.x + p2.x) * 0.5
+      const currCenterY = (p1.y + p2.y) * 0.5
+
+      applyPanFromScreenDelta(this, currCenterX - prevCenterX, currCenterY - prevCenterY)
+
+      const prevDistance = Math.hypot(prevP1X - prevP2X, prevP1Y - prevP2Y)
+      const currDistance = Math.hypot(p1.x - p2.x, p1.y - p2.y)
+      if (prevDistance > 0 && currDistance > 0) {
+        this.distance *= prevDistance / currDistance
+        this.distance = clamp(this.distance, this.minDistance, this.maxDistance)
+      }
+    }
+    return
+  }
+
+  this.mouseDelta.copy(this.mousePosition)
+  this.mousePosition.set(event.clientX, event.clientY)
+  this.mouseDelta.subtract(this.mousePosition).reverse()
+}
+
+/**
+ * @this {OrbitCameraControls}
+ * @param {WheelEvent} event
+ */
+function mouseWheel(event) {
+  event.preventDefault()
+  this.distance *= Math.exp(event.deltaY * this.zoomSensitivity)
+  this.distance = clamp(this.distance, this.minDistance, this.maxDistance)
+}
+
+/**
+ * @param {OrbitCameraControls} controls
+ * @param {number} deltaX
+ * @param {number} deltaY
+ */
+function applyPanFromScreenDelta(controls, deltaX, deltaY) {
+  const input = Vector2.set(
+    -controls.moveSensitivity * deltaX,
+    -controls.moveSensitivity * deltaY
+  )
+  Vector2.rotate(input, -controls.azimuth, input)
+  controls.offset.x += input.x
+  controls.offset.z += input.y
+}

package/src/constants/index.js

@@ -0,0 +1,3 @@
+export * from './mesh.js'
+export * from './texture.js'
+export * from './others.js'

package/src/constants/mesh.js

@@ -0,0 +1,197 @@
+/**
+ * @enum {number}
+ */
+export const PrimitiveTopology = /** @type {const} */({
+  Points: 0x0000,
+  Lines: 0x0001,
+  LineLoop: 0x0002,
+  LineStrip: 0x0003,
+  Triangles: 0x0004,
+  TriangleStrip: 0x0005,
+  TriangleFan: 0x0006
+})
+
+/**
+ * @enum {number}
+ */
+export const VertexFormat = /**@type {const}*/({
+  // 8-bit unsigned ints
+  Uint8: 0,
+  Uint8x2: 1,
+  Uint8x3: 2,
+  Uint8x4: 3,
+
+  Unorm8: 4,
+  Unorm8x2: 5,
+  Unorm8x3: 6,
+  Unorm8x4: 7,
+
+  // 8-bit signed ints
+  Sint8: 12,
+  Sint8x2: 13,
+  Sint8x3: 14,
+  Sint8x4: 15,
+
+  Snorm8: 8,
+  Snorm8x2: 9,
+  Snorm8x3: 10,
+  Snorm8x4: 11,
+
+  // 16-bit Unsigned int
+  Uint16: 16,
+  Uint16x2: 17,
+  Uint16x3: 18,
+  Uint16x4: 19,
+
+  Unorm16: 20,
+  Unorm16x2: 21,
+  Unorm16x3: 22,
+  Unorm16x4: 23,
+
+  // 16-bit signed int
+  Sint16: 28,
+  Sint16x2: 29,
+  Sint16x3: 30,
+  Sint16x4: 31,
+
+  Snorm16: 24,
+  Snorm16x2: 25,
+  Snorm16x3: 26,
+  Snorm16x4: 27,
+
+  // 32-bit unsigned int
+  Uint32: 32,
+  Uint32x2: 33,
+  Uint32x3: 34,
+  Uint32x4: 35,
+
+  // 32-bit signed ints
+  Sint32: 36,
+  Sint32x2: 37,
+  Sint32x3: 38,
+  Sint32x4: 39,
+
+  // 32-bit floating point
+  Float32: 40,
+  Float32x2: 41,
+  Float32x3: 42,
+  Float32x4: 43,
+})
+
+/**
+ * @param {VertexFormat} vertexFormat
+ */
+export function getVertexFormatComponentNumber(vertexFormat) {
+  switch (vertexFormat) {
+    case VertexFormat.Uint8:
+    case VertexFormat.Unorm8:
+    case VertexFormat.Snorm8:
+    case VertexFormat.Sint8:
+    case VertexFormat.Uint16:
+    case VertexFormat.Unorm16:
+    case VertexFormat.Snorm16:
+    case VertexFormat.Sint16:
+    case VertexFormat.Uint32:
+    case VertexFormat.Sint32:
+    case VertexFormat.Float32:
+      return 1;
+
+    case VertexFormat.Uint8x2:
+    case VertexFormat.Unorm8x2:
+    case VertexFormat.Snorm8x2:
+    case VertexFormat.Sint8x2:
+    case VertexFormat.Uint16x2:
+    case VertexFormat.Unorm16x2:
+    case VertexFormat.Snorm16x2:
+    case VertexFormat.Sint16x2:
+    case VertexFormat.Uint32x2:
+    case VertexFormat.Sint32x2:
+    case VertexFormat.Float32x2:
+      return 2;
+
+    case VertexFormat.Uint8x3:
+    case VertexFormat.Unorm8x3:
+    case VertexFormat.Snorm8x3:
+    case VertexFormat.Sint8x3:
+    case VertexFormat.Uint16x3:
+    case VertexFormat.Unorm16x3:
+    case VertexFormat.Snorm16x3:
+    case VertexFormat.Sint16x3:
+    case VertexFormat.Uint32x3:
+    case VertexFormat.Sint32x3:
+    case VertexFormat.Float32x3:
+      return 3;
+
+    case VertexFormat.Uint8x4:
+    case VertexFormat.Unorm8x4:
+    case VertexFormat.Snorm8x4:
+    case VertexFormat.Sint8x4:
+    case VertexFormat.Uint16x4:
+    case VertexFormat.Unorm16x4:
+    case VertexFormat.Snorm16x4:
+    case VertexFormat.Sint16x4:
+    case VertexFormat.Uint32x4:
+    case VertexFormat.Sint32x4:
+    case VertexFormat.Float32x4:
+      return 4;
+    default:
+      throw new Error('Unsupported vertex format');
+  }
+}
+
+/**
+ * @param {VertexFormat} vertexFormat
+ */
+export function getVertexFormatComponentSize(vertexFormat) {
+  switch (vertexFormat) {
+    case VertexFormat.Uint8:
+    case VertexFormat.Unorm8:
+    case VertexFormat.Snorm8:
+    case VertexFormat.Sint8:
+    case VertexFormat.Uint8x2:
+    case VertexFormat.Unorm8x2:
+    case VertexFormat.Snorm8x2:
+    case VertexFormat.Sint8x2:
+    case VertexFormat.Uint8x3:
+    case VertexFormat.Unorm8x3:
+    case VertexFormat.Snorm8x3:
+    case VertexFormat.Sint8x3:
+    case VertexFormat.Uint8x4:
+    case VertexFormat.Unorm8x4:
+    case VertexFormat.Snorm8x4:
+    case VertexFormat.Sint8x4:
+      return 1;
+    case VertexFormat.Uint16:
+    case VertexFormat.Unorm16:
+    case VertexFormat.Snorm16:
+    case VertexFormat.Sint16:
+    case VertexFormat.Uint16x2:
+    case VertexFormat.Unorm16x2:
+    case VertexFormat.Snorm16x2:
+    case VertexFormat.Sint16x2:
+    case VertexFormat.Uint16x3:
+    case VertexFormat.Unorm16x3:
+    case VertexFormat.Snorm16x3:
+    case VertexFormat.Sint16x3:
+    case VertexFormat.Uint16x4:
+    case VertexFormat.Unorm16x4:
+    case VertexFormat.Snorm16x4:
+    case VertexFormat.Sint16x4:
+      return 2;
+    case VertexFormat.Uint32:
+    case VertexFormat.Uint32x2:
+    case VertexFormat.Uint32x3:
+    case VertexFormat.Uint32x4:
+    case VertexFormat.Sint32:
+    case VertexFormat.Sint32x2:
+    case VertexFormat.Sint32x3:
+    case VertexFormat.Sint32x4:
+    case VertexFormat.Float32:
+    case VertexFormat.Float32x2:
+    case VertexFormat.Float32x3:
+    case VertexFormat.Float32x4:
+      return 4;
+    default:
+      throw new Error('Unsupported vertex format');
+  }
+}

package/src/constants/others.js

@@ -0,0 +1,218 @@
+/**
+ * @enum {number}
+ * Uniform types (scalars, vectors, matrices, and samplers).
+ */
+export const UniformType = /** @type {const} */({
+  // Scalars
+  Float: 0x1406,
+  Int: 0x1404,
+  Uint: 0x1405,
+  Bool: 0x8B56,
+
+  // Float vectors
+  Vec2: 0x8B50,
+  Vec3: 0x8B51,
+  Vec4: 0x8B52,
+
+  // Int vectors
+  IVec2: 0x8B53,
+  IVec3: 0x8B54,
+  IVec4: 0x8B55,
+
+  // Unsigned int vectors
+  UVec2: 0x8DC6,
+  UVec3: 0x8DC7,
+  UVec4: 0x8DC8,
+
+  // Bool vectors
+  BVec2: 0x8B57,
+  BVec3: 0x8B58,
+  BVec4: 0x8B59,
+
+  // Matrices
+  Mat2: 0x8B5A,
+  Mat3: 0x8B5B,
+  Mat4: 0x8B5C,
+  Mat2x3: 0x8B65,
+  Mat2x4: 0x8B66,
+  Mat3x2: 0x8B67,
+  Mat3x4: 0x8B68,
+  Mat4x2: 0x8B69,
+  Mat4x3: 0x8B6A,
+
+  // Samplers
+  Sampler2D: 0x8B5E,
+  Sampler3D: 0x8B5F,
+  SamplerCube: 0x8B60,
+  Sampler2DShadow: 0x8B62,
+  Sampler2DArray: 0x8DC1,
+  Sampler2DArrayShadow: 0x8DC4,
+  SamplerCubeShadow: 0x8DC5,
+
+  // Integer samplers
+  ISampler2D: 0x8DCA,
+  ISampler3D: 0x8DCB,
+  ISamplerCube: 0x8DCC,
+  ISampler2DArray: 0x8DCF,
+
+  // Unsigned integer samplers
+  USampler2D: 0x8DD2,
+  USampler3D: 0x8DD3,
+  USamplerCube: 0x8DD4,
+  USampler2DArray: 0x8DD7
+})
+
+/**
+ * @enum {number}
+ */
+export const GlDataType = /** @type {const} */({
+  Float: 0x1406,
+  UnsignedInt: 0x1405,
+  Int: 0x1404,
+  UnsignedShort: 0x1403,
+  Short: 0x1402,
+  UnsignedByte: 0x1401,
+  Byte: 0x1400
+})
+
+
+/**
+ * @enum {number}
+ */
+export const BufferUsage = /** @type {const} */({
+  Static: 0x88E4,
+  Dynamic: 0x88E8,
+  Stream: 0x88E0
+})
+
+/**
+ * @enum {number}
+ * Buffer binding targets
+ */
+export const BufferTarget = /** @type {const} */({
+  ArrayBuffer: 0x8892,              // gl.ARRAY_BUFFER
+  ElementArrayBuffer: 0x8893,       // gl.ELEMENT_ARRAY_BUFFER
+  CopyReadBuffer: 0x8F36,           // gl.COPY_READ_BUFFER
+  CopyWriteBuffer: 0x8F37,          // gl.COPY_WRITE_BUFFER
+  PixelPackBuffer: 0x88EB,          // gl.PIXEL_PACK_BUFFER
+  PixelUnpackBuffer: 0x88EC,        // gl.PIXEL_UNPACK_BUFFER
+  UniformBuffer: 0x8A11,            // gl.UNIFORM_BUFFER
+  TransformFeedbackBuffer: 0x8C8E   // gl.TRANSFORM_FEEDBACK_BUFFER
+})
+
+/**
+ * @enum {number}
+ * Face culling modes
+ */
+export const CullFace = /** @type {const} */({
+  None: 0x0000,          // Represents no culling
+  Front: 0x0404,         // gl.FRONT
+  Back: 0x0405,          // gl.BACK
+  FrontAndBack: 0x0408   // gl.FRONT_AND_BACK
+})
+
+/**
+ * @enum {number}
+ * Blend function factors
+ */
+export const BlendMode = /** @type {const} */({
+  Zero: 0x0000,                    // gl.ZERO
+  One: 0x0001,                     // gl.ONE
+  SrcColor: 0x0300,                // gl.SRC_COLOR
+  OneMinusSrcColor: 0x0301,        // gl.ONE_MINUS_SRC_COLOR
+  SrcAlpha: 0x0302,                // gl.SRC_ALPHA
+  OneMinusSrcAlpha: 0x0303,        // gl.ONE_MINUS_SRC_ALPHA
+  DstAlpha: 0x0304,                // gl.DST_ALPHA
+  OneMinusDstAlpha: 0x0305,        // gl.ONE_MINUS_DST_ALPHA
+  DstColor: 0x0306,                // gl.DST_COLOR
+  OneMinusDstColor: 0x0307,        // gl.ONE_MINUS_DST_COLOR
+  SrcAlphaSaturate: 0x0308,        // gl.SRC_ALPHA_SATURATE
+  ConstantColor: 0x8001,           // gl.CONSTANT_COLOR
+  OneMinusConstantColor: 0x8002,   // gl.ONE_MINUS_CONSTANT_COLOR
+  ConstantAlpha: 0x8003,           // gl.CONSTANT_ALPHA
+  OneMinusConstantAlpha: 0x8004    // gl.ONE_MINUS_CONSTANT_ALPHA
+})
+
+/**
+ * @enum {number}
+ * Blend equation modes
+ */
+export const BlendEquation = /** @type {const} */({
+  Add: 0x8006,             // gl.FUNC_ADD
+  Subtract: 0x800A,        // gl.FUNC_SUBTRACT
+  ReverseSubtract: 0x800B, // gl.FUNC_REVERSE_SUBTRACT
+  Min: 0x8007,             // gl.MIN
+  Max: 0x8008              // gl.MAX
+})
+
+/**
+ * @enum {number}
+ * Stencil and depth buffer operations.
+ */
+export const StencilOp = /** @type {const} */({
+  Keep: 0x1E00,        // gl.KEEP
+  Zero: 0x0000,        // gl.ZERO
+  Replace: 0x1E01,     // gl.REPLACE
+  Incr: 0x1E02,        // gl.INCR
+  IncrWrap: 0x8507,    // gl.INCR_WRAP
+  Decr: 0x1E03,        // gl.DECR
+  DecrWrap: 0x8508,    // gl.DECR_WRAP
+  Invert: 0x150A       // gl.INVERT
+})
+
+/**
+ * @enum {number}
+ * Polygon winding directions for front-face determination.
+ */
+export const FrontFaceDirection = /** @type {const} */({
+  CW: 0x0900,   // gl.CW
+  CCW: 0x0901   // gl.CCW
+})
+
+/**
+ * @enum {number}
+ * Primitive output modes for transform feedback
+ */
+export const TransformFeedbackPrimitiveTopology = /** @type {const} */({
+  Points: 0x0000,      // gl.POINTS
+  Lines: 0x0001,       // gl.LINES
+  Triangles: 0x0004    // gl.TRIANGLES
+})
+
+/**
+ * @enum {number}
+ * Buffer storage modes for transform feedback varyings
+ */
+export const TransformFeedbackBufferMode = /** @type {const} */({
+  Interleaved: 0x8C8C,  // gl.INTERLEAVED_ATTRIBS
+  Separate: 0x8C8D      // gl.SEPARATE_ATTRIBS
+})
+
+/**
+ * @enum {number}
+ * Internal formats for renderbuffers
+ */
+export const RenderbufferFormat = /** @type {const} */({
+  Rgba4: 0x8056,            // gl.RGBA4
+  Rgb565: 0x8D62,           // gl.RGB565
+  Rgb5A1: 0x8057,           // gl.RGB5_A1
+  Depth16: 0x81A5,          // gl.DEPTH_COMPONENT16
+  Stencil8: 0x8D48,         // gl.STENCIL_INDEX8
+  Depth24: 0x81A6,          // gl.DEPTH_COMPONENT24
+  Depth32f: 0x8CAC,         // gl.DEPTH_COMPONENT32F
+  Depth24Stencil8: 0x88F0,  // gl.DEPTH24_STENCIL8
+  Depth32fStencil8: 0x8CAD  // gl.DEPTH32F_STENCIL8
+})
+
+/**
+ * @enum {number}
+ */
+export const BufferType = /**@type {const}*/({
+  Array:0x8892,
+  ElementArray:0x8893,
+  CopyRead:0x8F36,
+  CopyWrite:0x8F37,
+  Uniform:0x8A11,
+  PixelPack:0x88EB,
+  PixelUnpack:0x88EC
+})