diff --git a/flamechart-minimap-view.tsx b/flamechart-minimap-view.tsx index 5d7a5f3..604cfee 100644 --- a/flamechart-minimap-view.tsx +++ b/flamechart-minimap-view.tsx @@ -1,5 +1,5 @@ import * as regl from 'regl' -import { vec3, ReglCommand } from 'regl' +import { vec3, Command } from 'regl' import { h, Component } from 'preact' import { css } from 'aphrodite' import { Flamechart } from './flamechart' @@ -24,11 +24,11 @@ enum DraggingMode { } export class FlamechartMinimapView extends Component { - renderer: ReglCommand | null = null - viewportRectRenderer: ReglCommand | null = null + renderer: Command | null = null + viewportRectRenderer: Command | null = null ctx: WebGLRenderingContext | null = null - regl: regl.ReglCommandConstructor | null = null + regl: regl.Instance | null = null canvas: HTMLCanvasElement | null = null overlayCanvas: HTMLCanvasElement | null = null @@ -472,7 +472,7 @@ export interface OverlayRectangleRendererProps { physicalSize: Vec2 } -export const viewportRectangleRenderer = (regl: regl.ReglCommandConstructor) => { +export const viewportRectangleRenderer = (regl: regl.Instance) => { return regl({ vert: ` attribute vec2 position; diff --git a/flamechart-view.tsx b/flamechart-view.tsx index 57674ea..057ede0 100644 --- a/flamechart-view.tsx +++ b/flamechart-view.tsx @@ -6,7 +6,7 @@ import { CallTreeNode } from './profile' import { Flamechart, FlamechartFrame } from './flamechart' import * as regl from 'regl' -import { vec3, ReglCommand, ReglCommandConstructor } from 'regl' +import { vec3, Command, Instance } from 'regl' import { Rect, Vec2, AffineTransform, clamp } from './math' import { atMostOnceAFrame, cachedMeasureTextWidth } from "./utils"; @@ -81,10 +81,10 @@ interface FlamechartPanZoomViewProps { } export class FlamechartPanZoomView extends ReloadableComponent { - renderer: ReglCommand | null = null + renderer: Command | null = null ctx: WebGLRenderingContext | null = null - regl: ReglCommandConstructor | null = null + regl: Instance | null = null canvas: HTMLCanvasElement | null = null overlayCanvas: HTMLCanvasElement | null = null diff --git a/rectangle-batch-renderer.ts b/rectangle-batch-renderer.ts index 6e3126e..8d51176 100644 --- a/rectangle-batch-renderer.ts +++ b/rectangle-batch-renderer.ts @@ -7,7 +7,7 @@ export interface RectangleBatchRendererProps { physicalSize: Vec2 } -export const rectangleBatchRenderer = (regl: regl.ReglCommandConstructor, rects: Rect[], colors: vec3[], strokeSize = 1) => { +export const rectangleBatchRenderer = (regl: regl.Instance, rects: Rect[], colors: vec3[], strokeSize = 1) => { const positions = new Float32Array(rects.length * 6 * 2) const physicalSpaceOffsets = new Float32Array(rects.length * 6 * 2) const vertexColors = new Float32Array(rects.length * 6 * 3) diff --git a/regl.d.ts b/regl.d.ts index 6e0c868..ea61073 100644 --- a/regl.d.ts +++ b/regl.d.ts @@ -1,85 +1,67 @@ declare module "regl" { - interface ReglProp {} - - interface ReglBuffer {} - - type ReglPrimitiveValue = - boolean | - number | - number[] | - number[][] | - ReglBuffer | - ReglProp - - type ReglValue

= ReglPrimitiveValue | {(context: any, props: P, batchId: number): ReglPrimitiveValue} - - type BlendEquation = 'add' | 'subtract' | 'reverse subtract' | 'min' | 'max' - - interface ReglCommandParameters

{ - /** Source code of vertex shader */ - vert: string - - /** Source code of fragment shader */ - frag: string - - attributes: {[attributeName: string]: ReglValue

} - - uniforms: {[uniformName: string]: ReglValue

} - - blend?: { - enable?: boolean, - // TOOD(jlfwong): Narrow this down to the actualy options - func?: { - src: string - dst: string - } | { - srcRGB: string - srcAlpha: string - dstRGB: string - dstAlpha: string - }, - equation?: BlendEquation | { - rgb: BlendEquation - alpha: BlendEquation - }, - color?: [number, number, number, number] + interface InitializationOptions { + /** A reference to a WebGL rendering context. (Default created from canvas) */ + gl?: WebGLRenderingContext + /** A reference to an HTML canvas element. (Default created and appending to container) */ + canvas?: HTMLCanvasElement | string + /** A container element which regl inserts a canvas into. (Default document.body) */ + container?: HTMLElement | string + /** The context creation attributes passed to the WebGL context constructor. See below for defaults. */ + attributes?: { + /** Boolean that indicates if the canvas contains an alpha buffer. */ + alpha?: boolean + /** Boolean that indicates that the drawing buffer has a depth buffer of at least 16 bits. */ + depth?: boolean + /** Boolean that indicates that the drawing buffer has a stencil buffer of at least 8 bits. */ + stencil?: boolean + /** Boolean that indicates whether or not to perform anti-aliasing. */ + antialias?: boolean + /** Boolean that indicates that the page compositor will assume the drawing buffer contains colors with pre-multiplied alpha. */ + premultipliedAlpha?: boolean + /** If the value is true the buffers will not be cleared and will preserve their values until cleared or overwritten by the author. */ + preserveDrawingBuffer?: boolean + /** Boolean that indicates if a context will be created if the system performance is low. */ + failIfMajorPerformanceCavet?: boolean } - - depth?: { - enable?: boolean, - mask?: boolean, - // TODO(jlfwong): Narrow - func?: string, - range?: [number, number] - } - - /** Number of vertices to draw */ - count: number - - /** */ - primitive?: 'points' | 'lines' | 'line strip' | 'triangles' | 'triangle strip' | 'triangle fan' - - /** Offset of primitives to draw */ - offset?: number + /** A multiplier which is used to scale the canvas size relative to the container. (Default window.devicePixelRatio) */ + pixelRatio?: number + /** A list of extensions that must be supported by WebGL context. Default [] */ + extensions?: string[] | string + /** A list of extensions which are loaded opportunistically. Default [] */ + optionalExtensions?: string[] | string + /** If set, turns on profiling for all commands by default. (Default false) */ + profile?: boolean + /** + * An optional callback which accepts a pair of arguments, (err, regl) that + * is called after the application loads. If not specified, context creation + * errors throw. + */ + onDone?: (err: Error, regl: regl.Instance) => void } + function regl(options: InitializationOptions): regl.Instance - function ReglConstructor(): ReglConstructor.ReglCommandConstructor - function ReglConstructor(ctx: WebGLRenderingContext): ReglConstructor.ReglCommandConstructor - function ReglConstructor(canvas: HTMLCanvasElement): ReglConstructor.ReglCommandConstructor + /** Create fullscreen canvas */ + function regl(): regl.Instance - namespace ReglConstructor { - function prop(name: string): ReglProp + /** Build from an existing canvas */ + function regl(canvas: HTMLCanvasElement): regl.Instance + /** Build from an existing div container */ + function regl(container: HTMLElement): regl.Instance + + /** Build from an existing WebGL context */ + function regl(gl: WebGLRenderingContext): regl.Instance + + namespace regl { export type vec2 = [number, number] export type vec3 = [number, number, number] + export type vec4 = [number, number, number, number] export type mat3 = [number, number, number, number, number, number, number, number, number] + export type mat4 = [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number] + type GlslPrimitive = number | vec2 | vec3 | vec4 | mat3 | mat4 - interface ReglCommand

{ - (p: P): void - } - - interface ReglCommandConstructor { -

(params: ReglCommandParameters

): ReglCommand

+ interface Instance { +

(params: CommandOptions

): Command

clear(args: { color?: [number, number, number, number], @@ -87,9 +69,339 @@ declare module "regl" { stencil?: number, }): void - buffer(data: Float32Array): ReglBuffer + // TODO(jlfwong): read() + + buffer(args: BufferArgs): Buffer + texture(args: TextureArgs): Texture + framebuffer(args: FramebufferOptions): Framebuffer + renderbuffer(args: RenderBufferOptions): RenderBuffer + + limits: { + colorBits: [number, number, number, number] + depthBits: number + stencilBits: number + subpixelBits: number + extensions: string[] + maxAnistropic: number + maxDrawbuffers: number + maxColorAttachments: number + pointSizeDims: number + lineWidthDims: number + maxViewportDims: number + maxCombinedTextureUnits: number + maxCubeMapSize: number + maxTextureUnits: number + maxTextureSize: number + maxAttributes: number + maxVertexUniforms: number + maxVertexTextureUnits: number + maxFragmentUniforms: number + glsl: string + renderer: string + vendor: string + version: string + } + + stats: { + bufferCount: number + elementsCount: number + framebufferCount: number + shaderCount: number + textureCount: number + cubeCount: number + renderbufferCount: number + getTotalTextureSize(): number + getTotalBufferSize(): number + getTotalRenderbufferSize(): number + getMaxUniformsCount(): number + maxTextureUnits(): number + } + + destroy(): void + } + + type TypedArray = Int8Array | Uint8Array | Uint8ClampedArray | Int16Array | + Uint16Array | Int32Array | Uint32Array | Float32Array | Float64Array + + type DrawMode = 'points' | 'lines' | 'line strip' | 'line loop' | 'triangles' | 'triangle strip' | 'triangle fan' + + interface Context { + tick: number + time: number + viewportWidth: number + viewportHeight: number + framebufferWidth: number + framebufferHeight: number + drawingBufferWidth: number + drawingBufferHeight: number + pixelRatio: number + [key: string]: any + } + + interface BufferOptions { + data?: TypedArray | GlslPrimitive[] + + /** If data is null or not present reserves space for the buffer */ + length?: number + + /** Sets array buffer usage hint */ + usage?: 'static' | 'dynamic' | 'stream' + } + type BufferArgs = number | number[] | vec2[] | vec3[] | mat3[] | TypedArray | BufferOptions + interface Buffer { + (args: BufferArgs): void + stats: { + size: number + } + destroy(): void + } + + interface ElementsOptions { + data?: TypedArray + usage?: 'static' | 'dynamic' | 'stream' + length?: number + primitive?: GlslPrimitive + count?: number + } + type ElementsArgs = vec3[] | ElementsOptions + interface Elements { + (args: ElementsArgs): void + destroy(): void + } + + type MagFilter = 'nearest' | 'linear' + type MinFilter = 'nearest' | 'linear' | 'mipmap' | 'linear mipmap linear' | 'nearest mipmap linear' | 'nearest mipmap nearest' + type WrapMode = 'repeat' | 'clamp' | 'mirror' + type TextureFormat = 'alpha' | 'luminance' | 'luminance alpha' | 'rgb' | 'rgba' | 'rgba4' | 'rgb5 a1' | 'rgb565' | 'srgb' | 'srgba' | 'depth' | 'depth stencil' | 'rgb s3tc dxt1' | 'rgb s3tc dxt5' | 'rgb atc' | 'rgba atc explicit alpha' | 'rgba atc interpolated alpha' | 'rgb pvrtc 4bppv1' | 'rgb pvrtc 2bppv1' | 'rgba pvrtc 4bppv1' | 'rgba pvrtc 2bppv1' | 'rgb etc1' + type TextureType = 'uint8' | 'uint16' | 'float' | 'float32' | 'half float' | 'float16' + type ColorSpace = 'none' | 'browser' + type MipmapHint = "don't care" | 'dont care' | 'nice' | 'fast' + + type TextureData = number[] | number[][] | TypedArray | HTMLImageElement | HTMLVideoElement | HTMLCanvasElement | CanvasRenderingContext2D + interface TextureOptions { + width?: number + height?: number + shape?: [number, number] | [number, number, number] + radius?: number + + /** Sets magnification filter */ + mag?: MagFilter + /** Sets minification filter */ + min?: MinFilter + /** Sets wrap mode on S axis */ + wrapS?: WrapMode + /** Sets wrap mode on T axis */ + wrapT?: WrapMode + /** Sets number of anisotropic samples, requires EXT_texture_filter_anisotropic */ + aniso?: number + format?: TextureFormat + type?: TextureType + mipmap?: MipmapHint | boolean + /** Flips textures vertically when uploading */ + flipY?: boolean + /** Sets unpack alignment per pixel */ + alignment?: number + /** Premultiply alpha when unpacking */ + premultiplyAlpha?: boolean + colorSpace?: ColorSpace + + copy?: boolean + + data: TextureData + } + type TextureArgs = TextureData | TextureOptions + interface Texture { + (args: TextureArgs): void + destroy(): void + stats: { + size: number + } + } + + // TODO(jlfwong): Cube maps + // TODO(jlfwong): Cubic frame buffers + + interface RenderBufferOptions { + format?: 'rgba4' | 'rgb565' | 'rgb5 a1' | 'depth' | 'stencil' | 'depth stencil' | 'srgba' | 'rgba16f' | 'rgb16f' | 'rgba32f' + width?: number + height?: number + shape?: [number, number] + radius?: number + } + interface RenderBuffer { + (options: RenderBufferOptions): void + resize(width: number, height: number): void + destroy(): void + stats: { + size: number + } + } + + interface FramebufferOptions { + width?: number + height?: number + shape?: [number, number] + color?: RenderBuffer[] | Texture[] + depth?: boolean | RenderBuffer | Texture + stencil?: boolean | RenderBuffer | Texture + depthStencil?: boolean | RenderBuffer | Texture + colorFormat?: 'rgba' | 'rgba4' | 'rgb565' | 'rgb5 a1' | 'rgb16f' | 'rgba16f' | 'rgba32f' | 'srgba' + colorType?: 'uint8' | 'half float' | 'float' + } + interface Framebuffer { + (options: FramebufferOptions): void + resize(width: number, height: number): void + destroy(): void + } + + type Uniform = number | vec2 | vec3 | mat3 | Texture + + interface AttributeOptions { + buffer?: Buffer | BufferArgs + offset?: number + stride?: number + normalized?: boolean + size?: number + divisor?: number + } + type Attribute = AttributeOptions | Buffer | BufferArgs | { constant: number | vec2 | vec3 | vec4 | mat3 | mat4 } + + interface Computed { + (context: Context, props: P, batchId: number): T + } + type MaybeComputed = Computed | T + + type DepthFunction = 'never' | 'always' | '<' | 'less' | '<=' | 'lequal' | '>' | 'greater' | '>=' | 'gequal' | '=' | 'equal' | '!=' | 'notequal' + type BlendFunction = 0 | 'zero' | 1 | 'one' | 'src color' | 'one minus src color' | 'src alpha' | 'one minus src alpha' | 'dst color' | 'one minus dst color' | 'dst alpha' | 'one minus dst alpha' | 'constant color' | 'one minus constant color' | 'one minus constant alpha' | 'src alpha saturate' + type BlendEquation = 'add' | 'subtract' | 'reverse subtract' | 'min' | 'max' + type StencilFunction = DepthFunction + type StencilOp = 'zero' | 'keep' | 'replace' | 'invert' | 'increment' | 'decrement' | 'increment wrap' | 'decrement wrap' + interface CommandOptions

{ + /** Source code of vertex shader */ + vert?: string + + /** Source code of fragment shader */ + frag?: string + + uniforms?: { [uniformName: string]: MaybeComputed } + + attributes: { [attributeName: string]: MaybeComputed } + + primitive?: DrawMode + + /** Number of vertices to draw */ + count?: MaybeComputed + + /** Offset of primitives to draw */ + offset?: MaybeComputed + + /** Number of instances to render */ + instances?: MaybeComputed + + /** Element array buffer */ + elements?: MaybeComputed + + framebuffer?: MaybeComputed + + profile?: MaybeComputed + + depth?: MaybeComputed + + blend?: MaybeComputed + + stencil?: MaybeComputed + + polygonOffset?: MaybeComputed + + cull?: MaybeComputed + + frontFace?: MaybeComputed + + dither?: MaybeComputed + + lineWidth?: MaybeComputed + + colorMask?: MaybeComputed + + sample?: MaybeComputed + + scissor?: MaybeComputed + + viewport?: MaybeComputed + } + + function prop

(name: keyof P): (context: Context, props: P, batchId: number) => P[keyof P] + function context

(name: keyof Context): (context: Context, props: P, batchId: number) => Context[keyof Context] + + interface Command

{ + /** One shot rendering */ + (): void + (p: P): void + + /** Render a batch */ + (ps: P[]): void + + /** Scoped commands */ + (cb: (context: Context) => void): void + (p: P, cb: (context: Context) => void): void } } - export = ReglConstructor + export = regl }