magic-pixels

Type aliases

Material

Material: { drawMode: number; fragmentShader: string; uniforms: Uniforms; vertexShader: string }

Type declaration

drawMode: number
fragmentShader: string
uniforms: Uniforms
vertexShader: string

TextureData

TextureData: HTMLImageElement | HTMLVideoElement | HTMLCanvasElement | ImageData

Uniform

Uniforms

Uniforms: Record<string, Uniform>

Variables

Filter

Filter: Record<string, number> = ...

Wrapping

Wrapping: Record<string, number> = ...

Functions

calculateSurfaceNormal

calculateSurfaceNormal(p1: Vector, p2: Vector, p3: Vector): Vector

- Defined in utils/surface-normals.ts:9
Calculate the surface normal of a triangle

Parameters
- p1: Vector
  
  3d vector of point 1
- p2: Vector
  
  3d vector of point 2
- p3: Vector
  
  3d vector of point 3
Returns Vector

Const clamp

clamp(x: number, minVal: number, maxVal: number): number

- Defined in utils/one-liners.ts:3
Parameters
- x: number
- minVal: number
- maxVal: number
Returns number

createBasicMaterial

createBasicMaterial(color?: string): Material

- Defined in webgl/material.ts:46
Parameters
- color: string = '#ff0000'
Returns Material

createBoxGeometry

createBoxGeometry(width?: number, height?: number, depth?: number, widthSegments?: number, heightSegments?: number, depthSegments?: number): BufferGeometry

- Defined in geometries/box.ts:134
Create a box geometry

Parameters
- width: number = 1
  
  width of the box (default: 1)
- height: number = 1
  
  height of the box (default: 1)
- depth: number = 1
  
  depth of the box (default: 1)
- widthSegments: number = 1
  
  number of width segments (default: 1)
- heightSegments: number = 1
  
  number of height segments (default: 1)
- depthSegments: number = 1
  
  number of depth segments (default: 1)
Returns BufferGeometry
a buffer geometry

createDefaultMaterial

createDefaultMaterial(): Material

- Defined in webgl/material.ts:28
Returns Material

createIndexedGeometry

createIndexedGeometry(geometry: BufferGeometry): BufferGeometry

- Defined in utils/indexed-geometry.ts:6
Create an indexed buffer geometry from a non-indexed one (might be expensive)

Parameters
- geometry: BufferGeometry
Returns BufferGeometry

createNormalMaterial

createNormalMaterial(): Material

- Defined in webgl/material.ts:37
Returns Material

createPlaneGeometry

createPlaneGeometry(width?: number, height?: number, rows?: number, cols?: number): BufferGeometry

- Defined in geometries/plane.ts:11
create a plane grid mesh

Parameters
- width: number = 2
  
  width of the plane
- height: number = 2
  
  height of the plane
- rows: number = 1
  
  number of rows
- cols: number = 1
  
  number of columns
Returns BufferGeometry

createShaderMaterial

createShaderMaterial(vertexShader?: string, fragmentShader?: string, uniforms?: Record<string, Uniform>, drawMode?: number): Material

- Defined in webgl/material.ts:57
Parameters
- vertexShader: string = defaultVertexShader
- fragmentShader: string = defaultFragmentShader
- uniforms: Record<string, Uniform> = {}
- drawMode: number = WebGLRenderingContext.TRIANGLES
Returns Material

createSphereGeometry

createSphereGeometry(r?: number, sides?: number, segments?: number): BufferGeometry

- Defined in geometries/sphere.ts:11
Create sphere geometry

Parameters
- r: number = 0.5
  
  radius
- sides: number = 36
  
  number of sides (around the sphere)
- segments: number = 18
  
  number of segments (from top to bottom)
Returns BufferGeometry

facesToBuffer

facesToBuffer(faces: number[][], vertices: Vector[]): number[]

- Defined in utils/faces-to-buffer.ts:8
Parameters
- faces: number[][]
  
  array of vertex indices containing 3 or 4 indices each for triangles/quads
- vertices: Vector[]
  
  the vertices
Returns number[]
converts to an array of numbers

frustum

frustum(left: number, right: number, bottom: number, top: number, zNear: number, zFar: number): Matrix

- Defined in utils/perspective.ts:45
creates a perspective matrix that produces a perspective projection

see
https://www.khronos.org/registry/OpenGL-Refpages/gl2.1/xhtml/glFrustum.xml

Parameters
- left: number
  
  coordinates for the vertical left clipping pane
- right: number
  
  coordinates for the vertical right clipping pane
- bottom: number
  
  coordinates for the horizontal bottom clipping pane
- top: number
  
  coodinates for the top horizontal clipping pane
