@galacean/effects-webgl 0.0.1-alpha.0

package/dist/ext-wrap.d.ts

@@ -0,0 +1,22 @@
+import type { Disposable } from '@galacean/effects-core';
+import { RenderPass } from '@galacean/effects-core';
+import type { GLRenderer } from './gl-renderer';
+import type { GLTexture } from './gl-texture';
+/**
+ * 常用的 GPU 方法，不是规范必须实现的
+ */
+export interface RendererExtensions {
+    copyTexture?: (source: GLTexture, tex: GLTexture) => void;
+    resetColorAttachments?: (rp: RenderPass, colorAttachments: GLTexture[]) => void;
+}
+export declare class ExtWrap implements RendererExtensions, Disposable {
+    readonly renderer: GLRenderer;
+    private copyRenderPass?;
+    constructor(renderer: GLRenderer);
+    resetColorAttachments(rp: RenderPass, colorTextures: GLTexture[]): void;
+    copyTexture(source: GLTexture, tex: GLTexture): void;
+    copy2(source: GLTexture, target: GLTexture): void;
+    copy1(source: GLTexture, target: GLTexture): void;
+    private createCopyRenderPass;
+    dispose(): void;
+}

package/dist/gl-context-manager.d.ts

@@ -0,0 +1,16 @@
+import type { LostHandler, RestoreHandler } from '@galacean/effects-core';
+export declare class GLContextManager {
+    canvas: HTMLCanvasElement | OffscreenCanvas | null;
+    readonly glType: 'webgl' | 'webgl2';
+    gl: WebGLRenderingContext | WebGL2RenderingContext | null;
+    private readonly contextLostListener;
+    private readonly contextRestoredListener;
+    private readonly restoreHandlers;
+    private readonly lostHandlers;
+    constructor(canvas: HTMLCanvasElement | OffscreenCanvas | null, glType?: 'webgl' | 'webgl2', options?: WebGLContextAttributes);
+    dispose(): void;
+    addLostHandler(lostHandler: LostHandler): void;
+    removeLostHandler(lostHandler: LostHandler): void;
+    addRestoreHandler(restoreHandler: RestoreHandler): void;
+    removeRestoreHandler(restorable: RestoreHandler): void;
+}

package/dist/gl-engine.d.ts

@@ -0,0 +1,11 @@
+import { Engine } from '@galacean/effects-core';
+import type { GLRendererInternal } from './gl-renderer-internal';
+import type { GLRenderer } from './gl-renderer';
+import type { GLPipelineContext } from './gl-pipeline-context';
+export declare class GLEngine extends Engine {
+    constructor(gl: WebGLRenderingContext | WebGL2RenderingContext);
+    dispose(): void;
+    getGLRenderer(): GLRenderer;
+    getGLRendererInternal(): GLRendererInternal;
+    getGLPipelineContext(): GLPipelineContext;
+}

package/dist/gl-frame-buffer.d.ts

@@ -0,0 +1,33 @@
+import type { Disposable, FrameBufferProps, RenderBuffer, Renderer, Texture } from '@galacean/effects-core';
+import { FrameBuffer, RenderPassDestroyAttachmentType } from '@galacean/effects-core';
+import { GLRenderBuffer } from './gl-render-buffer';
+import type { GLRenderer } from './gl-renderer';
+import { GLTexture } from './gl-texture';
+import type { GLEngine } from './gl-engine';
+export declare class GLFrameBuffer extends FrameBuffer implements Disposable {
+    storeInvalidAttachments?: GLenum[];
+    depthStencilRenderBuffer?: GLRenderBuffer;
+    depthTexture?: GLTexture;
+    stencilTexture?: GLTexture;
+    colorTextures: GLTexture[];
+    fbo?: WebGLFramebuffer;
+    engine: GLEngine;
+    readonly renderer: GLRenderer;
+    private readonly attachmentTextures;
+    constructor(props: FrameBufferProps, renderer: Renderer);
+    get stencilStorage(): RenderBuffer | undefined;
+    get depthStorage(): RenderBuffer | undefined;
+    getDepthTexture(): Texture | undefined;
+    getStencilTexture(): Texture | undefined;
+    getColorTextures(): Texture[];
+    private updateAttachmentTextures;
+    private updateProps;
+    private getStoreAttachments;
+    unbind(): void;
+    bind(): void;
+    resetColorTextures(colorTextures?: Texture[]): void;
+    resize(x: number, y: number, width: number, height: number): void;
+    dispose(opt?: {
+        depthStencilAttachment?: RenderPassDestroyAttachmentType;
+    }): void;
+}

package/dist/gl-geometry.d.ts

