@antv/l7-renderer 2.20.5 → 2.20.6

package/es/device/index.js

@@ -4,7 +4,7 @@ import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _dec, _class;
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import { Format, TextureUsage, TransparentBlack, WebGLDeviceContribution, WebGPUDeviceContribution } from '@antv/g-device-api';
+import { Format, TextureUsage, TransparentBlack, WebGLDeviceContribution, WebGPUDeviceContribution, colorNewFromRGBA } from '@antv/g-device-api';
 import { injectable } from 'inversify';
 import 'reflect-metadata';
 import DeviceAttribute from "./DeviceAttribute";
@@ -24,7 +24,7 @@ var DeviceRendererService = (_dec = injectable(), _dec(_class = /*#__PURE__*/fun
     _classCallCheck(this, DeviceRendererService);
     _defineProperty(this, "uniformBuffers", []);
     _defineProperty(this, "createModel", function (options) {
-      return new DeviceModel(_this.device, options);
+      return new DeviceModel(_this.device, options, _this);
     });
     _defineProperty(this, "createAttribute", function (options) {
       return new DeviceAttribute(_this.device, options);
@@ -41,35 +41,28 @@ var DeviceRendererService = (_dec = injectable(), _dec(_class = /*#__PURE__*/fun
     _defineProperty(this, "createFramebuffer", function (options) {
       return new DeviceFramebuffer(_this.device, options);
     });
-    _defineProperty(this, "useFramebuffer", function ()
-    // framebuffer: IFramebuffer | null,
-    // drawCommands: () => void,
-    {
-      // if (framebuffer == null) {
-      //   // @ts-ignore
-      //   this.device.currentFramebuffer = this.device.onscreenFramebuffer;
-      // } else {
-      //   // @ts-ignore
-      //   this.device.currentFramebuffer = framebuffer;
-      // }
-      // drawCommands();
+    _defineProperty(this, "useFramebuffer", function (framebuffer, drawCommands) {
+      _this.currentFramebuffer = framebuffer;
+      _this.beginFrame();
+      drawCommands();
+      _this.endFrame();
+      _this.currentFramebuffer = null;
     });
-    _defineProperty(this, "clear", function ()
-    // options: IClearOptions
-    {
+    _defineProperty(this, "clear", function (options) {
       // @see https://github.com/regl-project/regl/blob/gh-pages/API.md#clear-the-draw-buffer
-      // const { color, depth, stencil, framebuffer = null } = options;
-      // const reglClearOptions: regl.ClearOptions = {
-      //   color,
-      //   depth,
-      //   stencil,
-      // };
-      // reglClearOptions.framebuffer =
-      //   framebuffer === null
-      //     ? framebuffer
-      //     : (framebuffer as DeviceFramebuffer).get();
-      // this.gl?.clear(reglClearOptions);
-      // TODO: clear
+      var color = options.color,
+        depth = options.depth,
+        stencil = options.stencil,
+        _options$framebuffer = options.framebuffer,
+        framebuffer = _options$framebuffer === void 0 ? null : _options$framebuffer;
+      if (framebuffer) {
+        // @ts-ignore
+        framebuffer.clearOptions = {
+          color: color,
+          depth: depth,
+          stencil: stencil
+        };
+      }
     });
     _defineProperty(this, "viewport", function (_ref) {
       var width = _ref.width,
@@ -80,33 +73,23 @@ var DeviceRendererService = (_dec = injectable(), _dec(_class = /*#__PURE__*/fun
       _this.width = width;
       _this.height = height;
       // Will be used in `setViewport` from RenderPass later.
-      // @ts-ignore
-      _this.device.width = width;
-      // @ts-ignore
-      _this.device.height = height;
-
       // this.gl._refresh();
     });
-    _defineProperty(this, "readPixels", function ()
-    // options: IReadPixelsOptions
-    {
-      // const { framebuffer, x, y, width, height } = options;
-
-      // const readback = this.device.createReadback();
-
-      // if (framebuffer) {
-      //   readPixelsOptions.framebuffer = (framebuffer as DeviceFramebuffer).get();
-      // }
-      // return readback.readTextureSync(null, x, y, width, height, new Uint8Array()) as Uint8Array;
-      return new Uint8Array();
+    _defineProperty(this, "readPixels", function (options) {
+      var framebuffer = options.framebuffer,
+        x = options.x,
+        y = options.y,
+        width = options.width,
+        height = options.height;
+      var readback = _this.device.createReadback();
+      var texture = framebuffer['colorTexture'];
+      return readback.readTextureSync(texture, x, y, width, height, new Uint8Array(width * height * 4));
     });
     _defineProperty(this, "getViewportSize", function () {
       // FIXME: add viewport size in Device API.
       return {
-        // @ts-ignore
-        width: _this.device.width,
-        // @ts-ignore
-        height: _this.device.height
+        width: _this.width,
+        height: _this.height
       };
     });
     _defineProperty(this, "getContainer", function () {
@@ -143,9 +126,16 @@ var DeviceRendererService = (_dec = injectable(), _dec(_class = /*#__PURE__*/fun
   }
   _createClass(DeviceRendererService, [{
     key: "init",
-    value: function () {
+    value:
+    /**
+     * Current render pass.
+     */
+    /**
+     * Current FBO.
+     */
+    function () {
       var _init = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(canvas, cfg) {
-        var enableWebGPU, shaderCompilerPath, deviceContribution, swapChain, gl, renderTargetTexture;
+        var enableWebGPU, shaderCompilerPath, deviceContribution, swapChain, gl;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -177,15 +167,7 @@ var DeviceRendererService = (_dec = injectable(), _dec(_class = /*#__PURE__*/fun
               this.swapChain = swapChain;
 
               // Create default RT
-              // @ts-ignore
-              // this.device.onscreenFramebuffer = this.createFramebuffer({
-              //   width: canvas.width,
-              //   height: canvas.height,
-              // });
-              // // @ts-ignore
-              // this.device.onscreenFramebuffer.onscreen = true;
-              // // @ts-ignore
-              // this.device.currentFramebuffer = this.device.onscreenFramebuffer;
+              this.currentFramebuffer = null;
 
               // @ts-ignore
               gl = this.device['gl'];
@@ -193,13 +175,12 @@ var DeviceRendererService = (_dec = injectable(), _dec(_class = /*#__PURE__*/fun
                 // @ts-ignore
                 OES_texture_float: !isWebGL2(gl) && this.device['OES_texture_float']
               };
-              renderTargetTexture = this.device.createTexture({
+              this.mainColorRT = this.device.createRenderTargetFromTexture(this.device.createTexture({
                 format: Format.U8_RGBA_RT,
                 width: canvas.width,
                 height: canvas.height,
                 usage: TextureUsage.RENDER_TARGET
-              });
-              this.renderTarget = this.device.createRenderTargetFromTexture(renderTargetTexture);
+              }));
               this.mainDepthRT = this.device.createRenderTargetFromTexture(this.device.createTexture({
                 format: Format.D24_S8,
                 width: canvas.width,
@@ -220,17 +201,35 @@ var DeviceRendererService = (_dec = injectable(), _dec(_class = /*#__PURE__*/fun
   }, {
     key: "beginFrame",
     value: function beginFrame() {
-      var onscreenTexture = this.swapChain.getOnscreenTexture();
-      this.renderPass = this.device.createRenderPass({
-        colorAttachment: [this.renderTarget],
-        // colorResolveTo: [onscreen ? onscreenTexture : onscreenTexture],
-        colorResolveTo: [onscreenTexture],
-        colorClearColor: [TransparentBlack],
-        depthStencilAttachment: this.mainDepthRT,
-        depthClearValue: 1
+      var currentFramebuffer = this.currentFramebuffer,
+        swapChain = this.swapChain,
+        mainColorRT = this.mainColorRT,
+        mainDepthRT = this.mainDepthRT;
+      var onscreenTexture = swapChain.getOnscreenTexture();
+      var colorAttachment = currentFramebuffer ? currentFramebuffer['colorRenderTarget'] : mainColorRT;
+      var colorResolveTo = currentFramebuffer ? null : onscreenTexture;
+      var depthStencilAttachment = currentFramebuffer ? currentFramebuffer['depthRenderTarget'] : mainDepthRT;
+      var _ref2 =
+        // @ts-ignore
+        (currentFramebuffer === null || currentFramebuffer === void 0 ? void 0 : currentFramebuffer.clearOptions) || {},
+        _ref2$color = _ref2.color,
+        color = _ref2$color === void 0 ? [0, 0, 0, 0] : _ref2$color,
+        _ref2$depth = _ref2.depth,
+        depth = _ref2$depth === void 0 ? 1 : _ref2$depth,
+        _ref2$stencil = _ref2.stencil,
+        stencil = _ref2$stencil === void 0 ? 0 : _ref2$stencil;
+      var colorClearColor = colorAttachment ? colorNewFromRGBA(color[0] * 255, color[1] * 255, color[2] * 255, color[3]) : TransparentBlack;
+      var depthClearValue = depthStencilAttachment ? depth : undefined;
+      var stencilClearValue = depthStencilAttachment ? stencil : undefined;
+      var renderPass = this.device.createRenderPass({
+        colorAttachment: [colorAttachment],
+        colorResolveTo: [colorResolveTo],
+        colorClearColor: [colorClearColor],
+        depthStencilAttachment: depthStencilAttachment,
+        depthClearValue: depthClearValue,
+        stencilClearValue: stencilClearValue
       });
-      // @ts-ignore
-      this.device.renderPass = this.renderPass;
+      this.renderPass = renderPass;
     }
   }, {
     key: "endFrame",

package/es/regl/ReglAttribute.d.ts

@@ -1,5 +1,5 @@
-import { IAttribute, IAttributeInitializationOptions } from '@antv/l7-core';
-import regl from 'regl';
+import type { IAttribute, IAttributeInitializationOptions } from '@antv/l7-core';
+import type regl from 'regl';
 /**
  * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#attributes
  */

package/es/regl/ReglBuffer.d.ts

@@ -1,5 +1,5 @@
-import { IBuffer, IBufferInitializationOptions } from '@antv/l7-core';
-import regl from 'regl';
+import type { IBuffer, IBufferInitializationOptions } from '@antv/l7-core';
+import type regl from 'regl';
 /**
  * adaptor for regl.Buffer
  * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#buffers

package/es/regl/ReglElements.d.ts

@@ -1,5 +1,5 @@
-import { IElements, IElementsInitializationOptions } from '@antv/l7-core';
-import regl from 'regl';
+import type { IElements, IElementsInitializationOptions } from '@antv/l7-core';
+import type regl from 'regl';
 /**
  * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#elements
  */

package/es/regl/ReglFramebuffer.d.ts

@@ -1,5 +1,5 @@
-import { IFramebuffer, IFramebufferInitializationOptions } from '@antv/l7-core';
-import regl from 'regl';
+import type { IFramebuffer, IFramebufferInitializationOptions } from '@antv/l7-core';
+import type regl from 'regl';
 /**
  * adaptor for regl.Framebuffer
  * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#framebuffers

package/es/regl/ReglModel.d.ts

@@ -1,5 +1,5 @@
-import { IAttribute, IElements, IModel, IModelDrawOptions, IModelInitializationOptions, IUniform } from '@antv/l7-core';
-import regl from 'regl';
+import type { IAttribute, IElements, IModel, IModelDrawOptions, IModelInitializationOptions, IUniform } from '@antv/l7-core';
+import type regl from 'regl';
 /**
  * adaptor for regl.DrawCommand
  */

package/es/regl/ReglModel.js

@@ -56,11 +56,13 @@ var ReglModel = /*#__PURE__*/function () {
     Object.keys(attributes).forEach(function (name) {
       reglAttributes[name] = attributes[name].get();
     });
+    var frag = removeDuplicateUniforms(preprocessShader_GLSL(vendorInfo, 'frag', fs, null, false));
+    var vert = removeDuplicateUniforms(preprocessShader_GLSL(vendorInfo, 'vert', vs, null, false));
     var drawParams = {
       attributes: reglAttributes,
-      frag: removeDuplicateUniforms(preprocessShader_GLSL(vendorInfo, 'frag', fs, null, false)),
+      frag: frag,
       uniforms: reglUniforms,
-      vert: removeDuplicateUniforms(preprocessShader_GLSL(vendorInfo, 'vert', vs, null, false)),
+      vert: vert,
       // @ts-ignore
       colorMask: reGl.prop('colorMask'),
       lineWidth: 1,

package/es/regl/ReglRenderbuffer.d.ts

@@ -1,5 +1,5 @@
-import { IRenderbuffer, IRenderbufferInitializationOptions } from '@antv/l7-core';
-import regl from 'regl';
+import type { IRenderbuffer, IRenderbufferInitializationOptions } from '@antv/l7-core';
+import type regl from 'regl';
 /**
  * adaptor for regl.Renderbuffer
  * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#renderbuffers

package/es/regl/ReglTexture2D.d.ts

@@ -1,5 +1,5 @@
-import { ITexture2D, ITexture2DInitializationOptions } from '@antv/l7-core';
-import regl from 'regl';
+import type { ITexture2D, ITexture2DInitializationOptions } from '@antv/l7-core';
+import type regl from 'regl';
 /**
  * adaptor for regl.Buffer
  * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#buffers

package/es/regl/constants.d.ts

@@ -1,4 +1,4 @@
-import regl from 'regl';
+import type regl from 'regl';
 export declare const primitiveMap: {
     [key: string]: 'points' | 'lines' | 'line loop' | 'line strip' | 'triangles' | 'triangle strip' | 'triangle fan';
 };

package/es/regl/index.d.ts

@@ -2,7 +2,7 @@
  * render w/ regl
  * @see https://github.com/regl-project/regl/blob/gh-pages/API.md
  */
-import { IAttribute, IAttributeInitializationOptions, IBuffer, IBufferInitializationOptions, IClearOptions, IElements, IElementsInitializationOptions, IExtensions, IFramebuffer, IFramebufferInitializationOptions, IModel, IModelInitializationOptions, IReadPixelsOptions, IRenderConfig, IRendererService, ITexture2D, ITexture2DInitializationOptions } from '@antv/l7-core';
+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 regl from 'regl';
 import ReglFramebuffer from './ReglFramebuffer';

package/lib/device/DeviceBuffer.js

@@ -29,7 +29,7 @@ var import_typedarray = require("./utils/typedarray");
 var DeviceBuffer = class {
   constructor(device, options) {
     this.isDestroyed = false;
-    const { data, usage, type, isUBO } = options;
+    const { data, usage, type, isUBO, label } = options;
     let typed;
     if ((0, import_typedarray.isTypedArray)(data)) {
       typed = data;
@@ -43,6 +43,9 @@ var DeviceBuffer = class {
       usage: isUBO ? import_g_device_api.BufferUsage.UNIFORM : import_g_device_api.BufferUsage.VERTEX,
       hint: import_constants.hintMap[usage || import_l7_core.gl.STATIC_DRAW]
     });
+    if (label) {
+      device.setResourceName(this.buffer, label);
+    }
   }
   get() {
     return this.buffer;

package/lib/device/DeviceFramebuffer.js

@@ -27,41 +27,75 @@ var import_DeviceTexture2D = require("./DeviceTexture2D");
 var DeviceFramebuffer = class {
   constructor(device, options) {
     this.device = device;
-    const { width, height, color } = options;
-    if ((0, import_DeviceTexture2D.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: import_g_device_api.Format.U8_RGBA_RT,
-        width,
-        height
-      });
-      this.width = width;
-      this.height = height;
+    this.options = options;
+    this.createColorRenderTarget();
+    this.createDepthRenderTarget();
+  }
+  createColorRenderTarget() {
+    const { width, height, color } = this.options;
+    if (color) {
+      if ((0, import_DeviceTexture2D.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: import_g_device_api.Format.U8_RGBA_RT,
+          usage: import_g_device_api.TextureUsage.RENDER_TARGET,
+          width,
+          height
+        });
+        this.colorRenderTarget = this.device.createRenderTargetFromTexture(
+          this.colorTexture
+        );
+        this.width = width;
+        this.height = height;
+      }
+    }
+  }
+  createDepthRenderTarget() {
+    const { width, height, depth } = this.options;
+    if (depth) {
+      if ((0, import_DeviceTexture2D.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: import_g_device_api.Format.D24_S8,
+          usage: import_g_device_api.TextureUsage.RENDER_TARGET,
+          width,
+          height
+        });
+        this.depthRenderTarget = this.device.createRenderTargetFromTexture(
+          this.depthTexture
+        );
+        this.width = width;
+        this.height = height;
+      }
     }
   }
   get() {
-    return this.renderTarget;
+    return this.colorRenderTarget;
   }
   destroy() {
-    this.renderTarget.destroy();
+    var _a, _b;
+    (_a = this.colorRenderTarget) == null ? void 0 : _a.destroy();
+    (_b = this.depthRenderTarget) == null ? void 0 : _b.destroy();
   }
   resize({ width, height }) {
     if (this.width !== width || this.height !== height) {
-      if (this.renderTarget) {
-        this.renderTarget.destroy();
-      }
-      this.renderTarget = this.device.createRenderTarget({
-        format: import_g_device_api.Format.U8_RGBA_RT,
-        width,
-        height
-      });
-      this.width = width;
-      this.height = height;
+      this.destroy();
+      this.options.width = width;
+      this.options.height = height;
+      this.createColorRenderTarget();
+      this.createDepthRenderTarget();
     }
   }
 };

package/lib/device/DeviceModel.js

@@ -1,6 +1,8 @@
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -14,6 +16,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/device/DeviceModel.ts
@@ -25,12 +35,15 @@ module.exports = __toCommonJS(DeviceModel_exports);
 var import_g_device_api = require("@antv/g-device-api");
 var import_l7_core = require("@antv/l7-core");
 var import_l7_utils = require("@antv/l7-utils");
+var import_DeviceFramebuffer = __toESM(require("./DeviceFramebuffer"));
+var import_DeviceTexture2D = __toESM(require("./DeviceTexture2D"));
 var import_constants = require("./constants");
 var { isPlainObject, isTypedArray } = import_l7_utils.lodashUtil;
 var DeviceModel = class {
-  constructor(device, options) {
+  constructor(device, options, service) {
     this.device = device;
     this.options = options;
+    this.service = service;
     this.destroyed = false;
     this.uniforms = {};
     this.vertexBuffers = [];
@@ -91,7 +104,7 @@ var DeviceModel = class {
     this.inputLayout = inputLayout;
     this.pipeline = this.createPipeline(options);
   }
-  createPipeline(options) {
+  createPipeline(options, pick) {
     const { primitive = import_l7_core.gl.TRIANGLES, depth, cull, blend } = options;
     const depthParams = this.initDepthDrawParams({ depth });
     const depthEnabled = !!(depthParams && depthParams.enable);
@@ -107,7 +120,19 @@ var DeviceModel = class {
       depthStencilAttachmentFormat: import_g_device_api.Format.D24_S8,
       megaStateDescriptor: {
         attachmentsState: [
-          {
+          pick ? {
+            channelWriteMask: import_g_device_api.ChannelWriteMask.ALL,
+            rgbBlendState: {
+              blendMode: import_g_device_api.BlendMode.ADD,
+              blendSrcFactor: import_g_device_api.BlendFactor.ONE,
+              blendDstFactor: import_g_device_api.BlendFactor.ZERO
+            },
+            alphaBlendState: {
+              blendMode: import_g_device_api.BlendMode.ADD,
+              blendSrcFactor: import_g_device_api.BlendFactor.ONE,
+              blendDstFactor: import_g_device_api.BlendFactor.ZERO
+            }
+          } : {
             channelWriteMask: import_g_device_api.ChannelWriteMask.ALL,
             rgbBlendState: {
               blendMode: blendEnabled && blendParams.equation.rgb || import_g_device_api.BlendMode.ADD,
@@ -117,11 +142,11 @@ var DeviceModel = class {
             alphaBlendState: {
               blendMode: blendEnabled && blendParams.equation.alpha || import_g_device_api.BlendMode.ADD,
               blendSrcFactor: blendEnabled && blendParams.func.srcAlpha || import_g_device_api.BlendFactor.ONE,
-              blendDstFactor: blendEnabled && blendParams.func.dstAlpha || import_g_device_api.BlendFactor.ONE_MINUS_SRC_ALPHA
+              blendDstFactor: blendEnabled && blendParams.func.dstAlpha || import_g_device_api.BlendFactor.ONE
             }
           }
         ],
-        blendConstant: import_g_device_api.TransparentBlack,
+        blendConstant: blendEnabled ? import_g_device_api.TransparentBlack : void 0,
         depthWrite: depthEnabled,
         depthCompare: depthEnabled && depthParams.func || import_g_device_api.CompareFunction.LESS,
         cullMode: cullEnabled && cullParams.face || import_g_device_api.CullMode.NONE,
@@ -131,6 +156,17 @@ var DeviceModel = class {
   }
   updateAttributesAndElements() {
   }
+  /**
+   * No need to implement this method, you should update data on `Attribute` like this:
+   *
+   * @example
+   * ```ts
+   * attribute.updateBuffer({
+   *   data: [],
+   *   offset: 0,
+   * });
+   * ```
+   */
   updateAttributes() {
   }
   addUniforms(uniforms) {
@@ -139,12 +175,13 @@ var DeviceModel = class {
       ...this.extractUniforms(uniforms)
     };
   }
-  draw(options) {
+  draw(options, pick) {
     const mergedOptions = {
       ...this.options,
       ...options
     };
     const {
+      depth: { enable: depthEnabled } = {},
       count = 0,
       instances,
       elements,
@@ -156,9 +193,14 @@ var DeviceModel = class {
       ...this.uniforms,
       ...this.extractUniforms(uniforms)
     };
-    const { width, height } = this.device;
-    const renderPass = this.device.renderPass;
-    this.pipeline = this.createPipeline(mergedOptions);
+    const { renderPass, currentFramebuffer, width, height } = this.service;
+    this.pipeline = this.createPipeline(mergedOptions, pick);
+    renderPass.setViewport(
+      0,
+      0,
+      (currentFramebuffer == null ? void 0 : currentFramebuffer["width"]) || width,
+      (currentFramebuffer == null ? void 0 : currentFramebuffer["height"]) || height
+    );
     renderPass.setPipeline(this.pipeline);
     renderPass.setVertexInput(
       this.inputLayout,
@@ -168,10 +210,8 @@ var DeviceModel = class {
       elements ? {
         buffer: this.indexBuffer,
         offset: 0
-        // TODO: use defaule value
       } : null
     );
-    renderPass.setViewport(0, 0, width, height);
     if (uniformBuffers) {
       this.bindings = this.device.createBindings({
         pipeline: this.pipeline,
@@ -191,6 +231,14 @@ var DeviceModel = class {
     }
     if (this.bindings) {
       renderPass.setBindings(this.bindings);
+      Object.keys(this.uniforms).forEach((uniformName) => {
+        const uniform = this.uniforms[uniformName];
+        if (uniform instanceof import_DeviceTexture2D.default) {
+          this.uniforms[uniformName] = uniform.get();
+        } else if (uniform instanceof import_DeviceFramebuffer.default) {
+          this.uniforms[uniformName] = uniform.get()["texture"];
+        }
+      });
       this.program.setUniformsLegacy(this.uniforms);
     }
     if (elements) {