@gjsify/webgl 0.0.2

package/src/ts/utils.ts

@@ -0,0 +1,266 @@
+// https://github.com/stackgl/headless-gl/blob/master/src/javascript/utils.js
+// import { gl } from './native-gl.js';
+import { WebGLUniformLocation } from './webgl-uniform-location.js';
+import { WebGLProgram } from './webgl-program.js';
+import GLib from '@girs/glib-2.0';
+import { HTMLImageElement as GjsifyHTMLImageElement } from "@gjsify/html-image-element";
+
+import type Gwebgl from '@girs/gwebgl-0.1';
+import type { GjsifyWebGLRenderingContext } from './webgl-rendering-context.js';
+import type { TypedArray} from './types/index.js';
+
+export function bindPublics(props: Array<keyof GjsifyWebGLRenderingContext>, wrapper: GjsifyWebGLRenderingContext, privateInstance: GjsifyWebGLRenderingContext, privateMethods: string[]) {
+    for (let i = 0; i < props.length; i++) {
+        const prop = props[i]
+        const value = privateInstance[prop]
+        if (typeof value === 'function') {
+            if (privateMethods.indexOf(prop) === -1) {
+                // @ts-ignore
+                wrapper[prop] = value.bind(privateInstance)
+            }
+        } else {
+            if (prop[0] === '_' ||
+                prop[0] === '0' ||
+                prop[0] === '1') {
+                continue
+            }
+            // @ts-ignore
+            wrapper[prop] = value
+        }
+    }
+}
+
+export function checkObject(object: any) {
+    return typeof object === 'object' ||
+        (object === undefined)
+}
+
+export function checkUniform(program: WebGLProgram, location: WebGLUniformLocation) {
+    return location instanceof WebGLUniformLocation &&
+        location._program === program &&
+        location._linkCount === program._linkCount
+}
+
+export function isTypedArray(data: TypedArray) {
+    return data instanceof Uint8Array ||
+        data instanceof Uint8ClampedArray ||
+        data instanceof Int8Array ||
+        data instanceof Uint16Array ||
+        data instanceof Int16Array ||
+        data instanceof Uint32Array ||
+        data instanceof Int32Array ||
+        data instanceof Float32Array ||
+        data instanceof Float64Array
+}
+
+// Don't allow: ", $, `, @, \, ', \0
+export function isValidString(str: string) {
+    // Remove comments first
+    const c = str.replace(/(?:\/\*(?:[\s\S]*?)\*\/)|(?:([\s;])+\/\/(?:.*)$)/gm, '')
+    return !(/["$`@\\'\0]/.test(c))
+}
+
+export function vertexCount(gl: GjsifyWebGLRenderingContext, primitive: GLenum, count: number) {
+    switch (primitive) {
+        case gl.TRIANGLES:
+            return count - (count % 3)
+        case gl.LINES:
+            return count - (count % 2)
+        case gl.LINE_LOOP:
+        case gl.POINTS:
+            return count
+        case gl.TRIANGLE_FAN:
+        case gl.LINE_STRIP:
+            if (count < 2) {
+                return 0
+            }
+            return count
+        case gl.TRIANGLE_STRIP:
+            if (count < 3) {
+                return 0
+            }
+            return count
+        default:
+            return -1
+    }
+}
+
+export function typeSize(gl: GjsifyWebGLRenderingContext, type: GLenum) {
+    switch (type) {
+        case gl.UNSIGNED_BYTE:
+        case gl.BYTE:
+            return 1
+        case gl.UNSIGNED_SHORT:
+        case gl.SHORT:
+            return 2
+        case gl.UNSIGNED_INT:
+        case gl.INT:
+        case gl.FLOAT:
+            return 4
+    }
+    return 0
+}
+
+export function uniformTypeSize(gl: GjsifyWebGLRenderingContext, type: GLenum) {
+    switch (type) {
+        case gl.BOOL_VEC4:
+        case gl.INT_VEC4:
+        case gl.FLOAT_VEC4:
+            return 4
+
+        case gl.BOOL_VEC3:
+        case gl.INT_VEC3:
+        case gl.FLOAT_VEC3:
+            return 3
+
+        case gl.BOOL_VEC2:
+        case gl.INT_VEC2:
+        case gl.FLOAT_VEC2:
+            return 2
+
+        case gl.BOOL:
+        case gl.INT:
+        case gl.FLOAT:
+        case gl.SAMPLER_2D:
+        case gl.SAMPLER_CUBE:
+            return 1
+
+        default:
+            return 0
+    }
+}
+
+export const listToArray = (values: Float32List) => {
+    const array: number[] = [];
+    for (const value of values.values()) {
+        array.push(value)
+    }
+    return array;
+}
+
+export function arrayToUint8Array(array: TypedArray | Float32List | Array<number> | ArrayBuffer | DataView) {
+
+    if(isTypedArray(array as TypedArray | DataView)) {
+        return (new Uint8Array((array as TypedArray | DataView).buffer)).subarray(
+            (array as TypedArray | DataView).byteOffset,
+            (array as TypedArray | DataView).byteLength + (array as TypedArray | DataView).byteOffset)
+    }
+
+    if(Array.isArray(array) || array instanceof ArrayBuffer) {
+        return new Uint8Array(array);
+    }
+
+    if(typeof (array as Float32List).values === 'function') {
+        return new Uint8Array(listToArray(array as Float32List))
+    }
+
+    throw new Error("Can't unpack typed array!");
+}
+
+export function Uint8ArrayToVariant(array: Uint8Array | null) {
+    const variant = new GLib.Variant("ay", Array.from(array || []));
+    return variant
+}
+
+/**
+ * Converts an ArrayBufferView to an array of bools. gjs returns
+ * Uint8Array, but the elements are actually 4 bytes each.
+ * @param array 
+ * @returns 
+ */
+export function boolArray(array: ArrayBufferView) {
+    return Array.from(new Int32Array(array.buffer)).map(
+        a => a ? true : false);
+}
+
+export const extractImageData = (pixels: TexImageSource | GjsifyHTMLImageElement): ImageData | null => {
+    const width = (pixels as any).width as number | undefined;
+    const height = (pixels as any).height as number | undefined;
+    if (typeof pixels === 'object' && typeof width !== 'undefined' && typeof height !== 'undefined') {
+        if (typeof (pixels as ImageData).data !== 'undefined') {
+            return pixels as ImageData
+        }
+
+        let context = null
+
+        if (typeof (pixels as HTMLCanvasElement).getContext === 'function') {
+            context = (pixels as HTMLCanvasElement).getContext('2d')
+        } else if (typeof (pixels as GjsifyHTMLImageElement).isPixbuf()) {
+            return (pixels as GjsifyHTMLImageElement).getImageData();
+        } else if (typeof (pixels as HTMLImageElement).src !== 'undefined' && typeof document === 'object' && typeof document.createElement === 'function') {
+            const canvas = document.createElement('canvas')
+
+            if (typeof canvas === 'object' && typeof canvas.getContext === 'function') {
+                canvas.width = width
+                canvas.height = height
+                context = canvas.getContext('2d')
+
+                if (context !== null) {
+                    context.drawImage(pixels as CanvasImageSource, 0, 0)
+                }
+            }
+        }
+
+        if (context !== null) {
+            return context.getImageData(0, 0, width, height)
+        }
+    }
+
+    return null
+}
+
+export function formatSize(gl: GjsifyWebGLRenderingContext, internalFormat: number) {
+    switch (internalFormat) {
+        case gl.ALPHA:
+        case gl.LUMINANCE:
+            return 1
+        case gl.LUMINANCE_ALPHA:
+            return 2
+        case gl.RGB:
+            return 3
+        case gl.RGBA:
+            return 4
+    }
+    return 0
+}
+
+export function convertPixels(pixels: ArrayBuffer | Uint8Array | Uint16Array | Uint8ClampedArray | Float32Array | Buffer | ArrayBufferView | null) {
+    if (typeof pixels === 'object' && pixels !== null) {
+        if (pixels instanceof ArrayBuffer) {
+            return new Uint8Array(pixels)
+        } else if (pixels instanceof Uint8Array ||
+            pixels instanceof Uint16Array ||
+            pixels instanceof Uint8ClampedArray ||
+            pixels instanceof Float32Array) {
+            return arrayToUint8Array(pixels)
+        } else if ((pixels as Buffer) instanceof Buffer) {
+            return new Uint8Array(pixels as Buffer)
+        }
+    }
+    return null
+}
+
+export function checkFormat(gl: GjsifyWebGLRenderingContext, format: GLenum) {
+    return (
+        format === gl.ALPHA ||
+        format === gl.LUMINANCE_ALPHA ||
+        format === gl.LUMINANCE ||
+        format === gl.RGB ||
+        format === gl.RGBA)
+}
+
+export function validCubeTarget(gl: GjsifyWebGLRenderingContext, target: GLenum) {
+    return target === gl.TEXTURE_CUBE_MAP_POSITIVE_X ||
+        target === gl.TEXTURE_CUBE_MAP_NEGATIVE_X ||
+        target === gl.TEXTURE_CUBE_MAP_POSITIVE_Y ||
+        target === gl.TEXTURE_CUBE_MAP_NEGATIVE_Y ||
+        target === gl.TEXTURE_CUBE_MAP_POSITIVE_Z ||
+        target === gl.TEXTURE_CUBE_MAP_NEGATIVE_Z
+}
+
+export function flag<T = Gwebgl.WebGLRenderingContext.ConstructorProperties> (options: T, name: keyof T, dflt: boolean) {
+    if (!options || !(typeof options === 'object') || !(name in options)) {
+      return dflt
+    }
+    return !!options[name]
+}

package/src/ts/webgl-active-info.ts

@@ -0,0 +1,13 @@
+class GjsifyWebGLActiveInfo implements WebGLActiveInfo {
+  size: GLsizei;
+  type: GLenum;
+  name: string;
+
+  constructor (_: WebGLActiveInfo) {
+    this.size = _.size
+    this.type = _.type
+    this.name = _.name
+  }
+}
+
+export { GjsifyWebGLActiveInfo as WebGLActiveInfo }

package/src/ts/webgl-buffer.ts

@@ -0,0 +1,21 @@
+import { Linkable } from './linkable.js'
+
+import type { GjsifyWebGLRenderingContext } from './webgl-rendering-context.js';
+
+export class GjsifyWebGLBuffer extends Linkable implements WebGLBuffer {
+    _ctx: GjsifyWebGLRenderingContext;
+    _size = 0
+    _elements = new Uint8Array(0)
+    constructor(_: WebGLBuffer & number, ctx: GjsifyWebGLRenderingContext) {
+        super(_)
+        this._ctx = ctx
+    }
+
+    _performDelete() {
+        const ctx = this._ctx
+        delete ctx._buffers[this._ | 0]
+        ctx._native.deleteBuffer(this._)
+    }
+}
+
+export { GjsifyWebGLBuffer as WebGLBuffer }

package/src/ts/webgl-context-attributes.ts

@@ -0,0 +1,24 @@
+export class GjsifyWebGLContextAttributes implements WebGLContextAttributes {
+    desynchronized?: boolean;
+    powerPreference?: WebGLPowerPreference;
+    constructor(
+        public alpha?: boolean,
+        public depth?: boolean,
+        public stencil?: boolean,
+        public antialias?: boolean,
+        public premultipliedAlpha?: boolean,
+        public preserveDrawingBuffer?: boolean,
+        public preferLowPowerToHighPerformance?: boolean,
+        public failIfMajorPerformanceCaveat?: boolean) {
+        this.alpha = alpha
+        this.depth = depth
+        this.stencil = stencil
+        this.antialias = antialias
+        this.premultipliedAlpha = premultipliedAlpha
+        this.preserveDrawingBuffer = preserveDrawingBuffer
+        this.preferLowPowerToHighPerformance = preferLowPowerToHighPerformance
+        this.failIfMajorPerformanceCaveat = failIfMajorPerformanceCaveat
+    }
+}
+
+export { GjsifyWebGLContextAttributes as WebGLContextAttributes }

package/src/ts/webgl-drawing-buffer-wrapper.ts

@@ -0,0 +1,10 @@
+export class WebGLDrawingBufferWrapper {
+    _framebuffer: WebGLFramebuffer & number;
+    _color: WebGLTexture & number;
+    _depthStencil: WebGLRenderbuffer & number;
+    constructor(framebuffer: WebGLFramebuffer & number, color: WebGLTexture & number, depthStencil: WebGLRenderbuffer & number) {
+        this._framebuffer = framebuffer
+        this._color = color
+        this._depthStencil = depthStencil
+    }
+}

package/src/ts/webgl-framebuffer.ts

@@ -0,0 +1,133 @@
+import { Linkable } from './linkable.js'
+// import { gl } from './native-gl.js'
+
+import type { GjsifyWebGLRenderingContext } from './webgl-rendering-context.js';
+// import type { WebGLDrawBuffers } from './extensions/webgl-draw-buffers.js';
+type WebGLDrawBuffers = any;
+
+export class GjsifyWebGLFramebuffer extends Linkable implements WebGLFramebuffer {
+
+    _ctx: GjsifyWebGLRenderingContext;
+    _binding = 0
+
+    _width = 0
+    _height = 0
+    _status: number | null = null
+
+    _attachments: Record<GLenum, WebGLTexture | WebGLRenderbuffer | null>;
+    _attachmentLevel: Record<GLenum, number | null>;
+    _attachmentFace: Record<GLenum, number | null>;
+
+    constructor(_: WebGLFramebuffer & number, ctx: GjsifyWebGLRenderingContext) {
+        super(_)
+        this._ctx = ctx
+
+        this._attachments = {}
+        this._attachments[ctx.COLOR_ATTACHMENT0] = null
+        this._attachments[ctx.DEPTH_ATTACHMENT] = null
+        this._attachments[ctx.STENCIL_ATTACHMENT] = null
+        this._attachments[ctx.DEPTH_STENCIL_ATTACHMENT] = null
+
+        this._attachmentLevel = {}
+        this._attachmentLevel[ctx.COLOR_ATTACHMENT0] = 0
+        this._attachmentLevel[ctx.DEPTH_ATTACHMENT] = 0
+        this._attachmentLevel[ctx.STENCIL_ATTACHMENT] = 0
+        this._attachmentLevel[ctx.DEPTH_STENCIL_ATTACHMENT] = 0
+
+        this._attachmentFace = {}
+        this._attachmentFace[ctx.COLOR_ATTACHMENT0] = 0
+        this._attachmentFace[ctx.DEPTH_ATTACHMENT] = 0
+        this._attachmentFace[ctx.STENCIL_ATTACHMENT] = 0
+        this._attachmentFace[ctx.DEPTH_STENCIL_ATTACHMENT] = 0
+
+        if (ctx._extensions.webgl_draw_buffers) {
+            const webGLDrawBuffers: WebGLDrawBuffers = ctx._extensions.webgl_draw_buffers;
+            this._attachments[webGLDrawBuffers.COLOR_ATTACHMENT1_WEBGL] = null
+            this._attachments[webGLDrawBuffers.COLOR_ATTACHMENT2_WEBGL] = null
+            this._attachments[webGLDrawBuffers.COLOR_ATTACHMENT3_WEBGL] = null
+            this._attachments[webGLDrawBuffers.COLOR_ATTACHMENT4_WEBGL] = null
+            this._attachments[webGLDrawBuffers.COLOR_ATTACHMENT5_WEBGL] = null
+            this._attachments[webGLDrawBuffers.COLOR_ATTACHMENT6_WEBGL] = null
+            this._attachments[webGLDrawBuffers.COLOR_ATTACHMENT7_WEBGL] = null
+            this._attachments[webGLDrawBuffers.COLOR_ATTACHMENT8_WEBGL] = null
+            this._attachments[webGLDrawBuffers.COLOR_ATTACHMENT9_WEBGL] = null
+            this._attachments[webGLDrawBuffers.COLOR_ATTACHMENT10_WEBGL] = null
+            this._attachments[webGLDrawBuffers.COLOR_ATTACHMENT11_WEBGL] = null
+            this._attachments[webGLDrawBuffers.COLOR_ATTACHMENT12_WEBGL] = null
+            this._attachments[webGLDrawBuffers.COLOR_ATTACHMENT13_WEBGL] = null
+            this._attachments[webGLDrawBuffers.COLOR_ATTACHMENT14_WEBGL] = null
+            this._attachments[webGLDrawBuffers.COLOR_ATTACHMENT15_WEBGL] = null
+            this._attachments[ctx.NONE] = null
+            this._attachments[ctx.BACK] = null
+
+            this._attachmentLevel[webGLDrawBuffers.COLOR_ATTACHMENT1_WEBGL] = 0
+            this._attachmentLevel[webGLDrawBuffers.COLOR_ATTACHMENT2_WEBGL] = 0
+            this._attachmentLevel[webGLDrawBuffers.COLOR_ATTACHMENT3_WEBGL] = 0
+            this._attachmentLevel[webGLDrawBuffers.COLOR_ATTACHMENT4_WEBGL] = 0
+            this._attachmentLevel[webGLDrawBuffers.COLOR_ATTACHMENT5_WEBGL] = 0
+            this._attachmentLevel[webGLDrawBuffers.COLOR_ATTACHMENT6_WEBGL] = 0
+            this._attachmentLevel[webGLDrawBuffers.COLOR_ATTACHMENT7_WEBGL] = 0
+            this._attachmentLevel[webGLDrawBuffers.COLOR_ATTACHMENT8_WEBGL] = 0
+            this._attachmentLevel[webGLDrawBuffers.COLOR_ATTACHMENT9_WEBGL] = 0
+            this._attachmentLevel[webGLDrawBuffers.COLOR_ATTACHMENT10_WEBGL] = 0
+            this._attachmentLevel[webGLDrawBuffers.COLOR_ATTACHMENT11_WEBGL] = 0
+            this._attachmentLevel[webGLDrawBuffers.COLOR_ATTACHMENT12_WEBGL] = 0
+            this._attachmentLevel[webGLDrawBuffers.COLOR_ATTACHMENT13_WEBGL] = 0
+            this._attachmentLevel[webGLDrawBuffers.COLOR_ATTACHMENT14_WEBGL] = 0
+            this._attachmentLevel[webGLDrawBuffers.COLOR_ATTACHMENT15_WEBGL] = 0
+            this._attachmentLevel[ctx.NONE] = null
+            this._attachmentLevel[ctx.BACK] = null
+
+            this._attachmentFace[webGLDrawBuffers.COLOR_ATTACHMENT1_WEBGL] = 0
+            this._attachmentFace[webGLDrawBuffers.COLOR_ATTACHMENT2_WEBGL] = 0
+            this._attachmentFace[webGLDrawBuffers.COLOR_ATTACHMENT3_WEBGL] = 0
+            this._attachmentFace[webGLDrawBuffers.COLOR_ATTACHMENT4_WEBGL] = 0
+            this._attachmentFace[webGLDrawBuffers.COLOR_ATTACHMENT5_WEBGL] = 0
+            this._attachmentFace[webGLDrawBuffers.COLOR_ATTACHMENT6_WEBGL] = 0
+            this._attachmentFace[webGLDrawBuffers.COLOR_ATTACHMENT7_WEBGL] = 0
+            this._attachmentFace[webGLDrawBuffers.COLOR_ATTACHMENT8_WEBGL] = 0
+            this._attachmentFace[webGLDrawBuffers.COLOR_ATTACHMENT9_WEBGL] = 0
+            this._attachmentFace[webGLDrawBuffers.COLOR_ATTACHMENT10_WEBGL] = 0
+            this._attachmentFace[webGLDrawBuffers.COLOR_ATTACHMENT11_WEBGL] = 0
+            this._attachmentFace[webGLDrawBuffers.COLOR_ATTACHMENT12_WEBGL] = 0
+            this._attachmentFace[webGLDrawBuffers.COLOR_ATTACHMENT13_WEBGL] = 0
+            this._attachmentFace[webGLDrawBuffers.COLOR_ATTACHMENT14_WEBGL] = 0
+            this._attachmentFace[webGLDrawBuffers.COLOR_ATTACHMENT15_WEBGL] = 0
+            this._attachmentFace[ctx.NONE] = null
+            this._attachmentFace[ctx.BACK] = null
+        }
+    }
+
+    _clearAttachment(attachment: GLenum) {
+        const object = this._attachments[attachment]
+        if (!object) {
+            return
+        }
+        this._attachments[attachment] = null
+        this._unlink(object)
+    }
+
+    _setAttachment(object: WebGLTexture | WebGLRenderbuffer | null, attachment: GLenum) {
+        const prevObject = this._attachments[attachment]
+        if (prevObject === object) {
+            return
+        }
+
+        this._clearAttachment(attachment)
+        if (!object) {
+            return
+        }
+
+        this._attachments[attachment] = object
+
+        this._link(object)
+    }
+
+    _performDelete() {
+        const ctx = this._ctx
+        delete ctx._framebuffers[this._ | 0]
+        ctx.deleteFramebuffer.call(ctx, this)
+    }
+}
+
+export { GjsifyWebGLFramebuffer as WebGLFramebuffer }

package/src/ts/webgl-program.ts

@@ -0,0 +1,30 @@
+import { Linkable } from './linkable.js'
+import { WebGLActiveInfo } from './webgl-active-info.js';
+
+import type { GjsifyWebGLRenderingContext } from './webgl-rendering-context.js';
+
+export class GjsifyWebGLProgram extends Linkable implements WebGLProgram {
+    _ctx: GjsifyWebGLRenderingContext;
+    _linkCount = 0
+    _linkStatus = false
+    _linkInfoLog: string | null = 'not linked'
+    _attributes: number[] = []
+    _uniforms: WebGLActiveInfo[] = []
+    constructor(_: WebGLProgram & number, ctx: GjsifyWebGLRenderingContext) {
+        super(_)
+        this._ctx = ctx
+        this._linkCount = 0
+        this._linkStatus = false
+        this._linkInfoLog = 'not linked'
+        this._attributes = []
+        this._uniforms = []
+    }
+
+    _performDelete() {
+        const ctx = this._ctx
+        delete ctx._programs[this._ | 0]
+        ctx._native.deleteProgram(this._ | 0)
+    }
+}
+
+export { GjsifyWebGLProgram as WebGLProgram }

package/src/ts/webgl-renderbuffer.ts

@@ -0,0 +1,28 @@
+import { Linkable } from './linkable.js'
+// import { gl } from './native-gl.js'
+
+import type { GjsifyWebGLRenderingContext } from './webgl-rendering-context.js';
+
+export class GjsifyWebGLRenderbuffer extends Linkable implements WebGLRenderbuffer {
+    _ctx: GjsifyWebGLRenderingContext;
+    _binding = 0;
+    _width = 0;
+    _height = 0;
+    _format = 0;
+  constructor (_: WebGLRenderbuffer & number, ctx: GjsifyWebGLRenderingContext) {
+    super(_)
+    this._ctx = ctx
+    this._binding = 0
+    this._width = 0
+    this._height = 0
+    this._format = 0
+  }
+
+  _performDelete () {
+    const ctx = this._ctx
+    delete ctx._renderbuffers[this._ | 0]
+    ctx._native.deleteRenderbuffer(this._)
+  }
+}
+
+export { GjsifyWebGLRenderbuffer as WebGLRenderbuffer }