see https import { gl , GLSLContext , IAttribute , IAttributeInitializationOptions , IBuffer , IBufferInitializationOptions , IClearOptions , IComputeModel , IElements , IElementsInitializationOptions , IFramebuffer , IFramebufferInitializationOptions , IModel , IModelInitializationOptions , IReadPixelsOptions , IRendererConfig , IRendererService , ITexture2D , ITexture2DInitializationOptions , } from '@antv/g-webgpu-core' ; import { injectable } from 'inversify' ; import regl from 'regl' ; import ReglAttribute from './ReglAttribute' ; import ReglBuffer from './ReglBuffer' ; import ReglComputeModel from './ReglComputeModel' ; import ReglElements from './ReglElements' ; import ReglFramebuffer from './ReglFramebuffer' ; import ReglModel from './ReglModel' ; import ReglTexture2D from './ReglTexture2D' ; /**
 * regl renderer
 */ @ injectable ( ) export class WebGLEngine implements IRendererService { public supportWebGPU = false ; public useWGSL = false ; private $canvas : HTMLCanvasElement ; private gl : regl . Regl ; private inited : boolean ; public async init ( cfg ) { if ( this . inited ) { return ; } this . $canvas = cfg . canvas ; this . gl = await new Promise ( ( resolve , reject ) => { regl ( { canvas : cfg . canvas , attributes : { alpha : true , antialias : cfg . antialias , premultipliedAlpha : true , } , pixelRatio : 1 , extensions : [ 'OES_element_index_uint' , 'OES_texture_float' , 'OES_standard_derivatives' , 'angle_instanced_arrays' , ] , optionalExtensions : [ 'EXT_texture_filter_anisotropic' , 'EXT_blend_minmax' , 'WEBGL_depth_texture' , ] , profile : true , onDone : ( err , r ? ) : void => { if ( err || ! r ) { reject ( err ) ; } resolve ( r ) ; } , } ) ; } ) ; this . inited = true ; } public isFloatSupported ( ) { return this . gl . limits . readFloat ; } public createModel = async ( options ) : Promise < IModel > => { if ( options . uniforms ) { await Promise . all ( Object . keys ( options . uniforms ) . map ( async ( name ) => { if ( options . uniforms ! [ name ] && options . uniforms ! [ name ] . load !== undefined ) { const texture = await options . uniforms ! [ name ] . load ( ) ; options . uniforms [ name ] = texture ; } } ) ) ; } return new ReglModel ( this . gl , options ) ; } ; public createAttribute = ( options ) : IAttribute => new ReglAttribute ( this . gl , options ) ; public createBuffer = ( options ) : IBuffer => new ReglBuffer ( this . gl , options ) ; public createElements = ( options ) : IElements => new ReglElements ( this . gl , options ) ; public createTexture2D = ( options ) : ITexture2D => new ReglTexture2D ( this . gl , options ) ; public createFramebuffer = ( options ) => new ReglFramebuffer ( this . gl , options ) ; public useFramebuffer = ( framebuffer , drawCommands ) => { this . gl ( { framebuffer : framebuffer ? ( framebuffer as ReglFramebuffer ) . get ( ) : null , } ) ( drawCommands ) ; } ; public createComputeModel = async ( context ) : Promise < IComputeModel > => { return new ReglComputeModel ( this . gl , context ) ; } ; public clear = ( options ) => { const { color , depth , stencil , framebuffer = null } = options ; const reglClearOptions = { color , depth , stencil , } ; reglClearOptions . framebuffer = framebuffer === null ? framebuffer : ( framebuffer as ReglFramebuffer ) . get ( ) ; this . gl . clear ( reglClearOptions ) ; } ; public setScissor = ( scissor ) => { if ( this . gl && this . gl . _gl ) { if ( scissor . enable && scissor . box ) { this . gl . _gl . enable ( gl . SCISSOR_TEST ) ; this . gl . _gl . scissor ( scissor . box . x , scissor . box . y , scissor . box . width , scissor . box . height ) ; } else { this . gl . _gl . disable ( gl . SCISSOR_TEST ) ; } this . gl . _refresh ( ) ; } } ; public viewport = ( { x , y , width , height , } ) => { if ( this . gl && this . gl . _gl ) { this . gl . _gl . viewport ( x , y , width , height ) ; this . gl . _refresh ( ) ; } } ; public readPixels = ( options ) => { const { framebuffer , x , y , width , height } = options ; const readPixelsOptions = { x , y , width , height , } ; if ( framebuffer ) { readPixelsOptions . framebuffer = ( framebuffer as ReglFramebuffer ) . get ( ) ; } return this . gl . read ( readPixelsOptions ) ; } ; public getCanvas = ( ) => { return this . $canvas ; } ; public getGLContext = ( ) => { return this . gl . _gl ; } ; public destroy = ( ) => { if ( this . gl ) { this . gl . destroy ( ) ; this . inited = false ; } } ; public beginFrame ( ) { } public endFrame ( ) { } }