@@ -0,0 +1,78 @@
+import type { Disposable, GeometryProps, spec, Engine } from '@galacean/effects-core';
+import { Geometry } from '@galacean/effects-core';
+import type { GLGPUBufferProps } from './gl-gpu-buffer';
+import { GLGPUBuffer } from './gl-gpu-buffer';
+import type { GLPipelineContext } from './gl-pipeline-context';
+import type { GLVertexArrayObject } from './gl-vertex-array-object';
+/**
+ * 应用层 Geometry 对象，本身不直接保存 GPU 资源而是通过 geometryInternal 成员保存 GPU 资源
+ */
+export declare class GLGeometry extends Geometry implements Disposable {
+    /**
+     * 索引缓冲区
+     */
+    indicesBuffer?: GLGPUBuffer;
+    drawCount: number;
+    drawStart: number;
+    mode: number;
+    /**
+     * 记录顶点属性信息用于 GLProgram 绑定顶点属性
+     */
+    attributes: Record<string, spec.AttributeWithType>;
+    /**
+     * JS 端记录数据，用于 flush
+     */
+    bufferProps: Record<string, GLGPUBufferProps>;
+    /**
+     * 记录了顶点属性与 GPUBuffer 对应关系
+     */
+    buffers: Record<string, GLGPUBuffer>;
+    indices?: spec.TypedArray;
+    readonly vaos: Record<string, GLVertexArrayObject | undefined>;
+    protected initialized: boolean;
+    private options?;
+    private attributesReleasable;
+    private indicesReleasable;
+    private dirtyFlags;
+    private attributesName;
+    private destroyed;
+    engine?: Engine;
+    constructor(engine: Engine, props: GeometryProps);
+    get isDestroyed(): boolean;
+    get isInitialized(): boolean;
+    getOptions(): {
+        name?: string | undefined;
+        attributes?: Record<string, import("@galacean/effects-core").Attribute> | undefined;
+        indices?: {
+            data: spec.TypedArray;
+            releasable?: boolean | undefined;
+        } | undefined;
+        mode?: import("@galacean/effects-core").GeometryDrawMode | undefined;
+        drawCount?: number | undefined;
+        drawStart?: number | undefined;
+        instanceCount?: number | undefined;
+        bufferUsage?: 35044 | 35048 | undefined;
+        maxVertex?: number | undefined;
+    };
+    /**
+     * Geometry 的 GPU 资源初始化方法，在绘制前调用
+     */
+    initialize(): void;
+    getAttributeBuffer(name: string): GLGPUBuffer | undefined;
+    setAttributeData(name: string, data: spec.TypedArray): void;
+    getAttributeData(name: string): spec.TypedArray | undefined;
+    setAttributeSubData(name: string, offset: number, data: spec.TypedArray): void;
+    getIndexData(): spec.TypedArray | undefined;
+    setIndexData(data?: spec.TypedArray): void;
+    setIndexSubData(offset: number, data: spec.TypedArray): void;
+    getAttributeStride(name: string): number;
+    getAttributeNames(): string[];
+    setDrawStart(count: number): void;
+    getDrawStart(): number;
+    setDrawCount(count: number): void;
+    getDrawCount(): number;
+    private getAttributeBufferOption;
+    createIndicesBuffer(pipelineContext: GLPipelineContext, data: spec.TypedArray): GLGPUBuffer;
+    flush(): void;
+    dispose(): void;
+}

package/dist/gl-gpu-buffer.d.ts

@@ -0,0 +1,36 @@
+import type { Disposable, spec } from '@galacean/effects-core';
+import type { GLPipelineContext } from './gl-pipeline-context';
+type GPUBufferTarget = WebGLRenderingContext['ARRAY_BUFFER'] | WebGLRenderingContext['ELEMENT_ARRAY_BUFFER'] | WebGL2RenderingContext['COPY_READ_BUFFER'] | WebGL2RenderingContext['COPY_WRITE_BUFFER'] | WebGL2RenderingContext['TRANSFORM_FEEDBACK_BUFFER'] | WebGL2RenderingContext['UNIFORM_BUFFER'] | WebGL2RenderingContext['PIXEL_PACK_BUFFER'] | WebGL2RenderingContext['PIXEL_UNPACK_BUFFER'];
+type GPUBufferType = WebGLRenderingContext['UNSIGNED_INT'] | WebGLRenderingContext['UNSIGNED_SHORT'] | WebGLRenderingContext['UNSIGNED_BYTE'] | WebGLRenderingContext['FLOAT'] | WebGLRenderingContext['INT'] | WebGLRenderingContext['SHORT'] | WebGLRenderingContext['BYTE'];
+export interface GLGPUBufferProps {
+    name?: string;
+    target?: GPUBufferTarget;
+    type?: GPUBufferType;
+    /**
+     * 数据元素的总量
+     */
+    elementCount?: number;
+    data?: spec.TypedArray;
+    usage?: WebGLRenderingContext['STATIC_DRAW'] | WebGLRenderingContext['DYNAMIC_DRAW'];
+}
+export declare class GLGPUBuffer implements Disposable {
+    readonly pipelineContext: GLPipelineContext;
+    readonly bytesPerElement: number;
+    readonly target: GPUBufferTarget;
+    readonly type: GPUBufferType;
+    readonly usage: WebGLRenderingContext['STATIC_DRAW'] | WebGLRenderingContext['DYNAMIC_DRAW'] | WebGLRenderingContext['STREAM_DRAW'];
+    readonly glBuffer: WebGLBuffer | null;
+    private byteLength;
+    private destroyed;
+    constructor(pipelineContext: GLPipelineContext, props: GLGPUBufferProps);
+    get elementCount(): number;
+    get isDestroyed(): boolean;
+    private createGLBuffer;
+    bind(): void;
+    bufferData(data: spec.TypedArray | number): void;
+    bufferSubData(elementOffset: number, data: spec.TypedArray): void;
+    dispose(): void;
+    readSubData(elementOffset: number, dstBuffer: spec.TypedArray): boolean;
+}
+export declare function getBytesPerElementByGLType(type: number): number;
+export {};

package/dist/gl-material-state.d.ts

