@antv/l7-renderer 2.20.5 → 2.20.6

package/es/device/DeviceAttribute.d.ts

@@ -1,5 +1,5 @@
-import { Device } from '@antv/g-device-api';
-import { IAttribute, IAttributeInitializationOptions, IBuffer } from '@antv/l7-core';
+import type { Device } from '@antv/g-device-api';
+import type { IAttribute, IAttributeInitializationOptions, IBuffer } from '@antv/l7-core';
 export default class DeviceAttribute implements IAttribute {
     private attribute;
     private buffer;

package/es/device/DeviceBuffer.d.ts

@@ -1,5 +1,5 @@
-import { Buffer, Device } from '@antv/g-device-api';
-import { IBuffer, IBufferInitializationOptions } from '@antv/l7-core';
+import type { Buffer, Device } from '@antv/g-device-api';
+import type { IBuffer, IBufferInitializationOptions } from '@antv/l7-core';
 /**
  * Use Buffer from @antv/g-device-api
  */

package/es/device/DeviceBuffer.js

@@ -16,7 +16,8 @@ var DeviceBuffer = /*#__PURE__*/function () {
     var data = options.data,
       usage = options.usage,
       type = options.type,
-      isUBO = options.isUBO;
+      isUBO = options.isUBO,
+      label = options.label;
     var typed;
     if (isTypedArray(data)) {
       typed = data;
@@ -32,6 +33,9 @@ var DeviceBuffer = /*#__PURE__*/function () {
       usage: isUBO ? BufferUsage.UNIFORM : BufferUsage.VERTEX,
       hint: hintMap[usage || gl.STATIC_DRAW]
     });
+    if (label) {
+      device.setResourceName(this.buffer, label);
+    }
   }
   _createClass(DeviceBuffer, [{
     key: "get",

package/es/device/DeviceElements.d.ts

@@ -1,5 +1,5 @@
-import { Buffer, Device } from '@antv/g-device-api';
-import { IElements, IElementsInitializationOptions } from '@antv/l7-core';
+import type { Buffer, Device } from '@antv/g-device-api';
+import type { IElements, IElementsInitializationOptions } from '@antv/l7-core';
 export default class DeviceElements implements IElements {
     private indexBuffer;
     private type;

package/es/device/DeviceFramebuffer.d.ts

@@ -1,11 +1,20 @@
-import { Device, RenderTarget } from '@antv/g-device-api';
-import { IFramebuffer, IFramebufferInitializationOptions } from '@antv/l7-core';
+import type { Device, RenderTarget, Texture } from '@antv/g-device-api';
+import type { IFramebuffer, IFramebufferInitializationOptions } from '@antv/l7-core';
+/**
+ * Contains 2 render targets: color and depth.
+ */
 export default class DeviceFramebuffer implements IFramebuffer {
     private device;
-    private renderTarget;
+    private options;
+    private colorRenderTarget;
+    colorTexture: Texture;
+    private depthRenderTarget;
+    private depthTexture;
     private width;
     private height;
     constructor(device: Device, options: IFramebufferInitializationOptions);
+    private createColorRenderTarget;
+    private createDepthRenderTarget;
     get(): RenderTarget;
     destroy(): void;
     resize({ width, height }: {

package/es/device/DeviceFramebuffer.js

@@ -1,38 +1,83 @@
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
-import { Format } from '@antv/g-device-api';
+import { Format, TextureUsage } from '@antv/g-device-api';
 import { isTexture2D } from "./DeviceTexture2D";
+
+/**
+ * Contains 2 render targets: color and depth.
+ */
 var DeviceFramebuffer = /*#__PURE__*/function () {
   function DeviceFramebuffer(device, options) {
     _classCallCheck(this, DeviceFramebuffer);
     this.device = device;
-    // TODO: depth
-    var width = options.width,
-      height = options.height,
-      color = options.color;
-    if (isTexture2D(color)) {
-      this.renderTarget = device.createRenderTargetFromTexture(color.get());
-      this.width = color['width'];
-      this.height = color['height'];
-    } else if (width && height) {
-      this.renderTarget = device.createRenderTarget({
-        format: Format.U8_RGBA_RT,
-        width: width,
-        height: height
-      });
-      this.width = width;
-      this.height = height;
-    }
+    this.options = options;
+    this.createColorRenderTarget();
+    this.createDepthRenderTarget();
   }
   _createClass(DeviceFramebuffer, [{
+    key: "createColorRenderTarget",
+    value: function createColorRenderTarget() {
+      var _this$options = this.options,
+        width = _this$options.width,
+        height = _this$options.height,
+        color = _this$options.color;
+      if (color) {
+        if (isTexture2D(color)) {
+          this.colorTexture = color.get();
+          this.colorRenderTarget = this.device.createRenderTargetFromTexture(this.colorTexture);
+          this.width = color['width'];
+          this.height = color['height'];
+        } else if (width && height) {
+          this.colorTexture = this.device.createTexture({
+            format: Format.U8_RGBA_RT,
+            usage: TextureUsage.RENDER_TARGET,
+            width: width,
+            height: height
+          });
+          this.colorRenderTarget = this.device.createRenderTargetFromTexture(this.colorTexture);
+          this.width = width;
+          this.height = height;
+        }
+      }
+    }
+  }, {
+    key: "createDepthRenderTarget",
+    value: function createDepthRenderTarget() {
+      var _this$options2 = this.options,
+        width = _this$options2.width,
+        height = _this$options2.height,
+        depth = _this$options2.depth;
+      // TODO: avoid creating depth texture if not needed
+      if (depth) {
+        if (isTexture2D(depth)) {
+          this.depthTexture = depth.get();
+          this.depthRenderTarget = this.device.createRenderTargetFromTexture(this.depthTexture);
+          this.width = depth['width'];
+          this.height = depth['height'];
+        } else if (width && height) {
+          this.depthTexture = this.device.createTexture({
+            format: Format.D24_S8,
+            usage: TextureUsage.RENDER_TARGET,
+            width: width,
+            height: height
+          });
+          this.depthRenderTarget = this.device.createRenderTargetFromTexture(this.depthTexture);
+          this.width = width;
+          this.height = height;
+        }
+      }
+    }
+  }, {
     key: "get",
     value: function get() {
-      return this.renderTarget;
+      return this.colorRenderTarget;
     }
   }, {
     key: "destroy",
     value: function destroy() {
-      this.renderTarget.destroy();
+      var _this$colorRenderTarg, _this$depthRenderTarg;
+      (_this$colorRenderTarg = this.colorRenderTarget) === null || _this$colorRenderTarg === void 0 || _this$colorRenderTarg.destroy();
+      (_this$depthRenderTarg = this.depthRenderTarget) === null || _this$depthRenderTarg === void 0 || _this$depthRenderTarg.destroy();
     }
   }, {
     key: "resize",
@@ -40,16 +85,11 @@ var DeviceFramebuffer = /*#__PURE__*/function () {
       var width = _ref.width,
         height = _ref.height;
       if (this.width !== width || this.height !== height) {
-        if (this.renderTarget) {
-          this.renderTarget.destroy();
-        }
-        this.renderTarget = this.device.createRenderTarget({
-          format: Format.U8_RGBA_RT,
-          width: width,
-          height: height
-        });
-        this.width = width;
-        this.height = height;
+        this.destroy();
+        this.options.width = width;
+        this.options.height = height;
+        this.createColorRenderTarget();
+        this.createDepthRenderTarget();
       }
     }
   }]);

package/es/device/DeviceModel.d.ts

@@ -1,8 +1,10 @@
-import { Device } from '@antv/g-device-api';
-import { IModel, IModelDrawOptions, IModelInitializationOptions, IUniform } from '@antv/l7-core';
+import type { Device } from '@antv/g-device-api';
+import type { IModel, IModelDrawOptions, IModelInitializationOptions, IUniform } from '@antv/l7-core';
+import type DeviceRendererService from '.';
 export default class DeviceModel implements IModel {
     private device;
     private options;
+    private service;
     private destroyed;
     private uniforms;
     private program;
@@ -11,14 +13,25 @@ export default class DeviceModel implements IModel {
     private indexBuffer;
     private vertexBuffers;
     private bindings;
-    constructor(device: Device, options: IModelInitializationOptions);
+    constructor(device: Device, options: IModelInitializationOptions, service: DeviceRendererService);
     private createPipeline;
     updateAttributesAndElements(): void;
+    /**
+     * No need to implement this method, you should update data on `Attribute` like this:
+     *
+     * @example
+     * ```ts
+     * attribute.updateBuffer({
+     *   data: [],
+     *   offset: 0,
+     * });
+     * ```
+     */
     updateAttributes(): void;
     addUniforms(uniforms: {
         [key: string]: IUniform;
     }): void;
-    draw(options: IModelDrawOptions): void;
+    draw(options: IModelDrawOptions, pick?: boolean): void;
     destroy(): void;
     private initDepthDrawParams;
     private getBlendDrawParams;

package/es/device/DeviceModel.js

@@ -5,11 +5,13 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { BlendFactor, BlendMode, ChannelWriteMask, CompareFunction, CullMode, Format, TransparentBlack, VertexStepMode } from '@antv/g-device-api';
 import { gl } from '@antv/l7-core';
 import { lodashUtil } from '@antv/l7-utils';
+import DeviceFramebuffer from "./DeviceFramebuffer";
+import DeviceTexture2D from "./DeviceTexture2D";
 import { blendEquationMap, blendFuncMap, cullFaceMap, depthFuncMap, primitiveMap, sizeFormatMap } from "./constants";
 var isPlainObject = lodashUtil.isPlainObject,
   isTypedArray = lodashUtil.isTypedArray;
 var DeviceModel = /*#__PURE__*/function () {
-  function DeviceModel(device, options) {
+  function DeviceModel(device, options, service) {
     var _this = this;
     _classCallCheck(this, DeviceModel);
     _defineProperty(this, "destroyed", false);
@@ -17,6 +19,7 @@ var DeviceModel = /*#__PURE__*/function () {
     _defineProperty(this, "vertexBuffers", []);
     this.device = device;
     this.options = options;
+    this.service = service;
     var vs = options.vs,
       fs = options.fs,
       attributes = options.attributes,
@@ -85,7 +88,7 @@ var DeviceModel = /*#__PURE__*/function () {
   }
   _createClass(DeviceModel, [{
     key: "createPipeline",
-    value: function createPipeline(options) {
+    value: function createPipeline(options, pick) {
       var _options$primitive = options.primitive,
         primitive = _options$primitive === void 0 ? gl.TRIANGLES : _options$primitive,
         depth = options.depth,
@@ -99,6 +102,7 @@ var DeviceModel = /*#__PURE__*/function () {
         cull: cull
       });
       var cullEnabled = !!(cullParams && cullParams.enable);
+      // Disable blend when picking.
       var blendParams = this.getBlendDrawParams({
         blend: blend
       });
@@ -110,7 +114,19 @@ var DeviceModel = /*#__PURE__*/function () {
         colorAttachmentFormats: [Format.U8_RGBA_RT],
         depthStencilAttachmentFormat: Format.D24_S8,
         megaStateDescriptor: {
-          attachmentsState: [{
+          attachmentsState: [pick ? {
+            channelWriteMask: ChannelWriteMask.ALL,
+            rgbBlendState: {
+              blendMode: BlendMode.ADD,
+              blendSrcFactor: BlendFactor.ONE,
+              blendDstFactor: BlendFactor.ZERO
+            },
+            alphaBlendState: {
+              blendMode: BlendMode.ADD,
+              blendSrcFactor: BlendFactor.ONE,
+              blendDstFactor: BlendFactor.ZERO
+            }
+          } : {
             channelWriteMask: ChannelWriteMask.ALL,
             rgbBlendState: {
               blendMode: blendEnabled && blendParams.equation.rgb || BlendMode.ADD,
@@ -120,10 +136,10 @@ var DeviceModel = /*#__PURE__*/function () {
             alphaBlendState: {
               blendMode: blendEnabled && blendParams.equation.alpha || BlendMode.ADD,
               blendSrcFactor: blendEnabled && blendParams.func.srcAlpha || BlendFactor.ONE,
-              blendDstFactor: blendEnabled && blendParams.func.dstAlpha || BlendFactor.ONE_MINUS_SRC_ALPHA
+              blendDstFactor: blendEnabled && blendParams.func.dstAlpha || BlendFactor.ONE
             }
           }],
-          blendConstant: TransparentBlack,
+          blendConstant: blendEnabled ? TransparentBlack : undefined,
           depthWrite: depthEnabled,
           depthCompare: depthEnabled && depthParams.func || CompareFunction.LESS,
           cullMode: cullEnabled && cullParams.face || CullMode.NONE,
@@ -133,20 +149,22 @@ var DeviceModel = /*#__PURE__*/function () {
     }
   }, {
     key: "updateAttributesAndElements",
-    value: function updateAttributesAndElements()
-    // elements: IElements, // attributes: { [key: string]: IAttribute },
-    {
-      // TODO: implement
-    }
+    value: function updateAttributesAndElements() {}
+
+    /**
+     * No need to implement this method, you should update data on `Attribute` like this:
+     *
+     * @example
+     * ```ts
+     * attribute.updateBuffer({
+     *   data: [],
+     *   offset: 0,
+     * });
+     * ```
+     */
   }, {
     key: "updateAttributes",
-    value: function updateAttributes() {// attributes: { [key: string]: IAttribute }
-      // TODO: implement
-      // Object.keys(attributes).forEach((name: string) => {
-      //   const attribute = attributes[name] as DeviceAttribute;
-      //   attribute.updateBuffer();
-      // });
-    }
+    value: function updateAttributes() {}
   }, {
     key: "addUniforms",
     value: function addUniforms(uniforms) {
@@ -154,11 +172,13 @@ var DeviceModel = /*#__PURE__*/function () {
     }
   }, {
     key: "draw",
-    value: function draw(options
-    //  pick?: boolean
-    ) {
+    value: function draw(options, pick) {
+      var _this2 = this;
       var mergedOptions = _objectSpread(_objectSpread({}, this.options), options);
-      var _mergedOptions$count = mergedOptions.count,
+      var _mergedOptions$depth = mergedOptions.depth,
+        _mergedOptions$depth2 = _mergedOptions$depth === void 0 ? {} : _mergedOptions$depth,
+        depthEnabled = _mergedOptions$depth2.enable,
+        _mergedOptions$count = mergedOptions.count,
         count = _mergedOptions$count === void 0 ? 0 : _mergedOptions$count,
         instances = mergedOptions.instances,
         elements = mergedOptions.elements,
@@ -167,20 +187,15 @@ var DeviceModel = /*#__PURE__*/function () {
         uniformBuffers = mergedOptions.uniformBuffers,
         textures = mergedOptions.textures;
       this.uniforms = _objectSpread(_objectSpread({}, this.uniforms), this.extractUniforms(uniforms));
+      var _this$service = this.service,
+        renderPass = _this$service.renderPass,
+        currentFramebuffer = _this$service.currentFramebuffer,
+        width = _this$service.width,
+        height = _this$service.height;
 
-      // @ts-ignore
-      var _this$device = this.device,
-        width = _this$device.width,
-        height = _this$device.height;
-
-      // @ts-ignore
-      // const renderTarget = this.device.currentFramebuffer;
-      // const { onscreen } = renderTarget
-
-      // @ts-ignore
-      var renderPass = this.device.renderPass;
       // TODO: Recreate pipeline only when blend / cull changed.
-      this.pipeline = this.createPipeline(mergedOptions);
+      this.pipeline = this.createPipeline(mergedOptions, pick);
+      renderPass.setViewport(0, 0, (currentFramebuffer === null || currentFramebuffer === void 0 ? void 0 : currentFramebuffer['width']) || width, (currentFramebuffer === null || currentFramebuffer === void 0 ? void 0 : currentFramebuffer['height']) || height);
       renderPass.setPipeline(this.pipeline);
       renderPass.setVertexInput(this.inputLayout, this.vertexBuffers.map(function (buffer) {
         return {
@@ -188,9 +203,8 @@ var DeviceModel = /*#__PURE__*/function () {
         };
       }), elements ? {
         buffer: this.indexBuffer,
-        offset: 0 // TODO: use defaule value
+        offset: 0
       } : null);
-      renderPass.setViewport(0, 0, width, height);
       if (uniformBuffers) {
         this.bindings = this.device.createBindings({
           pipeline: this.pipeline,
@@ -213,6 +227,16 @@ var DeviceModel = /*#__PURE__*/function () {
       if (this.bindings) {
         renderPass.setBindings(this.bindings);
         // Compatible to WebGL1.
+        Object.keys(this.uniforms).forEach(function (uniformName) {
+          var uniform = _this2.uniforms[uniformName];
+          if (uniform instanceof DeviceTexture2D) {
+            // @ts-ignore
+            _this2.uniforms[uniformName] = uniform.get();
+          } else if (uniform instanceof DeviceFramebuffer) {
+            // @ts-ignore
+            _this2.uniforms[uniformName] = uniform.get()['texture'];
+          }
+        });
         this.program.setUniformsLegacy(this.uniforms);
       }
       if (elements) {
@@ -363,17 +387,17 @@ var DeviceModel = /*#__PURE__*/function () {
   }, {
     key: "extractUniforms",
     value: function extractUniforms(uniforms) {
-      var _this2 = this;
+      var _this3 = this;
       var extractedUniforms = {};
       Object.keys(uniforms).forEach(function (uniformName) {
-        _this2.extractUniformsRecursively(uniformName, uniforms[uniformName], extractedUniforms, '');
+        _this3.extractUniformsRecursively(uniformName, uniforms[uniformName], extractedUniforms, '');
       });
       return extractedUniforms;
     }
   }, {
     key: "extractUniformsRecursively",
     value: function extractUniformsRecursively(uniformName, uniformValue, uniforms, prefix) {
-      var _this3 = this;
+      var _this4 = this;
       if (uniformValue === null || typeof uniformValue === 'number' ||
       // u_A: 1
       typeof uniformValue === 'boolean' ||
@@ -391,7 +415,7 @@ var DeviceModel = /*#__PURE__*/function () {
       // u_Struct.a.b.c
       if (isPlainObject(uniformValue)) {
         Object.keys(uniformValue).forEach(function (childName) {
-          _this3.extractUniformsRecursively(childName,
+          _this4.extractUniformsRecursively(childName,
           // @ts-ignore
           uniformValue[childName], uniforms, "".concat(prefix && prefix + '.').concat(uniformName));
         });
@@ -401,7 +425,7 @@ var DeviceModel = /*#__PURE__*/function () {
       if (Array.isArray(uniformValue)) {
         uniformValue.forEach(function (child, idx) {
           Object.keys(child).forEach(function (childName) {
-            _this3.extractUniformsRecursively(childName,
+            _this4.extractUniformsRecursively(childName,
             // @ts-ignore
             child[childName], uniforms, "".concat(prefix && prefix + '.').concat(uniformName, "[").concat(idx, "]"));
           });

package/es/device/DeviceTexture2D.d.ts

@@ -1,5 +1,5 @@
-import { Device, Texture } from '@antv/g-device-api';
-import { ITexture2D, ITexture2DInitializationOptions } from '@antv/l7-core';
+import type { Device, Texture } from '@antv/g-device-api';
+import type { ITexture2D, ITexture2DInitializationOptions } from '@antv/l7-core';
 export declare function isTexture2D(t: any): t is ITexture2D;
 export default class DeviceTexture2D implements ITexture2D {
     private texture;

package/es/device/DeviceTexture2D.js

@@ -1,11 +1,11 @@
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { FilterMode, Format, MipmapFilterMode, TextureUsage } from '@antv/g-device-api';
-import { gl } from '@antv/l7-core';
+import { TextureUsage as DeviceTextureUsage, FilterMode, Format, MipmapFilterMode } from '@antv/g-device-api';
+import { TextureUsage, gl } from '@antv/l7-core';
 import { wrapModeMap } from "./constants";
 export function isTexture2D(t) {
-  return false;
+  return !!(t && t['texture']);
 }
 var DeviceTexture2D = /*#__PURE__*/function () {
   function DeviceTexture2D(device, options) {
@@ -24,36 +24,40 @@ var DeviceTexture2D = /*#__PURE__*/function () {
       wrapS = _options$wrapS === void 0 ? gl.CLAMP_TO_EDGE : _options$wrapS,
       _options$wrapT = options.wrapT,
       wrapT = _options$wrapT === void 0 ? gl.CLAMP_TO_EDGE : _options$wrapT,
+      _options$aniso = options.aniso,
+      aniso = _options$aniso === void 0 ? 0 : _options$aniso,
       _options$alignment = options.alignment,
-      alignment = _options$alignment === void 0 ? 1 : _options$alignment;
+      alignment = _options$alignment === void 0 ? 1 : _options$alignment,
+      _options$usage = options.usage,
+      usage = _options$usage === void 0 ? TextureUsage.SAMPLED : _options$usage,
+      _options$mipmap = options.mipmap,
+      mipmap = _options$mipmap === void 0 ? false : _options$mipmap,
+      _options$mag = options.mag,
+      mag = _options$mag === void 0 ? gl.NEAREST : _options$mag,
+      _options$min = options.min,
+      min = _options$min === void 0 ? gl.NEAREST : _options$min;
     this.width = width;
     this.height = height;
     var pixelFormat = Format.U8_RGBA_RT;
     if (type === gl.UNSIGNED_BYTE && format === gl.RGBA) {
       pixelFormat = Format.U8_RGBA_RT;
-    } else if (format === gl.LUMINANCE && type === gl.FLOAT) {
-      pixelFormat = Format.F32_LUMINANCE;
-    } else if (format === gl.LUMINANCE && type === gl.UNSIGNED_BYTE) {
+    } else if (type === gl.UNSIGNED_BYTE && format === gl.LUMINANCE) {
       pixelFormat = Format.U8_LUMINANCE;
+    } else if (type === gl.FLOAT && format === gl.RGB) {
+      pixelFormat = Format.F32_RGB;
     } else {
       throw new Error("create texture error, type: ".concat(type, ", format: ").concat(format));
     }
-
-    //   // copy pixels from current bind framebuffer
-    //   x,
-    //   y,
-    //   copy,
-    // };
-
     this.texture = device.createTexture({
       format: pixelFormat,
       width: width,
       height: height,
-      usage: TextureUsage.SAMPLED,
+      usage: usage === TextureUsage.SAMPLED ? DeviceTextureUsage.SAMPLED : DeviceTextureUsage.RENDER_TARGET,
       pixelStore: {
         unpackFlipY: flipY,
         packAlignment: alignment
-      }
+      },
+      mipLevelCount: usage === TextureUsage.RENDER_TARGET ? 1 : mipmap ? 1 : 0
     });
     if (data) {
       // @ts-ignore
@@ -62,13 +66,12 @@ var DeviceTexture2D = /*#__PURE__*/function () {
     this.sampler = device.createSampler({
       addressModeU: wrapModeMap[wrapS],
       addressModeV: wrapModeMap[wrapT],
-      minFilter: FilterMode.POINT,
-      // TODO: use mag & min
-      magFilter: FilterMode.BILINEAR,
+      minFilter: min === gl.NEAREST ? FilterMode.POINT : FilterMode.BILINEAR,
+      magFilter: mag === gl.NEAREST ? FilterMode.POINT : FilterMode.BILINEAR,
       mipmapFilter: MipmapFilterMode.NO_MIP,
-      lodMinClamp: 0,
-      lodMaxClamp: 0
-      // maxAnisotropy: aniso,
+      // lodMinClamp: 0,
+      // lodMaxClamp: 0,
+      maxAnisotropy: aniso
     });
   }
   _createClass(DeviceTexture2D, [{

package/es/device/constants.d.ts

@@ -1,5 +1,5 @@
 import { AddressMode, BlendFactor, BlendMode, BufferFrequencyHint, CompareFunction, CullMode, Format, PrimitiveTopology } from '@antv/g-device-api';
-import { TypedArray } from './utils/typedarray';
+import type { TypedArray } from './utils/typedarray';
 export declare const typedArrayCtorMap: {
     [key: string]: new (data: number[]) => TypedArray;
 };

package/es/device/index.d.ts

@@ -1,4 +1,5 @@
-import { IAttribute, IAttributeInitializationOptions, IBuffer, IBufferInitializationOptions, IElements, IElementsInitializationOptions, IExtensions, IFramebufferInitializationOptions, IModel, IModelInitializationOptions, IRenderConfig, IRendererService, ITexture2D, ITexture2DInitializationOptions } from '@antv/l7-core';
+import type { RenderPass, RenderTarget, SwapChain } from '@antv/g-device-api';
+import type { IAttribute, IAttributeInitializationOptions, IBuffer, IBufferInitializationOptions, IClearOptions, IElements, IElementsInitializationOptions, IExtensions, IFramebuffer, IFramebufferInitializationOptions, IModel, IModelInitializationOptions, IReadPixelsOptions, IRenderConfig, IRendererService, ITexture2D, ITexture2DInitializationOptions } from '@antv/l7-core';
 import 'reflect-metadata';
 import DeviceFramebuffer from './DeviceFramebuffer';
 /**
@@ -8,15 +9,22 @@ export default class DeviceRendererService implements IRendererService {
     uniformBuffers: IBuffer[];
     extensionObject: IExtensions;
     private device;
-    private swapChain;
+    swapChain: SwapChain;
     private $container;
     private canvas;
-    private width;
-    private height;
+    width: number;
+    height: number;
     private isDirty;
-    private renderPass;
-    private renderTarget;
-    private mainDepthRT;
+    /**
+     * Current render pass.
+     */
+    renderPass: RenderPass;
+    mainColorRT: RenderTarget;
+    mainDepthRT: RenderTarget;
+    /**
+     * Current FBO.
+     */
+    currentFramebuffer: DeviceFramebuffer | null;
     init(canvas: HTMLCanvasElement, cfg: IRenderConfig): Promise<void>;
     beginFrame(): void;
     endFrame(): void;
@@ -28,18 +36,18 @@ export default class DeviceRendererService implements IRendererService {
     createElements: (options: IElementsInitializationOptions) => IElements;
     createTexture2D: (options: ITexture2DInitializationOptions) => ITexture2D;
     createFramebuffer: (options: IFramebufferInitializationOptions) => DeviceFramebuffer;
-    useFramebuffer: () => void;
-    clear: () => void;
+    useFramebuffer: (framebuffer: IFramebuffer | null, drawCommands: () => void) => void;
+    clear: (options: IClearOptions) => void;
     viewport: ({ width, height, }: {
         x: number;
         y: number;
         width: number;
         height: number;
     }) => void;
-    readPixels: () => Uint8Array;
+    readPixels: (options: IReadPixelsOptions) => Uint8Array;
     getViewportSize: () => {
-        width: any;
-        height: any;
+        width: number;
+        height: number;
     };
     getContainer: () => HTMLElement | null;
     getCanvas: () => HTMLCanvasElement;