- zNear: number
  
  Specify the distances to the near depth clipping plane. Must be positive.
- zFar: number
  
  Specify the distances to the far depth clipping planes. Must be positive.
Returns Matrix
4x4 perspective projection matrix

mergeGeometries

mergeGeometries(geometry: BufferGeometry, otherGeometry: BufferGeometry): BufferGeometry

- Defined in utils/merge-geometries.ts:88
Parameters
- geometry: BufferGeometry
- otherGeometry: BufferGeometry
Returns BufferGeometry

Const mix

mix(a: number, b: number, n: number): number

- Defined in utils/one-liners.ts:1
Parameters
- a: number
- b: number
- n: number
Returns number

ortho

ortho(left: number, right: number, bottom: number, top: number, zNear: number, zFar: number): Matrix

- Defined in utils/perspective.ts:14
creates a transformation that produces a parallel projection

see
https://www.khronos.org/registry/OpenGL-Refpages/gl2.1/xhtml/glOrtho.xml

Parameters
- left: number
  
  coordinate for the left vertical clipping planes.
- right: number
  
  coordinate for the right vertical clipping planes.
- bottom: number
  
  coordinate for the bottom horizontal clippling pane.
- top: number
  
  coordinate for the top horizontal clipping pane
- zNear: number
  
  Specify the distances to the nearer and farther depth clipping planes. These values are negative if the plane is to be behind the viewer.
- zFar: number
  
  Specify the distances to the nearer and farther depth clipping planes. These values are negative if the plane is to be behind the viewer.
Returns Matrix
4x4 orthographic transformation matrix

perspective

perspective(fieldOfView: number, aspectRatio: number, zNear: number, zFar: number): Matrix

- Defined in utils/perspective.ts:74
creates a perspective projection matrix

Parameters
- fieldOfView: number
  
  Specifies the field of view angle, in degrees, in the y direction.
- aspectRatio: number
  
  Specifies the aspect ratio that determines the field of view in the x direction. The aspect ratio is the ratio of x (width) to y (height).
- zNear: number
  
  Specifies the distance from the viewer to the near clipping plane (always positive).
- zFar: number
  
  Specifies the distance from the viewer to the far clipping plane (always positive).
Returns Matrix
4x4 perspective projection matrix

setUniform

setUniform(gl: WebGLRenderingContext, program: WebGLProgram, name: string, uniform: Uniform): boolean

- Defined in utils/uniform-helpers.ts:72
Parameters
- gl: WebGLRenderingContext
- program: WebGLProgram
- name: string
- uniform: Uniform
Returns boolean

wrapUniforms

wrapUniforms(gl: WebGLRenderingContext, program: WebGLProgram, uniform: Uniforms): Uniforms

- Defined in utils/uniform-helpers.ts:119
Create a wrapper object from a uniforms object which automatically updates uniforms in the rendering context

Parameters
- gl: WebGLRenderingContext
  
  a WebGLRenderingContext initialized via canvas.getContext('webgl')
- program: WebGLProgram
- uniform: Uniforms
Returns Uniforms
wrapper object

Index

Namespaces

Classes

Type aliases

Variables

Functions

Type aliases

Material

Type declaration

drawMode: number

fragmentShader: string

uniforms: Uniforms

vertexShader: string

TextureData

Uniform

Uniforms

Variables

Filter

Wrapping

Functions

calculateSurfaceNormal

Parameters

p1: Vector

p2: Vector

p3: Vector

Returns Vector

Const clamp

Parameters

x: number

minVal: number

maxVal: number

Returns number

createBasicMaterial

Parameters

color: string = '#ff0000'

Returns Material

createBoxGeometry

Parameters

width: number = 1

height: number = 1

depth: number = 1

widthSegments: number = 1

heightSegments: number = 1

depthSegments: number = 1

Returns BufferGeometry

createDefaultMaterial

Returns Material

createIndexedGeometry

Parameters

geometry: BufferGeometry

Returns BufferGeometry

createNormalMaterial

Returns Material

createPlaneGeometry

Parameters

width: number = 2

height: number = 2

rows: number = 1

cols: number = 1

Returns BufferGeometry

createShaderMaterial

Parameters

vertexShader: string = defaultVertexShader

fragmentShader: string = defaultFragmentShader

uniforms: Record<string, Uniform> = {}

drawMode: number = WebGLRenderingContext.TRIANGLES

Returns Material

createSphereGeometry

Parameters

r: number = 0.5

sides: number = 36

segments: number = 18

Returns BufferGeometry

facesToBuffer

Parameters

faces: number[][]

vertices: Vector[]

Returns number[]

frustum

Parameters