@@ -0,0 +1,50 @@
+import type { GLPipelineContext } from './gl-pipeline-context';
+export declare class GLMaterialState {
+    blending: boolean;
+    blendFunctionParameters: [blendSrc: GLenum, blendDst: GLenum, blendSrcAlpha: GLenum, blendDstAlpha: GLenum];
+    blendEquationParameters: [blendEquationRGB: GLenum, blendEquationAlpha: GLenum];
+    blendColor: [r: number, g: number, b: number, a: number];
+    depthTest: boolean;
+    depthMask: boolean;
+    depthRange: [zNear: GLenum, zFar: GLenum];
+    depthFunc: GLenum;
+    polygonOffset: [factor: GLenum, units: GLenum];
+    polygonOffsetFill: boolean;
+    sampleAlphaToCoverage: boolean;
+    colorMask: [r: boolean, g: boolean, b: boolean, a: boolean];
+    stencilTest: boolean;
+    stencilMask: [front: GLenum, back: GLenum];
+    stencilRef: [front: GLenum, back: GLenum];
+    stencilFunc: [front: GLenum, back: GLenum];
+    stencilOpFail: [front: GLenum, back: GLenum];
+    stencilOpZFail: [front: GLenum, back: GLenum];
+    stencilOpZPass: [front: GLenum, back: GLenum];
+    culling: boolean;
+    frontFace: GLenum;
+    cullFace: GLenum;
+    constructor();
+    setBlendColor(color: [r: number, g: number, b: number, a: number]): void;
+    setBlending(value: boolean): void;
+    setBlendFunctionParameters(value: [blendSrc: GLenum, blendDst: GLenum, blendSrcAlpha: GLenum, blendDstAlpha: GLenum]): void;
+    setBlendEquationParameters(value: [rgb: GLenum, alpha: GLenum]): void;
+    setDepthTest(value: boolean): void;
+    setDepthMask(value: boolean): void;
+    setDepthRange(value: [zNear: GLenum, zFar: GLenum]): void;
+    setDepthFunc(value: GLenum): void;
+    setPolygonOffsetFill(value: boolean): void;
+    setPolygonOffset(value: [factor: GLenum, units: GLenum]): void;
+    setSampleAlphaToCoverage(value: boolean): void;
+    setColorMask(color: [r: boolean, g: boolean, b: boolean, a: boolean]): void;
+    setStencilTest(value: boolean): void;
+    setStencilMask(value: [front: GLenum, back: GLenum]): void;
+    setStencilRef(value: [front: GLenum, back: GLenum]): void;
+    setStencilFunc(value: [front: GLenum, back: GLenum]): void;
+    setStencilOpFail(value: [front: GLenum, back: GLenum]): void;
+    setStencilOpZFail(value: [front: GLenum, back: GLenum]): void;
+    setStencilOpZPass(value: [front: GLenum, back: GLenum]): void;
+    setCulling(value: boolean): void;
+    setFrontFace(value: GLenum): void;
+    setCullFace(value: GLenum): void;
+    reset(): void;
+    apply(pipelineContext: GLPipelineContext): void;
+}

package/dist/gl-material.d.ts

@@ -0,0 +1,106 @@
+import type { MaterialDestroyOptions, MaterialProps, MaterialStates, UndefinedAble, Texture, spec, Engine, GlobalUniforms } from '@galacean/effects-core';
+import { Material } from '@galacean/effects-core';
+import { GLMaterialState } from './gl-material-state';
+import type { GLPipelineContext } from './gl-pipeline-context';
+import type { GLShader } from './gl-shader';
+import type { GLRenderer } from './gl-renderer';
+export declare class GLMaterial extends Material {
+    shader: GLShader;
+    floats: Record<string, number>;
+    ints: Record<string, number>;
+    vector2s: Record<string, spec.vec2>;
+    vector3s: Record<string, spec.vec3>;
+    vector4s: Record<string, spec.vec4>;
+    matrices: Record<string, spec.mat4>;
+    matrice3s: Record<string, spec.mat3>;
+    textures: Record<string, Texture>;
+    floatArrays: Record<string, number[]>;
+    vector4Arrays: Record<string, number[]>;
+    matrixArrays: Record<string, number[]>;
+    samplers: string[];
+    uniforms: string[];
+    uniformDirtyFlag: boolean;
+    glMaterialState: GLMaterialState;
+    private engine?;
+    constructor(engine: Engine, props: MaterialProps);
+    get blending(): UndefinedAble<boolean>;
+    set blending(blending: UndefinedAble<boolean>);
+    get blendColor(): UndefinedAble<[r: number, g: number, b: number, a: number]>;
+    set blendColor(color: UndefinedAble<[r: number, g: number, b: number, a: number]>);
+    get blendFunction(): UndefinedAble<[blendSrc: number, blendDst: number, blendSrcAlpha: number, blendDstAlpha: number]>;
+    set blendFunction(func: UndefinedAble<[blendSrc: number, blendDst: number, blendSrcAlpha: number, blendDstAlpha: number]>);
+    get blendEquation(): UndefinedAble<[rgb: number, alpha: number]>;
+    set blendEquation(equation: UndefinedAble<[rgb: number, alpha: number]>);
+    get depthTest(): UndefinedAble<boolean>;
+    set depthTest(value: UndefinedAble<boolean>);
+    get depthMask(): UndefinedAble<boolean>;
+    set depthMask(value: UndefinedAble<boolean>);
+    get depthRange(): UndefinedAble<[number, number]>;
+    set depthRange(value: UndefinedAble<[number, number]>);
+    get depthFunc(): UndefinedAble<number>;
+    set depthFunc(value: UndefinedAble<number>);
+    get polygonOffsetFill(): UndefinedAble<boolean>;
+    set polygonOffsetFill(value: UndefinedAble<boolean>);
+    get polygonOffset(): UndefinedAble<[number, number]>;
+    set polygonOffset(value: UndefinedAble<[number, number]>);
+    get sampleAlphaToCoverage(): UndefinedAble<boolean>;
+    set sampleAlphaToCoverage(value: UndefinedAble<boolean>);
+    get colorMask(): UndefinedAble<[r: boolean, g: boolean, b: boolean, a: boolean]>;
+    set colorMask(value: UndefinedAble<[r: boolean, g: boolean, b: boolean, a: boolean]>);
+    get stencilTest(): UndefinedAble<boolean>;
+    set stencilTest(value: UndefinedAble<boolean>);
+    get stencilMask(): UndefinedAble<[number, number]>;
+    set stencilMask(value: UndefinedAble<[number, number]>);
+    get stencilRef(): UndefinedAble<[number, number]>;
+    set stencilRef(value: UndefinedAble<[number, number]>);
+    get stencilFunc(): UndefinedAble<[number, number]>;
+    set stencilFunc(value: UndefinedAble<[number, number]>);
+    get stencilOpFail(): UndefinedAble<[number, number]>;
+    set stencilOpFail(value: UndefinedAble<[number, number]>);
+    get stencilOpZFail(): UndefinedAble<[number, number]>;
+    set stencilOpZFail(value: UndefinedAble<[number, number]>);
+    get stencilOpZPass(): UndefinedAble<[number, number]>;
+    set stencilOpZPass(value: UndefinedAble<[number, number]>);
+    get culling(): UndefinedAble<boolean>;
+    set culling(value: UndefinedAble<boolean>);
+    get frontFace(): UndefinedAble<number>;
+    set frontFace(value: UndefinedAble<number>);
+    get cullFace(): UndefinedAble<number>;
+    set cullFace(value: UndefinedAble<number>);
+    enableKeyword(keyword: string): void;
+    disableKeyword(keyword: string): void;
+    isKeywordEnabled(keyword: string): boolean;
+    createMaterialStates(states: MaterialStates): void;
+    get isDestroyed(): boolean;
+    /**shader和texture的GPU资源初始化。 */
+    initialize(): void;
+    setupStates(pipelineContext: GLPipelineContext): void;
+    use(renderer: GLRenderer, globalUniforms?: GlobalUniforms): void;
+    getFloat(name: string): number | null;
+    setFloat(name: string, value: number): void;
+    getInt(name: string): number | null;
+    setInt(name: string, value: number): void;
+    getFloats(name: string): number[] | null;
+    setFloats(name: string, value: number[]): void;
+    getVector2(name: string): spec.vec2 | null;
+    setVector2(name: string, value: spec.vec2): void;
+    getVector3(name: string): spec.vec3 | null;
+    setVector3(name: string, value: spec.vec3): void;
+    getVector4(name: string): spec.vec4 | null;
+    setVector4(name: string, value: spec.vec4): void;
+    getMatrix(name: string): spec.mat4 | null;
+    setMatrix(name: string, value: spec.mat4): void;
+    setMatrix3(name: string, value: spec.mat3): void;
+    getVector4Array(name: string): number[];
+    setVector4Array(name: string, array: spec.vec4[]): void;
+    getMatrixArray(name: string): number[] | null;
+    setMatrixArray(name: string, array: spec.mat4[]): void;
+    setMatrixNumberArray(name: string, array: number[]): void;
+    getTexture(name: string): Texture | null;
+    setTexture(name: string, texture: Texture): void;
+    hasUniform(name: string): boolean;
+    clone(props?: MaterialProps): Material;
+    cloneUniforms(sourceMaterial: Material): void;
+    private checkUniform;
+    dispose(options?: MaterialDestroyOptions): void;
+}

