From 65980cf75bf744f2b6c2687d6eda1adda41cfa20 Mon Sep 17 00:00:00 2001 From: Patrick Schroen Date: Fri, 6 Oct 2023 08:53:48 -0400 Subject: [PATCH] TypeScript support (#188) * feat: .d.ts type annotations * Attribute expects buffersource * Narrow AttributeData, mend array methods * chore: lowercase path directory * chore: import house cleaning * chore: format with prettier config * chore: remove unnecessary declare * feat: add tuple type to set method * feat: core/math updates * feat: extras * feat: update package.json to include src files * chore: import order adjustment * chore: Transform.setParent() description adjustment * feat: add KTXTexture declaration * fix: Orbit constructor object is a Camera * fix: update package.json exports for types and default * fix: remove unnecessary fov intersection * chore: remove unnecessary intersection for CompressedImage --------- Co-authored-by: Cody Bennett <23324155+CodyJasonBennett@users.noreply.github.com> --- package.json | 11 +- src/core/Transform.js | 1 + src/extras/{Path => path}/BaseSegment.js | 0 .../{Path => path}/CubicBezierSegment.js | 0 src/extras/{Path => path}/LineSegment.js | 0 src/extras/{Path => path}/Path.js | 0 .../{Path => path}/QuadraticBezierSegment.js | 0 src/extras/{Path => path}/utils.js | 0 src/index.js | 2 +- types/core/Camera.d.ts | 72 +++++++ types/core/Geometry.d.ts | 89 +++++++++ types/core/Mesh.d.ts | 67 +++++++ types/core/Program.d.ts | 58 ++++++ types/core/RenderTarget.d.ts | 46 +++++ types/core/Renderer.d.ts | 158 +++++++++++++++ types/core/Texture.d.ts | 91 +++++++++ types/core/Transform.d.ts | 132 +++++++++++++ types/extras/Animation.d.ts | 36 ++++ types/extras/BasisManager.d.ts | 27 +++ types/extras/Box.d.ts | 22 +++ types/extras/Curve.d.ts | 27 +++ types/extras/Cylinder.d.ts | 24 +++ types/extras/Flowmap.d.ts | 39 ++++ types/extras/GLTFAnimation.d.ts | 27 +++ types/extras/GLTFLoader.d.ts | 187 ++++++++++++++++++ types/extras/GLTFSkin.d.ts | 40 ++++ types/extras/GPGPU.d.ts | 49 +++++ types/extras/InstancedMesh.d.ts | 13 ++ types/extras/KTXTexture.d.ts | 23 +++ types/extras/NormalProgram.d.ts | 12 ++ types/extras/Orbit.d.ts | 53 +++++ types/extras/Plane.d.ts | 39 ++++ types/extras/Polyline.d.ts | 49 +++++ types/extras/Post.d.ts | 84 ++++++++ types/extras/Raycast.d.ts | 43 ++++ types/extras/Shadow.d.ts | 47 +++++ types/extras/Skin.d.ts | 56 ++++++ types/extras/Sphere.d.ts | 23 +++ types/extras/Text.d.ts | 35 ++++ types/extras/TextureLoader.d.ts | 19 ++ types/extras/Torus.d.ts | 21 ++ types/extras/Triangle.d.ts | 7 + types/extras/Tube.d.ts | 35 ++++ types/extras/WireMesh.d.ts | 17 ++ types/extras/helpers/AxesHelper.d.ts | 20 ++ types/extras/helpers/FaceNormalsHelper.d.ts | 16 ++ types/extras/helpers/GridHelper.d.ts | 18 ++ types/extras/helpers/VertexNormalsHelper.d.ts | 16 ++ types/extras/path/BaseSegment.d.ts | 5 + types/extras/path/CubicBezierSegment.d.ts | 3 + types/extras/path/LineSegment.d.ts | 3 + types/extras/path/Path.d.ts | 45 +++++ types/extras/path/QuadraticBezierSegment.d.ts | 3 + types/index.d.ts | 59 ++++++ types/math/Color.d.ts | 39 ++++ types/math/Euler.d.ts | 45 +++++ types/math/Mat3.d.ts | 68 +++++++ types/math/Mat4.d.ts | 126 ++++++++++++ types/math/Quat.d.ts | 66 +++++++ types/math/Vec2.d.ts | 67 +++++++ types/math/Vec3.d.ts | 80 ++++++++ types/math/Vec4.d.ts | 41 ++++ 62 files changed, 2498 insertions(+), 3 deletions(-) rename src/extras/{Path => path}/BaseSegment.js (100%) rename src/extras/{Path => path}/CubicBezierSegment.js (100%) rename src/extras/{Path => path}/LineSegment.js (100%) rename src/extras/{Path => path}/Path.js (100%) rename src/extras/{Path => path}/QuadraticBezierSegment.js (100%) rename src/extras/{Path => path}/utils.js (100%) create mode 100644 types/core/Camera.d.ts create mode 100644 types/core/Geometry.d.ts create mode 100644 types/core/Mesh.d.ts create mode 100644 types/core/Program.d.ts create mode 100644 types/core/RenderTarget.d.ts create mode 100644 types/core/Renderer.d.ts create mode 100644 types/core/Texture.d.ts create mode 100644 types/core/Transform.d.ts create mode 100644 types/extras/Animation.d.ts create mode 100644 types/extras/BasisManager.d.ts create mode 100644 types/extras/Box.d.ts create mode 100644 types/extras/Curve.d.ts create mode 100644 types/extras/Cylinder.d.ts create mode 100644 types/extras/Flowmap.d.ts create mode 100644 types/extras/GLTFAnimation.d.ts create mode 100644 types/extras/GLTFLoader.d.ts create mode 100644 types/extras/GLTFSkin.d.ts create mode 100644 types/extras/GPGPU.d.ts create mode 100644 types/extras/InstancedMesh.d.ts create mode 100644 types/extras/KTXTexture.d.ts create mode 100644 types/extras/NormalProgram.d.ts create mode 100644 types/extras/Orbit.d.ts create mode 100644 types/extras/Plane.d.ts create mode 100644 types/extras/Polyline.d.ts create mode 100644 types/extras/Post.d.ts create mode 100644 types/extras/Raycast.d.ts create mode 100644 types/extras/Shadow.d.ts create mode 100644 types/extras/Skin.d.ts create mode 100644 types/extras/Sphere.d.ts create mode 100644 types/extras/Text.d.ts create mode 100644 types/extras/TextureLoader.d.ts create mode 100644 types/extras/Torus.d.ts create mode 100644 types/extras/Triangle.d.ts create mode 100644 types/extras/Tube.d.ts create mode 100644 types/extras/WireMesh.d.ts create mode 100644 types/extras/helpers/AxesHelper.d.ts create mode 100644 types/extras/helpers/FaceNormalsHelper.d.ts create mode 100644 types/extras/helpers/GridHelper.d.ts create mode 100644 types/extras/helpers/VertexNormalsHelper.d.ts create mode 100644 types/extras/path/BaseSegment.d.ts create mode 100644 types/extras/path/CubicBezierSegment.d.ts create mode 100644 types/extras/path/LineSegment.d.ts create mode 100644 types/extras/path/Path.d.ts create mode 100644 types/extras/path/QuadraticBezierSegment.d.ts create mode 100644 types/index.d.ts create mode 100644 types/math/Color.d.ts create mode 100644 types/math/Euler.d.ts create mode 100644 types/math/Mat3.d.ts create mode 100644 types/math/Mat4.d.ts create mode 100644 types/math/Quat.d.ts create mode 100644 types/math/Vec2.d.ts create mode 100644 types/math/Vec3.d.ts create mode 100644 types/math/Vec4.d.ts diff --git a/package.json b/package.json index b6e7718e..e9f870df 100644 --- a/package.json +++ b/package.json @@ -2,10 +2,17 @@ "name": "ogl", "version": "1.0.0", "description": "WebGL Library", - "main": "./src/index.js", - "exports": "./src/index.js", "type": "module", + "main": "./src/index.js", + "exports": { + ".": { + "types": "./types/index.d.ts", + "default": "./src/index.js" + }, + "./src/*": "./src/*" + }, "sideEffects": false, + "types": "./types/index.d.ts", "directories": { "example": "examples" }, diff --git a/src/core/Transform.js b/src/core/Transform.js index 8f5133b4..fab571e0 100644 --- a/src/core/Transform.js +++ b/src/core/Transform.js @@ -12,6 +12,7 @@ export class Transform { this.matrix = new Mat4(); this.worldMatrix = new Mat4(); this.matrixAutoUpdate = true; + this.worldMatrixNeedsUpdate = false; this.position = new Vec3(); this.quaternion = new Quat(); diff --git a/src/extras/Path/BaseSegment.js b/src/extras/path/BaseSegment.js similarity index 100% rename from src/extras/Path/BaseSegment.js rename to src/extras/path/BaseSegment.js diff --git a/src/extras/Path/CubicBezierSegment.js b/src/extras/path/CubicBezierSegment.js similarity index 100% rename from src/extras/Path/CubicBezierSegment.js rename to src/extras/path/CubicBezierSegment.js diff --git a/src/extras/Path/LineSegment.js b/src/extras/path/LineSegment.js similarity index 100% rename from src/extras/Path/LineSegment.js rename to src/extras/path/LineSegment.js diff --git a/src/extras/Path/Path.js b/src/extras/path/Path.js similarity index 100% rename from src/extras/Path/Path.js rename to src/extras/path/Path.js diff --git a/src/extras/Path/QuadraticBezierSegment.js b/src/extras/path/QuadraticBezierSegment.js similarity index 100% rename from src/extras/Path/QuadraticBezierSegment.js rename to src/extras/path/QuadraticBezierSegment.js diff --git a/src/extras/Path/utils.js b/src/extras/path/utils.js similarity index 100% rename from src/extras/Path/utils.js rename to src/extras/path/utils.js diff --git a/src/index.js b/src/index.js index 8ca4369a..7f1b8222 100644 --- a/src/index.js +++ b/src/index.js @@ -28,7 +28,7 @@ export { Torus } from './extras/Torus.js'; export { Orbit } from './extras/Orbit.js'; export { Raycast } from './extras/Raycast.js'; export { Curve } from './extras/Curve.js'; -export { Path } from './extras/Path/Path.js'; +export { Path } from './extras/path/Path.js'; export { Tube } from './extras/Tube.js'; export { Post } from './extras/Post.js'; export { Skin } from './extras/Skin.js'; diff --git a/types/core/Camera.d.ts b/types/core/Camera.d.ts new file mode 100644 index 00000000..82818938 --- /dev/null +++ b/types/core/Camera.d.ts @@ -0,0 +1,72 @@ +import { Transform } from './Transform.js'; +import { Mat4 } from '../math/Mat4.js'; +import { Vec3 } from '../math/Vec3.js'; + +import type { OGLRenderingContext } from './Renderer.js'; +import type { Vec3Tuple } from '../math/Vec3.js'; +import type { Mesh } from './Mesh.js'; + +export interface CameraOptions { + near: number; + far: number; + fov: number; + aspect: number; + left: number; + right: number; + bottom: number; + top: number; + zoom: number; +} + +export interface PerspectiveOptions extends Pick {} + +export interface OrthographicOptions extends Pick {} + +export type CameraType = 'perspective' | 'orthographic'; + +/** + * A perspective or orthographic camera. + * @see {@link https://github.com/oframe/ogl/blob/master/src/core/Camera.js | Source} + */ +export class Camera extends Transform { + projectionMatrix: Mat4; + viewMatrix: Mat4; + projectionViewMatrix: Mat4; + worldPosition: Vec3; + + type: CameraType; + + near: number; + far: number; + fov: number; + aspect: number; + left: number; + right: number; + bottom: number; + top: number; + zoom: number; + + frustum: (Vec3 & { + constant: number; + })[]; + + constructor(gl: OGLRenderingContext, options?: Partial); + + perspective(options?: Partial): this; + + orthographic(options?: Partial): this; + + updateMatrixWorld(): this; + + lookAt(target: Vec3 | Vec3Tuple): this; + + project(v: Vec3): this; + + unproject(v: Vec3): this; + + updateFrustum(): void; + + frustumIntersectsMesh(node: Mesh, worldMatrix?: Mat4): boolean; + + frustumIntersectsSphere(center: Vec3, radius: number): boolean; +} diff --git a/types/core/Geometry.d.ts b/types/core/Geometry.d.ts new file mode 100644 index 00000000..a58092da --- /dev/null +++ b/types/core/Geometry.d.ts @@ -0,0 +1,89 @@ +import { Vec3 } from '../math/Vec3.js'; + +import type { OGLRenderingContext, RenderState } from './Renderer.js'; +import type { Program } from './Program.js'; + +export type AttributeMap = Record>; + +export type AttributeData = Float32Array | Uint32Array | Uint16Array; + +export interface Attribute { + data: AttributeData; + size: number; + instanced: null | number | boolean; + type: GLenum; + normalized: boolean; + + buffer: WebGLBuffer; + stride: number; + offset: number; + count: number; + target: number; + id: number; + divisor: number; + needsUpdate: boolean; + usage: number; +} + +export interface Bounds { + min: Vec3; + max: Vec3; + center: Vec3; + scale: Vec3; + radius: number; +} + +export type GeometryRaycast = 'sphere' | 'box'; + +/** + * A mesh, line, or point geometry. + * @see {@link https://github.com/oframe/ogl/blob/master/src/core/Geometry.js | Source} + */ +export class Geometry { + gl: OGLRenderingContext; + attributes: AttributeMap; + id: number; + + VAOs: { + [programKey: string]: WebGLVertexArrayObject; + }; + + drawRange: { + start: number; + count: number; + }; + instancedCount: number; + + glState: RenderState; + + isInstanced: boolean; + bounds: Bounds; + + raycast?: GeometryRaycast; // User defined + + constructor(gl: OGLRenderingContext, attributes?: AttributeMap); + + addAttribute(key: string, attr: Partial): number | undefined; + + updateAttribute(attr: Partial): void; + + setIndex(value: Attribute): void; + + setDrawRange(start: number, count: number): void; + + setInstancedCount(value: number): void; + + createVAO(program: Program): void; + + bindAttributes(program: Program): void; + + draw(options: { program: Program; mode?: number }): void; + + getPosition(): Partial; + + computeBoundingBox(attr: Partial): void; + + computeBoundingSphere(attr?: Partial): void; + + remove(): void; +} diff --git a/types/core/Mesh.d.ts b/types/core/Mesh.d.ts new file mode 100644 index 00000000..0cf23abe --- /dev/null +++ b/types/core/Mesh.d.ts @@ -0,0 +1,67 @@ +import { Transform } from './Transform.js'; +import { Mat3 } from '../math/Mat3.js'; +import { Mat4 } from '../math/Mat4.js'; + +import type { OGLRenderingContext } from './Renderer.js'; +import type { Vec2 } from '../math/Vec2.js'; +import type { Vec3 } from '../math/Vec3.js'; +import type { Geometry } from './Geometry.js'; +import type { Program } from './Program.js'; +import type { Camera } from './Camera.js'; + +export interface MeshOptions< + TGeometry extends Geometry = Geometry, + TProgram extends Program = Program, +> { + geometry: TGeometry; + program: TProgram; + mode: GLenum; + frustumCulled: boolean; + renderOrder: number; +} + +export type MeshRenderCallback = (renderInfo: { mesh: Mesh; camera?: Camera }) => any; + +export interface RaycastHit { + localPoint: Vec3; + distance: number; + point: Vec3; + faceNormal: Vec3; + localFaceNormal: Vec3; + uv: Vec2; + localNormal: Vec3; + normal: Vec3; +} + +/** + * Represents a {@link https://en.wikipedia.org/wiki/Polygon_mesh | polygon mesh}. + * @see {@link https://github.com/oframe/ogl/blob/master/src/core/Mesh.js | Source} + */ +export class Mesh< + TGeometry extends Geometry = Geometry, + TProgram extends Program = Program, +> extends Transform { + gl: OGLRenderingContext; + id: number; + geometry: TGeometry; + program: TProgram; + mode: GLenum; + + frustumCulled: boolean; + + renderOrder: number; + modelViewMatrix: Mat4; + normalMatrix: Mat3; + beforeRenderCallbacks: MeshRenderCallback[]; + afterRenderCallbacks: MeshRenderCallback[]; + + hit?: Partial; // Set from raycaster + + constructor(gl: OGLRenderingContext, options?: Partial); + + onBeforeRender(f: MeshRenderCallback): this; + + onAfterRender(f: MeshRenderCallback): this; + + draw(options?: { camera?: Camera }): void; +} diff --git a/types/core/Program.d.ts b/types/core/Program.d.ts new file mode 100644 index 00000000..e1575b79 --- /dev/null +++ b/types/core/Program.d.ts @@ -0,0 +1,58 @@ +import type { OGLRenderingContext, BlendFunc, BlendEquation } from './Renderer'; + +export interface ProgramOptions { + vertex: string; + fragment: string; + uniforms: Record; + transparent: boolean; + cullFace: GLenum | false | null; + frontFace: GLenum; + depthTest: boolean; + depthWrite: boolean; + depthFunc: GLenum; +} + +export interface UniformInfo extends WebGLActiveInfo { + uniformName: string; + nameComponents: string[]; + isStruct: boolean; + isStructArray: boolean; + structIndex: number; + structProperty: string; +} + +/** + * A WebGL program. + * @see {@link https://github.com/oframe/ogl/blob/master/src/core/Program.js | Source} + */ +export class Program { + gl: OGLRenderingContext; + uniforms: Record; + id: number; + + transparent: boolean; + cullFace: GLenum | false | null; + frontFace: GLenum; + depthTest: boolean; + depthWrite: boolean; + depthFunc: GLenum; + blendFunc: BlendFunc; + blendEquation: BlendEquation; + + program: WebGLProgram; + uniformLocations: Map; + attributeLocations: Map; + attributeOrder: string; + + constructor(gl: OGLRenderingContext, options?: Partial); + + setBlendFunc(src: GLenum, dst: GLenum, srcAlpha?: GLenum, dstAlpha?: GLenum): void; + + setBlendEquation(modeRGB: GLenum, modeAlpha: GLenum): void; + + applyState(): void; + + use(options?: { flipFaces?: boolean }): void; + + remove(): void; +} diff --git a/types/core/RenderTarget.d.ts b/types/core/RenderTarget.d.ts new file mode 100644 index 00000000..0ba8f38c --- /dev/null +++ b/types/core/RenderTarget.d.ts @@ -0,0 +1,46 @@ +import { Texture } from './Texture.js'; + +import type { OGLRenderingContext } from './Renderer.js'; + +export interface RenderTargetOptions { + width: number; + height: number; + target: GLenum; + color: number; + depth: boolean; + stencil: boolean; + depthTexture: boolean; + wrapS: GLenum; + wrapT: GLenum; + minFilter: GLenum; + magFilter: GLenum; + type: GLenum; + format: GLenum; + internalFormat: GLenum; + unpackAlignment: number; + premultiplyAlpha: boolean; +} + +/** + * A render target. + * @see {@link https://github.com/oframe/ogl/blob/master/src/core/RenderTarget.js | Source} + */ +export class RenderTarget { + gl: OGLRenderingContext; + width: number; + height: number; + depth: boolean; + buffer: WebGLFramebuffer; + target: number; + + textures: Texture[]; + texture: Texture; + depthTexture: Texture; + depthBuffer: WebGLRenderbuffer; + stencilBuffer: WebGLRenderbuffer; + depthStencilBuffer: WebGLRenderbuffer; + + constructor(gl: OGLRenderingContext, options?: Partial); + + setSize(width: number, height: number): void; +} diff --git a/types/core/Renderer.d.ts b/types/core/Renderer.d.ts new file mode 100644 index 00000000..6612f7c7 --- /dev/null +++ b/types/core/Renderer.d.ts @@ -0,0 +1,158 @@ +import type { Camera } from './Camera.js'; +import type { Transform } from './Transform.js'; +import type { Mesh } from './Mesh.js'; +import type { RenderTarget } from './RenderTarget.js'; + +export type OGLRenderingContext = (WebGL2RenderingContext | WebGLRenderingContext) & { + renderer: Renderer; + canvas: HTMLCanvasElement; +}; + +export interface RendererOptions { + canvas: HTMLCanvasElement; + width: number; + height: number; + dpr: number; + alpha: boolean; + depth: boolean; + stencil: boolean; + antialias: boolean; + premultipliedAlpha: boolean; + preserveDrawingBuffer: boolean; + powerPreference: string; + autoClear: boolean; + webgl: number; +} + +export interface DeviceParameters { + maxTextureUnits?: number; + maxAnisotropy?: number; +} + +export interface BlendFunc { + src: GLenum; + dst: GLenum; + srcAlpha?: GLenum; + dstAlpha?: GLenum; +} + +export interface BlendEquation { + modeRGB: GLenum; + modeAlpha?: GLenum; +} + +export interface Viewport { + x: number; + y: number; + width: number | null; + height: number | null; +} + +export interface RenderState { + blendFunc: BlendFunc; + blendEquation: BlendEquation; + cullFace: GLenum | false | null; + frontFace: number; + depthMask: boolean; + depthFunc: number; + premultiplyAlpha: boolean; + flipY: boolean; + unpackAlignment: number; + viewport: Viewport; + textureUnits: number[]; + activeTextureUnit: number; + framebuffer: WebGLFramebuffer | null; + boundBuffer?: WebGLBuffer | null; + uniformLocations: Map; + currentProgram: number | null; +} + +export interface RendererSortable extends Mesh { + zDepth: number; +} + +/** + * The WebGL renderer. + * @see {@link https://github.com/oframe/ogl/blob/master/src/core/Renderer.js | Source} + */ +export class Renderer { + dpr: number; + alpha: boolean; + color: boolean; + depth: boolean; + stencil: boolean; + premultipliedAlpha: boolean; + autoClear: boolean; + id: number; + + gl: OGLRenderingContext; + isWebgl2: boolean; + + state: RenderState; + + extensions: Record; + vertexAttribDivisor: Function; + drawArraysInstanced: Function; + drawElementsInstanced: Function; + createVertexArray: Function; + bindVertexArray: Function; + deleteVertexArray: Function; + drawBuffers: Function; + + parameters: DeviceParameters; + + width: number; + height: number; + + currentGeometry?: string | null; // Set from geometry + + constructor(options?: Partial); + + setSize(width: number, height: number): void; + + setViewport(width: number, height: number, x?: number, y?: number): void; + + setScissor(width: number, height: number, x?: number, y?: number): void; + + enable(id: GLenum): void; + + disable(id: GLenum): void; + + setBlendFunc(src: GLenum, dst: GLenum, srcAlpha: GLenum, dstAlpha: GLenum): void; + + setBlendEquation(modeRGB: GLenum, modeAlpha: GLenum): void; + + setCullFace(value: GLenum): void; + + setFrontFace(value: GLenum): void; + + setDepthMask(value: GLboolean): void; + + setDepthFunc(value: GLenum): void; + + activeTexture(value: number): void; + + bindFramebuffer(options?: { target?: GLenum; buffer?: WebGLFramebuffer | null }): void; + + getExtension(extension: string, webgl2Func?: keyof WebGL2RenderingContext, extFunc?: string): Function | null; + + sortOpaque(a: RendererSortable, b: RendererSortable): number; + + sortTransparent(a: RendererSortable, b: RendererSortable): number; + + sortUI(a: RendererSortable, b: RendererSortable): number; + + getRenderList(options: { scene: Transform; camera?: Camera; frustumCull: boolean; sort: boolean }): Mesh[]; + + render( + options: Partial<{ + scene: Transform; + camera: Camera; + target: RenderTarget; + update: boolean; + sort: boolean; + frustumCull: boolean; + clear: boolean; + }>, + ): void; +} diff --git a/types/core/Texture.d.ts b/types/core/Texture.d.ts new file mode 100644 index 00000000..6ff0e460 --- /dev/null +++ b/types/core/Texture.d.ts @@ -0,0 +1,91 @@ +import type { OGLRenderingContext, RenderState } from './Renderer'; + +export type CompressedImage = { + isCompressedTexture?: boolean; + data: Uint8Array; + width: number; + height: number; +}[]; + +export type ImageRepresentation = + | HTMLImageElement + | HTMLVideoElement + | HTMLImageElement[] + | ArrayBufferView + | CompressedImage; + +export interface TextureOptions { + image: ImageRepresentation; + target: number; + type: number; + format: number; + internalFormat: number; + wrapS: number; + wrapT: number; + generateMipmaps: boolean; + minFilter: number; + magFilter: number; + premultiplyAlpha: boolean; + unpackAlignment: number; + flipY: boolean; + anisotropy: number; + level: number; + width: number; + height: number; +} + +/** + * A surface, reflection, or refraction map. + * @see {@link https://github.com/oframe/ogl/blob/master/src/core/Texture.js | Source} + */ +export class Texture { + gl: OGLRenderingContext; + id: number; + + image?: ImageRepresentation; + target: number; + type: number; + format: number; + internalFormat: number; + minFilter: number; + magFilter: number; + wrapS: number; + wrapT: number; + generateMipmaps: boolean; + premultiplyAlpha: boolean; + unpackAlignment: number; + flipY: boolean; + anisotropy: number; + level: number; + width: number; + height: number; + texture: WebGLTexture; + + store: { + image?: ImageRepresentation | null; + }; + + glState: RenderState; + + state: { + minFilter: number; + magFilter: number; + wrapS: number; + wrapT: number; + anisotropy: number; + }; + + needsUpdate: boolean; + onUpdate?: () => void; + + // Set from texture loader + ext?: string; + name?: string; + loaded?: Promise; + + constructor(gl: OGLRenderingContext, options?: Partial); + + bind(): void; + + update(textureUnit?: number): void; +} diff --git a/types/core/Transform.d.ts b/types/core/Transform.d.ts new file mode 100644 index 00000000..ece7ea3d --- /dev/null +++ b/types/core/Transform.d.ts @@ -0,0 +1,132 @@ +import type { Euler } from '../math/Euler.js'; +import type { Mat4 } from '../math/Mat4.js'; +import type { Quat } from '../math/Quat.js'; +import type { Vec3, Vec3Tuple } from '../math/Vec3.js'; + +/** + * The base class for most objects and provides a set of properties and methods for manipulating + * objects in 3D space. + * @see {@link https://github.com/oframe/ogl/blob/master/src/core/Transform.js | Source} + */ +export class Transform { + /** + * The parent. + * @see {@link https://en.wikipedia.org/wiki/Scene_graph | scene graph}. + */ + parent: Transform | null; + + /** + * An array with the children. + */ + children: Transform[]; + + /** + * The visibility. + */ + visible: boolean; + + /** + * The local transform matrix. + */ + matrix: Mat4; + + /** + * The world transform matrix. + */ + worldMatrix: Mat4; + + /** + * When set, it updates the local transform matrix every frame and also updates the worldMatrix + * property. + * @defaultValue `true` + */ + matrixAutoUpdate: boolean; + + /** + * When set, it updates the world transform matrix in that frame and resets this property to + * false. + * @defaultValue `false` + */ + worldMatrixNeedsUpdate: boolean; + + /** + * The local position. + */ + position: Vec3; + + /** + * The local rotation as a {@link Quat | Quaternion}. + */ + quaternion: Quat; + + /** + * The local scale. + * @defaultValue `new Vec3(1)` + */ + scale: Vec3; + + /** + * The local rotation as {@link Euler | Euler angles}. + */ + rotation: Euler; + + /** + * Up vector used by the {@link lookAt | lookAt} method. + * @defaultValue `new Vec3(0, 1, 0)` + */ + up: Vec3; + + /** + * Creates a new transform object. + */ + constructor(); + + /** + * Sets the parent. + * @param {Transform | null} parent The parent. + * @param {boolean} [notifyParent=true] Adds this as a child of the parent. + */ + setParent(parent: Transform | null, notifyParent?: boolean): void; + + /** + * Adds a child. + * @param {Transform} child The child. + * @param {boolean} [notifyChild=true] Sets the parent of the child to this. + */ + addChild(child: Transform, notifyChild?: boolean): void; + + /** + * Removes a child. + * @param {Transform} child The child. + * @param {boolean} [notifyChild=true] Sets the parent of the child to null. + */ + removeChild(child: Transform, notifyChild?: boolean): void; + + /** + * Updates the world transform matrix. + */ + updateMatrixWorld(force?: boolean): void; + + /** + * Updates the local transform matrix. + */ + updateMatrix(): void; + + /** + * Executes the callback on this transform object and all descendants. + * @param {Function} callback The callback. + */ + traverse(callback: (node: Transform) => boolean | void): void; + + /** + * Decomposes this transform object into it's position, quaternion and scale components. + */ + decompose(): void; + + /** + * Rotates this transform object to face a target vector. + * @param {Vec3 | Vec3Tuple} target A target vector to look at. + * @param {boolean} [invert=false] Invert the local position and target vector. + */ + lookAt(target: Vec3 | Vec3Tuple, invert?: boolean): void; +} diff --git a/types/extras/Animation.d.ts b/types/extras/Animation.d.ts new file mode 100644 index 00000000..8047e982 --- /dev/null +++ b/types/extras/Animation.d.ts @@ -0,0 +1,36 @@ +import { Vec3 } from '../math/Vec3.js'; +import { Quat } from '../math/Quat.js'; + +import type { OGLRenderingContext } from '../core/Renderer.js'; +import type { BoneTransform } from './Skin.js'; + +export interface AnimationFrame { + position: Vec3; + quaternion: Quat; + scale: Vec3; +} + +export interface AnimationData { + frames: AnimationFrame[]; +} + +export interface AnimationOptions { + objects: BoneTransform[]; + data: AnimationData; +} + +/** + * A class for animation. + * @see {@link https://github.com/oframe/ogl/blob/master/src/extras/Animation.js | Source} + */ +export class Animation { + objects: BoneTransform[]; + data: AnimationData; + elapsed: number; + weight: number; + duration: number; + + constructor(gl: OGLRenderingContext, options?: Partial); + + update(totalWeight?: number, isSet?: boolean): void; +} diff --git a/types/extras/BasisManager.d.ts b/types/extras/BasisManager.d.ts new file mode 100644 index 00000000..f2e730ac --- /dev/null +++ b/types/extras/BasisManager.d.ts @@ -0,0 +1,27 @@ +import type { OGLRenderingContext } from '../core/Renderer.js'; + +export type BasisManagerFormat = 'astc' | 'bptc' | 's3tc' | 'etc1' | 'pvrtc' | 'none'; + +export type BasisImage = (Uint8Array | Uint16Array) & { + width: number; + height: number; + isCompressedTexture: boolean; + internalFormat: number; + isBasis: boolean; +}; + +/** + * A {@link https://github.com/binomialLLC/basis_universal | Basis Universal GPU Texture} loader. + * @see {@link https://github.com/oframe/ogl/blob/master/src/extras/BasisManager.js | Source} + */ +export class BasisManager { + constructor(workerSrc: string | URL, gl?: OGLRenderingContext); + + getSupportedFormat(gl?: OGLRenderingContext): BasisManagerFormat; + + initWorker(workerSrc: string | URL): void; + + onMessage(event: { data: { id: number; error: string; image: BasisImage } }): void; + + parseTexture(buffer: ArrayBuffer): Promise; +} diff --git a/types/extras/Box.d.ts b/types/extras/Box.d.ts new file mode 100644 index 00000000..cd525474 --- /dev/null +++ b/types/extras/Box.d.ts @@ -0,0 +1,22 @@ +import { Geometry } from '../core/Geometry.js'; + +import type { OGLRenderingContext } from '../core/Renderer.js'; +import type { AttributeMap } from '../core/Geometry.js'; + +export interface BoxOptions { + width: number; + height: number; + depth: number; + widthSegments: number; + heightSegments: number; + depthSegments: number; + attributes: AttributeMap; +} + +/** + * A box geometry. + * @see {@link https://github.com/oframe/ogl/blob/master/src/extras/Box.js | Source} + */ +export class Box extends Geometry { + constructor(gl: OGLRenderingContext, options?: Partial); +} diff --git a/types/extras/Curve.d.ts b/types/extras/Curve.d.ts new file mode 100644 index 00000000..09246faf --- /dev/null +++ b/types/extras/Curve.d.ts @@ -0,0 +1,27 @@ +import { Vec3 } from '../math/Vec3.js'; + +export type CurveType = 'catmullrom' | 'cubicbezier' | 'quadraticbezier'; + +export interface CurveOptions { + points: Vec3[]; + divisions: number; + type: CurveType; +} + +/** + * A class for creating curves. + * @see {@link https://github.com/oframe/ogl/blob/master/src/extras/Curve.js | Source} + */ +export class Curve { + static CATMULLROM: 'catmullrom'; + static CUBICBEZIER: 'cubicbezier'; + static QUADRATICBEZIER: 'quadraticbezier'; + + points: Vec3[]; + divisions: number; + type: CurveType; + + constructor(options?: Partial); + + getPoints(divisions?: number, a?: number, b?: number): Vec3[]; +} diff --git a/types/extras/Cylinder.d.ts b/types/extras/Cylinder.d.ts new file mode 100644 index 00000000..8172cae7 --- /dev/null +++ b/types/extras/Cylinder.d.ts @@ -0,0 +1,24 @@ +import { Geometry } from '../core/Geometry.js'; + +import type { OGLRenderingContext } from '../core/Renderer.js'; +import type { AttributeMap } from '../core/Geometry.js'; + +export interface CylinderOptions { + radiusTop: number; + radiusBottom: number; + height: number; + radialSegments: number; + heightSegments: number; + openEnded: boolean; + thetaStart: number; + thetaLength: number; + attributes: AttributeMap; +} + +/** + * A cylinder geometry. + * @see {@link https://github.com/oframe/ogl/blob/master/src/extras/Cylinder.js | Source} + */ +export class Cylinder extends Geometry { + constructor(gl: OGLRenderingContext, options?: Partial); +} diff --git a/types/extras/Flowmap.d.ts b/types/extras/Flowmap.d.ts new file mode 100644 index 00000000..95cad3f0 --- /dev/null +++ b/types/extras/Flowmap.d.ts @@ -0,0 +1,39 @@ +import { RenderTarget } from '../core/RenderTarget.js'; +import { Mesh } from '../core/Mesh.js'; +import { Vec2 } from '../math/Vec2.js'; + +import type { OGLRenderingContext } from '../core/Renderer.js'; + +export interface FlowmapOptions { + size: number; + falloff: number; + alpha: number; + dissipation: number; + type: number; +} + +/** + * Mouse flowmap. + * @see {@link https://github.com/oframe/ogl/blob/master/src/extras/Flowmap.js | Source} + */ +export class Flowmap { + gl: OGLRenderingContext; + + uniform: { value: RenderTarget['texture'] | null }; + + mask: { + read: RenderTarget; + write: RenderTarget; + swap: () => void; + }; + + aspect: number; + mouse: Vec2; + velocity: Vec2; + + mesh: Mesh; + + constructor(gl: OGLRenderingContext, options?: Partial); + + update(): void; +} diff --git a/types/extras/GLTFAnimation.d.ts b/types/extras/GLTFAnimation.d.ts new file mode 100644 index 00000000..561636e0 --- /dev/null +++ b/types/extras/GLTFAnimation.d.ts @@ -0,0 +1,27 @@ +export interface GLTFAnimationData { + node: any; + transform: any; + interpolation: any; + times: any; + values: any; +} + +/** + * A class for animation. + * @see {@link https://github.com/oframe/ogl/blob/master/src/extras/GLTFAnimation.js | Source} + */ +export class GLTFAnimation { + data: GLTFAnimationData[]; + elapsed: number; + weight: number; + loop: boolean; + startTime: number; + endTime: number; + duration: number; + + constructor(data: GLTFAnimationData[], weight?: number); + + update(totalWeight?: number, isSet?: boolean): void; + + cubicSplineInterpolate(t: number, prevVal: any, prevTan: any, nextTan: any, nextVal: any): any; +} diff --git a/types/extras/GLTFLoader.d.ts b/types/extras/GLTFLoader.d.ts new file mode 100644 index 00000000..8b233286 --- /dev/null +++ b/types/extras/GLTFLoader.d.ts @@ -0,0 +1,187 @@ +import { Geometry } from '../core/Geometry.js'; +import { Transform } from '../core/Transform.js'; +import { Texture } from '../core/Texture.js'; +import { Mesh } from '../core/Mesh.js'; +import { GLTFAnimation } from './GLTFAnimation.js'; +import { Mat4 } from '../math/Mat4.js'; +import { Vec3 } from '../math/Vec3.js'; +import { NormalProgram } from './NormalProgram.js'; +import { InstancedMesh } from './InstancedMesh.js'; + +import type { OGLRenderingContext } from '../core/Renderer.js'; +import type { Color } from '../math/Color.js'; +import type { BasisManager } from './BasisManager.js'; +import type { GLTFSkinSkeleton } from './GLTFSkin.js'; + +export interface GLTFAnimationReference { + name: string; + animation: GLTFAnimation; +} + +export interface GLTFLightOptions { + name: string; + color: { value: Color }; + direction: { value: Vec3 }; + position: { value: Vec3 }; + distance: { value: number }; + decay: { value: number }; +} + +export interface GLTFLights { + directional: Partial[]; + point: Partial[]; + spot: Partial[]; +} + +export interface GLTFAccessor { + data: ArrayLike; + size: number; + type: number | string; + normalized: boolean; + buffer: WebGLBuffer; + stride: number; + offset: number; + count: number; + min: number; + max: number; +} + +export interface GLTFSkinReference { + inverseBindMatrices: GLTFAccessor; + skeleton: GLTFSkinSkeleton; + joints: { worldMatrix: Mat4; bindInverse: Mat4 }[]; +} + +export interface GLTFMaterial { + name: string; + extensions: object; + extras: object; + baseColorFactor: [number, number, number, number]; + baseColorTexture: { texture: Texture; scale: number }; + metallicFactor: number; + roughnessFactor: number; + metallicRoughnessTexture: { texture: Texture; scale: number }; + normalTexture: { texture: Texture; scale: number }; + occlusionTexture: { texture: Texture; scale: number }; + emissiveTexture: { texture: Texture; scale: number }; + emissiveFactor: [number, number, number]; + alphaMode: string; + alphaCutoff: number; + doubleSided: boolean; +} + +export interface GLTFProgram extends NormalProgram { + gltfMaterial: GLTFMaterial; +} + +export interface GLTFPrimitive { + geometry: Geometry; + program: GLTFProgram; + mode: number; +} + +export interface GLTFMesh { + primitives: (InstancedMesh | Mesh)[]; + weights: number[]; + name: string; +} + +export interface GLTFDescription {} // TODO: remove? + +export interface GLTF { + json: GLTFDescription; + buffers: ArrayBuffer[]; + bufferViews: ArrayBufferView[]; + images: (HTMLImageElement | ImageBitmap)[]; + textures: Texture[]; + materials: GLTFMaterial[]; + meshes: GLTFMesh[]; + nodes: (InstancedMesh | Mesh)[]; + lights: GLTFLights; + animations: GLTFAnimationReference[]; + scenes: Transform[]; + scene: Transform[]; +} + +/** + * The {@link https://www.khronos.org/gltf/ | glTF (GL Transmission Format)} loader. + * @see {@link https://github.com/oframe/ogl/blob/master/src/extras/GLTFLoader.js | Source} + */ +export class GLTFLoader { + static setBasisManager(manager: BasisManager): void; + + static load(gl: OGLRenderingContext, src: string): Promise; + + static parse(gl: OGLRenderingContext, desc: GLTFDescription, dir: string): Promise; + + static parseDesc(src: string): Promise; + + static unpackGLB(glb: ArrayBuffer): GLTFDescription; + + static resolveURI(uri: string, dir: string): string; + + static loadBuffers(desc: GLTFDescription, dir: string): Promise | null; + + static parseBufferViews(gl: OGLRenderingContext, desc: GLTFDescription, buffers: ArrayBuffer[]): ArrayBufferView[] | null; + + static parseImages( + gl: OGLRenderingContext, + desc: GLTFDescription, + dir: string, + bufferViews: ArrayBufferView[], + ): Promise<(HTMLImageElement | ImageBitmap)[]> | null; + + static parseTextures(gl: OGLRenderingContext, desc: GLTFDescription, images: (HTMLImageElement | ImageBitmap)[]): Texture[] | null; + + static createTexture( + gl: OGLRenderingContext, + desc: GLTFDescription, + images: (HTMLImageElement | ImageBitmap)[], + options: { sample: any; source: any; name: any; extensions: any; extras: any }, + ): Texture; + + static parseMaterials(gl: OGLRenderingContext, desc: GLTFDescription, textures: Texture[]): GLTFMaterial[] | null; + + static parseSkins(gl: OGLRenderingContext, desc: GLTFDescription, bufferViews: ArrayBufferView[]): GLTFSkinReference[] | null; + + static parseMeshes( + gl: OGLRenderingContext, + desc: GLTFDescription, + bufferViews: ArrayBufferView[], + materials: GLTFMaterial[], + skins: GLTFSkinReference[], + ): GLTFMesh[] | null; + + static parsePrimitives( + gl: OGLRenderingContext, + primitives: object[], + desc: GLTFDescription, + bufferViews: ArrayBufferView[], + materials: GLTFMaterial[], + numInstances: number, + isLightmap: boolean, + ): GLTFPrimitive[]; + + static parseAccessor(index: number, desc: GLTFDescription, bufferViews: ArrayBufferView[]): GLTFAccessor; + + static parseNodes( + gl: OGLRenderingContext, + desc: GLTFDescription, + meshes: GLTFMesh[], + skins: GLTFSkinReference[], + images: (HTMLImageElement | ImageBitmap)[], + ): (InstancedMesh | Mesh)[] | null; + + static populateSkins(skins: GLTFSkinReference[], nodes: (InstancedMesh | Mesh)[]): void; + + static parseAnimations( + gl: OGLRenderingContext, + desc: GLTFDescription, + nodes: (InstancedMesh | Mesh)[], + bufferViews: ArrayBufferView[], + ): GLTFAnimationReference[] | null; + + static parseScenes(desc: GLTFDescription, nodes: (InstancedMesh | Mesh)[]): Transform[] | null; + + static parseLights(gl: OGLRenderingContext, desc: GLTFDescription, nodes: (InstancedMesh | Mesh)[], scenes: Transform[]): GLTFLights; +} diff --git a/types/extras/GLTFSkin.d.ts b/types/extras/GLTFSkin.d.ts new file mode 100644 index 00000000..4005263c --- /dev/null +++ b/types/extras/GLTFSkin.d.ts @@ -0,0 +1,40 @@ +import { Mesh } from '../core/Mesh.js'; +import { Mat4 } from '../math/Mat4.js'; +import { Texture } from '../core/Texture.js'; + +import type { OGLRenderingContext } from '../core/Renderer.js'; +import type { Geometry } from '../core/Geometry.js'; +import type { Program } from '../core/Program.js'; +import type { Camera } from '../core/Camera.js'; + +export interface GLTFSkinSkeleton { + joints: { worldMatrix: Mat4; bindInverse: Mat4 }[]; +} + +export interface GLTFSkinOptions { + skeleton: GLTFSkinSkeleton; + geometry: Geometry; + program: Program; + mode: GLenum; +} + +/** + * A mesh with a skeleton and bones for animation. + * @see {@link https://github.com/oframe/ogl/blob/master/src/extras/GLTFSkin.js | Source} + */ +export class GLTFSkin extends Mesh { + skeleton: GLTFSkinSkeleton; + program: TProgram; + + boneMatrices: Float32Array; + boneTextureSize: number; + boneTexture: Texture; + + constructor(gl: OGLRenderingContext, options?: Partial); + + createBoneTexture(): void; + + updateUniforms(): void; + + override draw(options?: { camera?: Camera }): void; +} diff --git a/types/extras/GPGPU.d.ts b/types/extras/GPGPU.d.ts new file mode 100644 index 00000000..10f934cb --- /dev/null +++ b/types/extras/GPGPU.d.ts @@ -0,0 +1,49 @@ +import { Program } from '../core/Program.js'; +import { Mesh } from '../core/Mesh.js'; +import { Texture } from '../core/Texture.js'; +import { RenderTarget } from '../core/RenderTarget.js'; +import { Triangle } from './Triangle.js'; + +import type { OGLRenderingContext } from '../core/Renderer.js'; + +export interface GPGPUOptions { + data: Float32Array; + geometry: Triangle; + type: Texture['type']; +} + +export interface GPGPUPass { + mesh: Mesh; + program: Program; + uniforms: Record; + enabled: boolean; + textureUniform: string; + vertex: string; + fragment: string; +} + +/** + * A class for {@link https://en.wikipedia.org/wiki/General-purpose_computing_on_graphics_processing_units | GPGPU (General Purpose GPU)} calculations. + * @see {@link https://github.com/oframe/ogl/blob/master/src/extras/GPGPU.js | Source} + */ +export class GPGPU { + gl: OGLRenderingContext; + passes: GPGPUPass[]; + geometry: Triangle; + dataLength: number; + size: number; + coords: Float32Array; + uniform: { value: any }; + + fbo: { + read: RenderTarget; + write: RenderTarget; + swap: () => void; + }; + + constructor(gl: OGLRenderingContext, options?: Partial); + + addPass(options?: Partial): GPGPUPass; + + render(): void; +} diff --git a/types/extras/InstancedMesh.d.ts b/types/extras/InstancedMesh.d.ts new file mode 100644 index 00000000..70172a9a --- /dev/null +++ b/types/extras/InstancedMesh.d.ts @@ -0,0 +1,13 @@ +import { Mesh } from '../core/Mesh.js'; + +/** + * A special version of {@link Mesh | Mesh} with instanced frustum culling. + * @see {@link https://github.com/oframe/ogl/blob/master/src/extras/InstancedMesh.js | Source} + */ +export class InstancedMesh extends Mesh { + readonly isInstancedMesh: true; + + addFrustumCull(): void; + + removeFrustumCull(): void; +} diff --git a/types/extras/KTXTexture.d.ts b/types/extras/KTXTexture.d.ts new file mode 100644 index 00000000..500aee0e --- /dev/null +++ b/types/extras/KTXTexture.d.ts @@ -0,0 +1,23 @@ +import { Texture } from '../core/Texture.js'; + +import type { OGLRenderingContext } from '../core/Renderer.js'; + +export interface KTXTextureOptions { + buffer: ArrayBuffer; + src: string; + wrapS: number; + wrapT: number; + anisotropy: number; + minFilter: number; + magFilter: number; +} + +/** + * A {@link https://github.com/KhronosGroup/KTX-Specification | KTX 2.0 GPU Texture} container. + * @see {@link https://github.com/oframe/ogl/blob/master/src/extras/KTXTexture.js | Source} + */ +export class KTXTexture extends Texture { + constructor(gl: OGLRenderingContext, options?: Partial); + + parseBuffer(buffer: ArrayBuffer): void; +} diff --git a/types/extras/NormalProgram.d.ts b/types/extras/NormalProgram.d.ts new file mode 100644 index 00000000..61f99c07 --- /dev/null +++ b/types/extras/NormalProgram.d.ts @@ -0,0 +1,12 @@ +import { Program } from '../core/Program.js'; + +import type { OGLRenderingContext } from '../core/Renderer.js'; +import type { ProgramOptions } from '../core/Program.js'; + +/** + * A normal program. + * @see {@link https://github.com/oframe/ogl/blob/master/src/extras/NormalProgram.js | Source} + */ +export class NormalProgram extends Program { + constructor(gl: OGLRenderingContext, options?: Partial); +} diff --git a/types/extras/Orbit.d.ts b/types/extras/Orbit.d.ts new file mode 100644 index 00000000..fc9d74ac --- /dev/null +++ b/types/extras/Orbit.d.ts @@ -0,0 +1,53 @@ +import { Vec3 } from '../math/Vec3.js'; + +import type { Camera } from '../core/Camera.js'; + +export type ZoomStyle = 'dolly' | 'fov'; + +export interface OrbitOptions { + element: HTMLElement; + enabled: boolean; + target: Vec3; + ease: number; + inertia: number; + enableRotate: boolean; + rotateSpeed: number; + autoRotate: boolean; + autoRotateSpeed: number; + enableZoom: boolean; + zoomSpeed: number; + zoomStyle: ZoomStyle; + enablePan: boolean; + panSpeed: number; + minPolarAngle: number; + maxPolarAngle: number; + minAzimuthAngle: number; + maxAzimuthAngle: number; + minDistance: number; + maxDistance: number; +} + +/** + * Orbit controls based on the three.js `OrbitControls` class, rewritten using ES6 with some + * additions and subtractions. + * @see {@link https://github.com/oframe/ogl/blob/master/src/extras/Orbit.js | Source} + * @see {@link https://github.com/mrdoob/three.js/blob/master/examples/jsm/controls/OrbitControls.js | `OrbitControls` Source} + */ +export class Orbit { + enabled: boolean; + target: Vec3; + zoomStyle: ZoomStyle; + + minDistance: number; + maxDistance: number; + + offset: Vec3; + + constructor(object: Camera, options?: Partial); + + update(): void; + + forcePosition(): void; + + remove(): void; +} diff --git a/types/extras/Plane.d.ts b/types/extras/Plane.d.ts new file mode 100644 index 00000000..2589e58c --- /dev/null +++ b/types/extras/Plane.d.ts @@ -0,0 +1,39 @@ +import { Geometry } from '../core/Geometry.js'; + +import type { OGLRenderingContext } from '../core/Renderer.js'; +import type { AttributeMap } from '../core/Geometry.js'; + +export interface PlaneOptions { + width: number; + height: number; + widthSegments: number; + heightSegments: number; + attributes: AttributeMap; +} + +/** + * A plane geometry. + * @see {@link https://github.com/oframe/ogl/blob/master/src/extras/Plane.js | Source} + */ +export class Plane extends Geometry { + constructor(gl: OGLRenderingContext, options?: Partial); + + static buildPlane( + position: Float32Array, + normal: Float32Array, + uv: Float32Array, + index: Uint32Array | Uint16Array, + width: number, + height: number, + depth: number, + wSegs: number, + hSegs: number, + u: number, + v: number, + w: number, + uDir: number, + vDir: number, + i: number, + ii: number, + ): void; +} diff --git a/types/extras/Polyline.d.ts b/types/extras/Polyline.d.ts new file mode 100644 index 00000000..52569c61 --- /dev/null +++ b/types/extras/Polyline.d.ts @@ -0,0 +1,49 @@ +import { Geometry } from '../core/Geometry.js'; +import { Program } from '../core/Program.js'; +import { Mesh } from '../core/Mesh.js'; +import { Vec2 } from '../math/Vec2.js'; +import { Vec3 } from '../math/Vec3.js'; +import { Color } from '../math/Color.js'; + +import type { OGLRenderingContext } from '../core/Renderer.js'; +import type { AttributeMap } from '../core/Geometry.js'; + +export interface PolylineOptions { + points: Vec3[]; + vertex: string; + fragment: string; + uniforms: Record; + attributes: AttributeMap; +} + +/** + * A polyline mesh. + * @see {@link https://github.com/oframe/ogl/blob/master/src/extras/Polyline.js | Source} + */ +export class Polyline { + gl: OGLRenderingContext; + points: Vec3[]; + count: number; + + position: Float32Array; + prev: Float32Array; + next: Float32Array; + + geometry: Geometry; + + resolution: { value: Vec2 }; + dpr: { value: number }; + thickness: { value: number }; + color: { value: Color }; + miter: { value: number }; + + program: Program; + + mesh: Mesh; + + constructor(gl: OGLRenderingContext, options?: Partial); + + updateGeometry(): void; + + resize(): void; +} diff --git a/types/extras/Post.d.ts b/types/extras/Post.d.ts new file mode 100644 index 00000000..6f165838 --- /dev/null +++ b/types/extras/Post.d.ts @@ -0,0 +1,84 @@ +import { Program } from '../core/Program.js'; +import { Mesh } from '../core/Mesh.js'; +import { RenderTarget } from '../core/RenderTarget.js'; +import { Triangle } from './Triangle.js'; + +import type { OGLRenderingContext } from '../core/Renderer.js'; +import type { Camera } from '../core/Camera.js'; +import type { Transform } from '../core/Transform.js'; +import type { Texture } from '../core/Texture.js'; + +export interface PostOptions { + width: number; + height: number; + dpr: number; + wrapS: GLenum; + wrapT: GLenum; + minFilter: GLenum; + magFilter: GLenum; + geometry: Triangle; + targetOnly: boolean; +} + +export interface Pass { + mesh: Mesh; + program: Program; + uniforms: Record; + enabled: boolean; + textureUniform: string; + vertex: string; + fragment: string; +} + +/** + * A class for managing post-processing shader passes. + * @see {@link https://github.com/oframe/ogl/blob/master/src/extras/Post.js | Source} + */ +export class Post { + gl: OGLRenderingContext; + + passes: Pass[]; + + geometry: Triangle; + + uniform: { value: any }; + targetOnly: boolean; + + dpr: number; + width: number; + height: number; + + resolutionWidth: number; + resolutionHeight: number; + + fbo: { + read: RenderTarget; + write: RenderTarget; + swap: () => void; + }; + + constructor(gl: OGLRenderingContext, options?: Partial); + + addPass(options?: Partial): Pass; + + resize( + options?: Partial<{ + width: number; + height: number; + dpr: number; + }>, + ): void; + + render( + options: Partial<{ + scene: Transform; + camera: Camera; + texture: Texture; + target: RenderTarget; + update: boolean; + sort: boolean; + frustumCull: boolean; + beforePostCallbacks: Function[]; + }>, + ): void; +} diff --git a/types/extras/Raycast.d.ts b/types/extras/Raycast.d.ts new file mode 100644 index 00000000..97955042 --- /dev/null +++ b/types/extras/Raycast.d.ts @@ -0,0 +1,43 @@ +import { Vec2 } from '../math/Vec2.js'; +import { Vec3 } from '../math/Vec3.js'; + +import type { Vec2Tuple } from '../math/Vec2.js'; +import type { Bounds } from '../core/Geometry.js'; +import type { Camera } from '../core/Camera.js'; +import type { Mesh } from '../core/Mesh.js'; + +/** + * A class to assist with {@link https://en.wikipedia.org/wiki/Ray_casting | raycasting}. + * @see {@link https://github.com/oframe/ogl/blob/master/src/extras/Raycast.js | Source} + */ +export class Raycast { + origin: Vec3; + direction: Vec3; + + constructor(); + + castMouse(camera: Camera, mouse?: Vec2 | Vec2Tuple): void; + + intersectBounds(meshes: Mesh | Mesh[], options?: { maxDistance?: number; output?: Mesh[] }): Mesh[]; + + intersectMeshes( + meshes: Mesh[], + options?: { + cullFace?: boolean; + maxDistance?: number; + includeUV?: boolean; + includeNormal?: boolean; + output?: Mesh[]; + }, + ): Mesh[]; + + intersectPlane(plane: { origin: Vec3; normal: Vec3 }, origin?: Vec3, direction?: Vec3): Vec3; + + intersectSphere(sphere: Bounds, origin?: Vec3, direction?: Vec3): number; + + intersectBox(box: Bounds, origin?: Vec3, direction?: Vec3): number; + + intersectTriangle(a: Vec3, b: Vec3, c: Vec3, backfaceCulling?: boolean, origin?: Vec3, direction?: Vec3, normal?: Vec3): number; + + getBarycoord(point: Vec3, a: Vec3, b: Vec3, c: Vec3, target?: Vec3): Vec3; +} diff --git a/types/extras/Shadow.d.ts b/types/extras/Shadow.d.ts new file mode 100644 index 00000000..29b651d7 --- /dev/null +++ b/types/extras/Shadow.d.ts @@ -0,0 +1,47 @@ +import { Camera } from '../core/Camera.js'; +import { Program } from '../core/Program.js'; +import { RenderTarget } from '../core/RenderTarget.js'; + +import type { OGLRenderingContext } from '../core/Renderer.js'; +import type { Transform } from '../core/Transform.js'; +import type { Mesh } from '../core/Mesh.js'; + +export interface ShadowOptions { + light: Camera; + width: number; + height: number; +} + +/** + * Shadow map. + * @see {@link https://github.com/oframe/ogl/blob/master/src/extras/Shadow.js | Source} + */ +export class Shadow { + gl: OGLRenderingContext; + + light: Camera; + + target: RenderTarget; + targetUniform: { value: RenderTarget['texture'] | null }; + + depthProgram: Program; + + castMeshes: Mesh[]; + + constructor(gl: OGLRenderingContext, options?: Partial); + + add(options: { + mesh: Mesh; + receive?: boolean; + cast?: boolean; + vertex?: string; + fragment?: string; + uniformProjection?: string; + uniformView?: string; + uniformTexture?: string; + }): void; + + setSize(options: { width?: number; height?: number }): void; + + render(options: { scene: Transform }): void; +} diff --git a/types/extras/Skin.d.ts b/types/extras/Skin.d.ts new file mode 100644 index 00000000..80696294 --- /dev/null +++ b/types/extras/Skin.d.ts @@ -0,0 +1,56 @@ +import { Mesh } from '../core/Mesh.js'; +import { Transform } from '../core/Transform.js'; +import { Mat4 } from '../math/Mat4.js'; +import { Texture } from '../core/Texture.js'; +import { Animation } from './Animation.js'; + +import type { OGLRenderingContext } from '../core/Renderer.js'; +import type { Quat } from '../math/Quat.js'; +import type { Vec3 } from '../math/Vec3.js'; +import type { Geometry } from '../core/Geometry.js'; +import type { Program } from '../core/Program.js'; +import type { Camera } from '../core/Camera.js'; + +export interface SkinRig { + bindPose: { position: Vec3; quaternion: Quat; scale: Vec3 }; + bones: { name: string; parent: Transform }[]; +} + +export interface SkinOptions { + rig: SkinRig; + geometry: Geometry; + program: Program; + mode: GLenum; +} + +export interface BoneTransform extends Transform { + name: string; + bindInverse: Mat4; +} + +/** + * A mesh with a skeleton and bones for animation. + * @see {@link https://github.com/oframe/ogl/blob/master/src/extras/Skin.js | Source} + */ +export class Skin extends Mesh { + root: Transform; + + bones: Transform[]; + + boneMatrices: Float32Array; + boneTextureSize: number; + boneTexture: Texture; + animations: Animation[]; + + constructor(gl: OGLRenderingContext, options?: Partial); + + createBones(rig: SkinRig): void; + + createBoneTexture(): void; + + addAnimation(data: Animation['data']): Animation; + + update(): void; + + override draw(options?: { camera?: Camera }): void; +} diff --git a/types/extras/Sphere.d.ts b/types/extras/Sphere.d.ts new file mode 100644 index 00000000..66f5fce4 --- /dev/null +++ b/types/extras/Sphere.d.ts @@ -0,0 +1,23 @@ +import { Geometry } from '../core/Geometry.js'; + +import type { OGLRenderingContext } from '../core/Renderer.js'; +import type { AttributeMap } from '../core/Geometry.js'; + +export interface SphereOptions { + radius: number; + widthSegments: number; + heightSegments: number; + phiStart: number; + phiLength: number; + thetaStart: number; + thetaLength: number; + attributes: AttributeMap; +} + +/** + * A sphere geometry. + * @see {@link https://github.com/oframe/ogl/blob/master/src/extras/Sphere.js | Source} + */ +export class Sphere extends Geometry { + constructor(gl: OGLRenderingContext, options?: Partial); +} diff --git a/types/extras/Text.d.ts b/types/extras/Text.d.ts new file mode 100644 index 00000000..949bac76 --- /dev/null +++ b/types/extras/Text.d.ts @@ -0,0 +1,35 @@ +export type TextAlign = 'left' | 'right' | 'center'; + +export interface TextOptions { + font: object; + text: string; + width: number; + align: TextAlign; + size: number; + letterSpacing: number; + lineHeight: number; + wordSpacing: number; + wordBreak: boolean; +} + +/** + * A text geometry. + * @see {@link https://github.com/oframe/ogl/blob/master/src/extras/Text.js | Source} + */ +export class Text { + buffers: { + position: Float32Array; + uv: Float32Array; + id: Float32Array; + index: Uint32Array | Uint16Array; + }; + numLines: number; + height: number; + width: number; + + constructor(options?: Partial); + + resize(options: { width: number }): void; + + update(options: { text: string }): void; +} diff --git a/types/extras/TextureLoader.d.ts b/types/extras/TextureLoader.d.ts new file mode 100644 index 00000000..8c8ecbff --- /dev/null +++ b/types/extras/TextureLoader.d.ts @@ -0,0 +1,19 @@ +import { Texture } from '../core/Texture.js'; + +import type { OGLRenderingContext } from '../core/Renderer.js'; + +/** + * The texture loader. + * @see {@link https://github.com/oframe/ogl/blob/master/src/extras/TextureLoader.js | Source} + */ +export class TextureLoader { + static load(gl: OGLRenderingContext, options?: object): Texture; + + static getSupportedExtensions(gl: OGLRenderingContext): string[]; + + static loadKTX(src: string, texture: Texture): Promise; + + static loadImage(gl: OGLRenderingContext, src: string, texture: Texture, flipY: boolean): Promise; + + static clearCache(): void; +} diff --git a/types/extras/Torus.d.ts b/types/extras/Torus.d.ts new file mode 100644 index 00000000..dc1c8aa0 --- /dev/null +++ b/types/extras/Torus.d.ts @@ -0,0 +1,21 @@ +import { Geometry } from '../core/Geometry.js'; + +import type { OGLRenderingContext } from '../core/Renderer.js'; +import type { AttributeMap } from '../core/Geometry.js'; + +export interface TorusOptions { + radius: number; + tube: number; + radialSegments: number; + tubularSegments: number; + arc: number; + attributes: AttributeMap; +} + +/** + * A torus geometry. + * @see {@link https://github.com/oframe/ogl/blob/master/src/extras/Torus.js | Source} + */ +export class Torus extends Geometry { + constructor(gl: OGLRenderingContext, options?: Partial); +} diff --git a/types/extras/Triangle.d.ts b/types/extras/Triangle.d.ts new file mode 100644 index 00000000..0f5456f8 --- /dev/null +++ b/types/extras/Triangle.d.ts @@ -0,0 +1,7 @@ +import { Geometry } from '../core/Geometry.js'; + +/** + * A triangle geometry. + * @see {@link https://github.com/oframe/ogl/blob/master/src/extras/Triangle.js | Source} + */ +export class Triangle extends Geometry {} diff --git a/types/extras/Tube.d.ts b/types/extras/Tube.d.ts new file mode 100644 index 00000000..b39902e1 --- /dev/null +++ b/types/extras/Tube.d.ts @@ -0,0 +1,35 @@ +import { Geometry } from '../core/Geometry.js'; + +import type { OGLRenderingContext } from '../core/Renderer.js'; +import type { AttributeMap } from '../core/Geometry.js'; +import type { Path } from './path/Path.js'; + +export interface TubeOptions { + path: Path; + radius: number; + tubularSegments: number; + radialSegments: number; + closed: boolean; + attributes: AttributeMap; +} + +/** + * A tube geometry. + * @see {@link https://github.com/oframe/ogl/blob/master/src/extras/Tube.js | Source} + */ +export class Tube extends Geometry { + path: Path; + radius: number; + tubularSegments: number; + radialSegments: number; + closed: boolean; + + frenetFrames: object; + + positions: Float32Array; + normals: Float32Array; + uvs: Float32Array; + indices: Uint32Array | Uint16Array; + + constructor(gl: OGLRenderingContext, options?: Partial); +} diff --git a/types/extras/WireMesh.d.ts b/types/extras/WireMesh.d.ts new file mode 100644 index 00000000..1d0f6e78 --- /dev/null +++ b/types/extras/WireMesh.d.ts @@ -0,0 +1,17 @@ +import { Mesh } from '../core/Mesh.js'; + +import type { OGLRenderingContext } from '../core/Renderer.js'; +import type { Color } from '../math/Color.js'; +import type { MeshOptions } from '../core/Mesh.js'; + +export interface WireMeshOptions extends MeshOptions { + wireColor: Color; +} + +/** + * A wireframe mesh. + * @see {@link https://github.com/oframe/ogl/blob/master/src/extras/WireMesh.js | Source} + */ +export class WireMesh extends Mesh { + constructor(gl: OGLRenderingContext, options?: Partial); +} diff --git a/types/extras/helpers/AxesHelper.d.ts b/types/extras/helpers/AxesHelper.d.ts new file mode 100644 index 00000000..77555ee6 --- /dev/null +++ b/types/extras/helpers/AxesHelper.d.ts @@ -0,0 +1,20 @@ +import { Mesh } from '../../core/Mesh.js'; + +import type { OGLRenderingContext } from '../../core/Renderer.js'; +import type { Color } from '../../math/Color.js'; + +export interface AxesHelperOptions { + size: number; + symmetric: boolean; + xColor: Color; + yColor: Color; + zColor: Color; +} + +/** + * Axes helper. + * @see {@link https://github.com/oframe/ogl/blob/master/src/extras/helpers/AxesHelper.js | Source} + */ +export class AxesHelper extends Mesh { + constructor(gl: OGLRenderingContext, options?: Partial); +} diff --git a/types/extras/helpers/FaceNormalsHelper.d.ts b/types/extras/helpers/FaceNormalsHelper.d.ts new file mode 100644 index 00000000..1ce069e3 --- /dev/null +++ b/types/extras/helpers/FaceNormalsHelper.d.ts @@ -0,0 +1,16 @@ +import { Mesh } from '../../core/Mesh.js'; + +import type { Color } from '../../math/Color.js'; + +export interface FaceNormalsHelperOptions { + size: number; + color: Color; +} + +/** + * Face normals helper. + * @see {@link https://github.com/oframe/ogl/blob/master/src/extras/helpers/FaceNormalsHelper.js | Source} + */ +export class FaceNormalsHelper extends Mesh { + constructor(object: Mesh, options?: Partial); +} diff --git a/types/extras/helpers/GridHelper.d.ts b/types/extras/helpers/GridHelper.d.ts new file mode 100644 index 00000000..164ddbe8 --- /dev/null +++ b/types/extras/helpers/GridHelper.d.ts @@ -0,0 +1,18 @@ +import { Mesh } from '../../core/Mesh.js'; + +import type { OGLRenderingContext } from '../../core/Renderer.js'; +import type { Color } from '../../math/Color.js'; + +export interface GridHelperOptions { + size: number; + divisions: number; + color: Color; +} + +/** + * Grid helper. + * @see {@link https://github.com/oframe/ogl/blob/master/src/extras/helpers/GridHelper.js | Source} + */ +export class GridHelper extends Mesh { + constructor(gl: OGLRenderingContext, options?: Partial); +} diff --git a/types/extras/helpers/VertexNormalsHelper.d.ts b/types/extras/helpers/VertexNormalsHelper.d.ts new file mode 100644 index 00000000..2a0fd246 --- /dev/null +++ b/types/extras/helpers/VertexNormalsHelper.d.ts @@ -0,0 +1,16 @@ +import { Mesh } from '../../core/Mesh.js'; + +import type { Color } from '../../math/Color.js'; + +export interface VertexNormalsHelperOptions { + size: number; + color: Color; +} + +/** + * Vertex normals helper. + * @see {@link https://github.com/oframe/ogl/blob/master/src/extras/helpers/VertexNormalsHelper.js | Source} + */ +export class VertexNormalsHelper extends Mesh { + constructor(object: Mesh, options?: Partial); +} diff --git a/types/extras/path/BaseSegment.d.ts b/types/extras/path/BaseSegment.d.ts new file mode 100644 index 00000000..ac8a1c95 --- /dev/null +++ b/types/extras/path/BaseSegment.d.ts @@ -0,0 +1,5 @@ +/** + * Abstract base class for path segments. + * This class contains common methods for all segments types. + */ +export default class BaseSegment {} diff --git a/types/extras/path/CubicBezierSegment.d.ts b/types/extras/path/CubicBezierSegment.d.ts new file mode 100644 index 00000000..d4d19952 --- /dev/null +++ b/types/extras/path/CubicBezierSegment.d.ts @@ -0,0 +1,3 @@ +import BaseSegment from './BaseSegment.js'; + +export default class CubicBezierSegment extends BaseSegment {} diff --git a/types/extras/path/LineSegment.d.ts b/types/extras/path/LineSegment.d.ts new file mode 100644 index 00000000..1648b397 --- /dev/null +++ b/types/extras/path/LineSegment.d.ts @@ -0,0 +1,3 @@ +import BaseSegment from './BaseSegment.js'; + +export default class LineSegment extends BaseSegment {} diff --git a/types/extras/path/Path.d.ts b/types/extras/path/Path.d.ts new file mode 100644 index 00000000..20c12e9e --- /dev/null +++ b/types/extras/path/Path.d.ts @@ -0,0 +1,45 @@ +import { Vec3 } from '../../math/Vec3.js'; + +/** + * Path builder. + * @see {@link https://github.com/oframe/ogl/blob/master/src/extras/path/Path.js | Source} + */ +export class Path { + tiltFunction: Function | null; + + constructor(); + + moveTo(p: Vec3, tilt?: number): void; + + bezierCurveTo(cp1: Vec3, cp2: Vec3, p: Vec3, tilt?: number): this; + + quadraticCurveTo(cp: Vec3, p: Vec3, tilt?: number): this; + + lineTo(p: Vec3, tilt?: number): this; + + addSegment(segment: object): this; + + getSegments(): object[]; + + updateLength(): void; + + getLength(): number; + + findSegmentIndexAtLength(len: number): [number, number]; + + getPointAtLength(len: number, out?: Vec3): Vec3; + + getPointAt(t: number, out?: Vec3): Vec3; + + getTangentAtLength(len: number, out?: Vec3): number; + + getTangentAt(t: number, out?: Vec3): number; + + getTiltAtLength(len: number): number; + + getTiltAt(t: number): number; + + getPoints(divisions?: number): Vec3[]; + + computeFrenetFrames(divisions?: number, closed?: boolean): { tangents: Vec3[]; normals: Vec3[]; binormals: Vec3[] }; +} diff --git a/types/extras/path/QuadraticBezierSegment.d.ts b/types/extras/path/QuadraticBezierSegment.d.ts new file mode 100644 index 00000000..6fa5b550 --- /dev/null +++ b/types/extras/path/QuadraticBezierSegment.d.ts @@ -0,0 +1,3 @@ +import BaseSegment from './BaseSegment.js'; + +export default class QuadraticBezierSegment extends BaseSegment {} diff --git a/types/index.d.ts b/types/index.d.ts new file mode 100644 index 00000000..9b277155 --- /dev/null +++ b/types/index.d.ts @@ -0,0 +1,59 @@ +// Type definitions for ogl 1.0.0 +// Project: https://github.com/oframe/ogl +// Definitions by: Xin Chen +// Cody Bennett +// Patrick Schroen +// Definitions: https://github.com/oframe/ogl + +// Core +export * from './core/Geometry'; +export * from './core/Program'; +export * from './core/Renderer'; +export * from './core/Camera'; +export * from './core/Transform'; +export * from './core/Mesh'; +export * from './core/Texture'; +export * from './core/RenderTarget'; + +// Maths +export * from './math/Color'; +export * from './math/Euler'; +export * from './math/Mat3'; +export * from './math/Mat4'; +export * from './math/Quat'; +export * from './math/Vec2'; +export * from './math/Vec3'; +export * from './math/Vec4'; + +// Extras +export * from './extras/Plane'; +export * from './extras/Box'; +export * from './extras/Sphere'; +export * from './extras/Cylinder'; +export * from './extras/Triangle'; +export * from './extras/Torus'; +export * from './extras/Orbit'; +export * from './extras/Raycast'; +export * from './extras/Curve'; +export * from './extras/path/Path'; +export * from './extras/Tube'; +export * from './extras/Post'; +export * from './extras/Skin'; +export * from './extras/Animation'; +export * from './extras/Text'; +export * from './extras/NormalProgram'; +export * from './extras/Flowmap'; +export * from './extras/GPGPU'; +export * from './extras/Polyline'; +export * from './extras/Shadow'; +export * from './extras/KTXTexture'; +export * from './extras/TextureLoader'; +export * from './extras/GLTFLoader'; +export * from './extras/GLTFSkin'; +export * from './extras/BasisManager'; +export * from './extras/WireMesh'; +export * from './extras/helpers/AxesHelper'; +export * from './extras/helpers/GridHelper'; +export * from './extras/helpers/VertexNormalsHelper'; +export * from './extras/helpers/FaceNormalsHelper'; +export * from './extras/InstancedMesh'; diff --git a/types/math/Color.d.ts b/types/math/Color.d.ts new file mode 100644 index 00000000..38c0ef89 --- /dev/null +++ b/types/math/Color.d.ts @@ -0,0 +1,39 @@ +export type ColorTuple = [r: number, g: number, b: number]; + +export type ColorRepresentation = + | number + | 'black' + | 'white' + | 'red' + | 'green' + | 'blue' + | 'fuchsia' + | 'cyan' + | 'yellow' + | 'orange' + | string + | ColorTuple; + +/** + * Represents a color. + * @see {@link https://github.com/oframe/ogl/blob/master/src/math/Color.js | Source} + */ +export class Color extends Array { + constructor(color?: number | Color | ColorRepresentation, g?: number, b?: number); + + get r(): number; + + get g(): number; + + get b(): number; + + set r(v: number); + + set g(v: number); + + set b(v: number); + + set(color?: number | Color | ColorRepresentation, g?: number, b?: number): this; + + copy(v: Color): this; +} diff --git a/types/math/Euler.d.ts b/types/math/Euler.d.ts new file mode 100644 index 00000000..d3bd5814 --- /dev/null +++ b/types/math/Euler.d.ts @@ -0,0 +1,45 @@ +import { Mat4 } from './Mat4.js'; + +import type { Quat } from './Quat.js'; +import type { AttributeData } from '../core/Geometry.js'; + +export type EulerTuple = [x: number, y: number, z: number]; + +export type EulerOrder = 'XYZ' | 'XZY' | 'YXZ' | 'YZX' | 'ZXY' | 'ZYX'; + +/** + * Implementation of {@link https://en.wikipedia.org/wiki/Euler_angles | Euler angles}. + * @see {@link https://github.com/oframe/ogl/blob/master/src/math/Euler.js | Source} + */ +export class Euler extends Array { + order: EulerOrder; + onChange: () => void; + + constructor(x?: number, y?: number, z?: number, order?: EulerOrder); + + get x(): number; + + get y(): number; + + get z(): number; + + set x(v: number); + + set y(v: number); + + set z(v: number); + + set(x: number | Euler | EulerTuple, y?: number, z?: number): this; + + copy(v: Euler): this; + + reorder(order: EulerOrder): this; + + fromRotationMatrix(m: Mat4, order?: EulerOrder): this; + + fromQuaternion(q: Quat, order?: EulerOrder): this; + + fromArray(a: number[] | AttributeData, o?: number): this; + + toArray(a?: T, o?: number): T; +} diff --git a/types/math/Mat3.d.ts b/types/math/Mat3.d.ts new file mode 100644 index 00000000..107b2ed8 --- /dev/null +++ b/types/math/Mat3.d.ts @@ -0,0 +1,68 @@ +import type { Mat4 } from './Mat4.js'; +import type { Quat } from './Quat.js'; +import type { Vec2 } from './Vec2.js'; +import type { Vec3 } from './Vec3.js'; + +export type Mat3Tuple = [ + m00: number, + m01: number, + m02: number, + m10: number, + m11: number, + m12: number, + m20: number, + m21: number, + m22: number, +]; + +/** + * 3x3 matrix. + * @see {@link https://github.com/oframe/ogl/blob/master/src/math/Mat3.js | Source} + */ +export class Mat3 extends Array { + constructor( + m00?: number, + m01?: number, + m02?: number, + m10?: number, + m11?: number, + m12?: number, + m20?: number, + m21?: number, + m22?: number, + ); + + set( + m00: number | Mat3 | Mat3Tuple, + m01: number, + m02: number, + m10: number, + m11: number, + m12: number, + m20: number, + m21: number, + m22: number, + ): this; + + translate(v: Vec2, m?: Mat3): this; + + rotate(v: number, m?: Mat3): this; + + scale(v: Vec2, m?: Mat3): this; + + multiply(ma: Mat3, mb?: Mat3): this; + + identity(): this; + + copy(m: Mat3): this; + + fromMatrix4(m: Mat4): this; + + fromQuaternion(q: Quat): this; + + fromBasis(vec3a: Vec3, vec3b: Vec3, vec3c: Vec3): this; + + inverse(m?: Mat3): this; + + getNormalMatrix(m: Mat4): this; +} diff --git a/types/math/Mat4.d.ts b/types/math/Mat4.d.ts new file mode 100644 index 00000000..c2a23873 --- /dev/null +++ b/types/math/Mat4.d.ts @@ -0,0 +1,126 @@ +import type { Quat } from './Quat.js'; +import type { Vec3 } from './Vec3.js'; +import type { AttributeData } from '../core/Geometry.js'; + +export type Mat4Tuple = [ + m00: number, + m01: number, + m02: number, + m03: number, + m10: number, + m11: number, + m12: number, + m13: number, + m20: number, + m21: number, + m22: number, + m23: number, + m30: number, + m31: number, + m32: number, + m33: number, +]; + +/** + * 4x4 matrix. + * @see {@link https://github.com/oframe/ogl/blob/master/src/math/Mat4.js | Source} + */ +export class Mat4 extends Array { + constructor( + m00?: number, + m01?: number, + m02?: number, + m03?: number, + m10?: number, + m11?: number, + m12?: number, + m13?: number, + m20?: number, + m21?: number, + m22?: number, + m23?: number, + m30?: number, + m31?: number, + m32?: number, + m33?: number, + ); + + get x(): number; + + get y(): number; + + get z(): number; + + get w(): number; + + set x(v: number); + + set y(v: number); + + set z(v: number); + + set w(v: number); + + set( + m00: number | Mat4 | Mat4Tuple, + m01: number, + m02: number, + m03: number, + m10: number, + m11: number, + m12: number, + m13: number, + m20: number, + m21: number, + m22: number, + m23: number, + m30: number, + m31: number, + m32: number, + m33: number, + ): this; + + translate(v: Vec3, m?: Mat4): this; + + rotate(v: number, axis: Vec3, m?: Mat4): this; + + scale(v: Vec3 | number, m?: Mat4): this; + + add(ma: Mat4, mb?: Mat4): this; + + sub(ma: Mat4, mb?: Mat4): this; + + multiply(ma: Mat4 | number, mb?: Mat4): this; + + identity(): this; + + copy(m: Mat4): this; + + fromPerspective(options: { fov: number; aspect: number; near: number; far: number }): this; + + fromOrthogonal(options: { left: number; right: number; bottom: number; top: number; near: number; far: number }): this; + + fromQuaternion(q: Quat): this; + + setPosition(v: Vec3): this; + + inverse(m?: Mat4): this; + + compose(q: Quat, pos: Vec3, scale: Vec3): this; + + getRotation(q: Quat): this; + + getTranslation(pos: Vec3): this; + + getScaling(scale: Vec3): this; + + getMaxScaleOnAxis(): number; + + lookAt(eye: Vec3, target: Vec3, up: Vec3): this; + + determinant(): number; + + fromArray(a: number[] | AttributeData, o?: number): this; + + toArray(a?: T, o?: number): T; +} diff --git a/types/math/Quat.d.ts b/types/math/Quat.d.ts new file mode 100644 index 00000000..88bf4bb5 --- /dev/null +++ b/types/math/Quat.d.ts @@ -0,0 +1,66 @@ +import type { Euler } from './Euler.js'; +import type { Mat3 } from './Mat3.js'; +import type { Vec3 } from './Vec3.js'; +import type { AttributeData } from '../core/Geometry.js'; + +export type QuatTuple = [x: number, y: number, z: number, w: number]; + +/** + * Implementation of a quaternion. + * @see {@link https://github.com/oframe/ogl/blob/master/src/math/Quat.js | Source} + */ +export class Quat extends Array { + onChange: () => void; + + constructor(x?: number, y?: number, z?: number, w?: number); + + get x(): number; + + get y(): number; + + get z(): number; + + get w(): number; + + set x(v: number); + + set y(v: number); + + set z(v: number); + + set w(v: number); + + identity(): this; + + set(x: number | Quat | QuatTuple, y: number, z: number, w: number): this; + + rotateX(a: number): this; + + rotateY(a: number): this; + + rotateZ(a: number): this; + + inverse(q?: Quat): this; + + conjugate(q?: Quat): this; + + copy(q: Quat): this; + + normalize(q?: Quat): this; + + multiply(qA: Quat, qB?: Quat): this; + + dot(v: Quat): number; + + fromMatrix3(matrix3: Mat3): this; + + fromEuler(euler: Euler): this; + + fromAxisAngle(axis: Vec3, a: number): this; + + slerp(q: Quat, t: number): this; + + fromArray(a: number[] | AttributeData, o?: number): this; + + toArray(a?: T, o?: number): T; +} diff --git a/types/math/Vec2.d.ts b/types/math/Vec2.d.ts new file mode 100644 index 00000000..cc37b7f9 --- /dev/null +++ b/types/math/Vec2.d.ts @@ -0,0 +1,67 @@ +import type { Mat3 } from './Mat3.js'; +import type { Mat4 } from './Mat4.js'; +import type { AttributeData } from '../core/Geometry.js'; + +export type Vec2Tuple = [x: number, y: number]; + +/** + * 2D vector. + * @see {@link https://github.com/oframe/ogl/blob/master/src/math/Vec2.js | Source} + */ +export class Vec2 extends Array { + constructor(x?: number, y?: number); + + get x(): number; + + get y(): number; + + set x(v: number); + + set y(v: number); + + set(x: number | Vec2 | Vec2Tuple, y?: number): this; + + copy(v: Vec2): this; + + add(va: Vec2, vb?: Vec2): this; + + sub(va: Vec2, vb?: Vec2): this; + + multiply(v: Vec2 | number): this; + + divide(v: Vec2 | number): this; + + inverse(v?: Vec2): this; + + len(): number; + + distance(v?: Vec2): number; + + squaredLen(): number; + + squaredDistance(v?: Vec2): number; + + negate(v?: Vec2): this; + + cross(va: Vec2, vb?: Vec2): number; + + scale(v: number): this; + + normalize(): this; + + dot(v: Vec2): number; + + equals(v: Vec2): boolean; + + applyMatrix3(mat3: Mat3): this; + + applyMatrix4(mat4: Mat4): this; + + lerp(v: Vec2, a: number): this; + + clone(): Vec2; + + fromArray(a: number[] | AttributeData, o?: number): this; + + toArray(a?: T, o?: number): T; +} diff --git a/types/math/Vec3.d.ts b/types/math/Vec3.d.ts new file mode 100644 index 00000000..87183af3 --- /dev/null +++ b/types/math/Vec3.d.ts @@ -0,0 +1,80 @@ +import type { Mat3 } from './Mat3.js'; +import type { Mat4 } from './Mat4.js'; +import type { Quat } from './Quat.js'; +import type { AttributeData } from '../core/Geometry.js'; + +export type Vec3Tuple = [x: number, y: number, z: number]; + +/** + * 3D vector. + * @see {@link https://github.com/oframe/ogl/blob/master/src/math/Vec3.js | Source} + */ +export class Vec3 extends Array { + constructor(x?: number, y?: number, z?: number); + + get x(): number; + + get y(): number; + + get z(): number; + + set x(v: number); + + set y(v: number); + + set z(v: number); + + set(x: number | Vec3 | Vec3Tuple, y?: number, z?: number): this; + + copy(v: Vec3): this; + + add(va: Vec3, vb?: Vec3): this; + + sub(va: Vec3, vb?: Vec3): this; + + multiply(v: Vec3 | number): this; + + divide(v: Vec3 | number): this; + + inverse(v?: Vec3): this; + + len(): number; + + distance(v?: Vec3): number; + + squaredLen(): number; + + squaredDistance(v?: Vec3): number; + + negate(v?: Vec3): this; + + cross(va: Vec3, vb?: Vec3): this; + + scale(v: number): this; + + normalize(): this; + + dot(v: Vec3): number; + + equals(v: Vec3): boolean; + + applyMatrix3(mat3: Mat3): this; + + applyMatrix4(mat4: Mat4): this; + + scaleRotateMatrix4(mat4: Mat4): this; + + applyQuaternion(q: Quat): this; + + angle(v: Vec3): number; + + lerp(v: Vec3, t: number): this; + + clone(): Vec3; + + fromArray(a: number[] | AttributeData, o?: number): this; + + toArray(a?: T, o?: number): T; + + transformDirection(mat4: Mat4): this; +} diff --git a/types/math/Vec4.d.ts b/types/math/Vec4.d.ts new file mode 100644 index 00000000..b4c48c01 --- /dev/null +++ b/types/math/Vec4.d.ts @@ -0,0 +1,41 @@ +import type { AttributeData } from '../core/Geometry'; + +export type Vec4Tuple = [x: number, y: number, z: number, w: number]; + +/** + * 4D vector. + * @see {@link https://github.com/oframe/ogl/blob/master/src/math/Vec4.js | Source} + */ +export class Vec4 extends Array { + constructor(x?: number, y?: number, z?: number, w?: number); + + get x(): number; + + get y(): number; + + get z(): number; + + get w(): number; + + set x(v: number); + + set y(v: number); + + set z(v: number); + + set w(v: number); + + set(x: number | Vec4 | Vec4Tuple, y?: number, z?: number, w?: number): this; + + copy(v: Vec4): this; + + normalize(): this; + + multiply(v: number): this; + + dot(v: Vec4): number; + + fromArray(a: number[] | AttributeData, o?: number): this; + + toArray(a?: T, o?: number): T; +}