package/dist/gl-pipeline-context.d.ts

@@ -0,0 +1,316 @@
+import type { Disposable, Texture } from '@galacean/effects-core';
+import { GLShaderLibrary } from './gl-shader-library';
+import type { GLEngine } from './gl-engine';
+export type Nullable<T> = T | null;
+export declare class GLPipelineContext implements Disposable {
+    engine: GLEngine;
+    gl: WebGLRenderingContext | WebGL2RenderingContext;
+    textureUnitDict: Record<string, WebGLTexture | null>;
+    shaderLibrary: GLShaderLibrary;
+    private readonly maxTextureCount;
+    private glCapabilityCache;
+    private currentFramebuffer;
+    private currentTextureBinding;
+    private currentRenderBuffer;
+    private activeTextureIndex;
+    private pixelStorei;
+    constructor(engine: GLEngine, gl: WebGLRenderingContext | WebGL2RenderingContext);
+    dispose(): void;
+    private reset;
+    toggle(capability: GLenum, enable?: boolean): void;
+    /**
+     * 对于该上下文开启某种特性
+     * @param capability
+     * example:
+     * gl.enable(gl.DITHER);
+     */
+    enable(capability: GLenum): void;
+    /**
+     * 基于某种上下文关闭特性
+     * @param capability
+     * example:
+     * gl.disable(gl.DITHER);
+     */
+    disable(capability: GLenum): void;
+    /**
+     * 绑定framebuffer webgl2新增: gl.DRAW_FRAMEBUFFER 和 gl.READ_FRAMEBUFFER
+     * @param target
+     * @param framebuffer
+     * example:
+     * const framebuffer = gl.createFramebuffer();
+     * gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+     */
+    bindFramebuffer(target: GLenum, framebuffer: WebGLFramebuffer | null): void;
+    bindRenderBuffer(target: GLenum, renderBuffer: WebGLRenderbuffer | null): void;
+    /**
+     * 绑定系统 framebuffer
+     */
+    bindSystemFramebuffer(): void;
+    /**
+     * 将定义好的 WebGLProgram 对象添加到当前的渲染状态中。
+     * @param program
+     * example:
+     * gl.useProgram(program);
+     * gl.useProgram(null);
+     */
+    useProgram(program: WebGLProgram | null): void;
+    /**
+     * 使用预设值来清空缓冲
+     * @param mask
+     * example:
+     * gl.clear(gl.DEPTH_BUFFER_BIT);
+     * gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT);
+     */
+    clear(mask: number): void;
+    /*** depth start ***/
+    /**
+     * 设置深度缓冲区的深度清除值
+     * @param depth
+     * example:
+     * gl.clearDepth(0.5);
+     */
+    clearDepth(depth: GLclampf): void;
+    /**
+     * 指定将输入像素深度与当前深度缓冲区值进行比较的函数。
+     * @param func
+     * example:
+     * gl.enable(gl.DEPTH_TEST);
+     * gl.depthFunc(gl.NEVER);
+     */
+    depthFunc(func: GLenum): void;
+    /**
+     * 设置是否启用写入深度缓冲。
+     * @param flag
+     * example:
+     * gl.depthMask(false);
+     */
+    depthMask(flag: boolean): void;
+    polygonOffset(factor: number, unit: number): void;
+    /**
+     * 将 z 值从规范化设备坐标映射到窗口坐标
+     * @param zNear
+     * @param zFar
+     * example:
+     * gl.depthRange(0.2, 0.6);
+     */
+    depthRange(zNear: number, zFar: number): void;
+    /*** depth end ***/
+    /*** stencil start ***/
+    /**
+     * 模版测试设置函数和引用值。
+     * @param func
+     * @param ref
+     * @param mask
+     * example:
+     * gl.enable(gl.STENCIL_TEST);
+     * gl.stencilFunc(gl.LESS, 0, 0b1110011);
+     */
+    clearStencil(s: GLint): void;
+    /**
+     * 控制启用和禁用模板平面中单个位的正面和背面写入
+     * @param mask
+     * example:
+     * gl.stencilMask(0xff);
+     */
+    stencilMask(mask: number): void;
+    /**
+     * 模版测试设置函数和引用值。
+     * @param func
+     * @param ref
+     * @param mask
+     * example:
+     * gl.enable(gl.STENCIL_TEST);
+     * gl.stencilFunc(gl.LESS, 0, 0b1110011);
+     */
+    stencilFunc(func: GLenum, ref: GLint, mask: GLuint): void;
+    /**
+     * 单面模版测试
+     * @param face
+     * @param func
+     * @param ref
+     * @param mask
+     * example:
+     * gl.enable(gl.STENCIL_TEST);
+     * gl.stencilFuncSeparate(gl.FRONT, gl.LESS, 0.2, 1110011);
+     */
+    stencilFuncSeparate(face: GLenum, func: GLenum, ref: GLint, mask: GLuint): void;
+    /**
+     * 单面的mask写入
+     * @param face
+     * @param mask
+     * example:
+     * gl.stencilMaskSeparate(gl.FRONT, 110101);
+     */
+    stencilMaskSeparate(face: GLenum, mask: GLuint): void;
+    /**
+     * 设置正面和背面模板测试操作
+     * @param fail
+     * @param zfail
+     * @param zpass
+     * example:
+     * gl.enable(gl.STENCIL_TEST);
+     * gl.stencilOp(gl.INCR, gl.DECR, gl.INVERT);
+     */
+    stencilOp(fail: GLenum, zfail: GLenum, zpass: GLenum): void;
+    /**
+     * 设置正面和/或背面模板测试操作
+     * @param face
+     * @param fail
+     * @param zfail
+     * @param zpass
+     * example:
+     * gl.enable(gl.STENCIL_TEST);
+     * gl.stencilOpSeparate(gl.FRONT, gl.INCR, gl.DECR, gl.INVERT);
+     */
+    stencilOpSeparate(face: GLenum, fail: GLenum, zfail: GLenum, zpass: GLenum): void;
+    /*** stencil end ***/
+    /*** face start ***/
+    /**
+     * 剔除方式
+     * @param mode
+     * example:
+     * gl.enable(gl.CULL_FACE);
+     * gl.cullFace(gl.FRONT_AND_BACK);
+     */
+    cullFace(mode: GLenum): void;
+    /**
+     * 设置卷绕方向
+     * @param mode
+     * example:
+     * gl.frontFace(gl.CW);
+     */
+    frontFace(mode: GLenum): void;
+    /*** face end ***/
+    /*** color start ***/
+    /**
+     * 设置颜色写入
+     * @param red
+     * @param green
+     * @param blue
+     * @param alpha
+     * example:
+     * gl.colorMask(true, true, true, false);
+     */
+    clearColor(red: GLclampf, green: GLclampf, blue: GLclampf, alpha: GLclampf): void;
+    /**
+     * 设置颜色写入
+     * @param red
+     * @param green
+     * @param blue
+     * @param alpha
+     * example:
+     * gl.colorMask(true, true, true, false);
+     */
+    colorMask(red: boolean, green: boolean, blue: boolean, alpha: boolean): void;
+    /**
+     * 设置源和目标混合因子
+     * @param red
+     * @param green
+     * @param blue
+     * @param alpha
+     * example:
+     * gl.blendColor(0, 0.5, 1, 1);
+     */
+    blendColor(red: GLclampf, green: GLclampf, blue: GLclampf, alpha: GLclampf): void;
+    /**
+     * 用于混合像素算法
+     * @param sfactor
+     * @param dfactor
+     * example:
+     * gl.enable(gl.BLEND);
+     * gl.blendFunc(gl.SRC_COLOR, gl.DST_COLOR);
+     */
+    blendFunc(sfactor: GLenum, dfactor: GLenum): void;
+    /**
+     * 分别设置应用在 RGB 和 Alpha 上的 factor
+     * @param srcRGB
+     * @param dstRGB
+     * @param srcAlpha
+     * @param dstAlpha
+     * example:
+     * gl.enable(gl.BLEND);
+     * gl.blendFuncSeparate(gl.SRC_COLOR, gl.DST_COLOR, gl.ONE, gl.ZERO);
+     */
+    blendFuncSeparate(srcRGB: GLenum, dstRGB: GLenum, srcAlpha: GLenum, dstAlpha: GLenum): void;
+    /**
+     * 设置混合模式
+     * @param mode
+     * example:
+     * gl.blendEquation(gl.FUNC_ADD);
+     * gl.blendEquation(gl.FUNC_SUBTRACT);
+     * gl.blendEquation(gl.FUNC_REVERSE_SUBTRACT);
+     */
+    blendEquation(mode: GLenum): void;
+    /**
+     * 可以分别对 RGB 和 Alpha 做不同的操作处理
+     * @param modeRGB
+     * @param modeAlpha
+     * example:
+     * gl.blendEquationSeparate(gl.FUNC_ADD, gl.FUNC_SUBTRACT);
+     */
+    blendEquationSeparate(modeRGB: GLenum, modeAlpha: GLenum): void;
+    /*** color end ***/
+    /**
+     * 图像预处理
+     * @param pname
+     * @param param
+     * example:
+     * var tex = gl.createTexture();
+     * gl.bindTexture(gl.TEXTURE_2D, tex);
+     * gl.pixelStorei(gl.PACK_ALIGNMENT, 4);
+     */
+    setPixelStorei(pname: GLenum, param: GLenum): void;
+    /**
+     * 用来设置视口，即指定从标准设备到窗口坐标的x、y仿射变换。
+     * @param x
+     * @param y
+     * @param width
+     * @param height
+     * example:
+     * gl.viewport(0, 0, width, height);
+     */
+    viewport(x: number, y: number, width: number, height: number): void;
+    /**
+     * 激活指定的纹理单元
+     * @param texture
+     * example:
+     * gl.activeTexture(gl.TEXTURE1);
+     */
+    activeTexture(texture: GLenum): void;
+    /**
+     * 绑定WebGLTexture
+     * @param target
+     * @param texture
+     * @param force
+     * example:
+     * const texture = gl.createTexture();
+     * gl.bindTexture(gl.TEXTURE_2D, texture)
+     */
+    bindTexture(target: GLenum, texture: WebGLTexture | null, force?: boolean): void;
+    private set1;
+    private set2;
+    private set3;
+    private set4;
+    get(name: string): any;
+    setFloat(uniform: Nullable<WebGLUniformLocation>, value: number): void;
+    setInt(uniform: Nullable<WebGLUniformLocation>, value: number): void;
+    setFloats(uniform: Nullable<WebGLUniformLocation>, value: number[]): void;
+    setVector2(uniform: Nullable<WebGLUniformLocation>, value: number[]): void;
+    setVector3(uniform: Nullable<WebGLUniformLocation>, value: number[]): void;
+    setVector4(uniform: Nullable<WebGLUniformLocation>, value: number[]): void;
+    setVector4Array(uniform: Nullable<WebGLUniformLocation>, array: number[]): void;
+    setMatrix(uniform: Nullable<WebGLUniformLocation>, value: number[]): void;
+    setMatrix3(uniform: Nullable<WebGLUniformLocation>, value: number[]): void;
+    setMatrixArray(uniform: Nullable<WebGLUniformLocation>, array: number[]): void;
+    setTexture(uniform: Nullable<WebGLUniformLocation>, channel: number, texture: Texture): void;
+    /**
+     * 查询所有uniform的location。
+     * @param program 查询的shader program
+     * @param uniformsNames 查询的uniform名称列表
+     * @returns
+     */
+    getUniforms(program: WebGLProgram, uniformsNames: string[]): Nullable<WebGLUniformLocation>[];
+    private setFloat4;
+    private setFloat3;
+    private setFloat2;
+}

package/dist/gl-program.d.ts

@@ -0,0 +1,40 @@
+import type { Disposable } from '@galacean/effects-core';
+import type { GLGeometry } from './gl-geometry';
+import { GLVertexArrayObject } from './gl-vertex-array-object';
+import type { GLEngine } from './gl-engine';
+export interface ProgramAttributeInfo {
+    readonly name: string;
+    readonly size: number;
+    readonly type: number;
+    readonly loc: number;
+}
+export interface ProgramUniformInfo {
+    readonly loc: WebGLUniformLocation;
+    readonly subInfos: ProgramUniformInfo[];
+    readonly name: string;
+    readonly size: number;
+    readonly type: number;
+    readonly textureIndex: number;
+    readonly isTexture: boolean;
+}
+export declare class GLProgram implements Disposable {
+    engine: GLEngine;
+    readonly program: WebGLProgram;
+    private readonly shared;
+    private readonly id;
+    private readonly uniformBlockMap;
+    private attribInfoMap;
+    private uniformInfoMap;
+    private pipelineContext;
+    constructor(engine: GLEngine, program: WebGLProgram, shared: boolean, id: string);
+    bind(): void;
+    /**
+     * 绑定 vao 对象并设置顶点属性
+     * 如果当前环境不支持 vao，则使用 gl 函数依次设置属性。
+     * @param geometry
+     * @returns
+     */
+    setupAttributes(geometry: GLGeometry): GLVertexArrayObject;
+    createAttribMap(): Record<string, ProgramAttributeInfo>;
+    dispose(): void;
+}

package/dist/gl-render-buffer.d.ts

@@ -0,0 +1,12 @@
+import type { RenderBufferProps } from '@galacean/effects-core';
+import { RenderBuffer } from '@galacean/effects-core';
+import type { GLRendererInternal } from './gl-renderer-internal';
+export declare class GLRenderBuffer extends RenderBuffer {
+    buffer: WebGLRenderbuffer | null;
+    private initialized;
+    private renderer?;
+    constructor(props: RenderBufferProps, renderer?: GLRendererInternal);
+    initialize(renderer: GLRendererInternal): void;
+    setSize(width: number, height: number): void;
+    dispose(): void;
+}

package/dist/gl-renderer-internal.d.ts

@@ -0,0 +1,43 @@
+import type { Disposable, LostHandler, Material, Geometry } from '@galacean/effects-core';
+import type { GLFrameBuffer } from './gl-frame-buffer';
+import type { GLGPUBuffer } from './gl-gpu-buffer';
+import type { GLPipelineContext } from './gl-pipeline-context';
+import type { GLRenderBuffer } from './gl-render-buffer';
+import { GLTexture } from './gl-texture';
+import { GLVertexArrayObject } from './gl-vertex-array-object';
+import type { GLEngine } from './gl-engine';
+export declare class GLRendererInternal implements Disposable, LostHandler {
+    engine: GLEngine;
+    emptyTexture2D: GLTexture;
+    emptyTextureCube: GLTexture;
+    pipelineContext: GLPipelineContext;
+    gl: WebGLRenderingContext | WebGL2RenderingContext;
+    readonly name: string;
+    readonly textures: GLTexture[];
+    private readonly renderBuffers;
+    private readonly frameBuffers;
+    private sourceFbo;
+    private targetFbo;
+    private destroyed;
+    constructor(engine: GLEngine);
+    get height(): number;
+    get width(): number;
+    get canvas(): HTMLCanvasElement | OffscreenCanvas;
+    get isDestroyed(): boolean;
+    copy2(source: GLTexture, target: GLTexture): void;
+    resetColorAttachments(rp: GLFrameBuffer, colors: GLTexture[]): void;
+    createGLRenderBuffer(renderbuffer: GLRenderBuffer): WebGLRenderbuffer | null;
+    resize(width: number, height: number): void;
+    drawGeometry(geometry: Geometry, material: Material): void;
+    createGLFrameBuffer(frameBuffer: GLFrameBuffer, name?: string): WebGLFramebuffer | null;
+    /**创建包裹VAO对象。 */
+    createVAO(name: string): GLVertexArrayObject | undefined;
+    deleteGLTexture(texture: GLTexture): void;
+    deleteGPUBuffer(buffer: GLGPUBuffer | null): void;
+    deleteGLFrameBuffer(frameBuffer: GLFrameBuffer): void;
+    deleteGLRenderBuffer(renderbuffer: GLRenderBuffer): void;
+    private deleteResource;
+    lost(e: Event): void;
+    dispose(haltGL?: boolean): void;
+}
+export declare function assignInspectorName(obj: Record<string, any>, name?: string, id?: string): void;

package/dist/gl-renderer.d.ts

@@ -0,0 +1,41 @@
+import type { Disposable, FrameBuffer, Geometry, LostHandler, Material, Mesh, RenderFrame, RenderPass, RenderPassClearAction, RenderPassStoreAction, RestoreHandler, ShaderLibrary, mat4 } from '@galacean/effects-core';
+import { Renderer, FilterMode, RenderTextureFormat } from '@galacean/effects-core';
+import { ExtWrap } from './ext-wrap';
+import { GLContextManager } from './gl-context-manager';
+import { GLPipelineContext } from './gl-pipeline-context';
+import { GLRendererInternal } from './gl-renderer-internal';
+export declare class GLRenderer extends Renderer implements Disposable {
+    readonly canvas: HTMLCanvasElement | OffscreenCanvas;
+    glRenderer: GLRendererInternal;
+    extension: ExtWrap;
+    frameBuffer: FrameBuffer;
+    temporaryRTs: Record<string, FrameBuffer>;
+    pipelineContext: GLPipelineContext;
+    readonly context: GLContextManager;
+    constructor(canvas: HTMLCanvasElement | OffscreenCanvas, framework: 'webgl' | 'webgl2', renderOptions?: WebGLContextAttributes);
+    get isDestroyed(): boolean;
+    get height(): number;
+    get width(): number;
+    renderRenderFrame(renderFrame: RenderFrame): void;
+    renderRenderPass(pass: RenderPass): void;
+    renderMeshes(meshes: Mesh[]): void;
+    setGlobalFloat(name: string, value: number): void;
+    setGlobalInt(name: string, value: number): void;
+    setGlobalMatrix(name: string, value: mat4): void;
+    drawGeometry(geometry: Geometry, material: Material): void;
+    setFrameBuffer(frameBuffer: FrameBuffer | null): void;
+    getFrameBuffer(): FrameBuffer | null;
+    getTemporaryRT(name: string, width: number, height: number, depthBuffer: number, filter: FilterMode, format: RenderTextureFormat): FrameBuffer | null;
+    setViewport(x: number, y: number, width: number, height: number): void;
+    clear(action: RenderPassStoreAction | RenderPassClearAction): void;
+    addLostHandler(lostHandler: LostHandler): void;
+    addRestoreHandler(restoreHandler: RestoreHandler): void;
+    getShaderLibrary(): ShaderLibrary | undefined;
+    getWidth(): number;
+    getHeight(): number;
+    dispose(haltGL?: boolean): void;
+    lost(e: Event): void;
+    restore(): void;
+    resize(width: number, height: number): void;
+    private checkGlobalUniform;
+}

package/dist/gl-shader-library.d.ts

@@ -0,0 +1,26 @@
+import type { Disposable, RestoreHandler, ShaderCompileResult, ShaderLibrary, ShaderWithSource } from '@galacean/effects-core';
+import { GLShader } from './gl-shader';
+import type { GLPipelineContext } from './gl-pipeline-context';
+import type { GLEngine } from './gl-engine';
+export declare class GLShaderLibrary implements ShaderLibrary, Disposable, RestoreHandler {
+    engine: GLEngine;
+    pipelineContext: GLPipelineContext;
+    readonly shaderResults: Record<string, ShaderCompileResult>;
+    private readonly glAsyncCompileExt;
+    private programMap;
+    private glVertShaderMap;
+    private glFragShaderMap;
+    private shaderAllDone;
+    private cachedShaders;
+    constructor(engine: GLEngine, pipelineContext: GLPipelineContext);
+    compileAllShaders(asyncCallback?: (results: ShaderCompileResult[]) => void): void;
+    addShader(shaderSource: ShaderWithSource): string;
+    createShader(shaderSource: ShaderWithSource): GLShader;
+    compileShader(shader: GLShader, asyncCallback?: (result: ShaderCompileResult) => void): void;
+    private computeShaderCacheId;
+    private createProgram;
+    private createGLShader;
+    deleteShader(cacheId: string): void;
+    restore(): void;
+    dispose(): void;
+}

package/dist/gl-shader.d.ts

@@ -0,0 +1,28 @@
+import type { ShaderCompileResult, ShaderWithSource, Texture, Engine } from '@galacean/effects-core';
+import { Shader } from '@galacean/effects-core';
+import type { GLProgram } from './gl-program';
+import type { GLPipelineContext } from './gl-pipeline-context';
+export declare class GLShader extends Shader {
+    pipelineContext: GLPipelineContext;
+    program: GLProgram;
+    compileResult: ShaderCompileResult;
+    id: string;
+    initialized: boolean;
+    uniformLocations: Record<string, WebGLUniformLocation | null>;
+    private samplerChannels;
+    constructor(source: ShaderWithSource);
+    initialize(engine: Engine): void;
+    setFloat(name: string, value: number): void;
+    setInt(name: string, value: number): void;
+    setFloats(name: string, value: number[]): void;
+    setTexture(name: string, texture: Texture): void;
+    setVector2(name: string, value: number[]): void;
+    setVector3(name: string, value: number[]): void;
+    setVector4(name: string, value: number[]): void;
+    setMatrix(name: string, value: number[]): void;
+    setMatrix3(name: string, value: number[]): void;
+    setVector4Array(name: string, array: number[]): void;
+    setMatrixArray(name: string, array: number[]): void;
+    fillShaderInformation(uniformNames: string[], samplers: string[]): void;
+    dispose(): void;
+}

package/dist/gl-texture.d.ts

@@ -0,0 +1,26 @@
+import type { Disposable, RestoreHandler, TextureConfigOptions, TextureSourceOptions, Engine } from '@galacean/effects-core';
+import { Texture } from '@galacean/effects-core';
+export declare class GLTexture extends Texture implements Disposable, RestoreHandler {
+    textureBuffer: WebGLTexture | null;
+    target: GLenum;
+    private pipelineContext;
+    private initialized;
+    constructor(engine: Engine, source: TextureSourceOptions);
+    /** 绑定当前Texture对象。*/
+    bind(force?: boolean): void;
+    /** 初始化Texture的GPU资源。*/
+    initialize(): void;
+    clone(): GLTexture;
+    release(): void;
+    update(sourceOptions: TextureSourceOptions): void;
+    setTextureFilters(gl: WebGLRenderingContext | WebGL2RenderingContext, target: GLenum, options: TextureConfigOptions): void;
+    private texImage2D;
+    private texImage2DData;
+    private resizeImage;
+    reloadData(): Promise<void>;
+    offloadData(): void;
+    uploadCurrentVideoFrame(): Promise<boolean>;
+    updateSource(opts: TextureSourceOptions): void;
+    restore(): void;
+    dispose(): void;
+}

package/dist/gl-uniform-utils.d.ts

@@ -0,0 +1,45 @@
+import type { Disposable, UniformValue, spec } from '@galacean/effects-core';
+import { GLGPUBuffer } from './gl-gpu-buffer';
+import type { GLPipelineContext } from './gl-pipeline-context';
+type BlockUniformInfo = [
+    type: number,
+    offset: number,
+    size: number,
+    blockIndex: number,
+    arrayStride: number,
+    maxStride: number,
+    rowMajor: number,
+    index: number,
+    byteLength: number
+];
+export interface UniformBlockSpec {
+    index: number;
+    usedByVertexShader: boolean;
+    usedByFragmentShader: boolean;
+    size: number;
+    uniformIndices: number[];
+    used: boolean;
+    name: string;
+    uniforms: Record<string, BlockUniformInfo>;
+    id: string;
+}
+interface UBODirtyFlag {
+    start: number;
+    dirty: boolean;
+    buffer?: spec.TypedArray;
+}
+export declare class UniformBlockBuffer implements Disposable {
+    private readonly info;
+    buffer?: GLGPUBuffer;
+    dirtyFlags: Record<string, UBODirtyFlag>;
+    keepData: boolean;
+    constructor(pipelineContext: GLPipelineContext, info: UniformBlockSpec);
+    setValues(uniformValues: Record<string, UniformValue>, dirtyFlags: Record<string, boolean>, uniformValueOffsets: Record<string, spec.vec2>): void;
+    bind(gl: WebGL2RenderingContext, program: WebGLProgram, bufferBindIndex: number): void;
+    dispose(): void;
+}
+export declare function createUniformBlockDataFromProgram(gl: WebGL2RenderingContext, program: WebGLProgram): {
+    blockSpecs: UniformBlockSpec[];
+    blockUniformNames: string[];
+};
+export {};

package/dist/gl-vertex-array-object.d.ts

@@ -0,0 +1,20 @@
+import type { Disposable } from '@galacean/effects-core';
+import type { GLEngine } from './gl-engine';
+export declare class GLVertexArrayObject implements Disposable {
+    private engine;
+    ready: boolean;
+    disposed: boolean;
+    readonly vao: WebGLVertexArrayObject | null;
+    private vaoExt;
+    private gl;
+    constructor(engine: GLEngine, name?: string);
+    bind(): void;
+    unbind(): void;
+    private createVertexArray;
+    /**
+     * 根据 gpu level 选择对应的绑定函数
+     * @param vao
+     */
+    private bindVertexArray;
+    dispose(): void;
+}

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+export * from './gl-geometry';
+export * from './gl-renderer';
+export * from './gl-material';
+export * from './gl-renderer-internal';
+export * from './gl-render-buffer';
+export * from './gl-texture';
+export * from './gl-frame-buffer';
+export * from './gl-gpu-buffer';
+export * from './gl-vertex-array-object';
+export * from './gl-pipeline-context';
+export * from './gl-shader-library';
+export * from './gl-engine';

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@galacean/effects-webgl",
+  "version": "0.0.1-alpha.0",
+  "description": "Galacean Effects runtime webgl for the web",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "contributors": [
+    {
+      "name": "燃然"
+    },
+    {
+      "name": "飂兮"
+    },
+    {
+      "name": "十弦"
+    },
+    {
+      "name": "云垣"
+    },
+    {
+      "name": "茂安"
+    },
+    {
+      "name": "意绮"
+    }
+  ],
+  "author": "Ant Group CO., Ltd.",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "dependencies": {
+    "@galacean/effects-core": "0.0.1-alpha.0"
+  },
+  "scripts": {
+    "prebuild": "pnpm clean",
+    "build": "pnpm build:declaration",
+    "build:declaration": "tsc -d --declarationDir dist --emitDeclarationOnly",
+    "clean": "rimraf dist && rimraf '*+(.tsbuildinfo)'"
+  }
+}