diff --git a/cocos/gfx/base/buffer.ts b/cocos/gfx/base/buffer.ts
index 88e8a435a1f..26d8caf00b2 100644
--- a/cocos/gfx/base/buffer.ts
+++ b/cocos/gfx/base/buffer.ts
@@ -46,7 +46,7 @@ export abstract class Buffer extends GFXObject {
      * @zh 缓冲使用方式。
      */
     get usage (): BufferUsage {
-        return this._usage;
+        return this._usage$;
     }
 
     /**
@@ -54,7 +54,7 @@ export abstract class Buffer extends GFXObject {
      * @zh 缓冲的内存使用方式。
      */
     get memUsage (): MemoryUsage {
-        return this._memUsage;
+        return this._memUsage$;
     }
 
     /**
@@ -62,7 +62,7 @@ export abstract class Buffer extends GFXObject {
      * @zh 缓冲大小。
      */
     get size (): number {
-        return this._size;
+        return this._size$;
     }
 
     /**
@@ -70,7 +70,7 @@ export abstract class Buffer extends GFXObject {
      * @zh 缓冲步长。
      */
     get stride (): number {
-        return this._stride;
+        return this._stride$;
     }
 
     /**
@@ -78,20 +78,20 @@ export abstract class Buffer extends GFXObject {
      * @zh 缓冲条目数量。
      */
     get count (): number {
-        return this._count;
+        return this._count$;
     }
 
     get flags (): BufferFlags {
-        return this._flags;
+        return this._flags$;
     }
 
-    protected _usage: BufferUsage = BufferUsageBit.NONE;
-    protected _memUsage: MemoryUsage = MemoryUsageBit.NONE;
-    protected _size = 0;
-    protected _stride = 1;
-    protected _count = 0;
-    protected _flags: BufferFlags = BufferFlagBit.NONE;
-    protected _isBufferView = false;
+    protected _usage$: BufferUsage = BufferUsageBit.NONE;
+    protected _memUsage$: MemoryUsage = MemoryUsageBit.NONE;
+    protected _size$ = 0;
+    protected _stride$ = 1;
+    protected _count$ = 0;
+    protected _flags$: BufferFlags = BufferFlagBit.NONE;
+    protected _isBufferView$ = false;
 
     constructor () {
         super(ObjectType.BUFFER);
diff --git a/cocos/gfx/base/command-buffer.ts b/cocos/gfx/base/command-buffer.ts
index 332e0da1e83..292a0d6e1db 100644
--- a/cocos/gfx/base/command-buffer.ts
+++ b/cocos/gfx/base/command-buffer.ts
@@ -53,7 +53,7 @@ export abstract class CommandBuffer extends GFXObject {
      * @zh 命令缓冲类型。
      */
     get type (): CommandBufferType {
-        return this._type;
+        return this._type$;
     }
 
     /**
@@ -61,7 +61,7 @@ export abstract class CommandBuffer extends GFXObject {
      * @zh 命令缓冲类型。
      */
     get queue (): Queue {
-        return this._queue!;
+        return this._queue$!;
     }
 
     /**
@@ -69,7 +69,7 @@ export abstract class CommandBuffer extends GFXObject {
      * @zh 绘制调用次数。
      */
     get numDrawCalls (): number {
-        return this._numDrawCalls;
+        return this._numDrawCalls$;
     }
 
     /**
@@ -77,7 +77,7 @@ export abstract class CommandBuffer extends GFXObject {
      * @zh 绘制 Instance 数量。
      */
     get numInstances (): number {
-        return this._numInstances;
+        return this._numInstances$;
     }
 
     /**
@@ -85,14 +85,14 @@ export abstract class CommandBuffer extends GFXObject {
      * @zh 绘制三角形数量。
      */
     get numTris (): number {
-        return this._numTris;
+        return this._numTris$;
     }
 
-    protected _queue: Queue | null = null;
-    protected _type: CommandBufferType = CommandBufferType.PRIMARY;
-    protected _numDrawCalls = 0;
-    protected _numInstances = 0;
-    protected _numTris = 0;
+    protected _queue$: Queue | null = null;
+    protected _type$: CommandBufferType = CommandBufferType.PRIMARY;
+    protected _numDrawCalls$ = 0;
+    protected _numInstances$ = 0;
+    protected _numTris$ = 0;
 
     constructor () {
         super(ObjectType.COMMAND_BUFFER);
diff --git a/cocos/gfx/base/define.ts b/cocos/gfx/base/define.ts
index 933600de1e4..db7cdc36fdd 100644
--- a/cocos/gfx/base/define.ts
+++ b/cocos/gfx/base/define.ts
@@ -32,9 +32,7 @@ import { DescriptorSetLayout } from './descriptor-set-layout';
 
 import { Sampler } from './states/sampler';
 import { GeneralBarrier } from './states/general-barrier';
-import { TextureBarrier } from './states/texture-barrier';
-import { BufferBarrier } from './states/buffer-barrier';
-import { GCObject } from '../../core';
+import { GCObject } from '../../core/data/gc-object';
 
 interface ICopyable { copy (info: ICopyable): ICopyable; }
 
@@ -1959,28 +1957,28 @@ export class DynamicStates {
   */
 export class GFXObject extends GCObject {
     public get objectType (): ObjectType {
-        return this._objectType;
+        return this._objectType$;
     }
 
     public get objectID (): number {
-        return this._objectID;
+        return this._objectID$;
     }
 
     public get typedID (): number {
-        return this._typedID;
+        return this._typedID$;
     }
 
-    protected _objectType = ObjectType.UNKNOWN;
-    protected _objectID = 0;
-    protected _typedID = 0;
+    protected _objectType$ = ObjectType.UNKNOWN;
+    protected _objectID$ = 0;
+    protected _typedID$ = 0;
 
     private static _idTable = Array(ObjectType.COUNT).fill(1 << 16);
 
     constructor (objectType: ObjectType) {
         super();
-        this._objectType = objectType;
-        this._objectID = GFXObject._idTable[ObjectType.UNKNOWN]++;
-        this._typedID = GFXObject._idTable[objectType]++;
+        this._objectType$ = objectType;
+        this._objectID$ = GFXObject._idTable[ObjectType.UNKNOWN]++;
+        this._typedID$ = GFXObject._idTable[objectType]++;
     }
 }
 
@@ -2163,6 +2161,10 @@ export function IsPowerOf2 (x: number): boolean {
     return x > 0 && (x & (x - 1)) === 0;
 }
 
+function ceil (x: number): number {
+    return Math.ceil(x);
+}
+
 /**
   * @en Get memory size of the specified fomat.
   * @zh 获取指定格式对应的内存大小。
@@ -2180,7 +2182,7 @@ export function FormatSize (format: Format, width: number, height: number, depth
         case Format.BC1_ALPHA:
         case Format.BC1_SRGB:
         case Format.BC1_SRGB_ALPHA:
-            return Math.ceil(width / 4) * Math.ceil(height / 4) * 8 * depth;
+            return ceil(width / 4) * ceil(height / 4) * 8 * depth;
         case Format.BC2:
         case Format.BC2_SRGB:
         case Format.BC3:
@@ -2191,10 +2193,10 @@ export function FormatSize (format: Format, width: number, height: number, depth
         case Format.BC6H_UF16:
         case Format.BC7:
         case Format.BC7_SRGB:
-            return Math.ceil(width / 4) * Math.ceil(height / 4) * 16 * depth;
+            return ceil(width / 4) * ceil(height / 4) * 16 * depth;
         case Format.BC5:
         case Format.BC5_SNORM:
-            return Math.ceil(width / 4) * Math.ceil(height / 4) * 32 * depth;
+            return ceil(width / 4) * ceil(height / 4) * 32 * depth;
 
         case Format.ETC_RGB8:
         case Format.ETC2_RGB8:
@@ -2202,65 +2204,65 @@ export function FormatSize (format: Format, width: number, height: number, depth
         case Format.ETC2_RGB8_A1:
         case Format.EAC_R11:
         case Format.EAC_R11SN:
-            return Math.ceil(width / 4) * Math.ceil(height / 4) * 8 * depth;
+            return ceil(width / 4) * ceil(height / 4) * 8 * depth;
         case Format.ETC2_RGBA8:
         case Format.ETC2_SRGB8_A1:
         case Format.EAC_RG11:
         case Format.EAC_RG11SN:
-            return Math.ceil(width / 4) * Math.ceil(height / 4) * 16 * depth;
+            return ceil(width / 4) * ceil(height / 4) * 16 * depth;
 
         case Format.PVRTC_RGB2:
         case Format.PVRTC_RGBA2:
         case Format.PVRTC2_2BPP:
-            return Math.ceil(width / 8) * Math.ceil(height / 4) * 8 * depth;
+            return ceil(width / 8) * ceil(height / 4) * 8 * depth;
 
         case Format.PVRTC_RGB4:
         case Format.PVRTC_RGBA4:
         case Format.PVRTC2_4BPP:
-            return Math.ceil(width / 4) * Math.ceil(height / 4) * 8 * depth;
+            return ceil(width / 4) * ceil(height / 4) * 8 * depth;
 
         case Format.ASTC_RGBA_4X4:
         case Format.ASTC_SRGBA_4X4:
-            return Math.ceil(width / 4) * Math.ceil(height / 4) * 16 * depth;
+            return ceil(width / 4) * ceil(height / 4) * 16 * depth;
         case Format.ASTC_RGBA_5X4:
         case Format.ASTC_SRGBA_5X4:
-            return Math.ceil(width / 5) * Math.ceil(height / 4) * 16 * depth;
+            return ceil(width / 5) * ceil(height / 4) * 16 * depth;
         case Format.ASTC_RGBA_5X5:
         case Format.ASTC_SRGBA_5X5:
-            return Math.ceil(width / 5) * Math.ceil(height / 5) * 16 * depth;
+            return ceil(width / 5) * ceil(height / 5) * 16 * depth;
         case Format.ASTC_RGBA_6X5:
         case Format.ASTC_SRGBA_6X5:
-            return Math.ceil(width / 6) * Math.ceil(height / 5) * 16 * depth;
+            return ceil(width / 6) * ceil(height / 5) * 16 * depth;
         case Format.ASTC_RGBA_6X6:
         case Format.ASTC_SRGBA_6X6:
-            return Math.ceil(width / 6) * Math.ceil(height / 6) * 16 * depth;
+            return ceil(width / 6) * ceil(height / 6) * 16 * depth;
         case Format.ASTC_RGBA_8X5:
         case Format.ASTC_SRGBA_8X5:
-            return Math.ceil(width / 8) * Math.ceil(height / 5) * 16 * depth;
+            return ceil(width / 8) * ceil(height / 5) * 16 * depth;
         case Format.ASTC_RGBA_8X6:
         case Format.ASTC_SRGBA_8X6:
-            return Math.ceil(width / 8) * Math.ceil(height / 6) * 16 * depth;
+            return ceil(width / 8) * ceil(height / 6) * 16 * depth;
         case Format.ASTC_RGBA_8X8:
         case Format.ASTC_SRGBA_8X8:
-            return Math.ceil(width / 8) * Math.ceil(height / 8) * 16 * depth;
+            return ceil(width / 8) * ceil(height / 8) * 16 * depth;
         case Format.ASTC_RGBA_10X5:
         case Format.ASTC_SRGBA_10X5:
-            return Math.ceil(width / 10) * Math.ceil(height / 5) * 16 * depth;
+            return ceil(width / 10) * ceil(height / 5) * 16 * depth;
         case Format.ASTC_RGBA_10X6:
         case Format.ASTC_SRGBA_10X6:
-            return Math.ceil(width / 10) * Math.ceil(height / 6) * 16 * depth;
+            return ceil(width / 10) * ceil(height / 6) * 16 * depth;
         case Format.ASTC_RGBA_10X8:
         case Format.ASTC_SRGBA_10X8:
-            return Math.ceil(width / 10) * Math.ceil(height / 8) * 16 * depth;
+            return ceil(width / 10) * ceil(height / 8) * 16 * depth;
         case Format.ASTC_RGBA_10X10:
         case Format.ASTC_SRGBA_10X10:
-            return Math.ceil(width / 10) * Math.ceil(height / 10) * 16 * depth;
+            return ceil(width / 10) * ceil(height / 10) * 16 * depth;
         case Format.ASTC_RGBA_12X10:
         case Format.ASTC_SRGBA_12X10:
-            return Math.ceil(width / 12) * Math.ceil(height / 10) * 16 * depth;
+            return ceil(width / 12) * ceil(height / 10) * 16 * depth;
         case Format.ASTC_RGBA_12X12:
         case Format.ASTC_SRGBA_12X12:
-            return Math.ceil(width / 12) * Math.ceil(height / 12) * 16 * depth;
+            return ceil(width / 12) * ceil(height / 12) * 16 * depth;
 
         default: {
             return 0;
@@ -2471,7 +2473,7 @@ export function formatAlignment (format: Format): FormatAlignment {
 }
 
 export function alignTo (size: number, alignment: number): number {
-    return Math.ceil(size / alignment) * alignment;
+    return ceil(size / alignment) * alignment;
 }
 
 declare interface GPUTexture {}
diff --git a/cocos/gfx/base/descriptor-set-layout.ts b/cocos/gfx/base/descriptor-set-layout.ts
index 46eb21613a3..9ff9063500a 100644
--- a/cocos/gfx/base/descriptor-set-layout.ts
+++ b/cocos/gfx/base/descriptor-set-layout.ts
@@ -30,20 +30,20 @@ import { GFXObject, ObjectType, DescriptorSetLayoutBinding, DescriptorSetLayoutI
  */
 export abstract class DescriptorSetLayout extends GFXObject {
     get bindings (): DescriptorSetLayoutBinding[] {
-        return this._bindings;
+        return this._bindings$;
     }
 
     get bindingIndices (): number[] {
-        return this._bindingIndices;
+        return this._bindingIndices$;
     }
 
     get descriptorIndices (): number[] {
-        return this._descriptorIndices;
+        return this._descriptorIndices$;
     }
 
-    protected _bindings: DescriptorSetLayoutBinding[] = [];
-    protected _bindingIndices: number[] = [];
-    protected _descriptorIndices: number[] = [];
+    protected _bindings$: DescriptorSetLayoutBinding[] = [];
+    protected _bindingIndices$: number[] = [];
+    protected _descriptorIndices$: number[] = [];
 
     constructor () {
         super(ObjectType.DESCRIPTOR_SET_LAYOUT);
diff --git a/cocos/gfx/base/descriptor-set.ts b/cocos/gfx/base/descriptor-set.ts
index 3896f7bb8f6..3860bd47b16 100644
--- a/cocos/gfx/base/descriptor-set.ts
+++ b/cocos/gfx/base/descriptor-set.ts
@@ -34,15 +34,15 @@ import { GFXObject, ObjectType, DescriptorSetInfo, DESCRIPTOR_BUFFER_TYPE, DESCR
  */
 export abstract class DescriptorSet extends GFXObject {
     get layout (): DescriptorSetLayout {
-        return this._layout!;
+        return this._layout$!;
     }
 
-    protected _layout: DescriptorSetLayout | null = null;
-    protected _buffers: Buffer[] = [];
-    protected _textures: Texture[] = [];
-    protected _samplers: Sampler[] = [];
+    protected _layout$: DescriptorSetLayout | null = null;
+    protected _buffers$: Buffer[] = [];
+    protected _textures$: Texture[] = [];
+    protected _samplers$: Sampler[] = [];
 
-    protected _isDirty = false;
+    protected _isDirty$ = false;
 
     constructor () {
         super(ObjectType.DESCRIPTOR_SET);
@@ -61,13 +61,13 @@ export abstract class DescriptorSet extends GFXObject {
      * @param buffer The buffer to be bound.
      */
     public bindBuffer (binding: number, buffer: Buffer, index = 0): void {
-        const bindingIndex = this._layout!.bindingIndices[binding];
-        const info = this._layout!.bindings[bindingIndex]; if (!info) { return; }
+        const bindingIndex = this._layout$!.bindingIndices[binding];
+        const info = this._layout$!.bindings[bindingIndex]; if (!info) { return; }
         if (info.descriptorType & DESCRIPTOR_BUFFER_TYPE) {
-            const descriptorIndex = this._layout!.descriptorIndices[binding];
-            if (this._buffers[descriptorIndex + index] !== buffer) {
-                this._buffers[descriptorIndex + index] = buffer;
-                this._isDirty = true;
+            const descriptorIndex = this._layout$!.descriptorIndices[binding];
+            if (this._buffers$[descriptorIndex + index] !== buffer) {
+                this._buffers$[descriptorIndex + index] = buffer;
+                this._isDirty$ = true;
             }
         }
     }
@@ -79,13 +79,13 @@ export abstract class DescriptorSet extends GFXObject {
      * @param sampler The sampler to be bound.
      */
     public bindSampler (binding: number, sampler: Sampler, index = 0): void {
-        const bindingIndex = this._layout!.bindingIndices[binding];
-        const info = this._layout!.bindings[bindingIndex]; if (!info) { return; }
+        const bindingIndex = this._layout$!.bindingIndices[binding];
+        const info = this._layout$!.bindings[bindingIndex]; if (!info) { return; }
         if (info.descriptorType & DESCRIPTOR_SAMPLER_TYPE) {
-            const descriptorIndex = this._layout!.descriptorIndices[binding];
-            if (this._samplers[descriptorIndex + index] !== sampler) {
-                this._samplers[descriptorIndex + index] = sampler;
-                this._isDirty = true;
+            const descriptorIndex = this._layout$!.descriptorIndices[binding];
+            if (this._samplers$[descriptorIndex + index] !== sampler) {
+                this._samplers$[descriptorIndex + index] = sampler;
+                this._isDirty$ = true;
             }
         }
     }
@@ -97,13 +97,13 @@ export abstract class DescriptorSet extends GFXObject {
      * @param texture The texture to be bound.
      */
     public bindTexture (binding: number, texture: Texture, index = 0, flags = AccessFlagBit.NONE): void {
-        const bindingIndex = this._layout!.bindingIndices[binding];
-        const info = this._layout!.bindings[bindingIndex]; if (!info) { return; }
+        const bindingIndex = this._layout$!.bindingIndices[binding];
+        const info = this._layout$!.bindings[bindingIndex]; if (!info) { return; }
         if (info.descriptorType & DESCRIPTOR_SAMPLER_TYPE) {
-            const descriptorIndex = this._layout!.descriptorIndices[binding];
-            if (this._textures[descriptorIndex + index] !== texture) {
-                this._textures[descriptorIndex + index] = texture;
-                this._isDirty = true;
+            const descriptorIndex = this._layout$!.descriptorIndices[binding];
+            if (this._textures$[descriptorIndex + index] !== texture) {
+                this._textures$[descriptorIndex + index] = texture;
+                this._isDirty$ = true;
             }
         }
     }
@@ -114,8 +114,8 @@ export abstract class DescriptorSet extends GFXObject {
      * @param binding The target binding.
      */
     public getBuffer (binding: number, index = 0): Buffer {
-        const descriptorIndex = this._layout!.descriptorIndices[binding];
-        return this._buffers[descriptorIndex + index];
+        const descriptorIndex = this._layout$!.descriptorIndices[binding];
+        return this._buffers$[descriptorIndex + index];
     }
 
     /**
@@ -124,8 +124,8 @@ export abstract class DescriptorSet extends GFXObject {
      * @param binding The target binding.
      */
     public getSampler (binding: number, index = 0): Sampler {
-        const descriptorIndex = this._layout!.descriptorIndices[binding];
-        return this._samplers[descriptorIndex + index];
+        const descriptorIndex = this._layout$!.descriptorIndices[binding];
+        return this._samplers$[descriptorIndex + index];
     }
 
     /**
@@ -134,7 +134,7 @@ export abstract class DescriptorSet extends GFXObject {
      * @param binding The target binding.
      */
     public getTexture (binding: number, index = 0): Texture {
-        const descriptorIndex = this._layout!.descriptorIndices[binding];
-        return this._textures[descriptorIndex + index];
+        const descriptorIndex = this._layout$!.descriptorIndices[binding];
+        return this._textures$[descriptorIndex + index];
     }
 }
diff --git a/cocos/gfx/base/device.ts b/cocos/gfx/base/device.ts
index a430da35482..c5f4e49477e 100644
--- a/cocos/gfx/base/device.ts
+++ b/cocos/gfx/base/device.ts
@@ -58,7 +58,7 @@ export abstract class Device {
      * @zh 当前 GFX 使用的渲染 API。
      */
     get gfxAPI (): API {
-        return this._gfxAPI;
+        return this._gfxAPI$;
     }
 
     /**
@@ -66,7 +66,7 @@ export abstract class Device {
      * @zh GFX 默认队列。
      */
     get queue (): Queue {
-        return this._queue as Queue;
+        return this._queue$ as Queue;
     }
 
     /**
@@ -74,7 +74,7 @@ export abstract class Device {
      * @zh GFX 默认命令缓冲。
      */
     get commandBuffer (): CommandBuffer {
-        return this._cmdBuff as CommandBuffer;
+        return this._cmdBuff$ as CommandBuffer;
     }
 
     /**
@@ -82,7 +82,7 @@ export abstract class Device {
      * @zh 当前使用的swapchain的格式。
      */
     get swapchainFormat (): Format {
-        return this._swapchainFormat;
+        return this._swapchainFormat$;
     }
 
     /**
@@ -90,7 +90,7 @@ export abstract class Device {
      * @zh 渲染器描述。
      */
     get renderer (): string {
-        return this._renderer;
+        return this._renderer$;
     }
 
     /**
@@ -98,7 +98,7 @@ export abstract class Device {
      * @zh 厂商描述。
      */
     get vendor (): string {
-        return this._vendor;
+        return this._vendor$;
     }
 
     /**
@@ -106,7 +106,7 @@ export abstract class Device {
      * @zh 绘制调用次数。
      */
     get numDrawCalls (): number {
-        return this._numDrawCalls;
+        return this._numDrawCalls$;
     }
 
     /**
@@ -114,7 +114,7 @@ export abstract class Device {
      * @zh 绘制 Instance 数量。
      */
     get numInstances (): number {
-        return this._numInstances;
+        return this._numInstances$;
     }
 
     /**
@@ -122,7 +122,7 @@ export abstract class Device {
      * @zh 渲染三角形数量。
      */
     get numTris (): number {
-        return this._numTris;
+        return this._numTris$;
     }
 
     /**
@@ -130,7 +130,7 @@ export abstract class Device {
      * @zh 内存状态。
      */
     get memoryStatus (): MemoryStatus {
-        return this._memoryStatus;
+        return this._memoryStatus$;
     }
 
     /**
@@ -138,7 +138,7 @@ export abstract class Device {
      * @zh 当前设备能力数据。
      */
     get capabilities (): DeviceCaps {
-        return this._caps;
+        return this._caps$;
     }
 
     /**
@@ -146,27 +146,27 @@ export abstract class Device {
      * @zh 当前设备的绑定槽位映射关系。
      */
     get bindingMappingInfo (): BindingMappingInfo {
-        return this._bindingMappingInfo;
+        return this._bindingMappingInfo$;
     }
 
-    protected _gfxAPI = API.UNKNOWN;
-    protected _renderer = '';
-    protected _vendor = '';
-    protected _features = new Array<boolean>(Feature.COUNT);
-    protected _formatFeatures = new Array<FormatFeature>(Format.COUNT);
-    protected _queue: Queue | null = null;
-    protected _cmdBuff: CommandBuffer | null = null;
-    protected _numDrawCalls = 0;
-    protected _numInstances = 0;
-    protected _numTris = 0;
-    protected _memoryStatus = new MemoryStatus();
-    protected _caps = new DeviceCaps();
-    protected _bindingMappingInfo: BindingMappingInfo = new BindingMappingInfo();
-    protected _samplers = new Map<number, Sampler>();
-    protected _generalBarrierss = new Map<number, GeneralBarrier>();
-    protected _textureBarriers = new Map<number, TextureBarrier>();
-    protected _bufferBarriers = new Map<number, BufferBarrier>();
-    protected _swapchainFormat = Format.RGBA8;
+    protected _gfxAPI$ = API.UNKNOWN;
+    protected _renderer$ = '';
+    protected _vendor$ = '';
+    protected _features$ = new Array<boolean>(Feature.COUNT);
+    protected _formatFeatures$ = new Array<FormatFeature>(Format.COUNT);
+    protected _queue$: Queue | null = null;
+    protected _cmdBuff$: CommandBuffer | null = null;
+    protected _numDrawCalls$ = 0;
+    protected _numInstances$ = 0;
+    protected _numTris$ = 0;
+    protected _memoryStatus$ = new MemoryStatus();
+    protected _caps$ = new DeviceCaps();
+    protected _bindingMappingInfo$: BindingMappingInfo = new BindingMappingInfo();
+    protected _samplers$ = new Map<number, Sampler>();
+    protected _generalBarrierss$ = new Map<number, GeneralBarrier>();
+    protected _textureBarriers$ = new Map<number, TextureBarrier>();
+    protected _bufferBarriers$ = new Map<number, BufferBarrier>();
+    protected _swapchainFormat$ = Format.RGBA8;
 
     public static canvas: HTMLCanvasElement; // Hack for WebGL device initialization process
 
@@ -350,7 +350,7 @@ export abstract class Device {
      * @param feature The GFX feature to be queried.
      */
     public hasFeature (feature: Feature): boolean {
-        return this._features[feature];
+        return this._features$[feature];
     }
 
     /**
@@ -359,7 +359,7 @@ export abstract class Device {
      * @param format The GFX format to be queried.
      */
     public getFormatFeatures (format: Format): FormatFeature {
-        return this._formatFeatures[format];
+        return this._formatFeatures$[format];
     }
 
     /**
@@ -384,10 +384,10 @@ export abstract class Device {
 }
 
 export class DefaultResource {
-    private _texture2D: Texture | null = null;
-    private _texture3D: Texture | null = null;
-    private _textureCube: Texture | null = null;
-    private _texture2DArray: Texture | null = null;
+    private _texture2D$: Texture | null = null;
+    private _texture3D$: Texture | null = null;
+    private _textureCube$: Texture | null = null;
+    private _texture2DArray$: Texture | null = null;
 
     constructor (device: Device) {
         const bufferSize = 64;
@@ -395,7 +395,7 @@ export class DefaultResource {
         const buffer = new Uint8Array(bufferSize);
         buffer.fill(255);
         if (device.capabilities.maxTextureSize >= 2) {
-            this._texture2D = device.createTexture(new TextureInfo(
+            this._texture2D$ = device.createTexture(new TextureInfo(
                 TextureType.TEX2D,
                 TextureUsageBit.STORAGE | TextureUsageBit.SAMPLED,
                 Format.RGBA8,
@@ -404,10 +404,10 @@ export class DefaultResource {
                 TextureFlagBit.NONE,
             ));
             const copyRegion = new BufferTextureCopy(0, 0, 0, new Offset(0, 0, 0), new Extent(2, 2, 1));
-            device.copyBuffersToTexture([buffer], this._texture2D, [copyRegion]);
+            device.copyBuffersToTexture([buffer], this._texture2D$, [copyRegion]);
         }
         if (device.capabilities.maxTextureSize >= 2) {
-            this._textureCube = device.createTexture(new TextureInfo(
+            this._textureCube$ = device.createTexture(new TextureInfo(
                 TextureType.CUBE,
                 TextureUsageBit.STORAGE | TextureUsageBit.SAMPLED,
                 Format.RGBA8,
@@ -417,20 +417,20 @@ export class DefaultResource {
                 6,
             ));
             const copyRegion = new BufferTextureCopy(0, 0, 0, new Offset(0, 0, 0), new Extent(2, 2, 1));
-            device.copyBuffersToTexture([buffer], this._textureCube, [copyRegion]);
+            device.copyBuffersToTexture([buffer], this._textureCube$, [copyRegion]);
             copyRegion.texSubres.baseArrayLayer = 1;
-            device.copyBuffersToTexture([buffer], this._textureCube, [copyRegion]);
+            device.copyBuffersToTexture([buffer], this._textureCube$, [copyRegion]);
             copyRegion.texSubres.baseArrayLayer = 2;
-            device.copyBuffersToTexture([buffer], this._textureCube, [copyRegion]);
+            device.copyBuffersToTexture([buffer], this._textureCube$, [copyRegion]);
             copyRegion.texSubres.baseArrayLayer = 3;
-            device.copyBuffersToTexture([buffer], this._textureCube, [copyRegion]);
+            device.copyBuffersToTexture([buffer], this._textureCube$, [copyRegion]);
             copyRegion.texSubres.baseArrayLayer = 4;
-            device.copyBuffersToTexture([buffer], this._textureCube, [copyRegion]);
+            device.copyBuffersToTexture([buffer], this._textureCube$, [copyRegion]);
             copyRegion.texSubres.baseArrayLayer = 5;
-            device.copyBuffersToTexture([buffer], this._textureCube, [copyRegion]);
+            device.copyBuffersToTexture([buffer], this._textureCube$, [copyRegion]);
         }
         if (device.capabilities.max3DTextureSize >= 2) {
-            this._texture3D = device.createTexture(new TextureInfo(
+            this._texture3D$ = device.createTexture(new TextureInfo(
                 TextureType.TEX3D,
                 TextureUsageBit.STORAGE | TextureUsageBit.SAMPLED,
                 Format.RGBA8,
@@ -443,10 +443,10 @@ export class DefaultResource {
                 2,
             ));
             const copyRegion = new BufferTextureCopy(0, 0, 0, new Offset(0, 0, 0), new Extent(2, 2, 2), new TextureSubresLayers(0, 0, 1));
-            device.copyBuffersToTexture([buffer], this._texture3D, [copyRegion]);
+            device.copyBuffersToTexture([buffer], this._texture3D$, [copyRegion]);
         }
         if (device.capabilities.maxArrayTextureLayers >= 2) {
-            this._texture2DArray = device.createTexture(new TextureInfo(
+            this._texture2DArray$ = device.createTexture(new TextureInfo(
                 TextureType.TEX2D_ARRAY,
                 TextureUsageBit.STORAGE | TextureUsageBit.SAMPLED,
                 Format.RGBA8,
@@ -456,18 +456,18 @@ export class DefaultResource {
                 2,
             ));
             const copyRegion = new BufferTextureCopy(0, 0, 0, new Offset(0, 0, 0), new Extent(2, 2, 1), new TextureSubresLayers(0, 0, 1));
-            device.copyBuffersToTexture([buffer], this._texture2DArray, [copyRegion]);
+            device.copyBuffersToTexture([buffer], this._texture2DArray$, [copyRegion]);
             copyRegion.texSubres.baseArrayLayer = 1;
-            device.copyBuffersToTexture([buffer], this._texture2DArray, [copyRegion]);
+            device.copyBuffersToTexture([buffer], this._texture2DArray$, [copyRegion]);
         }
     }
 
     public getTexture (type: TextureType): Texture | null {
         switch (type) {
-        case TextureType.TEX2D: return this._texture2D;
-        case TextureType.TEX3D: return this._texture3D;
-        case TextureType.CUBE: return this._textureCube;
-        case TextureType.TEX2D_ARRAY: return this._texture2DArray;
+        case TextureType.TEX2D: return this._texture2D$;
+        case TextureType.TEX3D: return this._texture3D$;
+        case TextureType.CUBE: return this._textureCube$;
+        case TextureType.TEX2D_ARRAY: return this._texture2DArray$;
         default: return null;
         }
     }
diff --git a/cocos/gfx/base/framebuffer.ts b/cocos/gfx/base/framebuffer.ts
index 9f41d10e52f..c7644841e60 100644
--- a/cocos/gfx/base/framebuffer.ts
+++ b/cocos/gfx/base/framebuffer.ts
@@ -36,7 +36,7 @@ export abstract class Framebuffer extends GFXObject {
      * @zh GFX 渲染过程。
      */
     public get renderPass (): RenderPass {
-        return this._renderPass!;
+        return this._renderPass$!;
     }
 
     /**
@@ -44,7 +44,7 @@ export abstract class Framebuffer extends GFXObject {
      * @zh 颜色纹理视图数组。
      */
     public get colorTextures (): (Texture | null)[] {
-        return this._colorTextures;
+        return this._colorTextures$;
     }
 
     /**
@@ -52,7 +52,7 @@ export abstract class Framebuffer extends GFXObject {
      * @zh 深度模板纹理视图。
      */
     public get depthStencilTexture (): Texture | null {
-        return this._depthStencilTexture;
+        return this._depthStencilTexture$;
     }
 
     public get width (): number {
@@ -61,7 +61,7 @@ export abstract class Framebuffer extends GFXObject {
         } else if (this.depthStencilTexture) {
             return this.depthStencilTexture.width;
         }
-        return this._width;
+        return this._width$;
     }
 
     public get height (): number {
@@ -70,18 +70,18 @@ export abstract class Framebuffer extends GFXObject {
         } else if (this.depthStencilTexture) {
             return this.depthStencilTexture.height;
         }
-        return this._height;
+        return this._height$;
     }
 
     public get needRebuild (): boolean {
         return false;
     }
 
-    protected _renderPass: RenderPass | null = null;
-    protected _colorTextures: (Texture | null)[] = [];
-    protected _depthStencilTexture: Texture | null = null;
-    protected _width: number = 0;
-    protected _height: number = 0;
+    protected _renderPass$: RenderPass | null = null;
+    protected _colorTextures$: (Texture | null)[] = [];
+    protected _depthStencilTexture$: Texture | null = null;
+    protected _width$: number = 0;
+    protected _height$: number = 0;
 
     constructor () {
         super(ObjectType.FRAMEBUFFER);
diff --git a/cocos/gfx/base/input-assembler.ts b/cocos/gfx/base/input-assembler.ts
index 84312b9aa3b..208652875b2 100644
--- a/cocos/gfx/base/input-assembler.ts
+++ b/cocos/gfx/base/input-assembler.ts
@@ -22,7 +22,7 @@
  THE SOFTWARE.
 */
 
-import { murmurhash2_32_gc } from '../../core';
+import { murmurhash2_32_gc } from '../../core/algorithm/murmurhash2_gc';
 import { Buffer } from './buffer';
 import { Attribute, GFXObject, ObjectType, InputAssemblerInfo, DrawInfo } from './define';
 
@@ -36,7 +36,7 @@ export abstract class InputAssembler extends GFXObject {
      * @zh 顶点属性数组。
      */
     get attributes (): Attribute[] {
-        return this._attributes;
+        return this._attributes$;
     }
 
     /**
@@ -44,7 +44,7 @@ export abstract class InputAssembler extends GFXObject {
      * @zh 顶点缓冲数组。
      */
     get vertexBuffers (): Buffer[] {
-        return this._vertexBuffers;
+        return this._vertexBuffers$;
     }
 
     /**
@@ -52,7 +52,7 @@ export abstract class InputAssembler extends GFXObject {
      * @zh 索引缓冲。
      */
     get indexBuffer (): Buffer | null {
-        return this._indexBuffer;
+        return this._indexBuffer$;
     }
 
     /**
@@ -60,7 +60,7 @@ export abstract class InputAssembler extends GFXObject {
      * @zh 间接绘制缓冲。
      */
     get indirectBuffer (): Buffer | null {
-        return this._indirectBuffer;
+        return this._indirectBuffer$;
     }
 
     /**
@@ -68,7 +68,7 @@ export abstract class InputAssembler extends GFXObject {
      * @zh 获取顶点属性数组的哈希值。
      */
     get attributesHash (): number {
-        return this._attributesHash;
+        return this._attributesHash$;
     }
 
     /**
@@ -76,10 +76,10 @@ export abstract class InputAssembler extends GFXObject {
      * @zh 顶点数量。
      */
     set vertexCount (count: number) {
-        this._drawInfo.vertexCount = count;
+        this._drawInfo$.vertexCount = count;
     }
     get vertexCount (): number {
-        return this._drawInfo.vertexCount;
+        return this._drawInfo$.vertexCount;
     }
 
     /**
@@ -87,10 +87,10 @@ export abstract class InputAssembler extends GFXObject {
      * @zh 起始顶点。
      */
     set firstVertex (first: number) {
-        this._drawInfo.firstVertex = first;
+        this._drawInfo$.firstVertex = first;
     }
     get firstVertex (): number {
-        return this._drawInfo.firstVertex;
+        return this._drawInfo$.firstVertex;
     }
 
     /**
@@ -98,10 +98,10 @@ export abstract class InputAssembler extends GFXObject {
      * @zh 索引数量。
      */
     set indexCount (count: number) {
-        this._drawInfo.indexCount = count;
+        this._drawInfo$.indexCount = count;
     }
     get indexCount (): number {
-        return this._drawInfo.indexCount;
+        return this._drawInfo$.indexCount;
     }
 
     /**
@@ -109,10 +109,10 @@ export abstract class InputAssembler extends GFXObject {
      * @zh 起始索引。
      */
     set firstIndex (first: number) {
-        this._drawInfo.firstIndex = first;
+        this._drawInfo$.firstIndex = first;
     }
     get firstIndex (): number {
-        return this._drawInfo.firstIndex;
+        return this._drawInfo$.firstIndex;
     }
 
     /**
@@ -120,10 +120,10 @@ export abstract class InputAssembler extends GFXObject {
      * @zh 顶点偏移量。
      */
     set vertexOffset (offset: number) {
-        this._drawInfo.vertexOffset = offset;
+        this._drawInfo$.vertexOffset = offset;
     }
     get vertexOffset (): number {
-        return this._drawInfo.vertexOffset;
+        return this._drawInfo$.vertexOffset;
     }
 
     /**
@@ -131,10 +131,10 @@ export abstract class InputAssembler extends GFXObject {
      * @zh 实例数量。
      */
     set instanceCount (count: number) {
-        this._drawInfo.instanceCount = count;
+        this._drawInfo$.instanceCount = count;
     }
     get instanceCount (): number {
-        return this._drawInfo.instanceCount;
+        return this._drawInfo$.instanceCount;
     }
 
     /**
@@ -142,10 +142,10 @@ export abstract class InputAssembler extends GFXObject {
      * @zh 起始实例。
      */
     set firstInstance (first: number) {
-        this._drawInfo.firstInstance = first;
+        this._drawInfo$.firstInstance = first;
     }
     get firstInstance (): number {
-        return this._drawInfo.firstInstance;
+        return this._drawInfo$.firstInstance;
     }
 
     /**
@@ -153,7 +153,7 @@ export abstract class InputAssembler extends GFXObject {
      * @zh 设置渲染范围
      */
     set drawInfo (info: DrawInfo) {
-        this._drawInfo = info;
+        this._drawInfo$ = info;
     }
 
     /**
@@ -161,17 +161,17 @@ export abstract class InputAssembler extends GFXObject {
      * @zh 获取渲染范围
      */
     get drawInfo (): DrawInfo {
-        return this._drawInfo;
+        return this._drawInfo$;
     }
 
-    protected _attributes: Attribute[] = [];
-    protected _attributesHash = 0;
+    protected _attributes$: Attribute[] = [];
+    protected _attributesHash$ = 0;
 
-    protected _vertexBuffers: Buffer[] = [];
-    protected _indexBuffer: Buffer | null = null;
-    protected _indirectBuffer: Buffer | null = null;
+    protected _vertexBuffers$: Buffer[] = [];
+    protected _indexBuffer$: Buffer | null = null;
+    protected _indirectBuffer$: Buffer | null = null;
 
-    protected _drawInfo = new DrawInfo();
+    protected _drawInfo$ = new DrawInfo();
 
     constructor () {
         super(ObjectType.INPUT_ASSEMBLER);
@@ -183,8 +183,8 @@ export abstract class InputAssembler extends GFXObject {
      * @param stream The stream index of the vertex buffer.
      */
     public getVertexBuffer (stream = 0): Buffer | null {
-        if (stream < this._vertexBuffers.length) {
-            return this._vertexBuffers[stream];
+        if (stream < this._vertexBuffers$.length) {
+            return this._vertexBuffers$[stream];
         } else {
             return null;
         }
diff --git a/cocos/gfx/base/pipeline-layout.ts b/cocos/gfx/base/pipeline-layout.ts
index 677c4ac96d1..cfc649c399b 100644
--- a/cocos/gfx/base/pipeline-layout.ts
+++ b/cocos/gfx/base/pipeline-layout.ts
@@ -31,10 +31,10 @@ import { GFXObject, ObjectType, PipelineLayoutInfo } from './define';
  */
 export abstract class PipelineLayout extends GFXObject {
     get setLayouts (): DescriptorSetLayout[] {
-        return this._setLayouts;
+        return this._setLayouts$;
     }
 
-    protected _setLayouts: DescriptorSetLayout[] = [];
+    protected _setLayouts$: DescriptorSetLayout[] = [];
 
     constructor () {
         super(ObjectType.PIPELINE_LAYOUT);
diff --git a/cocos/gfx/base/pipeline-state.ts b/cocos/gfx/base/pipeline-state.ts
index a7f5848b05a..9dbca2e0528 100644
--- a/cocos/gfx/base/pipeline-state.ts
+++ b/cocos/gfx/base/pipeline-state.ts
@@ -65,7 +65,7 @@ export abstract class PipelineState extends GFXObject {
      * @zh GFX 着色器。
      */
     get shader (): Shader {
-        return this._shader!;
+        return this._shader$!;
     }
 
     /**
@@ -73,7 +73,7 @@ export abstract class PipelineState extends GFXObject {
      * @zh GFX 管线布局。
      */
     get pipelineLayout (): PipelineLayout {
-        return this._pipelineLayout!;
+        return this._pipelineLayout$!;
     }
 
     /**
@@ -81,7 +81,7 @@ export abstract class PipelineState extends GFXObject {
      * @zh GFX 图元模式。
      */
     get primitive (): PrimitiveMode {
-        return this._primitive;
+        return this._primitive$;
     }
 
     /**
@@ -89,7 +89,7 @@ export abstract class PipelineState extends GFXObject {
      * @zh GFX 光栅化状态。
      */
     get rasterizerState (): RasterizerState {
-        return this._rs;
+        return this._rs$;
     }
 
     /**
@@ -97,7 +97,7 @@ export abstract class PipelineState extends GFXObject {
      * @zh GFX 深度模板状态。
      */
     get depthStencilState (): DepthStencilState {
-        return this._dss;
+        return this._dss$;
     }
 
     /**
@@ -105,7 +105,7 @@ export abstract class PipelineState extends GFXObject {
      * @zh GFX 混合状态。
      */
     get blendState (): BlendState {
-        return this._bs;
+        return this._bs$;
     }
 
     /**
@@ -113,7 +113,7 @@ export abstract class PipelineState extends GFXObject {
      * @zh GFX 输入状态。
      */
     get inputState (): InputState {
-        return this._is as InputState;
+        return this._is$ as InputState;
     }
 
     /**
@@ -121,7 +121,7 @@ export abstract class PipelineState extends GFXObject {
      * @zh GFX 动态状态数组。
      */
     get dynamicStates (): DynamicStateFlags {
-        return this._dynamicStates;
+        return this._dynamicStates$;
     }
 
     /**
@@ -129,18 +129,18 @@ export abstract class PipelineState extends GFXObject {
      * @zh GFX 渲染过程。
      */
     get renderPass (): RenderPass {
-        return this._renderPass as RenderPass;
+        return this._renderPass$ as RenderPass;
     }
 
-    protected _shader: Shader | null = null;
-    protected _pipelineLayout: PipelineLayout | null = null;
-    protected _primitive: PrimitiveMode = PrimitiveMode.TRIANGLE_LIST;
-    protected _is: InputState | null = null;
-    protected _rs: RasterizerState = new RasterizerState();
-    protected _dss: DepthStencilState = new DepthStencilState();
-    protected _bs: BlendState = new BlendState();
-    protected _dynamicStates: DynamicStateFlags = DynamicStateFlagBit.NONE;
-    protected _renderPass: RenderPass | null = null;
+    protected _shader$: Shader | null = null;
+    protected _pipelineLayout$: PipelineLayout | null = null;
+    protected _primitive$: PrimitiveMode = PrimitiveMode.TRIANGLE_LIST;
+    protected _is$: InputState | null = null;
+    protected _rs$: RasterizerState = new RasterizerState();
+    protected _dss$: DepthStencilState = new DepthStencilState();
+    protected _bs$: BlendState = new BlendState();
+    protected _dynamicStates$: DynamicStateFlags = DynamicStateFlagBit.NONE;
+    protected _renderPass$: RenderPass | null = null;
 
     constructor () {
         super(ObjectType.PIPELINE_STATE);
diff --git a/cocos/gfx/base/pipeline-sub-state.jsb.ts b/cocos/gfx/base/pipeline-sub-state.jsb.ts
index 4ab1af2e558..e53d035f168 100644
--- a/cocos/gfx/base/pipeline-sub-state.jsb.ts
+++ b/cocos/gfx/base/pipeline-sub-state.jsb.ts
@@ -66,19 +66,19 @@ function watchArrayElementsField<S, T> (self: S, list: T[], eleField: string, ca
 }
 
 export class RasterizerState {
-    protected _nativeObj;
-    protected _isDiscard: boolean = false;
-    protected _polygonMode: PolygonMode = PolygonMode.FILL;
-    protected _shadeModel: ShadeModel = ShadeModel.GOURAND;
-    protected _cullMode: CullMode = CullMode.BACK;
-    protected _isFrontFaceCCW: boolean = true;
-    protected _depthBiasEnabled: boolean = false;
-    protected _depthBias: number = 0;
-    protected _depthBiasClamp: number = 0.0;
-    protected _depthBiasSlop: number = 0.0;
-    protected _isDepthClip: boolean = true;
-    protected _isMultisample: boolean = false;
-    protected _lineWidth: number = 1.0;
+    protected _nativeObj$;
+    protected _isDiscard$: boolean = false;
+    protected _polygonMode$: PolygonMode = PolygonMode.FILL;
+    protected _shadeModel$: ShadeModel = ShadeModel.GOURAND;
+    protected _cullMode$: CullMode = CullMode.BACK;
+    protected _isFrontFaceCCW$: boolean = true;
+    protected _depthBiasEnabled$: boolean = false;
+    protected _depthBias$: number = 0;
+    protected _depthBiasClamp$: number = 0.0;
+    protected _depthBiasSlop$: number = 0.0;
+    protected _isDepthClip$: boolean = true;
+    protected _isMultisample$: boolean = false;
+    protected _lineWidth$: number = 1.0;
     constructor (
         isDiscard: boolean = false,
         polygonMode: PolygonMode = PolygonMode.FILL,
@@ -93,84 +93,84 @@ export class RasterizerState {
         isMultisample: boolean = false,
         lineWidth: number = 1.0,
     ) {
-        this._nativeObj = new gfx.RasterizerState();
+        this._nativeObj$ = new gfx.RasterizerState();
         this.assignProperties(isDiscard, polygonMode, shadeModel, cullMode, isFrontFaceCCW,
             depthBiasEnabled, depthBias, depthBiasClamp, depthBiasSlop, isDepthClip, isMultisample, lineWidth);
     }
 
     get native () {
-        return this._nativeObj;
+        return this._nativeObj$;
     }
 
     get isDiscard (): boolean {
-        return this._isDiscard;
+        return this._isDiscard$;
     }
     set isDiscard (val: boolean) {
-        this._isDiscard = val;
-        this._nativeObj.isDiscard = val;
+        this._isDiscard$ = val;
+        this._nativeObj$.isDiscard = val;
     }
-    get polygonMode (): PolygonMode { return this._polygonMode; }
+    get polygonMode (): PolygonMode { return this._polygonMode$; }
     set polygonMode (val: PolygonMode) {
-        this._polygonMode = val;
-        this._nativeObj.polygonMode = val;
+        this._polygonMode$ = val;
+        this._nativeObj$.polygonMode = val;
     }
-    get shadeModel (): ShadeModel { return this._shadeModel; }
+    get shadeModel (): ShadeModel { return this._shadeModel$; }
     set shadeModel (val: ShadeModel) {
-        this._shadeModel = val;
-        this._nativeObj.shadeModel = val;
+        this._shadeModel$ = val;
+        this._nativeObj$.shadeModel = val;
     }
-    get cullMode (): CullMode { return this._cullMode; }
+    get cullMode (): CullMode { return this._cullMode$; }
     set cullMode (val: CullMode) {
-        this._cullMode = val;
-        this._nativeObj.cullMode = val;
+        this._cullMode$ = val;
+        this._nativeObj$.cullMode = val;
     }
     get isFrontFaceCCW (): boolean {
-        return this._isFrontFaceCCW;
+        return this._isFrontFaceCCW$;
     }
     set isFrontFaceCCW (val: boolean) {
-        this._isFrontFaceCCW = val;
-        this._nativeObj.isFrontFaceCCW = val;
+        this._isFrontFaceCCW$ = val;
+        this._nativeObj$.isFrontFaceCCW = val;
     }
     get depthBiasEnabled (): boolean {
-        return this._depthBiasEnabled;
+        return this._depthBiasEnabled$;
     }
     set depthBiasEnabled (val: boolean) {
-        this._depthBiasEnabled = val;
-        this._nativeObj.depthBiasEnabled = val;
+        this._depthBiasEnabled$ = val;
+        this._nativeObj$.depthBiasEnabled = val;
     }
-    get depthBias (): number { return this._depthBias; }
+    get depthBias (): number { return this._depthBias$; }
     set depthBias (val: number) {
-        this._depthBias = val;
-        this._nativeObj.depthBias = val;
+        this._depthBias$ = val;
+        this._nativeObj$.depthBias = val;
     }
-    get depthBiasClamp (): number { return this._depthBiasClamp; }
+    get depthBiasClamp (): number { return this._depthBiasClamp$; }
     set depthBiasClamp (val: number) {
-        this._depthBiasClamp = val;
-        this._nativeObj.depthBiasClamp = val;
+        this._depthBiasClamp$ = val;
+        this._nativeObj$.depthBiasClamp = val;
     }
-    get depthBiasSlop (): number { return this._depthBiasSlop; }
+    get depthBiasSlop (): number { return this._depthBiasSlop$; }
     set depthBiasSlop (val: number) {
-        this._depthBiasSlop = val;
-        this._nativeObj.depthBiasSlop = val;
+        this._depthBiasSlop$ = val;
+        this._nativeObj$.depthBiasSlop = val;
     }
     get isDepthClip (): boolean {
-        return this._isDepthClip;
+        return this._isDepthClip$;
     }
     set isDepthClip (val: boolean) {
-        this._isDepthClip = val;
-        this._nativeObj.isDepthClip = val;
+        this._isDepthClip$ = val;
+        this._nativeObj$.isDepthClip = val;
     }
     get isMultisample (): boolean {
-        return this._isMultisample;
+        return this._isMultisample$;
     }
     set isMultisample (val: boolean) {
-        this._isMultisample = val;
-        this._nativeObj.isMultisample = val;
+        this._isMultisample$ = val;
+        this._nativeObj$.isMultisample = val;
     }
-    get lineWidth (): number { return this._lineWidth; }
+    get lineWidth (): number { return this._lineWidth$; }
     set lineWidth (val: number) {
-        this._lineWidth = val;
-        this._nativeObj.lineWidth = val;
+        this._lineWidth$ = val;
+        this._nativeObj$.lineWidth = val;
     }
 
     public reset () {
@@ -185,7 +185,7 @@ export class RasterizerState {
     }
 
     public destroy () {
-        this._nativeObj = null;
+        this._nativeObj$ = null;
     }
 
     private assignProperties (
@@ -222,26 +222,26 @@ export class RasterizerState {
  * @zh GFX 深度模板状态。
  */
 export class DepthStencilState {
-    protected _nativeObj;
-    protected _depthTest: boolean = true;
-    protected _depthWrite: boolean = true;
-    protected _depthFunc: ComparisonFunc = ComparisonFunc.LESS;
-    protected _stencilTestFront: boolean = false;
-    protected _stencilFuncFront: ComparisonFunc = ComparisonFunc.ALWAYS;
-    protected _stencilReadMaskFront: number = 0xffff;
-    protected _stencilWriteMaskFront: number = 0xffff;
-    protected _stencilFailOpFront: StencilOp = StencilOp.KEEP;
-    protected _stencilZFailOpFront: StencilOp = StencilOp.KEEP;
-    protected _stencilPassOpFront: StencilOp = StencilOp.KEEP;
-    protected _stencilRefFront: number = 1;
-    protected _stencilTestBack: boolean = false;
-    protected _stencilFuncBack: ComparisonFunc = ComparisonFunc.ALWAYS;
-    protected _stencilReadMaskBack: number = 0xffff;
-    protected _stencilWriteMaskBack: number = 0xffff;
-    protected _stencilFailOpBack: StencilOp = StencilOp.KEEP;
-    protected _stencilZFailOpBack: StencilOp = StencilOp.KEEP;
-    protected _stencilPassOpBack: StencilOp = StencilOp.KEEP;
-    protected _stencilRefBack: number = 1;
+    protected _nativeObj$;
+    protected _depthTest$: boolean = true;
+    protected _depthWrite$: boolean = true;
+    protected _depthFunc$: ComparisonFunc = ComparisonFunc.LESS;
+    protected _stencilTestFront$: boolean = false;
+    protected _stencilFuncFront$: ComparisonFunc = ComparisonFunc.ALWAYS;
+    protected _stencilReadMaskFront$: number = 0xffff;
+    protected _stencilWriteMaskFront$: number = 0xffff;
+    protected _stencilFailOpFront$: StencilOp = StencilOp.KEEP;
+    protected _stencilZFailOpFront$: StencilOp = StencilOp.KEEP;
+    protected _stencilPassOpFront$: StencilOp = StencilOp.KEEP;
+    protected _stencilRefFront$: number = 1;
+    protected _stencilTestBack$: boolean = false;
+    protected _stencilFuncBack$: ComparisonFunc = ComparisonFunc.ALWAYS;
+    protected _stencilReadMaskBack$: number = 0xffff;
+    protected _stencilWriteMaskBack$: number = 0xffff;
+    protected _stencilFailOpBack$: StencilOp = StencilOp.KEEP;
+    protected _stencilZFailOpBack$: StencilOp = StencilOp.KEEP;
+    protected _stencilPassOpBack$: StencilOp = StencilOp.KEEP;
+    protected _stencilRefBack$: number = 1;
     constructor (
         depthTest: boolean = true,
         depthWrite: boolean = true,
@@ -263,7 +263,7 @@ export class DepthStencilState {
         stencilPassOpBack: StencilOp = StencilOp.KEEP,
         stencilRefBack: number = 1,
     ) {
-        this._nativeObj = new gfx.DepthStencilState();
+        this._nativeObj$ = new gfx.DepthStencilState();
         this.assignProperties(depthTest, depthWrite, depthFunc, stencilTestFront, stencilFuncFront, stencilReadMaskFront,
             stencilWriteMaskFront, stencilFailOpFront, stencilZFailOpFront, stencilPassOpFront, stencilRefFront,
             stencilTestBack, stencilFuncBack, stencilReadMaskBack, stencilWriteMaskBack, stencilFailOpBack,
@@ -271,111 +271,111 @@ export class DepthStencilState {
     }
 
     get native () {
-        return this._nativeObj;
+        return this._nativeObj$;
     }
 
     get depthTest (): boolean {
-        return this._depthTest;
+        return this._depthTest$;
     }
     set depthTest (val: boolean) {
-        this._depthTest = val;
-        this._nativeObj.depthTest = val;
+        this._depthTest$ = val;
+        this._nativeObj$.depthTest = val;
     }
     get depthWrite (): boolean {
-        return this._depthWrite;
+        return this._depthWrite$;
     }
     set depthWrite (val: boolean) {
-        this._depthWrite = val;
-        this._nativeObj.depthWrite = val;
+        this._depthWrite$ = val;
+        this._nativeObj$.depthWrite = val;
     }
-    get depthFunc (): ComparisonFunc { return this._depthFunc; }
+    get depthFunc (): ComparisonFunc { return this._depthFunc$; }
     set depthFunc (val: ComparisonFunc) {
-        this._depthFunc = val;
-        this._nativeObj.depthFunc = val;
+        this._depthFunc$ = val;
+        this._nativeObj$.depthFunc = val;
     }
     get stencilTestFront (): boolean {
-        return this._stencilTestFront;
+        return this._stencilTestFront$;
     }
     set stencilTestFront (val: boolean) {
-        this._stencilTestFront = val;
-        this._nativeObj.stencilTestFront = val;
+        this._stencilTestFront$ = val;
+        this._nativeObj$.stencilTestFront = val;
     }
-    get stencilFuncFront (): ComparisonFunc { return this._stencilFuncFront; }
+    get stencilFuncFront (): ComparisonFunc { return this._stencilFuncFront$; }
     set stencilFuncFront (val: ComparisonFunc) {
-        this._stencilFuncFront = val;
-        this._nativeObj.stencilFuncFront = val;
+        this._stencilFuncFront$ = val;
+        this._nativeObj$.stencilFuncFront = val;
     }
-    get stencilReadMaskFront (): number { return this._stencilReadMaskFront; }
+    get stencilReadMaskFront (): number { return this._stencilReadMaskFront$; }
     set stencilReadMaskFront (val: number) {
-        this._stencilReadMaskFront = val;
-        this._nativeObj.stencilReadMaskFront = val;
+        this._stencilReadMaskFront$ = val;
+        this._nativeObj$.stencilReadMaskFront = val;
     }
-    get stencilWriteMaskFront (): number { return this._stencilWriteMaskFront; }
+    get stencilWriteMaskFront (): number { return this._stencilWriteMaskFront$; }
     set stencilWriteMaskFront (val: number) {
-        this._stencilWriteMaskFront = val;
-        this._nativeObj.stencilWriteMaskFront = val;
+        this._stencilWriteMaskFront$ = val;
+        this._nativeObj$.stencilWriteMaskFront = val;
     }
-    get stencilFailOpFront (): StencilOp { return this._stencilFailOpFront; }
+    get stencilFailOpFront (): StencilOp { return this._stencilFailOpFront$; }
     set stencilFailOpFront (val: StencilOp) {
-        this._stencilFailOpFront = val;
-        this._nativeObj.stencilFailOpFront = val;
+        this._stencilFailOpFront$ = val;
+        this._nativeObj$.stencilFailOpFront = val;
     }
-    get stencilZFailOpFront (): StencilOp { return this._stencilZFailOpFront; }
+    get stencilZFailOpFront (): StencilOp { return this._stencilZFailOpFront$; }
     set stencilZFailOpFront (val: StencilOp) {
-        this._stencilZFailOpFront = val;
-        this._nativeObj.stencilZFailOpFront = val;
+        this._stencilZFailOpFront$ = val;
+        this._nativeObj$.stencilZFailOpFront = val;
     }
-    get stencilPassOpFront (): StencilOp { return this._stencilPassOpFront; }
+    get stencilPassOpFront (): StencilOp { return this._stencilPassOpFront$; }
     set stencilPassOpFront (val: StencilOp) {
-        this._stencilPassOpFront = val;
-        this._nativeObj.stencilPassOpFront = val;
+        this._stencilPassOpFront$ = val;
+        this._nativeObj$.stencilPassOpFront = val;
     }
-    get stencilRefFront (): number { return this._stencilRefFront; }
+    get stencilRefFront (): number { return this._stencilRefFront$; }
     set stencilRefFront (val: number) {
-        this._stencilRefFront = val;
-        this._nativeObj.stencilRefFront = val;
+        this._stencilRefFront$ = val;
+        this._nativeObj$.stencilRefFront = val;
     }
     get stencilTestBack (): boolean {
-        return this._stencilTestBack;
+        return this._stencilTestBack$;
     }
     set stencilTestBack (val: boolean) {
-        this._stencilTestBack = val;
-        this._nativeObj.stencilTestBack = val;
+        this._stencilTestBack$ = val;
+        this._nativeObj$.stencilTestBack = val;
     }
-    get stencilFuncBack (): ComparisonFunc { return this._stencilFuncBack; }
+    get stencilFuncBack (): ComparisonFunc { return this._stencilFuncBack$; }
     set stencilFuncBack (val: ComparisonFunc) {
-        this._stencilFuncBack = val;
-        this._nativeObj.stencilFuncBack = val;
+        this._stencilFuncBack$ = val;
+        this._nativeObj$.stencilFuncBack = val;
     }
-    get stencilReadMaskBack (): number { return this._stencilReadMaskBack; }
+    get stencilReadMaskBack (): number { return this._stencilReadMaskBack$; }
     set stencilReadMaskBack (val: number) {
-        this._stencilReadMaskBack = val;
-        this._nativeObj.stencilReadMaskBack = val;
+        this._stencilReadMaskBack$ = val;
+        this._nativeObj$.stencilReadMaskBack = val;
     }
-    get stencilWriteMaskBack (): number { return this._stencilWriteMaskBack; }
+    get stencilWriteMaskBack (): number { return this._stencilWriteMaskBack$; }
     set stencilWriteMaskBack (val: number) {
-        this._stencilWriteMaskBack = val;
-        this._nativeObj.stencilWriteMaskBack = val;
+        this._stencilWriteMaskBack$ = val;
+        this._nativeObj$.stencilWriteMaskBack = val;
     }
-    get stencilFailOpBack (): StencilOp { return this._stencilFailOpBack; }
+    get stencilFailOpBack (): StencilOp { return this._stencilFailOpBack$; }
     set stencilFailOpBack (val: StencilOp) {
-        this._stencilFailOpBack = val;
-        this._nativeObj.stencilFailOpBack = val;
+        this._stencilFailOpBack$ = val;
+        this._nativeObj$.stencilFailOpBack = val;
     }
-    get stencilZFailOpBack (): StencilOp { return this._stencilZFailOpBack; }
+    get stencilZFailOpBack (): StencilOp { return this._stencilZFailOpBack$; }
     set stencilZFailOpBack (val: StencilOp) {
-        this._stencilZFailOpBack = val;
-        this._nativeObj.stencilZFailOpBack = val;
+        this._stencilZFailOpBack$ = val;
+        this._nativeObj$.stencilZFailOpBack = val;
     }
-    get stencilPassOpBack (): StencilOp { return this._stencilPassOpBack; }
+    get stencilPassOpBack (): StencilOp { return this._stencilPassOpBack$; }
     set stencilPassOpBack (val: StencilOp) {
-        this._stencilPassOpBack = val;
-        this._nativeObj.stencilPassOpBack = val;
+        this._stencilPassOpBack$ = val;
+        this._nativeObj$.stencilPassOpBack = val;
     }
-    get stencilRefBack (): number { return this._stencilRefBack; }
+    get stencilRefBack (): number { return this._stencilRefBack$; }
     set stencilRefBack (val: number) {
-        this._stencilRefBack = val;
-        this._nativeObj.stencilRefBack = val;
+        this._stencilRefBack$ = val;
+        this._nativeObj$.stencilRefBack = val;
     }
 
     public reset () {
@@ -392,7 +392,7 @@ export class DepthStencilState {
     }
 
     public destroy () {
-        this._nativeObj = null;
+        this._nativeObj$ = null;
     }
 
     private assignProperties (
@@ -443,17 +443,17 @@ export class DepthStencilState {
  * @zh GFX 混合目标。
  */
 export class BlendTarget {
-    protected _nativeObj;
-    protected _blend: boolean = false;
-    protected _blendSrc: BlendFactor = BlendFactor.ONE;
-    protected _blendDst: BlendFactor = BlendFactor.ZERO;
-    protected _blendEq: BlendOp = BlendOp.ADD;
-    protected _blendSrcAlpha: BlendFactor = BlendFactor.ONE;
-    protected _blendDstAlpha: BlendFactor = BlendFactor.ZERO;
-    protected _blendAlphaEq: BlendOp = BlendOp.ADD;
-    protected _blendColorMask: ColorMask = ColorMask.ALL;
+    protected _nativeObj$;
+    protected _blend$: boolean = false;
+    protected _blendSrc$: BlendFactor = BlendFactor.ONE;
+    protected _blendDst$: BlendFactor = BlendFactor.ZERO;
+    protected _blendEq$: BlendOp = BlendOp.ADD;
+    protected _blendSrcAlpha$: BlendFactor = BlendFactor.ONE;
+    protected _blendDstAlpha$: BlendFactor = BlendFactor.ZERO;
+    protected _blendAlphaEq$: BlendOp = BlendOp.ADD;
+    protected _blendColorMask$: ColorMask = ColorMask.ALL;
     get native () {
-        return this._nativeObj;
+        return this._nativeObj$;
     }
 
     constructor (
@@ -466,52 +466,52 @@ export class BlendTarget {
         blendAlphaEq: BlendOp = BlendOp.ADD,
         blendColorMask: ColorMask = ColorMask.ALL,
     ) {
-        this._nativeObj = new gfx.BlendTarget();
+        this._nativeObj$ = new gfx.BlendTarget();
         this.assignProperties(blend, blendSrc, blendDst, blendEq,
             blendSrcAlpha, blendDstAlpha, blendAlphaEq, blendColorMask);
     }
 
     get blend (): boolean {
-        return this._blend;
+        return this._blend$;
     }
     set blend (val: boolean) {
-        this._blend = val;
-        this._nativeObj.blend = val;
+        this._blend$ = val;
+        this._nativeObj$.blend = val;
     }
-    get blendSrc (): BlendFactor { return this._blendSrc; }
+    get blendSrc (): BlendFactor { return this._blendSrc$; }
     set blendSrc (val: BlendFactor) {
-        this._blendSrc = val;
-        this._nativeObj.blendSrc = val;
+        this._blendSrc$ = val;
+        this._nativeObj$.blendSrc = val;
     }
-    get blendDst () { return this._blendDst; }
+    get blendDst () { return this._blendDst$; }
     set blendDst (val: BlendFactor) {
-        this._blendDst = val;
-        this._nativeObj.blendDst = val;
+        this._blendDst$ = val;
+        this._nativeObj$.blendDst = val;
     }
-    get blendEq (): BlendOp { return this._blendEq; }
+    get blendEq (): BlendOp { return this._blendEq$; }
     set blendEq (val: BlendOp) {
-        this._blendEq = val;
-        this._nativeObj.blendEq = val;
+        this._blendEq$ = val;
+        this._nativeObj$.blendEq = val;
     }
-    get blendSrcAlpha (): BlendFactor { return this._blendSrcAlpha; }
+    get blendSrcAlpha (): BlendFactor { return this._blendSrcAlpha$; }
     set blendSrcAlpha (val: BlendFactor) {
-        this._blendSrcAlpha = val;
-        this._nativeObj.blendSrcAlpha = val;
+        this._blendSrcAlpha$ = val;
+        this._nativeObj$.blendSrcAlpha = val;
     }
-    get blendDstAlpha (): BlendFactor { return this._blendDstAlpha; }
+    get blendDstAlpha (): BlendFactor { return this._blendDstAlpha$; }
     set blendDstAlpha (val: BlendFactor) {
-        this._blendDstAlpha = val;
-        this._nativeObj.blendDstAlpha = val;
+        this._blendDstAlpha$ = val;
+        this._nativeObj$.blendDstAlpha = val;
     }
-    get blendAlphaEq (): BlendOp { return this._blendAlphaEq; }
+    get blendAlphaEq (): BlendOp { return this._blendAlphaEq$; }
     set blendAlphaEq (val: BlendOp) {
-        this._blendAlphaEq = val;
-        this._nativeObj.blendAlphaEq = val;
+        this._blendAlphaEq$ = val;
+        this._nativeObj$.blendAlphaEq = val;
     }
-    get blendColorMask (): ColorMask { return this._blendColorMask; }
+    get blendColorMask (): ColorMask { return this._blendColorMask$; }
     set blendColorMask (val: ColorMask) {
-        this._blendColorMask = val;
-        this._nativeObj.blendColorMask = val;
+        this._blendColorMask$ = val;
+        this._nativeObj$.blendColorMask = val;
     }
 
     public reset () {
@@ -520,7 +520,7 @@ export class BlendTarget {
     }
 
     public destroy () {
-        this._nativeObj = null;
+        this._nativeObj$ = null;
     }
 
     public assign (target: RecursivePartial<BlendTarget>) {
@@ -555,9 +555,9 @@ export class BlendState {
     public targets!: BlendTarget[];
     // NOTE: not initialize in constructor
     private _blendColor!: Color;
-    protected _nativeObj;
-    protected _isA2C: boolean = false;
-    protected _isIndepend: boolean = false;
+    protected _nativeObj$;
+    protected _isA2C$: boolean = false;
+    protected _isIndepend$: boolean = false;
 
     private _setTargets (targets: BlendTarget[]) {
         this.targets = targets;
@@ -573,11 +573,11 @@ export class BlendState {
 
     private _syncTargetsToNativeObj (cachedFieldName: string) {
         const nativeTars = this.targets.map(target => { return target.native[cachedFieldName] || target.native; });
-        this._nativeObj.targets = nativeTars;
+        this._nativeObj$.targets = nativeTars;
     }
 
     get native () {
-        return this._nativeObj;
+        return this._nativeObj$;
     }
 
     constructor (
@@ -586,7 +586,7 @@ export class BlendState {
         blendColor: Color = new Color(),
         targets: BlendTarget[] = [new BlendTarget()],
     ) {
-        this._nativeObj = new gfx.BlendState();
+        this._nativeObj$ = new gfx.BlendState();
         this._setTargets(targets);
         this.blendColor = blendColor;
         this.isA2C = isA2C;
@@ -594,23 +594,23 @@ export class BlendState {
     }
 
     get isA2C (): boolean {
-        return this._isA2C;
+        return this._isA2C$;
     }
     set isA2C (val: boolean) {
-        this._isA2C = val;
-        this._nativeObj.isA2C = val;
+        this._isA2C$ = val;
+        this._nativeObj$.isA2C = val;
     }
     get isIndepend (): boolean {
-        return this._isIndepend;
+        return this._isIndepend$;
     }
     set isIndepend (val: boolean) {
-        this._isIndepend = val;
-        this._nativeObj.isIndepend = val;
+        this._isIndepend$ = val;
+        this._nativeObj$.isIndepend = val;
     }
     get blendColor (): Color { return this._blendColor; }
     set blendColor (color: Color) {
         this._blendColor = color;
-        this._nativeObj.blendColor = color;
+        this._nativeObj$.blendColor = color;
     }
 
     /**
@@ -651,6 +651,6 @@ export class BlendState {
         }
         // NOTE: Type 'null' is not assignable to type 'BlendTarget[]'.
         this.targets = null as any;
-        this._nativeObj = null;
+        this._nativeObj$ = null;
     }
 }
\ No newline at end of file
diff --git a/cocos/gfx/base/queue.ts b/cocos/gfx/base/queue.ts
index d80c02ed35a..d03a00deab1 100644
--- a/cocos/gfx/base/queue.ts
+++ b/cocos/gfx/base/queue.ts
@@ -35,10 +35,10 @@ export abstract class Queue extends GFXObject {
      * @zh 队列类型。
      */
     get type (): number {
-        return this._type;
+        return this._type$;
     }
 
-    protected _type: QueueType = QueueType.GRAPHICS;
+    protected _type$: QueueType = QueueType.GRAPHICS;
 
     constructor () {
         super(ObjectType.QUEUE);
diff --git a/cocos/gfx/base/render-pass.ts b/cocos/gfx/base/render-pass.ts
index 857c591c97f..f215f04c376 100644
--- a/cocos/gfx/base/render-pass.ts
+++ b/cocos/gfx/base/render-pass.ts
@@ -22,7 +22,7 @@
  THE SOFTWARE.
 */
 
-import { murmurhash2_32_gc } from '../../core';
+import { murmurhash2_32_gc } from '../../core/algorithm/murmurhash2_gc';
 import {
     GFXObject,
     ObjectType,
@@ -37,15 +37,15 @@ import {
  * @zh GFX 渲染过程。
  */
 export abstract class RenderPass extends GFXObject {
-    protected _colorInfos: ColorAttachment[] = [];
-    protected _depthStencilInfo: DepthStencilAttachment | null = null;
-    protected _subpasses: SubpassInfo[] = [];
-    protected _hash = 0;
+    protected _colorInfos$: ColorAttachment[] = [];
+    protected _depthStencilInfo$: DepthStencilAttachment | null = null;
+    protected _subpasses$: SubpassInfo[] = [];
+    protected _hash$ = 0;
 
-    get colorAttachments () : Readonly<ColorAttachment[]> { return this._colorInfos; }
-    get depthStencilAttachment () : Readonly<DepthStencilAttachment> | null { return this._depthStencilInfo; }
-    get subPasses () : Readonly<SubpassInfo[]> { return this._subpasses; }
-    get hash (): number { return this._hash; }
+    get colorAttachments (): Readonly<ColorAttachment[]> { return this._colorInfos$; }
+    get depthStencilAttachment (): Readonly<DepthStencilAttachment> | null { return this._depthStencilInfo$; }
+    get subPasses (): Readonly<SubpassInfo[]> { return this._subpasses$; }
+    get hash (): number { return this._hash$; }
 
     constructor () {
         super(ObjectType.RENDER_PASS);
@@ -54,35 +54,35 @@ export abstract class RenderPass extends GFXObject {
     // Based on render pass compatibility
     protected computeHash (): number {
         let res = '';
-        if (this._subpasses.length) {
-            for (let i = 0; i < this._subpasses.length; ++i) {
-                const subpass = this._subpasses[i];
+        if (this._subpasses$.length) {
+            for (let i = 0; i < this._subpasses$.length; ++i) {
+                const subpass = this._subpasses$[i];
                 if (subpass.inputs.length) {
                     res += 'ia';
                     for (let j = 0; j < subpass.inputs.length; ++j) {
-                        const ia = this._colorInfos[subpass.inputs[j]];
+                        const ia = this._colorInfos$[subpass.inputs[j]];
                         res += `,${ia.format},${ia.sampleCount}`;
                     }
                 }
                 if (subpass.colors.length) {
                     res += 'ca';
                     for (let j = 0; j < subpass.inputs.length; ++j) {
-                        const ca = this._colorInfos[subpass.inputs[j]];
+                        const ca = this._colorInfos$[subpass.inputs[j]];
                         res += `,${ca.format},${ca.sampleCount}`;
                     }
                 }
                 if (subpass.depthStencil >= 0) {
-                    const ds = this._colorInfos[subpass.depthStencil];
+                    const ds = this._colorInfos$[subpass.depthStencil];
                     res += `ds,${ds.format},${ds.sampleCount}`;
                 }
             }
         } else {
             res += 'ca';
-            for (let i = 0; i < this._colorInfos.length; ++i) {
-                const ca = this._colorInfos[i];
+            for (let i = 0; i < this._colorInfos$.length; ++i) {
+                const ca = this._colorInfos$[i];
                 res += `,${ca.format},${ca.sampleCount}`;
             }
-            const ds = this._depthStencilInfo;
+            const ds = this._depthStencilInfo$;
             if (ds) {
                 res += `ds,${ds.format},${ds.sampleCount}`;
             }
diff --git a/cocos/gfx/base/shader.ts b/cocos/gfx/base/shader.ts
index 23554d40d22..03f28c9c6b1 100644
--- a/cocos/gfx/base/shader.ts
+++ b/cocos/gfx/base/shader.ts
@@ -30,30 +30,30 @@ import { GFXObject, ObjectType, ShaderInfo, ShaderStage, UniformBlock, UniformSa
  */
 export abstract class Shader extends GFXObject {
     get name (): string {
-        return this._name;
+        return this._name$;
     }
 
     get attributes (): Attribute[] {
-        return this._attributes;
+        return this._attributes$;
     }
 
     get blocks (): UniformBlock[] {
-        return this._blocks;
+        return this._blocks$;
     }
 
     get samplers (): UniformSampler[] {
-        return this._samplers;
+        return this._samplers$;
     }
 
     get stages (): ShaderStage[] {
-        return this._stages;
+        return this._stages$;
     }
 
-    protected _name = '';
-    protected _stages: ShaderStage[] = [];
-    protected _attributes: Attribute[] = [];
-    protected _blocks: UniformBlock[] = [];
-    protected _samplers: UniformSampler[] = [];
+    protected _name$ = '';
+    protected _stages$: ShaderStage[] = [];
+    protected _attributes$: Attribute[] = [];
+    protected _blocks$: UniformBlock[] = [];
+    protected _samplers$: UniformSampler[] = [];
 
     constructor () {
         super(ObjectType.SHADER);
diff --git a/cocos/gfx/base/states/buffer-barrier.ts b/cocos/gfx/base/states/buffer-barrier.ts
index 3304a78ce27..43475b3074c 100644
--- a/cocos/gfx/base/states/buffer-barrier.ts
+++ b/cocos/gfx/base/states/buffer-barrier.ts
@@ -22,7 +22,7 @@
  THE SOFTWARE.
 */
 
-import { murmurhash2_32_gc } from '../../../core';
+import { murmurhash2_32_gc } from '../../../core/algorithm/murmurhash2_gc';
 import { GFXObject, ObjectType, BufferBarrierInfo } from '../define';
 
 /**
@@ -30,16 +30,16 @@ import { GFXObject, ObjectType, BufferBarrierInfo } from '../define';
  * @zh GFX buffer内存屏障。
  */
 export class BufferBarrier extends GFXObject {
-    get info (): Readonly<BufferBarrierInfo> { return this._info; }
-    get hash (): number { return this._hash; }
+    get info (): Readonly<BufferBarrierInfo> { return this._info$; }
+    get hash (): number { return this._hash$; }
 
-    protected _info: BufferBarrierInfo = new BufferBarrierInfo();
-    protected _hash = 0;
+    protected _info$: BufferBarrierInfo = new BufferBarrierInfo();
+    protected _hash$ = 0;
 
     constructor (info: Readonly<BufferBarrierInfo>, hash: number) {
         super(ObjectType.BUFFER_BARRIER);
-        this._info.copy(info);
-        this._hash = hash;
+        this._info$.copy(info);
+        this._hash$ = hash;
     }
 
     static computeHash (info: Readonly<BufferBarrierInfo>): number {
diff --git a/cocos/gfx/base/states/general-barrier.ts b/cocos/gfx/base/states/general-barrier.ts
index a271b06d8a6..bf0f7c2c6ca 100644
--- a/cocos/gfx/base/states/general-barrier.ts
+++ b/cocos/gfx/base/states/general-barrier.ts
@@ -22,7 +22,7 @@
  THE SOFTWARE.
 */
 
-import { murmurhash2_32_gc } from '../../../core';
+import { murmurhash2_32_gc } from '../../../core/algorithm/murmurhash2_gc';
 import { GFXObject, ObjectType, GeneralBarrierInfo } from '../define';
 
 /**
@@ -30,16 +30,16 @@ import { GFXObject, ObjectType, GeneralBarrierInfo } from '../define';
  * @zh GFX 全局内存屏障。
  */
 export class GeneralBarrier extends GFXObject {
-    get info (): Readonly<GeneralBarrierInfo> { return this._info; }
-    get hash (): number { return this._hash; }
+    get info (): Readonly<GeneralBarrierInfo> { return this._info$; }
+    get hash (): number { return this._hash$; }
 
-    protected _info: GeneralBarrierInfo = new GeneralBarrierInfo();
-    protected _hash = 0;
+    protected _info$: GeneralBarrierInfo = new GeneralBarrierInfo();
+    protected _hash$ = 0;
 
     constructor (info: Readonly<GeneralBarrierInfo>, hash: number) {
         super(ObjectType.GLOBAL_BARRIER);
-        this._info.copy(info);
-        this._hash = hash;
+        this._info$.copy(info);
+        this._hash$ = hash;
     }
 
     static computeHash (info: Readonly<GeneralBarrierInfo>): number {
diff --git a/cocos/gfx/base/states/sampler.ts b/cocos/gfx/base/states/sampler.ts
index 887339117a0..1469c22e9c6 100644
--- a/cocos/gfx/base/states/sampler.ts
+++ b/cocos/gfx/base/states/sampler.ts
@@ -29,16 +29,16 @@ import { Filter, GFXObject, ObjectType, SamplerInfo } from '../define';
  * @zh GFX 采样器。
  */
 export class Sampler extends GFXObject {
-    get info (): Readonly<SamplerInfo> { return this._info; }
-    get hash (): number { return this._hash; }
+    get info (): Readonly<SamplerInfo> { return this._info$; }
+    get hash (): number { return this._hash$; }
 
-    protected _info: SamplerInfo = new SamplerInfo();
-    protected _hash = 0;
+    protected _info$: SamplerInfo = new SamplerInfo();
+    protected _hash$ = 0;
 
     constructor (info: Readonly<SamplerInfo>, hash: number) {
         super(ObjectType.SAMPLER);
-        this._info.copy(info);
-        this._hash = hash;
+        this._info$.copy(info);
+        this._hash$ = hash;
     }
 
     static computeHash (info: Readonly<SamplerInfo>): Filter {
diff --git a/cocos/gfx/base/states/texture-barrier.ts b/cocos/gfx/base/states/texture-barrier.ts
index b4d754ab365..97d23609f9b 100644
--- a/cocos/gfx/base/states/texture-barrier.ts
+++ b/cocos/gfx/base/states/texture-barrier.ts
@@ -22,7 +22,7 @@
  THE SOFTWARE.
 */
 
-import { murmurhash2_32_gc } from '../../../core';
+import { murmurhash2_32_gc } from '../../../core/algorithm/murmurhash2_gc';
 import { GFXObject, ObjectType, TextureBarrierInfo } from '../define';
 
 /**
@@ -30,16 +30,16 @@ import { GFXObject, ObjectType, TextureBarrierInfo } from '../define';
  * @zh GFX 贴图内存屏障。
  */
 export class TextureBarrier extends GFXObject {
-    get info (): Readonly<TextureBarrierInfo> { return this._info; }
-    get hash (): number { return this._hash; }
+    get info (): Readonly<TextureBarrierInfo> { return this._info$; }
+    get hash (): number { return this._hash$; }
 
-    protected _info: TextureBarrierInfo = new TextureBarrierInfo();
-    protected _hash = 0;
+    protected _info$: TextureBarrierInfo = new TextureBarrierInfo();
+    protected _hash$ = 0;
 
     constructor (info: Readonly<TextureBarrierInfo>, hash: number) {
         super(ObjectType.TEXTURE_BARRIER);
-        this._info.copy(info);
-        this._hash = hash;
+        this._info$.copy(info);
+        this._hash$ = hash;
     }
 
     static computeHash (info: Readonly<TextureBarrierInfo>): number {
diff --git a/cocos/gfx/base/swapchain.ts b/cocos/gfx/base/swapchain.ts
index 1be61edf23a..ca7d6397367 100644
--- a/cocos/gfx/base/swapchain.ts
+++ b/cocos/gfx/base/swapchain.ts
@@ -35,7 +35,7 @@ export abstract class Swapchain extends GFXObject {
      * @zh 当前交换链的颜色缓冲。
      */
     get colorTexture (): Texture {
-        return this._colorTexture;
+        return this._colorTexture$;
     }
 
     /**
@@ -43,7 +43,7 @@ export abstract class Swapchain extends GFXObject {
      * @zh 当前交换链的深度模板缓冲。
      */
     get depthStencilTexture (): Texture {
-        return this._depthStencilTexture;
+        return this._depthStencilTexture$;
     }
 
     /**
@@ -51,20 +51,20 @@ export abstract class Swapchain extends GFXObject {
      * @zh 需要在投影矩阵中应用的表面变换。
      */
     get surfaceTransform (): SurfaceTransform {
-        return this._transform;
+        return this._transform$;
     }
 
     get width (): number {
-        return this._colorTexture.width;
+        return this._colorTexture$.width;
     }
 
     get height (): number {
-        return this._colorTexture.height;
+        return this._colorTexture$.height;
     }
 
-    protected _transform = SurfaceTransform.IDENTITY;
-    protected _colorTexture: Texture = null!;
-    protected _depthStencilTexture: Texture = null!;
+    protected _transform$ = SurfaceTransform.IDENTITY;
+    protected _colorTexture$: Texture = null!;
+    protected _depthStencilTexture$: Texture = null!;
 
     constructor () {
         super(ObjectType.SWAPCHAIN);
diff --git a/cocos/gfx/base/texture.ts b/cocos/gfx/base/texture.ts
index 81d4e10a792..18e9598e8f3 100644
--- a/cocos/gfx/base/texture.ts
+++ b/cocos/gfx/base/texture.ts
@@ -46,7 +46,7 @@ export abstract class Texture extends GFXObject {
      * @zh 纹理类型。
      */
     get type (): TextureType {
-        return this._info.type;
+        return this._info$.type;
     }
 
     /**
@@ -54,7 +54,7 @@ export abstract class Texture extends GFXObject {
      * @zh 纹理使用方式。
      */
     get usage (): TextureUsage {
-        return this._info.usage;
+        return this._info$.usage;
     }
 
     /**
@@ -62,7 +62,7 @@ export abstract class Texture extends GFXObject {
      * @zh 纹理格式。
      */
     get format (): Format {
-        return this._info.format;
+        return this._info$.format;
     }
 
     /**
@@ -70,7 +70,7 @@ export abstract class Texture extends GFXObject {
      * @zh 纹理宽度。
      */
     get width (): number {
-        return this._info.width;
+        return this._info$.width;
     }
 
     /**
@@ -78,7 +78,7 @@ export abstract class Texture extends GFXObject {
      * @zh 纹理高度。
      */
     get height (): number {
-        return this._info.height;
+        return this._info$.height;
     }
 
     /**
@@ -86,7 +86,7 @@ export abstract class Texture extends GFXObject {
      * @zh 纹理深度。
      */
     get depth (): number {
-        return this._info.depth;
+        return this._info$.depth;
     }
 
     /**
@@ -94,7 +94,7 @@ export abstract class Texture extends GFXObject {
      * @zh 纹理数组层数。
      */
     get layerCount (): number {
-        return this._info.layerCount;
+        return this._info$.layerCount;
     }
 
     /**
@@ -102,7 +102,7 @@ export abstract class Texture extends GFXObject {
      * @zh 纹理 mip 层级数。
      */
     get levelCount (): number {
-        return this._info.levelCount;
+        return this._info$.levelCount;
     }
 
     /**
@@ -110,7 +110,7 @@ export abstract class Texture extends GFXObject {
      * @zh 纹理采样数。
      */
     get samples (): SampleCount {
-        return this._info.samples;
+        return this._info$.samples;
     }
 
     /**
@@ -118,7 +118,7 @@ export abstract class Texture extends GFXObject {
      * @zh 纹理标识位。
      */
     get flags (): TextureFlags {
-        return this._info.flags;
+        return this._info$.flags;
     }
 
     /**
@@ -126,7 +126,7 @@ export abstract class Texture extends GFXObject {
      * @zh 纹理大小。
      */
     get size (): number {
-        return this._size;
+        return this._size$;
     }
 
     /**
@@ -134,7 +134,7 @@ export abstract class Texture extends GFXObject {
      * @zh 纹理信息。
      */
     get info (): Readonly<TextureInfo> {
-        return this._info;
+        return this._info$;
     }
 
     /**
@@ -142,7 +142,7 @@ export abstract class Texture extends GFXObject {
      * @zh 纹理视图信息。
      */
     get viewInfo (): Readonly<TextureViewInfo> {
-        return this._viewInfo;
+        return this._viewInfo$;
     }
 
     /**
@@ -150,15 +150,15 @@ export abstract class Texture extends GFXObject {
      * @zh 是否为纹理视图。
      */
     get isTextureView (): boolean {
-        return this._isTextureView;
+        return this._isTextureView$;
     }
 
-    protected _info: TextureInfo = new TextureInfo();
-    protected _viewInfo: TextureViewInfo = new TextureViewInfo();
+    protected _info$: TextureInfo = new TextureInfo();
+    protected _viewInfo$: TextureViewInfo = new TextureViewInfo();
 
-    protected _isPowerOf2 = false;
-    protected _isTextureView = false;
-    protected _size = 0;
+    protected _isPowerOf2$ = false;
+    protected _isTextureView$ = false;
+    protected _size$ = 0;
 
     constructor () {
         super(ObjectType.TEXTURE);
diff --git a/cocos/gfx/device-manager.ts b/cocos/gfx/device-manager.ts
index f09abaa21ce..7fc9b5f8c8b 100644
--- a/cocos/gfx/device-manager.ts
+++ b/cocos/gfx/device-manager.ts
@@ -23,8 +23,8 @@
  THE SOFTWARE.
 */
 
-import { EDITOR, JSB, WEBGPU } from 'internal:constants';
-import { cclegacy, getError, sys, screen, Settings, settings, errorID } from '../core';
+import { EDITOR, JSB } from 'internal:constants';
+import { cclegacy, getError, sys, screen, settings, errorID, SettingsCategory } from '../core';
 import { BindingMappingInfo, DeviceInfo, SwapchainInfo } from './base/define';
 import { Device } from './base/device';
 import { Swapchain } from './base/swapchain';
@@ -140,7 +140,7 @@ export class DeviceManager {
     public init (canvas: HTMLCanvasElement | null, bindingMappingInfo: BindingMappingInfo): boolean | Promise<boolean> {
         // Avoid setup to be called twice.
         if (this.initialized) { return true; }
-        const renderMode = settings.querySettings(Settings.Category.RENDERING, 'renderMode') as LegacyRenderMode;
+        const renderMode = settings.querySettings(SettingsCategory.RENDERING, 'renderMode') as LegacyRenderMode;
         this._canvas = canvas;
         if (this._canvas) { this._canvas.oncontextmenu = (): boolean => false; }
         this._renderType = this._determineRenderType(renderMode);
diff --git a/cocos/gfx/empty/empty-buffer.ts b/cocos/gfx/empty/empty-buffer.ts
index 798d3a77b1d..91d3af39665 100644
--- a/cocos/gfx/empty/empty-buffer.ts
+++ b/cocos/gfx/empty/empty-buffer.ts
@@ -28,22 +28,22 @@ import { Buffer } from '../base/buffer';
 export class EmptyBuffer extends Buffer {
     public initialize (info: Readonly<BufferInfo> | Readonly<BufferViewInfo>): void {
         if ('buffer' in info) { // buffer view
-            this._isBufferView = true;
+            this._isBufferView$ = true;
 
             const buffer = info.buffer as EmptyBuffer;
 
-            this._usage = buffer.usage;
-            this._memUsage = buffer.memUsage;
-            this._size = this._stride = info.range;
-            this._count = 1;
-            this._flags = buffer.flags;
+            this._usage$ = buffer.usage;
+            this._memUsage$ = buffer.memUsage;
+            this._size$ = this._stride$ = info.range;
+            this._count$ = 1;
+            this._flags$ = buffer.flags;
         } else { // native buffer
-            this._usage = info.usage;
-            this._memUsage = info.memUsage;
-            this._size = info.size;
-            this._stride = Math.max(info.stride || this._size, 1);
-            this._count = this._size / this._stride;
-            this._flags = info.flags;
+            this._usage$ = info.usage;
+            this._memUsage$ = info.memUsage;
+            this._size$ = info.size;
+            this._stride$ = Math.max(info.stride || this._size$, 1);
+            this._count$ = this._size$ / this._stride$;
+            this._flags$ = info.flags;
         }
     }
     public destroy (): void {}
diff --git a/cocos/gfx/empty/empty-command-buffer.ts b/cocos/gfx/empty/empty-command-buffer.ts
index 4355538a03b..67e1943574e 100644
--- a/cocos/gfx/empty/empty-command-buffer.ts
+++ b/cocos/gfx/empty/empty-command-buffer.ts
@@ -39,8 +39,8 @@ import { StencilFace, BufferSource, CommandBufferInfo, BufferTextureCopy, Color,
 
 export class EmptyCommandBuffer extends CommandBuffer {
     public initialize (info: Readonly<CommandBufferInfo>): void {
-        this._type = info.type;
-        this._queue = info.queue;
+        this._type$ = info.type;
+        this._queue$ = info.queue;
     }
     public destroy (): void {}
     public begin (renderPass?: RenderPass, subpass?: number, frameBuffer?: Framebuffer): void {}
diff --git a/cocos/gfx/empty/empty-descriptor-set-layout.ts b/cocos/gfx/empty/empty-descriptor-set-layout.ts
index 3e6c96b2923..17dbaa9ab83 100644
--- a/cocos/gfx/empty/empty-descriptor-set-layout.ts
+++ b/cocos/gfx/empty/empty-descriptor-set-layout.ts
@@ -27,7 +27,7 @@ import { DescriptorSetLayout } from '../base/descriptor-set-layout';
 
 export class EmptyDescriptorSetLayout extends DescriptorSetLayout {
     public initialize (info: Readonly<DescriptorSetLayoutInfo>): void {
-        Array.prototype.push.apply(this._bindings, info.bindings);
+        Array.prototype.push.apply(this._bindings$, info.bindings);
     }
     public destroy (): void {}
 }
diff --git a/cocos/gfx/empty/empty-descriptor-set.ts b/cocos/gfx/empty/empty-descriptor-set.ts
index 4f39ec49961..bb0bb52a6c1 100644
--- a/cocos/gfx/empty/empty-descriptor-set.ts
+++ b/cocos/gfx/empty/empty-descriptor-set.ts
@@ -27,7 +27,7 @@ import { DescriptorSetInfo } from '../base/define';
 
 export class EmptyDescriptorSet extends DescriptorSet {
     public initialize (info: Readonly<DescriptorSetInfo>): void {
-        this._layout = info.layout;
+        this._layout$ = info.layout;
     }
     public destroy (): void {}
     public update (): void {}
diff --git a/cocos/gfx/empty/empty-device.ts b/cocos/gfx/empty/empty-device.ts
index 7da46c3210d..3f28d3bd68f 100644
--- a/cocos/gfx/empty/empty-device.ts
+++ b/cocos/gfx/empty/empty-device.ts
@@ -65,12 +65,12 @@ export class EmptyDevice extends Device {
     private _swapchain: EmptySwapchain | null = null;
 
     public initialize (info: DeviceInfo): boolean {
-        this._gfxAPI = API.UNKNOWN;
+        this._gfxAPI$ = API.UNKNOWN;
 
-        this._bindingMappingInfo = info.bindingMappingInfo;
+        this._bindingMappingInfo$ = info.bindingMappingInfo;
 
-        this._queue = this.createQueue(new QueueInfo(QueueType.GRAPHICS));
-        this._cmdBuff = this.createCommandBuffer(new CommandBufferInfo(this._queue));
+        this._queue$ = this.createQueue(new QueueInfo(QueueType.GRAPHICS));
+        this._cmdBuff$ = this.createCommandBuffer(new CommandBufferInfo(this._queue$));
 
         debug('Empty device initialized.');
 
@@ -78,14 +78,14 @@ export class EmptyDevice extends Device {
     }
 
     public destroy (): void {
-        if (this._queue) {
-            this._queue.destroy();
-            this._queue = null;
+        if (this._queue$) {
+            this._queue$.destroy();
+            this._queue$ = null;
         }
 
-        if (this._cmdBuff) {
-            this._cmdBuff.destroy();
-            this._cmdBuff = null;
+        if (this._cmdBuff$) {
+            this._cmdBuff$.destroy();
+            this._cmdBuff$ = null;
         }
 
         this._swapchain = null;
@@ -182,10 +182,10 @@ export class EmptyDevice extends Device {
 
     public getSampler (info: Readonly<SamplerInfo>): Sampler {
         const hash = Sampler.computeHash(info);
-        if (!this._samplers.has(hash)) {
-            this._samplers.set(hash, new Sampler(info, hash));
+        if (!this._samplers$.has(hash)) {
+            this._samplers$.set(hash, new Sampler(info, hash));
         }
-        return this._samplers.get(hash)!;
+        return this._samplers$.get(hash)!;
     }
 
     public getSwapchains (): Readonly<Swapchain[]> {
@@ -194,26 +194,26 @@ export class EmptyDevice extends Device {
 
     public getGeneralBarrier (info: Readonly<GeneralBarrierInfo>): GeneralBarrier {
         const hash = GeneralBarrier.computeHash(info);
-        if (!this._generalBarrierss.has(hash)) {
-            this._generalBarrierss.set(hash, new GeneralBarrier(info, hash));
+        if (!this._generalBarrierss$.has(hash)) {
+            this._generalBarrierss$.set(hash, new GeneralBarrier(info, hash));
         }
-        return this._generalBarrierss.get(hash)!;
+        return this._generalBarrierss$.get(hash)!;
     }
 
     public getTextureBarrier (info: Readonly<TextureBarrierInfo>): TextureBarrier {
         const hash = TextureBarrier.computeHash(info);
-        if (!this._textureBarriers.has(hash)) {
-            this._textureBarriers.set(hash, new TextureBarrier(info, hash));
+        if (!this._textureBarriers$.has(hash)) {
+            this._textureBarriers$.set(hash, new TextureBarrier(info, hash));
         }
-        return this._textureBarriers.get(hash)!;
+        return this._textureBarriers$.get(hash)!;
     }
 
     public getBufferBarrier (info: Readonly<BufferBarrierInfo>): BufferBarrier {
         const hash = BufferBarrier.computeHash(info);
-        if (!this._bufferBarriers.has(hash)) {
-            this._bufferBarriers.set(hash, new BufferBarrier(info, hash));
+        if (!this._bufferBarriers$.has(hash)) {
+            this._bufferBarriers$.set(hash, new BufferBarrier(info, hash));
         }
-        return this._bufferBarriers.get(hash)!;
+        return this._bufferBarriers$.get(hash)!;
     }
 
     public copyBuffersToTexture (buffers: Readonly<ArrayBufferView[]>, texture: Texture, regions: Readonly<BufferTextureCopy[]>): void {
diff --git a/cocos/gfx/empty/empty-framebuffer.ts b/cocos/gfx/empty/empty-framebuffer.ts
index da61ec0f129..32200917415 100644
--- a/cocos/gfx/empty/empty-framebuffer.ts
+++ b/cocos/gfx/empty/empty-framebuffer.ts
@@ -27,9 +27,9 @@ import { Framebuffer } from '../base/framebuffer';
 
 export class EmptyFramebuffer extends Framebuffer {
     public initialize (info: Readonly<FramebufferInfo>): void {
-        this._renderPass = info.renderPass;
-        this._colorTextures = info.colorTextures || [];
-        this._depthStencilTexture = info.depthStencilTexture || null;
+        this._renderPass$ = info.renderPass;
+        this._colorTextures$ = info.colorTextures || [];
+        this._depthStencilTexture$ = info.depthStencilTexture || null;
     }
     public destroy (): void {}
 }
diff --git a/cocos/gfx/empty/empty-input-assembler.ts b/cocos/gfx/empty/empty-input-assembler.ts
index 3d9df167a46..9b83f35111e 100644
--- a/cocos/gfx/empty/empty-input-assembler.ts
+++ b/cocos/gfx/empty/empty-input-assembler.ts
@@ -27,19 +27,19 @@ import { InputAssembler } from '../base/input-assembler';
 
 export class EmptyInputAssembler extends InputAssembler {
     public initialize (info: Readonly<InputAssemblerInfo>): void {
-        this._attributes = info.attributes;
-        this._attributesHash = this.computeAttributesHash();
-        this._vertexBuffers = info.vertexBuffers;
+        this._attributes$ = info.attributes;
+        this._attributesHash$ = this.computeAttributesHash();
+        this._vertexBuffers$ = info.vertexBuffers;
 
         if (info.indexBuffer) {
-            this._indexBuffer = info.indexBuffer;
-            this._drawInfo.indexCount = this._indexBuffer.size / this._indexBuffer.stride;
-            this._drawInfo.firstIndex = 0;
+            this._indexBuffer$ = info.indexBuffer;
+            this._drawInfo$.indexCount = this._indexBuffer$.size / this._indexBuffer$.stride;
+            this._drawInfo$.firstIndex = 0;
         } else {
-            const vertBuff = this._vertexBuffers[0];
-            this._drawInfo.vertexCount = vertBuff.size / vertBuff.stride;
-            this._drawInfo.firstVertex = 0;
-            this._drawInfo.vertexOffset = 0;
+            const vertBuff = this._vertexBuffers$[0];
+            this._drawInfo$.vertexCount = vertBuff.size / vertBuff.stride;
+            this._drawInfo$.firstVertex = 0;
+            this._drawInfo$.vertexOffset = 0;
         }
     }
     public destroy (): void {}
diff --git a/cocos/gfx/empty/empty-pipeline-layout.ts b/cocos/gfx/empty/empty-pipeline-layout.ts
index 93eda468e2a..5b05015765f 100644
--- a/cocos/gfx/empty/empty-pipeline-layout.ts
+++ b/cocos/gfx/empty/empty-pipeline-layout.ts
@@ -27,7 +27,7 @@ import { PipelineLayoutInfo } from '../base/define';
 
 export class EmptyPipelineLayout extends PipelineLayout {
     public initialize (info: Readonly<PipelineLayoutInfo>): void {
-        Array.prototype.push.apply(this._setLayouts, info.setLayouts);
+        Array.prototype.push.apply(this._setLayouts$, info.setLayouts);
     }
     public destroy (): void {}
 }
diff --git a/cocos/gfx/empty/empty-pipeline-state.ts b/cocos/gfx/empty/empty-pipeline-state.ts
index 8f32ccf4716..76aab079acb 100644
--- a/cocos/gfx/empty/empty-pipeline-state.ts
+++ b/cocos/gfx/empty/empty-pipeline-state.ts
@@ -26,10 +26,10 @@ import { PipelineState, PipelineStateInfo } from '../base/pipeline-state';
 
 export class EmptyPipelineState extends PipelineState {
     public initialize (info: Readonly<PipelineStateInfo>): void {
-        this._primitive = info.primitive;
-        this._shader = info.shader;
-        this._pipelineLayout = info.pipelineLayout;
-        const bs = this._bs;
+        this._primitive$ = info.primitive;
+        this._shader$ = info.shader;
+        this._pipelineLayout$ = info.pipelineLayout;
+        const bs = this._bs$;
         if (info.blendState) {
             const bsInfo = info.blendState;
             const { targets } = bsInfo;
@@ -43,11 +43,11 @@ export class EmptyPipelineState extends PipelineState {
             if (bsInfo.isIndepend !== undefined) { bs.isIndepend = bsInfo.isIndepend; }
             if (bsInfo.blendColor !== undefined) { bs.blendColor = bsInfo.blendColor; }
         }
-        Object.assign(this._rs, info.rasterizerState);
-        Object.assign(this._dss, info.depthStencilState);
-        this._is = info.inputState;
-        this._renderPass = info.renderPass;
-        this._dynamicStates = info.dynamicStates;
+        Object.assign(this._rs$, info.rasterizerState);
+        Object.assign(this._dss$, info.depthStencilState);
+        this._is$ = info.inputState;
+        this._renderPass$ = info.renderPass;
+        this._dynamicStates$ = info.dynamicStates;
     }
     public destroy (): void {}
 }
diff --git a/cocos/gfx/empty/empty-queue.ts b/cocos/gfx/empty/empty-queue.ts
index cee42522c64..121dbc4bd80 100644
--- a/cocos/gfx/empty/empty-queue.ts
+++ b/cocos/gfx/empty/empty-queue.ts
@@ -28,7 +28,7 @@ import { Queue } from '../base/queue';
 
 export class EmptyQueue extends Queue {
     public initialize (info: Readonly<QueueInfo>): void {
-        this._type = info.type;
+        this._type$ = info.type;
     }
     public destroy (): void {}
     public submit (cmdBuffs: Readonly<CommandBuffer[]>): void {}
diff --git a/cocos/gfx/empty/empty-render-pass.ts b/cocos/gfx/empty/empty-render-pass.ts
index c7b4b500609..22dc0a0a292 100644
--- a/cocos/gfx/empty/empty-render-pass.ts
+++ b/cocos/gfx/empty/empty-render-pass.ts
@@ -27,10 +27,10 @@ import { RenderPass } from '../base/render-pass';
 
 export class EmptyRenderPass extends RenderPass {
     public initialize (info: Readonly<RenderPassInfo>): void {
-        this._colorInfos = info.colorAttachments;
-        this._depthStencilInfo = info.depthStencilAttachment;
-        this._subpasses = info.subpasses;
-        this._hash = this.computeHash();
+        this._colorInfos$ = info.colorAttachments;
+        this._depthStencilInfo$ = info.depthStencilAttachment;
+        this._subpasses$ = info.subpasses;
+        this._hash$ = this.computeHash();
     }
     public destroy (): void {}
 }
diff --git a/cocos/gfx/empty/empty-swapchain.ts b/cocos/gfx/empty/empty-swapchain.ts
index b3cc0e84475..7dbfb706b94 100644
--- a/cocos/gfx/empty/empty-swapchain.ts
+++ b/cocos/gfx/empty/empty-swapchain.ts
@@ -28,16 +28,16 @@ import { EmptyTexture } from './empty-texture';
 
 export class EmptySwapchain extends Swapchain {
     public initialize (info: Readonly<SwapchainInfo>): void {
-        this._colorTexture = new EmptyTexture();
-        this._colorTexture.initAsSwapchainTexture({
+        this._colorTexture$ = new EmptyTexture();
+        this._colorTexture$.initAsSwapchainTexture({
             swapchain: this,
             format: Format.RGBA8,
             width: info.width,
             height: info.height,
         });
 
-        this._depthStencilTexture = new EmptyTexture();
-        this._depthStencilTexture.initAsSwapchainTexture({
+        this._depthStencilTexture$ = new EmptyTexture();
+        this._depthStencilTexture$.initAsSwapchainTexture({
             swapchain: this,
             format: Format.DEPTH_STENCIL,
             width: info.width,
diff --git a/cocos/gfx/empty/empty-texture.ts b/cocos/gfx/empty/empty-texture.ts
index fc802637c5e..955a94a71b6 100644
--- a/cocos/gfx/empty/empty-texture.ts
+++ b/cocos/gfx/empty/empty-texture.ts
@@ -31,23 +31,23 @@ export class EmptyTexture extends Texture {
 
         if ('texture' in info) {
             texInfo = info.texture.info;
-            this._isTextureView = true;
-            this._viewInfo.copy(info);
+            this._isTextureView$ = true;
+            this._viewInfo$.copy(info);
         } else {
-            this._viewInfo.texture = this;
-            this._viewInfo.type = info.type;
-            this._viewInfo.format = info.format;
-            this._viewInfo.baseLevel = 0;
-            this._viewInfo.levelCount = 1;
-            this._viewInfo.baseLayer = 0;
-            this._viewInfo.layerCount = 1;
+            this._viewInfo$.texture = this;
+            this._viewInfo$.type = info.type;
+            this._viewInfo$.format = info.format;
+            this._viewInfo$.baseLevel = 0;
+            this._viewInfo$.levelCount = 1;
+            this._viewInfo$.baseLayer = 0;
+            this._viewInfo$.layerCount = 1;
         }
 
-        this._info.copy(texInfo);
+        this._info$.copy(texInfo);
 
-        this._isPowerOf2 = IsPowerOf2(this._info.width) && IsPowerOf2(this._info.height);
-        this._size = FormatSurfaceSize(this._info.format, this.width, this.height,
-            this.depth, this._info.levelCount) * this._info.layerCount;
+        this._isPowerOf2$ = IsPowerOf2(this._info$.width) && IsPowerOf2(this._info$.height);
+        this._size$ = FormatSurfaceSize(this._info$.format, this.width, this.height,
+            this.depth, this._info$.levelCount) * this._info$.layerCount;
     }
     public destroy (): void {}
 
@@ -56,8 +56,8 @@ export class EmptyTexture extends Texture {
     }
 
     public resize (width: number, height: number): void {
-        this._info.width = width;
-        this._info.height = height;
+        this._info$.width = width;
+        this._info$.height = height;
     }
     /**
      * @engineInternal
diff --git a/cocos/gfx/gl-constants.ts b/cocos/gfx/gl-constants.ts
new file mode 100644
index 00000000000..4139f40ad0b
--- /dev/null
+++ b/cocos/gfx/gl-constants.ts
@@ -0,0 +1,562 @@
+/* eslint-disable @typescript-eslint/no-duplicate-enum-values */
+export enum WebGLConstants {
+    READ_BUFFER = 0x0C02,
+    UNPACK_ROW_LENGTH = 0x0CF2,
+    UNPACK_SKIP_ROWS = 0x0CF3,
+    UNPACK_SKIP_PIXELS = 0x0CF4,
+    PACK_ROW_LENGTH = 0x0D02,
+    PACK_SKIP_ROWS = 0x0D03,
+    PACK_SKIP_PIXELS = 0x0D04,
+    COLOR = 0x1800,
+    DEPTH = 0x1801,
+    STENCIL = 0x1802,
+    RED = 0x1903,
+    RGB8 = 0x8051,
+    RGB10_A2 = 0x8059,
+    TEXTURE_BINDING_3D = 0x806A,
+    UNPACK_SKIP_IMAGES = 0x806D,
+    UNPACK_IMAGE_HEIGHT = 0x806E,
+    TEXTURE_3D = 0x806F,
+    TEXTURE_WRAP_R = 0x8072,
+    MAX_3D_TEXTURE_SIZE = 0x8073,
+    UNSIGNED_INT_2_10_10_10_REV = 0x8368,
+    MAX_ELEMENTS_VERTICES = 0x80E8,
+    MAX_ELEMENTS_INDICES = 0x80E9,
+    TEXTURE_MIN_LOD = 0x813A,
+    TEXTURE_MAX_LOD = 0x813B,
+    TEXTURE_BASE_LEVEL = 0x813C,
+    TEXTURE_MAX_LEVEL = 0x813D,
+    MIN = 0x8007,
+    MAX = 0x8008,
+    DEPTH_COMPONENT24 = 0x81A6,
+    MAX_TEXTURE_LOD_BIAS = 0x84FD,
+    TEXTURE_COMPARE_MODE = 0x884C,
+    TEXTURE_COMPARE_FUNC = 0x884D,
+    CURRENT_QUERY = 0x8865,
+    QUERY_RESULT = 0x8866,
+    QUERY_RESULT_AVAILABLE = 0x8867,
+    STREAM_READ = 0x88E1,
+    STREAM_COPY = 0x88E2,
+    STATIC_READ = 0x88E5,
+    STATIC_COPY = 0x88E6,
+    DYNAMIC_READ = 0x88E9,
+    DYNAMIC_COPY = 0x88EA,
+    MAX_DRAW_BUFFERS = 0x8824,
+    DRAW_BUFFER0 = 0x8825,
+    DRAW_BUFFER1 = 0x8826,
+    DRAW_BUFFER2 = 0x8827,
+    DRAW_BUFFER3 = 0x8828,
+    DRAW_BUFFER4 = 0x8829,
+    DRAW_BUFFER5 = 0x882A,
+    DRAW_BUFFER6 = 0x882B,
+    DRAW_BUFFER7 = 0x882C,
+    DRAW_BUFFER8 = 0x882D,
+    DRAW_BUFFER9 = 0x882E,
+    DRAW_BUFFER10 = 0x882F,
+    DRAW_BUFFER11 = 0x8830,
+    DRAW_BUFFER12 = 0x8831,
+    DRAW_BUFFER13 = 0x8832,
+    DRAW_BUFFER14 = 0x8833,
+    DRAW_BUFFER15 = 0x8834,
+    MAX_FRAGMENT_UNIFORM_COMPONENTS = 0x8B49,
+    MAX_VERTEX_UNIFORM_COMPONENTS = 0x8B4A,
+    SAMPLER_3D = 0x8B5F,
+    SAMPLER_2D_SHADOW = 0x8B62,
+    FRAGMENT_SHADER_DERIVATIVE_HINT = 0x8B8B,
+    PIXEL_PACK_BUFFER = 0x88EB,
+    PIXEL_UNPACK_BUFFER = 0x88EC,
+    PIXEL_PACK_BUFFER_BINDING = 0x88ED,
+    PIXEL_UNPACK_BUFFER_BINDING = 0x88EF,
+    FLOAT_MAT2x3 = 0x8B65,
+    FLOAT_MAT2x4 = 0x8B66,
+    FLOAT_MAT3x2 = 0x8B67,
+    FLOAT_MAT3x4 = 0x8B68,
+    FLOAT_MAT4x2 = 0x8B69,
+    FLOAT_MAT4x3 = 0x8B6A,
+    SRGB = 0x8C40,
+    SRGB8 = 0x8C41,
+    SRGB8_ALPHA8 = 0x8C43,
+    COMPARE_REF_TO_TEXTURE = 0x884E,
+    RGBA32F = 0x8814,
+    RGB32F = 0x8815,
+    RGBA16F = 0x881A,
+    RGB16F = 0x881B,
+    VERTEX_ATTRIB_ARRAY_INTEGER = 0x88FD,
+    MAX_ARRAY_TEXTURE_LAYERS = 0x88FF,
+    MIN_PROGRAM_TEXEL_OFFSET = 0x8904,
+    MAX_PROGRAM_TEXEL_OFFSET = 0x8905,
+    MAX_VARYING_COMPONENTS = 0x8B4B,
+    TEXTURE_2D_ARRAY = 0x8C1A,
+    TEXTURE_BINDING_2D_ARRAY = 0x8C1D,
+    R11F_G11F_B10F = 0x8C3A,
+    UNSIGNED_INT_10F_11F_11F_REV = 0x8C3B,
+    RGB9_E5 = 0x8C3D,
+    UNSIGNED_INT_5_9_9_9_REV = 0x8C3E,
+    TRANSFORM_FEEDBACK_BUFFER_MODE = 0x8C7F,
+    MAX_TRANSFORM_FEEDBACK_SEPARATE_COMPONENTS = 0x8C80,
+    TRANSFORM_FEEDBACK_VARYINGS = 0x8C83,
+    TRANSFORM_FEEDBACK_BUFFER_START = 0x8C84,
+    TRANSFORM_FEEDBACK_BUFFER_SIZE = 0x8C85,
+    TRANSFORM_FEEDBACK_PRIMITIVES_WRITTEN = 0x8C88,
+    RASTERIZER_DISCARD = 0x8C89,
+    MAX_TRANSFORM_FEEDBACK_INTERLEAVED_COMPONENTS = 0x8C8A,
+    MAX_TRANSFORM_FEEDBACK_SEPARATE_ATTRIBS = 0x8C8B,
+    INTERLEAVED_ATTRIBS = 0x8C8C,
+    SEPARATE_ATTRIBS = 0x8C8D,
+    TRANSFORM_FEEDBACK_BUFFER = 0x8C8E,
+    TRANSFORM_FEEDBACK_BUFFER_BINDING = 0x8C8F,
+    RGBA32UI = 0x8D70,
+    RGB32UI = 0x8D71,
+    RGBA16UI = 0x8D76,
+    RGB16UI = 0x8D77,
+    RGBA8UI = 0x8D7C,
+    RGB8UI = 0x8D7D,
+    RGBA32I = 0x8D82,
+    RGB32I = 0x8D83,
+    RGBA16I = 0x8D88,
+    RGB16I = 0x8D89,
+    RGBA8I = 0x8D8E,
+    RGB8I = 0x8D8F,
+    RED_INTEGER = 0x8D94,
+    RGB_INTEGER = 0x8D98,
+    RGBA_INTEGER = 0x8D99,
+    SAMPLER_2D_ARRAY = 0x8DC1,
+    SAMPLER_2D_ARRAY_SHADOW = 0x8DC4,
+    SAMPLER_CUBE_SHADOW = 0x8DC5,
+    UNSIGNED_INT_VEC2 = 0x8DC6,
+    UNSIGNED_INT_VEC3 = 0x8DC7,
+    UNSIGNED_INT_VEC4 = 0x8DC8,
+    INT_SAMPLER_2D = 0x8DCA,
+    INT_SAMPLER_3D = 0x8DCB,
+    INT_SAMPLER_CUBE = 0x8DCC,
+    INT_SAMPLER_2D_ARRAY = 0x8DCF,
+    UNSIGNED_INT_SAMPLER_2D = 0x8DD2,
+    UNSIGNED_INT_SAMPLER_3D = 0x8DD3,
+    UNSIGNED_INT_SAMPLER_CUBE = 0x8DD4,
+    UNSIGNED_INT_SAMPLER_2D_ARRAY = 0x8DD7,
+    DEPTH_COMPONENT32F = 0x8CAC,
+    DEPTH32F_STENCIL8 = 0x8CAD,
+    FLOAT_32_UNSIGNED_INT_24_8_REV = 0x8DAD,
+    FRAMEBUFFER_ATTACHMENT_COLOR_ENCODING = 0x8210,
+    FRAMEBUFFER_ATTACHMENT_COMPONENT_TYPE = 0x8211,
+    FRAMEBUFFER_ATTACHMENT_RED_SIZE = 0x8212,
+    FRAMEBUFFER_ATTACHMENT_GREEN_SIZE = 0x8213,
+    FRAMEBUFFER_ATTACHMENT_BLUE_SIZE = 0x8214,
+    FRAMEBUFFER_ATTACHMENT_ALPHA_SIZE = 0x8215,
+    FRAMEBUFFER_ATTACHMENT_DEPTH_SIZE = 0x8216,
+    FRAMEBUFFER_ATTACHMENT_STENCIL_SIZE = 0x8217,
+    FRAMEBUFFER_DEFAULT = 0x8218,
+    UNSIGNED_INT_24_8 = 0x84FA,
+    DEPTH24_STENCIL8 = 0x88F0,
+    UNSIGNED_NORMALIZED = 0x8C17,
+    DRAW_FRAMEBUFFER_BINDING = 0x8CA6,
+    READ_FRAMEBUFFER = 0x8CA8,
+    DRAW_FRAMEBUFFER = 0x8CA9,
+    READ_FRAMEBUFFER_BINDING = 0x8CAA,
+    RENDERBUFFER_SAMPLES = 0x8CAB,
+    FRAMEBUFFER_ATTACHMENT_TEXTURE_LAYER = 0x8CD4,
+    MAX_COLOR_ATTACHMENTS = 0x8CDF,
+    COLOR_ATTACHMENT1 = 0x8CE1,
+    COLOR_ATTACHMENT2 = 0x8CE2,
+    COLOR_ATTACHMENT3 = 0x8CE3,
+    COLOR_ATTACHMENT4 = 0x8CE4,
+    COLOR_ATTACHMENT5 = 0x8CE5,
+    COLOR_ATTACHMENT6 = 0x8CE6,
+    COLOR_ATTACHMENT7 = 0x8CE7,
+    COLOR_ATTACHMENT8 = 0x8CE8,
+    COLOR_ATTACHMENT9 = 0x8CE9,
+    COLOR_ATTACHMENT10 = 0x8CEA,
+    COLOR_ATTACHMENT11 = 0x8CEB,
+    COLOR_ATTACHMENT12 = 0x8CEC,
+    COLOR_ATTACHMENT13 = 0x8CED,
+    COLOR_ATTACHMENT14 = 0x8CEE,
+    COLOR_ATTACHMENT15 = 0x8CEF,
+    FRAMEBUFFER_INCOMPLETE_MULTISAMPLE = 0x8D56,
+    MAX_SAMPLES = 0x8D57,
+    HALF_FLOAT = 0x140B,
+    RG = 0x8227,
+    RG_INTEGER = 0x8228,
+    R8 = 0x8229,
+    RG8 = 0x822B,
+    R16F = 0x822D,
+    R32F = 0x822E,
+    RG16F = 0x822F,
+    RG32F = 0x8230,
+    R8I = 0x8231,
+    R8UI = 0x8232,
+    R16I = 0x8233,
+    R16UI = 0x8234,
+    R32I = 0x8235,
+    R32UI = 0x8236,
+    RG8I = 0x8237,
+    RG8UI = 0x8238,
+    RG16I = 0x8239,
+    RG16UI = 0x823A,
+    RG32I = 0x823B,
+    RG32UI = 0x823C,
+    VERTEX_ARRAY_BINDING = 0x85B5,
+    R8_SNORM = 0x8F94,
+    RG8_SNORM = 0x8F95,
+    RGB8_SNORM = 0x8F96,
+    RGBA8_SNORM = 0x8F97,
+    SIGNED_NORMALIZED = 0x8F9C,
+    COPY_READ_BUFFER = 0x8F36,
+    COPY_WRITE_BUFFER = 0x8F37,
+    COPY_READ_BUFFER_BINDING = 0x8F36,
+    COPY_WRITE_BUFFER_BINDING = 0x8F37,
+    UNIFORM_BUFFER = 0x8A11,
+    UNIFORM_BUFFER_BINDING = 0x8A28,
+    UNIFORM_BUFFER_START = 0x8A29,
+    UNIFORM_BUFFER_SIZE = 0x8A2A,
+    MAX_VERTEX_UNIFORM_BLOCKS = 0x8A2B,
+    MAX_FRAGMENT_UNIFORM_BLOCKS = 0x8A2D,
+    MAX_COMBINED_UNIFORM_BLOCKS = 0x8A2E,
+    MAX_UNIFORM_BUFFER_BINDINGS = 0x8A2F,
+    MAX_UNIFORM_BLOCK_SIZE = 0x8A30,
+    MAX_COMBINED_VERTEX_UNIFORM_COMPONENTS = 0x8A31,
+    MAX_COMBINED_FRAGMENT_UNIFORM_COMPONENTS = 0x8A33,
+    UNIFORM_BUFFER_OFFSET_ALIGNMENT = 0x8A34,
+    ACTIVE_UNIFORM_BLOCKS = 0x8A36,
+    UNIFORM_TYPE = 0x8A37,
+    UNIFORM_SIZE = 0x8A38,
+    UNIFORM_BLOCK_INDEX = 0x8A3A,
+    UNIFORM_OFFSET = 0x8A3B,
+    UNIFORM_ARRAY_STRIDE = 0x8A3C,
+    UNIFORM_MATRIX_STRIDE = 0x8A3D,
+    UNIFORM_IS_ROW_MAJOR = 0x8A3E,
+    UNIFORM_BLOCK_BINDING = 0x8A3F,
+    UNIFORM_BLOCK_DATA_SIZE = 0x8A40,
+    UNIFORM_BLOCK_ACTIVE_UNIFORMS = 0x8A42,
+    UNIFORM_BLOCK_ACTIVE_UNIFORM_INDICES = 0x8A43,
+    UNIFORM_BLOCK_REFERENCED_BY_VERTEX_SHADER = 0x8A44,
+    UNIFORM_BLOCK_REFERENCED_BY_FRAGMENT_SHADER = 0x8A46,
+    INVALID_INDEX = 0xFFFFFFFF,
+    MAX_VERTEX_OUTPUT_COMPONENTS = 0x9122,
+    MAX_FRAGMENT_INPUT_COMPONENTS = 0x9125,
+    MAX_SERVER_WAIT_TIMEOUT = 0x9111,
+    OBJECT_TYPE = 0x9112,
+    SYNC_CONDITION = 0x9113,
+    SYNC_STATUS = 0x9114,
+    SYNC_FLAGS = 0x9115,
+    SYNC_FENCE = 0x9116,
+    SYNC_GPU_COMMANDS_COMPLETE = 0x9117,
+    UNSIGNALED = 0x9118,
+    SIGNALED = 0x9119,
+    ALREADY_SIGNALED = 0x911A,
+    TIMEOUT_EXPIRED = 0x911B,
+    CONDITION_SATISFIED = 0x911C,
+    WAIT_FAILED = 0x911D,
+    SYNC_FLUSH_COMMANDS_BIT = 0x00000001,
+    VERTEX_ATTRIB_ARRAY_DIVISOR = 0x88FE,
+    ANY_SAMPLES_PASSED = 0x8C2F,
+    ANY_SAMPLES_PASSED_CONSERVATIVE = 0x8D6A,
+    SAMPLER_BINDING = 0x8919,
+    RGB10_A2UI = 0x906F,
+    INT_2_10_10_10_REV = 0x8D9F,
+    TRANSFORM_FEEDBACK = 0x8E22,
+    TRANSFORM_FEEDBACK_PAUSED = 0x8E23,
+    TRANSFORM_FEEDBACK_ACTIVE = 0x8E24,
+    TRANSFORM_FEEDBACK_BINDING = 0x8E25,
+    TEXTURE_IMMUTABLE_FORMAT = 0x912F,
+    MAX_ELEMENT_INDEX = 0x8D6B,
+    TEXTURE_IMMUTABLE_LEVELS = 0x82DF,
+    TIMEOUT_IGNORED = -1,
+    MAX_CLIENT_WAIT_TIMEOUT_WEBGL = 0x9247,
+    DEPTH_BUFFER_BIT = 0x00000100,
+    STENCIL_BUFFER_BIT = 0x00000400,
+    COLOR_BUFFER_BIT = 0x00004000,
+    POINTS = 0x0000,
+    LINES = 0x0001,
+    LINE_LOOP = 0x0002,
+    LINE_STRIP = 0x0003,
+    TRIANGLES = 0x0004,
+    TRIANGLE_STRIP = 0x0005,
+    TRIANGLE_FAN = 0x0006,
+    ZERO = 0,
+    ONE = 1,
+    SRC_COLOR = 0x0300,
+    ONE_MINUS_SRC_COLOR = 0x0301,
+    SRC_ALPHA = 0x0302,
+    ONE_MINUS_SRC_ALPHA = 0x0303,
+    DST_ALPHA = 0x0304,
+    ONE_MINUS_DST_ALPHA = 0x0305,
+    DST_COLOR = 0x0306,
+    ONE_MINUS_DST_COLOR = 0x0307,
+    SRC_ALPHA_SATURATE = 0x0308,
+    FUNC_ADD = 0x8006,
+    BLEND_EQUATION = 0x8009,
+    BLEND_EQUATION_RGB = 0x8009,
+    BLEND_EQUATION_ALPHA = 0x883D,
+    FUNC_SUBTRACT = 0x800A,
+    FUNC_REVERSE_SUBTRACT = 0x800B,
+    BLEND_DST_RGB = 0x80C8,
+    BLEND_SRC_RGB = 0x80C9,
+    BLEND_DST_ALPHA = 0x80CA,
+    BLEND_SRC_ALPHA = 0x80CB,
+    CONSTANT_COLOR = 0x8001,
+    ONE_MINUS_CONSTANT_COLOR = 0x8002,
+    CONSTANT_ALPHA = 0x8003,
+    ONE_MINUS_CONSTANT_ALPHA = 0x8004,
+    BLEND_COLOR = 0x8005,
+    ARRAY_BUFFER = 0x8892,
+    ELEMENT_ARRAY_BUFFER = 0x8893,
+    ARRAY_BUFFER_BINDING = 0x8894,
+    ELEMENT_ARRAY_BUFFER_BINDING = 0x8895,
+    STREAM_DRAW = 0x88E0,
+    STATIC_DRAW = 0x88E4,
+    DYNAMIC_DRAW = 0x88E8,
+    BUFFER_SIZE = 0x8764,
+    BUFFER_USAGE = 0x8765,
+    CURRENT_VERTEX_ATTRIB = 0x8626,
+    FRONT = 0x0404,
+    BACK = 0x0405,
+    FRONT_AND_BACK = 0x0408,
+    CULL_FACE = 0x0B44,
+    BLEND = 0x0BE2,
+    DITHER = 0x0BD0,
+    STENCIL_TEST = 0x0B90,
+    DEPTH_TEST = 0x0B71,
+    SCISSOR_TEST = 0x0C11,
+    POLYGON_OFFSET_FILL = 0x8037,
+    SAMPLE_ALPHA_TO_COVERAGE = 0x809E,
+    SAMPLE_COVERAGE = 0x80A0,
+    NO_ERROR = 0,
+    INVALID_ENUM = 0x0500,
+    INVALID_VALUE = 0x0501,
+    INVALID_OPERATION = 0x0502,
+    OUT_OF_MEMORY = 0x0505,
+    CW = 0x0900,
+    CCW = 0x0901,
+    LINE_WIDTH = 0x0B21,
+    ALIASED_POINT_SIZE_RANGE = 0x846D,
+    ALIASED_LINE_WIDTH_RANGE = 0x846E,
+    CULL_FACE_MODE = 0x0B45,
+    FRONT_FACE = 0x0B46,
+    DEPTH_RANGE = 0x0B70,
+    DEPTH_WRITEMASK = 0x0B72,
+    DEPTH_CLEAR_VALUE = 0x0B73,
+    DEPTH_FUNC = 0x0B74,
+    STENCIL_CLEAR_VALUE = 0x0B91,
+    STENCIL_FUNC = 0x0B92,
+    STENCIL_FAIL = 0x0B94,
+    STENCIL_PASS_DEPTH_FAIL = 0x0B95,
+    STENCIL_PASS_DEPTH_PASS = 0x0B96,
+    STENCIL_REF = 0x0B97,
+    STENCIL_VALUE_MASK = 0x0B93,
+    STENCIL_WRITEMASK = 0x0B98,
+    STENCIL_BACK_FUNC = 0x8800,
+    STENCIL_BACK_FAIL = 0x8801,
+    STENCIL_BACK_PASS_DEPTH_FAIL = 0x8802,
+    STENCIL_BACK_PASS_DEPTH_PASS = 0x8803,
+    STENCIL_BACK_REF = 0x8CA3,
+    STENCIL_BACK_VALUE_MASK = 0x8CA4,
+    STENCIL_BACK_WRITEMASK = 0x8CA5,
+    VIEWPORT = 0x0BA2,
+    SCISSOR_BOX = 0x0C10,
+    COLOR_CLEAR_VALUE = 0x0C22,
+    COLOR_WRITEMASK = 0x0C23,
+    UNPACK_ALIGNMENT = 0x0CF5,
+    PACK_ALIGNMENT = 0x0D05,
+    MAX_TEXTURE_SIZE = 0x0D33,
+    MAX_VIEWPORT_DIMS = 0x0D3A,
+    SUBPIXEL_BITS = 0x0D50,
+    RED_BITS = 0x0D52,
+    GREEN_BITS = 0x0D53,
+    BLUE_BITS = 0x0D54,
+    ALPHA_BITS = 0x0D55,
+    DEPTH_BITS = 0x0D56,
+    STENCIL_BITS = 0x0D57,
+    POLYGON_OFFSET_UNITS = 0x2A00,
+    POLYGON_OFFSET_FACTOR = 0x8038,
+    TEXTURE_BINDING_2D = 0x8069,
+    SAMPLE_BUFFERS = 0x80A8,
+    SAMPLES = 0x80A9,
+    SAMPLE_COVERAGE_VALUE = 0x80AA,
+    SAMPLE_COVERAGE_INVERT = 0x80AB,
+    COMPRESSED_TEXTURE_FORMATS = 0x86A3,
+    DONT_CARE = 0x1100,
+    FASTEST = 0x1101,
+    NICEST = 0x1102,
+    GENERATE_MIPMAP_HINT = 0x8192,
+    BYTE = 0x1400,
+    UNSIGNED_BYTE = 0x1401,
+    SHORT = 0x1402,
+    UNSIGNED_SHORT = 0x1403,
+    INT = 0x1404,
+    UNSIGNED_INT = 0x1405,
+    FLOAT = 0x1406,
+    DEPTH_COMPONENT = 0x1902,
+    ALPHA = 0x1906,
+    RGB = 0x1907,
+    RGBA = 0x1908,
+    LUMINANCE = 0x1909,
+    LUMINANCE_ALPHA = 0x190A,
+    UNSIGNED_SHORT_4_4_4_4 = 0x8033,
+    UNSIGNED_SHORT_5_5_5_1 = 0x8034,
+    UNSIGNED_SHORT_5_6_5 = 0x8363,
+    FRAGMENT_SHADER = 0x8B30,
+    VERTEX_SHADER = 0x8B31,
+    MAX_VERTEX_ATTRIBS = 0x8869,
+    MAX_VERTEX_UNIFORM_VECTORS = 0x8DFB,
+    MAX_VARYING_VECTORS = 0x8DFC,
+    MAX_COMBINED_TEXTURE_IMAGE_UNITS = 0x8B4D,
+    MAX_VERTEX_TEXTURE_IMAGE_UNITS = 0x8B4C,
+    MAX_TEXTURE_IMAGE_UNITS = 0x8872,
+    MAX_FRAGMENT_UNIFORM_VECTORS = 0x8DFD,
+    SHADER_TYPE = 0x8B4F,
+    DELETE_STATUS = 0x8B80,
+    LINK_STATUS = 0x8B82,
+    VALIDATE_STATUS = 0x8B83,
+    ATTACHED_SHADERS = 0x8B85,
+    ACTIVE_UNIFORMS = 0x8B86,
+    ACTIVE_ATTRIBUTES = 0x8B89,
+    SHADING_LANGUAGE_VERSION = 0x8B8C,
+    CURRENT_PROGRAM = 0x8B8D,
+    NEVER = 0x0200,
+    LESS = 0x0201,
+    EQUAL = 0x0202,
+    LEQUAL = 0x0203,
+    GREATER = 0x0204,
+    NOTEQUAL = 0x0205,
+    GEQUAL = 0x0206,
+    ALWAYS = 0x0207,
+    KEEP = 0x1E00,
+    REPLACE = 0x1E01,
+    INCR = 0x1E02,
+    DECR = 0x1E03,
+    INVERT = 0x150A,
+    INCR_WRAP = 0x8507,
+    DECR_WRAP = 0x8508,
+    VENDOR = 0x1F00,
+    RENDERER = 0x1F01,
+    VERSION = 0x1F02,
+    NEAREST = 0x2600,
+    LINEAR = 0x2601,
+    NEAREST_MIPMAP_NEAREST = 0x2700,
+    LINEAR_MIPMAP_NEAREST = 0x2701,
+    NEAREST_MIPMAP_LINEAR = 0x2702,
+    LINEAR_MIPMAP_LINEAR = 0x2703,
+    TEXTURE_MAG_FILTER = 0x2800,
+    TEXTURE_MIN_FILTER = 0x2801,
+    TEXTURE_WRAP_S = 0x2802,
+    TEXTURE_WRAP_T = 0x2803,
+    TEXTURE_2D = 0x0DE1,
+    TEXTURE = 0x1702,
+    TEXTURE_CUBE_MAP = 0x8513,
+    TEXTURE_BINDING_CUBE_MAP = 0x8514,
+    TEXTURE_CUBE_MAP_POSITIVE_X = 0x8515,
+    TEXTURE_CUBE_MAP_NEGATIVE_X = 0x8516,
+    TEXTURE_CUBE_MAP_POSITIVE_Y = 0x8517,
+    TEXTURE_CUBE_MAP_NEGATIVE_Y = 0x8518,
+    TEXTURE_CUBE_MAP_POSITIVE_Z = 0x8519,
+    TEXTURE_CUBE_MAP_NEGATIVE_Z = 0x851A,
+    MAX_CUBE_MAP_TEXTURE_SIZE = 0x851C,
+    TEXTURE0 = 0x84C0,
+    TEXTURE1 = 0x84C1,
+    TEXTURE2 = 0x84C2,
+    TEXTURE3 = 0x84C3,
+    TEXTURE4 = 0x84C4,
+    TEXTURE5 = 0x84C5,
+    TEXTURE6 = 0x84C6,
+    TEXTURE7 = 0x84C7,
+    TEXTURE8 = 0x84C8,
+    TEXTURE9 = 0x84C9,
+    TEXTURE10 = 0x84CA,
+    TEXTURE11 = 0x84CB,
+    TEXTURE12 = 0x84CC,
+    TEXTURE13 = 0x84CD,
+    TEXTURE14 = 0x84CE,
+    TEXTURE15 = 0x84CF,
+    TEXTURE16 = 0x84D0,
+    TEXTURE17 = 0x84D1,
+    TEXTURE18 = 0x84D2,
+    TEXTURE19 = 0x84D3,
+    TEXTURE20 = 0x84D4,
+    TEXTURE21 = 0x84D5,
+    TEXTURE22 = 0x84D6,
+    TEXTURE23 = 0x84D7,
+    TEXTURE24 = 0x84D8,
+    TEXTURE25 = 0x84D9,
+    TEXTURE26 = 0x84DA,
+    TEXTURE27 = 0x84DB,
+    TEXTURE28 = 0x84DC,
+    TEXTURE29 = 0x84DD,
+    TEXTURE30 = 0x84DE,
+    TEXTURE31 = 0x84DF,
+    ACTIVE_TEXTURE = 0x84E0,
+    REPEAT = 0x2901,
+    CLAMP_TO_EDGE = 0x812F,
+    MIRRORED_REPEAT = 0x8370,
+    FLOAT_VEC2 = 0x8B50,
+    FLOAT_VEC3 = 0x8B51,
+    FLOAT_VEC4 = 0x8B52,
+    INT_VEC2 = 0x8B53,
+    INT_VEC3 = 0x8B54,
+    INT_VEC4 = 0x8B55,
+    BOOL = 0x8B56,
+    BOOL_VEC2 = 0x8B57,
+    BOOL_VEC3 = 0x8B58,
+    BOOL_VEC4 = 0x8B59,
+    FLOAT_MAT2 = 0x8B5A,
+    FLOAT_MAT3 = 0x8B5B,
+    FLOAT_MAT4 = 0x8B5C,
+    SAMPLER_2D = 0x8B5E,
+    SAMPLER_CUBE = 0x8B60,
+    VERTEX_ATTRIB_ARRAY_ENABLED = 0x8622,
+    VERTEX_ATTRIB_ARRAY_SIZE = 0x8623,
+    VERTEX_ATTRIB_ARRAY_STRIDE = 0x8624,
+    VERTEX_ATTRIB_ARRAY_TYPE = 0x8625,
+    VERTEX_ATTRIB_ARRAY_NORMALIZED = 0x886A,
+    VERTEX_ATTRIB_ARRAY_POINTER = 0x8645,
+    VERTEX_ATTRIB_ARRAY_BUFFER_BINDING = 0x889F,
+    IMPLEMENTATION_COLOR_READ_TYPE = 0x8B9A,
+    IMPLEMENTATION_COLOR_READ_FORMAT = 0x8B9B,
+    COMPILE_STATUS = 0x8B81,
+    LOW_FLOAT = 0x8DF0,
+    MEDIUM_FLOAT = 0x8DF1,
+    HIGH_FLOAT = 0x8DF2,
+    LOW_INT = 0x8DF3,
+    MEDIUM_INT = 0x8DF4,
+    HIGH_INT = 0x8DF5,
+    FRAMEBUFFER = 0x8D40,
+    RENDERBUFFER = 0x8D41,
+    RGBA4 = 0x8056,
+    RGB5_A1 = 0x8057,
+    RGBA8 = 0x8058,
+    RGB565 = 0x8D62,
+    DEPTH_COMPONENT16 = 0x81A5,
+    STENCIL_INDEX8 = 0x8D48,
+    DEPTH_STENCIL = 0x84F9,
+    RENDERBUFFER_WIDTH = 0x8D42,
+    RENDERBUFFER_HEIGHT = 0x8D43,
+    RENDERBUFFER_INTERNAL_FORMAT = 0x8D44,
+    RENDERBUFFER_RED_SIZE = 0x8D50,
+    RENDERBUFFER_GREEN_SIZE = 0x8D51,
+    RENDERBUFFER_BLUE_SIZE = 0x8D52,
+    RENDERBUFFER_ALPHA_SIZE = 0x8D53,
+    RENDERBUFFER_DEPTH_SIZE = 0x8D54,
+    RENDERBUFFER_STENCIL_SIZE = 0x8D55,
+    FRAMEBUFFER_ATTACHMENT_OBJECT_TYPE = 0x8CD0,
+    FRAMEBUFFER_ATTACHMENT_OBJECT_NAME = 0x8CD1,
+    FRAMEBUFFER_ATTACHMENT_TEXTURE_LEVEL = 0x8CD2,
+    FRAMEBUFFER_ATTACHMENT_TEXTURE_CUBE_MAP_FACE = 0x8CD3,
+    COLOR_ATTACHMENT0 = 0x8CE0,
+    DEPTH_ATTACHMENT = 0x8D00,
+    STENCIL_ATTACHMENT = 0x8D20,
+    DEPTH_STENCIL_ATTACHMENT = 0x821A,
+    NONE = 0,
+    FRAMEBUFFER_COMPLETE = 0x8CD5,
+    FRAMEBUFFER_INCOMPLETE_ATTACHMENT = 0x8CD6,
+    FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT = 0x8CD7,
+    FRAMEBUFFER_INCOMPLETE_DIMENSIONS = 0x8CD9,
+    FRAMEBUFFER_UNSUPPORTED = 0x8CDD,
+    FRAMEBUFFER_BINDING = 0x8CA6,
+    RENDERBUFFER_BINDING = 0x8CA7,
+    MAX_RENDERBUFFER_SIZE = 0x84E8,
+    INVALID_FRAMEBUFFER_OPERATION = 0x0506,
+    UNPACK_FLIP_Y_WEBGL = 0x9240,
+    UNPACK_PREMULTIPLY_ALPHA_WEBGL = 0x9241,
+    CONTEXT_LOST_WEBGL = 0x9242,
+    UNPACK_COLORSPACE_CONVERSION_WEBGL = 0x9243,
+    BROWSER_DEFAULT_WEBGL = 0x9244,
+}
diff --git a/cocos/gfx/polyfill-legacy-cc.ts b/cocos/gfx/polyfill-legacy-cc.ts
index 3bcfa4c3266..e330c17d7ad 100644
--- a/cocos/gfx/polyfill-legacy-cc.ts
+++ b/cocos/gfx/polyfill-legacy-cc.ts
@@ -40,8 +40,9 @@ import { Texture } from './base/texture';
 import { GeneralBarrier } from './base/states/general-barrier';
 import { TextureBarrier } from './base/states/texture-barrier';
 import { BufferBarrier } from './base/states/buffer-barrier';
-import { cclegacy } from '../core';
+
 import * as defines from './base/define';
+import { cclegacy } from '../core/global-exports';
 
 const polyfills: Record<string, unknown> = {
     Device,
diff --git a/cocos/gfx/webgl/states/webgl-sampler.ts b/cocos/gfx/webgl/states/webgl-sampler.ts
index 1ffb6ef140b..14fa0127c4f 100644
--- a/cocos/gfx/webgl/states/webgl-sampler.ts
+++ b/cocos/gfx/webgl/states/webgl-sampler.ts
@@ -24,6 +24,7 @@
 
 import { Filter, SamplerInfo } from '../../base/define';
 import { Sampler } from '../../base/states/sampler';
+import { WebGLConstants } from '../../gl-constants';
 import { IWebGLGPUSampler } from '../webgl-gpu-objects';
 
 const WebGLWraps: GLenum[] = [
@@ -35,10 +36,10 @@ const WebGLWraps: GLenum[] = [
 
 export class WebGLSampler extends Sampler {
     public get gpuSampler (): IWebGLGPUSampler {
-        return  this._gpuSampler!;
+        return  this._gpuSampler$!;
     }
 
-    private _gpuSampler: IWebGLGPUSampler | null = null;
+    private _gpuSampler$: IWebGLGPUSampler | null = null;
 
     constructor (info: Readonly<SamplerInfo>, hash: number) {
         super(info, hash);
@@ -46,42 +47,42 @@ export class WebGLSampler extends Sampler {
         let glMinFilter = 0;
         let glMagFilter = 0;
 
-        const minFilter = this._info.minFilter;
-        const magFilter = this._info.magFilter;
-        const mipFilter = this._info.mipFilter;
+        const minFilter = this._info$.minFilter;
+        const magFilter = this._info$.magFilter;
+        const mipFilter = this._info$.mipFilter;
 
         if (minFilter === Filter.LINEAR || minFilter === Filter.ANISOTROPIC) {
             if (mipFilter === Filter.LINEAR || mipFilter === Filter.ANISOTROPIC) {
-                glMinFilter = 0x2703; // WebGLRenderingContext.LINEAR_MIPMAP_LINEAR;
+                glMinFilter = WebGLConstants.LINEAR_MIPMAP_LINEAR;
             } else if (mipFilter === Filter.POINT) {
-                glMinFilter = 0x2701; // WebGLRenderingContext.LINEAR_MIPMAP_NEAREST;
+                glMinFilter = WebGLConstants.LINEAR_MIPMAP_NEAREST;
             } else {
-                glMinFilter = 0x2601; // WebGLRenderingContext.LINEAR;
+                glMinFilter = WebGLConstants.LINEAR;
             }
         } else if (mipFilter === Filter.LINEAR || mipFilter === Filter.ANISOTROPIC) {
-            glMinFilter = 0x2702; // WebGLRenderingContext.NEAREST_MIPMAP_LINEAR;
+            glMinFilter = WebGLConstants.NEAREST_MIPMAP_LINEAR;
         } else if (mipFilter === Filter.POINT) {
-            glMinFilter = 0x2700; // WebGLRenderingContext.NEAREST_MIPMAP_NEAREST;
+            glMinFilter = WebGLConstants.NEAREST_MIPMAP_NEAREST;
         } else {
-            glMinFilter = 0x2600; // WebGLRenderingContext.NEAREST;
+            glMinFilter = WebGLConstants.NEAREST;
         }
 
         if (magFilter === Filter.LINEAR || magFilter === Filter.ANISOTROPIC) {
-            glMagFilter = 0x2601; // WebGLRenderingContext.LINEAR;
+            glMagFilter = WebGLConstants.LINEAR;
         } else {
-            glMagFilter = 0x2600; // WebGLRenderingContext.NEAREST;
+            glMagFilter = WebGLConstants.NEAREST;
         }
 
-        const glWrapS = WebGLWraps[this._info.addressU];
-        const glWrapT = WebGLWraps[this._info.addressV];
-        const glWrapR = WebGLWraps[this._info.addressW];
+        const glWrapS = WebGLWraps[this._info$.addressU];
+        const glWrapT = WebGLWraps[this._info$.addressV];
+        const glWrapR = WebGLWraps[this._info$.addressW];
 
-        this._gpuSampler = {
-            glMinFilter,
-            glMagFilter,
-            glWrapS,
-            glWrapT,
-            glWrapR,
+        this._gpuSampler$ = {
+            glMinFilter$: glMinFilter,
+            glMagFilter$: glMagFilter,
+            glWrapS$: glWrapS,
+            glWrapT$: glWrapT,
+            glWrapR$: glWrapR,
         };
     }
 }
diff --git a/cocos/gfx/webgl/webgl-buffer.ts b/cocos/gfx/webgl/webgl-buffer.ts
index 55261a48d5a..bba23b20280 100644
--- a/cocos/gfx/webgl/webgl-buffer.ts
+++ b/cocos/gfx/webgl/webgl-buffer.ts
@@ -33,20 +33,20 @@ import {
 } from './webgl-commands';
 import { IWebGLGPUBuffer, IWebGLGPUBufferView, WebGLIndirectDrawInfos } from './webgl-gpu-objects';
 import { WebGLDeviceManager } from './webgl-define';
-import { warnID } from '../../core';
+import { warnID } from '../../core/platform/debug';
 
 export class WebGLBuffer extends Buffer {
     get gpuBuffer (): IWebGLGPUBuffer {
-        return  this._gpuBuffer!;
+        return  this._gpuBuffer$!;
     }
 
     get gpuBufferView (): IWebGLGPUBufferView {
-        return  this._gpuBufferView!;
+        return  this._gpuBufferView$!;
     }
 
-    private _gpuBuffer: IWebGLGPUBuffer | null = null;
-    private _gpuBufferView: IWebGLGPUBufferView | null = null;
-    private _uniformBuffer: Uint8Array | null = null;
+    private _gpuBuffer$: IWebGLGPUBuffer | null = null;
+    private _gpuBufferView$: IWebGLGPUBufferView | null = null;
+    private _uniformBuffer$: Uint8Array | null = null;
 
     constructor () {
         super();
@@ -54,91 +54,91 @@ export class WebGLBuffer extends Buffer {
 
     public initialize (info: Readonly<BufferInfo> | Readonly<BufferViewInfo>): void {
         if ('buffer' in info) { // buffer view
-            this._isBufferView = true;
+            this._isBufferView$ = true;
 
             const buffer = info.buffer as WebGLBuffer;
 
-            this._usage = buffer.usage;
-            this._memUsage = buffer.memUsage;
-            this._size = this._stride = info.range;
-            this._count = 1;
-            this._flags = buffer.flags;
+            this._usage$ = buffer.usage;
+            this._memUsage$ = buffer.memUsage;
+            this._size$ = this._stride$ = info.range;
+            this._count$ = 1;
+            this._flags$ = buffer.flags;
 
-            this._gpuBufferView = {
-                gpuBuffer: buffer.gpuBuffer,
-                offset: info.offset,
-                range: info.range,
+            this._gpuBufferView$ = {
+                gpuBuffer$: buffer.gpuBuffer,
+                offset$: info.offset,
+                range$: info.range,
             };
         } else { // native buffer
-            this._usage = info.usage;
-            this._memUsage = info.memUsage;
-            this._size = info.size;
-            this._stride = Math.max(info.stride || this._size, 1);
-            this._count = this._size / this._stride;
-            this._flags = info.flags;
-
-            if ((this._usage & BufferUsageBit.UNIFORM) && this._size > 0) {
-                this._uniformBuffer = new Uint8Array(this._size);
+            this._usage$ = info.usage;
+            this._memUsage$ = info.memUsage;
+            this._size$ = info.size;
+            this._stride$ = Math.max(info.stride || this._size$, 1);
+            this._count$ = this._size$ / this._stride$;
+            this._flags$ = info.flags;
+
+            if ((this._usage$ & BufferUsageBit.UNIFORM) && this._size$ > 0) {
+                this._uniformBuffer$ = new Uint8Array(this._size$);
             }
 
-            this._gpuBuffer = {
-                usage: this._usage,
-                memUsage: this._memUsage,
-                size: this._size,
-                stride: this._stride,
-                buffer: null,
+            this._gpuBuffer$ = {
+                usage$: this._usage$,
+                memUsage$: this._memUsage$,
+                size$: this._size$,
+                stride$: this._stride$,
+                buffer$: null,
                 vf32: null,
-                indirects: new WebGLIndirectDrawInfos(),
-                glTarget: 0,
-                glBuffer: null,
+                indirects$: new WebGLIndirectDrawInfos(),
+                glTarget$: 0,
+                glBuffer$: null,
             };
 
-            if (this._usage & BufferUsageBit.UNIFORM) {
-                this._gpuBuffer.buffer = this._uniformBuffer;
+            if (this._usage$ & BufferUsageBit.UNIFORM) {
+                this._gpuBuffer$.buffer$ = this._uniformBuffer$;
             }
 
-            WebGLCmdFuncCreateBuffer(WebGLDeviceManager.instance, this._gpuBuffer);
+            WebGLCmdFuncCreateBuffer(WebGLDeviceManager.instance, this._gpuBuffer$);
 
-            WebGLDeviceManager.instance.memoryStatus.bufferSize += this._size;
+            WebGLDeviceManager.instance.memoryStatus.bufferSize += this._size$;
         }
     }
 
     public destroy (): void {
-        if (this._gpuBuffer) {
-            WebGLCmdFuncDestroyBuffer(WebGLDeviceManager.instance, this._gpuBuffer);
-            WebGLDeviceManager.instance.memoryStatus.bufferSize -= this._size;
-            this._gpuBuffer = null;
+        if (this._gpuBuffer$) {
+            WebGLCmdFuncDestroyBuffer(WebGLDeviceManager.instance, this._gpuBuffer$);
+            WebGLDeviceManager.instance.memoryStatus.bufferSize -= this._size$;
+            this._gpuBuffer$ = null;
         }
 
-        if (this._gpuBufferView) {
-            this._gpuBufferView = null;
+        if (this._gpuBufferView$) {
+            this._gpuBufferView$ = null;
         }
     }
 
     public resize (size: number): void {
-        if (this._isBufferView) {
+        if (this._isBufferView$) {
             warnID(16379);
             return;
         }
 
-        const oldSize = this._size;
+        const oldSize = this._size$;
         if (oldSize === size) { return; }
 
-        this._size = size;
-        this._count = this._size / this._stride;
+        this._size$ = size;
+        this._count$ = this._size$ / this._stride$;
 
-        if (this._uniformBuffer) {
-            this._uniformBuffer = new Uint8Array(size);
+        if (this._uniformBuffer$) {
+            this._uniformBuffer$ = new Uint8Array(size);
         }
 
-        if (this._gpuBuffer) {
-            if (this._uniformBuffer) {
-                this._gpuBuffer.buffer = this._uniformBuffer;
+        if (this._gpuBuffer$) {
+            if (this._uniformBuffer$) {
+                this._gpuBuffer$.buffer$ = this._uniformBuffer$;
             }
 
-            this._gpuBuffer.size = size;
+            this._gpuBuffer$.size$ = size;
             if (size > 0) {
-                WebGLCmdFuncResizeBuffer(WebGLDeviceManager.instance, this._gpuBuffer);
+                WebGLCmdFuncResizeBuffer(WebGLDeviceManager.instance, this._gpuBuffer$);
                 WebGLDeviceManager.instance.memoryStatus.bufferSize -= oldSize;
                 WebGLDeviceManager.instance.memoryStatus.bufferSize += size;
             }
@@ -146,7 +146,7 @@ export class WebGLBuffer extends Buffer {
     }
 
     public update (buffer: Readonly<BufferSource>, size?: number): void {
-        if (this._isBufferView) {
+        if (this._isBufferView$) {
             warnID(16380);
             return;
         }
@@ -154,7 +154,7 @@ export class WebGLBuffer extends Buffer {
         let buffSize: number;
         if (size !== undefined) {
             buffSize = size;
-        } else if (this._usage & BufferUsageBit.INDIRECT) {
+        } else if (this._usage$ & BufferUsageBit.INDIRECT) {
             buffSize = 0;
         } else {
             buffSize = (buffer as ArrayBuffer).byteLength;
@@ -162,7 +162,7 @@ export class WebGLBuffer extends Buffer {
 
         WebGLCmdFuncUpdateBuffer(
             WebGLDeviceManager.instance,
-            this._gpuBuffer!,
+            this._gpuBuffer$!,
             buffer as BufferSource,
             0,
             buffSize,
diff --git a/cocos/gfx/webgl/webgl-command-allocator.ts b/cocos/gfx/webgl/webgl-command-allocator.ts
deleted file mode 100644
index 515f6ec5fe4..00000000000
--- a/cocos/gfx/webgl/webgl-command-allocator.ts
+++ /dev/null
@@ -1,165 +0,0 @@
-/*
- Copyright (c) 2020-2023 Xiamen Yaji Software Co., Ltd.
-
- https://www.cocos.com/
-
- Permission is hereby granted, free of charge, to any person obtaining a copy
- of this software and associated documentation files (the "Software"), to deal
- in the Software without restriction, including without limitation the rights to
- use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
- of the Software, and to permit persons to whom the Software is furnished to do so,
- subject to the following conditions:
-
- The above copyright notice and this permission notice shall be included in
- all copies or substantial portions of the Software.
-
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- THE SOFTWARE.
-*/
-
-import { CachedArray } from '../../core';
-import {
-    WebGLCmdBeginRenderPass,
-    WebGLCmdBindStates,
-    WebGLCmdBlitTexture,
-    WebGLCmdCopyBufferToTexture,
-    WebGLCmdDraw,
-    WebGLCmdObject,
-    WebGLCmdPackage,
-    WebGLCmdUpdateBuffer,
-} from './webgl-commands';
-
-export class WebGLCommandPool<T extends WebGLCmdObject> {
-    private declare _frees: (T|null)[];
-    private _freeIdx = 0;
-    private declare _freeCmds: CachedArray<T>;
-
-    constructor (Clazz: new() => T, count: number) {
-        this._frees = new Array(count);
-        this._freeCmds = new CachedArray(count);
-        for (let i = 0; i < count; ++i) {
-            this._frees[i] = new Clazz();
-        }
-        this._freeIdx = count - 1;
-    }
-
-    /*
-    public alloc (clazz: new() => T): T {
-        return new clazz();
-    }
-    */
-
-    public alloc (Clazz: new() => T): T {
-        if (this._freeIdx < 0) {
-            const size = this._frees.length * 2;
-            const temp = this._frees;
-            this._frees = new Array<T>(size);
-
-            const increase = size - temp.length;
-            for (let i = 0; i < increase; ++i) {
-                this._frees[i] = new Clazz();
-            }
-
-            for (let i = increase, j = 0; i < size; ++i, ++j) {
-                this._frees[i] = temp[j];
-            }
-
-            this._freeIdx += increase;
-        }
-
-        const cmd = this._frees[this._freeIdx]!;
-        this._frees[this._freeIdx--] = null;
-        ++cmd.refCount;
-        return cmd;
-    }
-
-    public free (cmd: T): void {
-        if (--cmd.refCount === 0) {
-            this._freeCmds.push(cmd);
-        }
-    }
-
-    public freeCmds (cmds: CachedArray<T>): void {
-        // return ;
-        for (let i = 0; i < cmds.length; ++i) {
-            if (--cmds.array[i].refCount === 0) {
-                this._freeCmds.push(cmds.array[i]);
-            }
-        }
-    }
-
-    public release (): void {
-        for (let i = 0; i < this._freeCmds.length; ++i) {
-            const cmd = this._freeCmds.array[i];
-            cmd.clear();
-            this._frees[++this._freeIdx] = cmd;
-        }
-        this._freeCmds.clear();
-    }
-}
-
-export class WebGLCommandAllocator {
-    public declare beginRenderPassCmdPool: WebGLCommandPool<WebGLCmdBeginRenderPass>;
-    public declare bindStatesCmdPool: WebGLCommandPool<WebGLCmdBindStates>;
-    public declare drawCmdPool: WebGLCommandPool<WebGLCmdDraw>;
-    public declare updateBufferCmdPool: WebGLCommandPool<WebGLCmdUpdateBuffer>;
-    public declare copyBufferToTextureCmdPool: WebGLCommandPool<WebGLCmdCopyBufferToTexture>;
-    public declare blitTextureCmdPool: WebGLCommandPool<WebGLCmdBlitTexture>;
-
-    constructor () {
-        this.beginRenderPassCmdPool = new WebGLCommandPool(WebGLCmdBeginRenderPass, 1);
-        this.bindStatesCmdPool = new WebGLCommandPool(WebGLCmdBindStates, 1);
-        this.drawCmdPool = new WebGLCommandPool(WebGLCmdDraw, 1);
-        this.updateBufferCmdPool = new WebGLCommandPool(WebGLCmdUpdateBuffer, 1);
-        this.copyBufferToTextureCmdPool = new WebGLCommandPool(WebGLCmdCopyBufferToTexture, 1);
-        this.blitTextureCmdPool = new WebGLCommandPool(WebGLCmdBlitTexture, 1);
-    }
-
-    public clearCmds (cmdPackage: WebGLCmdPackage): void {
-        if (cmdPackage.beginRenderPassCmds.length) {
-            this.beginRenderPassCmdPool.freeCmds(cmdPackage.beginRenderPassCmds);
-            cmdPackage.beginRenderPassCmds.clear();
-        }
-
-        if (cmdPackage.bindStatesCmds.length) {
-            this.bindStatesCmdPool.freeCmds(cmdPackage.bindStatesCmds);
-            cmdPackage.bindStatesCmds.clear();
-        }
-
-        if (cmdPackage.drawCmds.length) {
-            this.drawCmdPool.freeCmds(cmdPackage.drawCmds);
-            cmdPackage.drawCmds.clear();
-        }
-
-        if (cmdPackage.updateBufferCmds.length) {
-            this.updateBufferCmdPool.freeCmds(cmdPackage.updateBufferCmds);
-            cmdPackage.updateBufferCmds.clear();
-        }
-
-        if (cmdPackage.copyBufferToTextureCmds.length) {
-            this.copyBufferToTextureCmdPool.freeCmds(cmdPackage.copyBufferToTextureCmds);
-            cmdPackage.copyBufferToTextureCmds.clear();
-        }
-
-        if (cmdPackage.blitTextureCmds.length) {
-            this.blitTextureCmdPool.freeCmds(cmdPackage.blitTextureCmds);
-            cmdPackage.blitTextureCmds.clear();
-        }
-
-        cmdPackage.cmds.clear();
-    }
-
-    public releaseCmds (): void {
-        this.beginRenderPassCmdPool.release();
-        this.bindStatesCmdPool.release();
-        this.drawCmdPool.release();
-        this.updateBufferCmdPool.release();
-        this.copyBufferToTextureCmdPool.release();
-        this.blitTextureCmdPool.release();
-    }
-}
diff --git a/cocos/gfx/webgl/webgl-command-buffer.ts b/cocos/gfx/webgl/webgl-command-buffer.ts
index 75ee4522cb3..1a6ad4721c5 100644
--- a/cocos/gfx/webgl/webgl-command-buffer.ts
+++ b/cocos/gfx/webgl/webgl-command-buffer.ts
@@ -30,71 +30,59 @@ import { InputAssembler } from '../base/input-assembler';
 import { PipelineState } from '../base/pipeline-state';
 import { Texture } from '../base/texture';
 import { WebGLDescriptorSet } from './webgl-descriptor-set';
-import { WebGLBuffer } from './webgl-buffer';
-import { WebGLCommandAllocator } from './webgl-command-allocator';
-import { WebGLFramebuffer } from './webgl-framebuffer';
 import { IWebGLGPUInputAssembler, IWebGLGPUDescriptorSet, IWebGLGPUPipelineState } from './webgl-gpu-objects';
 import { WebGLInputAssembler } from './webgl-input-assembler';
 import { WebGLPipelineState } from './webgl-pipeline-state';
-import { WebGLTexture } from './webgl-texture';
 import { RenderPass } from '../base/render-pass';
-import { WebGLRenderPass } from './webgl-render-pass';
-import { BufferUsageBit, CommandBufferType, StencilFace, BufferSource,
+import { StencilFace, BufferSource,
     CommandBufferInfo, BufferTextureCopy, Color, Rect, Viewport, DrawInfo, DynamicStates, TextureBlit, Filter } from '../base/define';
-import { WebGLCmd, WebGLCmdBeginRenderPass, WebGLCmdBindStates, WebGLCmdBlitTexture, WebGLCmdCopyBufferToTexture,
-    WebGLCmdDraw, WebGLCmdPackage, WebGLCmdUpdateBuffer } from './webgl-commands';
 import { GeneralBarrier } from '../base/states/general-barrier';
 import { TextureBarrier } from '../base/states/texture-barrier';
 import { BufferBarrier } from '../base/states/buffer-barrier';
 import { WebGLDeviceManager } from './webgl-define';
-import { error, errorID } from '../../core';
+import { errorID } from '../../core/platform/debug';
 
 export class WebGLCommandBuffer extends CommandBuffer {
-    public cmdPackage: WebGLCmdPackage = new WebGLCmdPackage();
-
-    protected _cmdAllocator: WebGLCommandAllocator = new WebGLCommandAllocator();
-    protected _isInRenderPass = false;
-    protected _curGPUPipelineState: IWebGLGPUPipelineState | null = null;
-    protected _curGPUInputAssembler: IWebGLGPUInputAssembler | null = null;
-    protected _curGPUDescriptorSets: IWebGLGPUDescriptorSet[] = [];
-    protected _curDynamicOffsets: number[] = Array(8).fill(0);
-    protected _curDynamicStates: DynamicStates = new DynamicStates();
-    protected _isStateInvalied = false;
+    protected _isInRenderPass$ = false;
+    protected _curGPUPipelineState$: IWebGLGPUPipelineState | null = null;
+    protected _curGPUInputAssembler$: IWebGLGPUInputAssembler | null = null;
+    protected _curGPUDescriptorSets$: IWebGLGPUDescriptorSet[] = [];
+    protected _curDynamicOffsets$: number[] = Array(8).fill(0);
+    protected _curDynamicStates$: DynamicStates = new DynamicStates();
+    protected _isStateInvalied$ = false;
 
     constructor () {
         super();
     }
 
     public initialize (info: Readonly<CommandBufferInfo>): void {
-        this._type = info.type;
-        this._queue = info.queue;
+        this._type$ = info.type;
+        this._queue$ = info.queue;
 
-        const setCount = WebGLDeviceManager.instance.bindingMappings.blockOffsets.length;
+        const setCount = WebGLDeviceManager.instance.bindingMappings.blockOffsets$.length;
         for (let i = 0; i < setCount; i++) {
-            this._curGPUDescriptorSets.push(null!);
+            this._curGPUDescriptorSets$.push(null!);
         }
     }
 
     public destroy (): void {
-        this._cmdAllocator.clearCmds(this.cmdPackage);
     }
 
     public begin (renderPass?: RenderPass, subpass?: number, frameBuffer?: Framebuffer): void {
-        this._cmdAllocator.clearCmds(this.cmdPackage);
-        this._curGPUPipelineState = null;
-        this._curGPUInputAssembler = null;
-        this._curGPUDescriptorSets.length = 0;
-        this._numDrawCalls = 0;
-        this._numInstances = 0;
-        this._numTris = 0;
+        this._curGPUPipelineState$ = null;
+        this._curGPUInputAssembler$ = null;
+        this._curGPUDescriptorSets$.length = 0;
+        this._numDrawCalls$ = 0;
+        this._numInstances$ = 0;
+        this._numTris$ = 0;
     }
 
     public end (): void {
-        if (this._isStateInvalied) {
+        if (this._isStateInvalied$) {
             this.bindStates();
         }
 
-        this._isInRenderPass = false;
+        this._isInRenderPass$ = false;
     }
 
     public beginRenderPass (
@@ -105,60 +93,47 @@ export class WebGLCommandBuffer extends CommandBuffer {
         clearDepth: number,
         clearStencil: number,
     ): void {
-        const cmd = this._cmdAllocator.beginRenderPassCmdPool.alloc(WebGLCmdBeginRenderPass);
-        cmd.gpuRenderPass = (renderPass as WebGLRenderPass).gpuRenderPass;
-        cmd.gpuFramebuffer = (framebuffer as WebGLFramebuffer).gpuFramebuffer;
-        cmd.renderArea.copy(renderArea);
-        cmd.clearColors.length = clearColors.length;
-        for (let i = 0; i < clearColors.length; ++i) {
-            cmd.clearColors[i] = clearColors[i];
-        }
-        cmd.clearDepth = clearDepth;
-        cmd.clearStencil = clearStencil;
-        this.cmdPackage.beginRenderPassCmds.push(cmd);
-
-        this.cmdPackage.cmds.push(WebGLCmd.BEGIN_RENDER_PASS);
-
-        this._isInRenderPass = true;
+        errorID(16401);
+        this._isInRenderPass$ = true;
     }
 
     public endRenderPass (): void {
-        this._isInRenderPass = false;
+        this._isInRenderPass$ = false;
     }
 
     public bindPipelineState (pipelineState: PipelineState): void {
         const gpuPipelineState = (pipelineState as WebGLPipelineState).gpuPipelineState;
-        if (gpuPipelineState !== this._curGPUPipelineState) {
-            this._curGPUPipelineState = gpuPipelineState;
-            this._isStateInvalied = true;
+        if (gpuPipelineState !== this._curGPUPipelineState$) {
+            this._curGPUPipelineState$ = gpuPipelineState;
+            this._isStateInvalied$ = true;
         }
     }
 
     public bindDescriptorSet (set: number, descriptorSet: DescriptorSet, dynamicOffsets?: Readonly<number[]>): void {
         const gpuDescriptorSet = (descriptorSet as WebGLDescriptorSet).gpuDescriptorSet;
-        if (gpuDescriptorSet !== this._curGPUDescriptorSets[set]) {
-            this._curGPUDescriptorSets[set] = gpuDescriptorSet;
-            this._isStateInvalied = true;
+        if (gpuDescriptorSet !== this._curGPUDescriptorSets$[set]) {
+            this._curGPUDescriptorSets$[set] = gpuDescriptorSet;
+            this._isStateInvalied$ = true;
         }
         if (dynamicOffsets) {
-            const gpuPipelineLayout = this._curGPUPipelineState?.gpuPipelineLayout;
+            const gpuPipelineLayout = this._curGPUPipelineState$?.gpuPipelineLayout$;
             if (gpuPipelineLayout) {
-                const offsets = this._curDynamicOffsets;
-                const idx = gpuPipelineLayout.dynamicOffsetOffsets[set];
+                const offsets = this._curDynamicOffsets$;
+                const idx = gpuPipelineLayout.dynamicOffsetOffsets$[set];
                 for (let i = 0; i < dynamicOffsets.length; i++) offsets[idx + i] = dynamicOffsets[i];
-                this._isStateInvalied = true;
+                this._isStateInvalied$ = true;
             }
         }
     }
 
     public bindInputAssembler (inputAssembler: InputAssembler): void {
         const gpuInputAssembler = (inputAssembler as WebGLInputAssembler).gpuInputAssembler;
-        this._curGPUInputAssembler = gpuInputAssembler;
-        this._isStateInvalied = true;
+        this._curGPUInputAssembler$ = gpuInputAssembler;
+        this._isStateInvalied$ = true;
     }
 
     public setViewport (viewport: Readonly<Viewport>): void {
-        const cache = this._curDynamicStates.viewport;
+        const cache = this._curDynamicStates$.viewport;
         if (cache.left !== viewport.left
             || cache.top !== viewport.top
             || cache.width !== viewport.width
@@ -171,12 +146,12 @@ export class WebGLCommandBuffer extends CommandBuffer {
             cache.height = viewport.height;
             cache.minDepth = viewport.minDepth;
             cache.maxDepth = viewport.maxDepth;
-            this._isStateInvalied = true;
+            this._isStateInvalied$ = true;
         }
     }
 
     public setScissor (scissor: Readonly<Rect>): void {
-        const cache = this._curDynamicStates.scissor;
+        const cache = this._curDynamicStates$.scissor;
         if (cache.x !== scissor.x
             || cache.y !== scissor.y
             || cache.width !== scissor.width
@@ -185,76 +160,76 @@ export class WebGLCommandBuffer extends CommandBuffer {
             cache.y = scissor.y;
             cache.width = scissor.width;
             cache.height = scissor.height;
-            this._isStateInvalied = true;
+            this._isStateInvalied$ = true;
         }
     }
 
     public setLineWidth (lineWidth: number): void {
-        if (this._curDynamicStates.lineWidth !== lineWidth) {
-            this._curDynamicStates.lineWidth = lineWidth;
-            this._isStateInvalied = true;
+        if (this._curDynamicStates$.lineWidth !== lineWidth) {
+            this._curDynamicStates$.lineWidth = lineWidth;
+            this._isStateInvalied$ = true;
         }
     }
 
     public setDepthBias (depthBiasConstantFactor: number, depthBiasClamp: number, depthBiasSlopeFactor: number): void {
-        const cache = this._curDynamicStates;
+        const cache = this._curDynamicStates$;
         if (cache.depthBiasConstant !== depthBiasConstantFactor
             || cache.depthBiasClamp !== depthBiasClamp
             || cache.depthBiasSlope !== depthBiasSlopeFactor) {
             cache.depthBiasConstant = depthBiasConstantFactor;
             cache.depthBiasClamp = depthBiasClamp;
             cache.depthBiasSlope = depthBiasSlopeFactor;
-            this._isStateInvalied = true;
+            this._isStateInvalied$ = true;
         }
     }
 
     public setBlendConstants (blendConstants: Readonly<Color>): void {
-        const cache = this._curDynamicStates.blendConstant;
+        const cache = this._curDynamicStates$.blendConstant;
         if (cache.x !== blendConstants.x
             || cache.y !== blendConstants.y
             || cache.z !== blendConstants.z
             || cache.w !== blendConstants.w) {
             cache.copy(blendConstants);
-            this._isStateInvalied = true;
+            this._isStateInvalied$ = true;
         }
     }
 
     public setDepthBound (minDepthBounds: number, maxDepthBounds: number): void {
-        const cache = this._curDynamicStates;
+        const cache = this._curDynamicStates$;
         if (cache.depthMinBounds !== minDepthBounds
             || cache.depthMaxBounds !== maxDepthBounds) {
             cache.depthMinBounds = minDepthBounds;
             cache.depthMaxBounds = maxDepthBounds;
-            this._isStateInvalied = true;
+            this._isStateInvalied$ = true;
         }
     }
 
     public setStencilWriteMask (face: StencilFace, writeMask: number): void {
-        const front = this._curDynamicStates.stencilStatesFront;
-        const back = this._curDynamicStates.stencilStatesBack;
+        const front = this._curDynamicStates$.stencilStatesFront;
+        const back = this._curDynamicStates$.stencilStatesBack;
         if (face & StencilFace.FRONT) {
             if (front.writeMask !== writeMask) {
                 front.writeMask = writeMask;
-                this._isStateInvalied = true;
+                this._isStateInvalied$ = true;
             }
         }
         if (face & StencilFace.BACK) {
             if (back.writeMask !== writeMask) {
                 back.writeMask = writeMask;
-                this._isStateInvalied = true;
+                this._isStateInvalied$ = true;
             }
         }
     }
 
     public setStencilCompareMask (face: StencilFace, reference: number, compareMask: number): void {
-        const front = this._curDynamicStates.stencilStatesFront;
-        const back = this._curDynamicStates.stencilStatesBack;
+        const front = this._curDynamicStates$.stencilStatesFront;
+        const back = this._curDynamicStates$.stencilStatesBack;
         if (face & StencilFace.FRONT) {
             if (front.compareMask !== compareMask
                 || front.reference !== reference) {
                 front.reference = reference;
                 front.compareMask = compareMask;
-                this._isStateInvalied = true;
+                this._isStateInvalied$ = true;
             }
         }
         if (face & StencilFace.BACK) {
@@ -262,152 +237,25 @@ export class WebGLCommandBuffer extends CommandBuffer {
                 || back.reference !== reference) {
                 back.reference = reference;
                 back.compareMask = compareMask;
-                this._isStateInvalied = true;
+                this._isStateInvalied$ = true;
             }
         }
     }
 
     public draw (infoOrAssembler: Readonly<DrawInfo> | Readonly<InputAssembler>): void {
-        if (this._type === CommandBufferType.PRIMARY && this._isInRenderPass
-            || this._type === CommandBufferType.SECONDARY) {
-            if (this._isStateInvalied) {
-                this.bindStates();
-            }
-            const info = 'drawInfo' in infoOrAssembler ? infoOrAssembler.drawInfo : infoOrAssembler;
-
-            const cmd = this._cmdAllocator.drawCmdPool.alloc(WebGLCmdDraw);
-            cmd.drawInfo.copy(info);
-            this.cmdPackage.drawCmds.push(cmd);
-
-            this.cmdPackage.cmds.push(WebGLCmd.DRAW);
-
-            ++this._numDrawCalls;
-            this._numInstances += info.instanceCount;
-            const indexCount = info.indexCount || info.vertexCount;
-            if (this._curGPUPipelineState) {
-                const glPrimitive = this._curGPUPipelineState.glPrimitive;
-                switch (glPrimitive) {
-                case 0x0004: { // WebGLRenderingContext.TRIANGLES
-                    this._numTris += indexCount / 3 * Math.max(info.instanceCount, 1);
-                    break;
-                }
-                case 0x0005: // WebGLRenderingContext.TRIANGLE_STRIP
-                case 0x0006: { // WebGLRenderingContext.TRIANGLE_FAN
-                    this._numTris += (indexCount - 2) * Math.max(info.instanceCount, 1);
-                    break;
-                }
-                default:
-                }
-            }
-        } else {
-            errorID(16328);
-        }
+        errorID(16328);
     }
 
     public updateBuffer (buffer: Buffer, data: Readonly<BufferSource>, size?: number): void {
-        if (this._type === CommandBufferType.PRIMARY && !this._isInRenderPass
-            || this._type === CommandBufferType.SECONDARY) {
-            const gpuBuffer = (buffer as WebGLBuffer).gpuBuffer;
-            if (gpuBuffer) {
-                const cmd = this._cmdAllocator.updateBufferCmdPool.alloc(WebGLCmdUpdateBuffer);
-
-                let buffSize = 0;
-                let buff: BufferSource | null = null;
-
-                // TODO: Have to copy to staging buffer first to make this work for the execution is deferred.
-                // But since we are using specialized primary command buffers in WebGL backends, we leave it as is for now
-                if (buffer.usage & BufferUsageBit.INDIRECT) {
-                    buff = data as BufferSource;
-                } else {
-                    if (size !== undefined) {
-                        buffSize = size;
-                    } else {
-                        buffSize = (data as ArrayBuffer).byteLength;
-                    }
-                    buff = data as BufferSource;
-                }
-
-                cmd.gpuBuffer = gpuBuffer;
-                cmd.buffer = buff;
-                cmd.offset = 0;
-                cmd.size = buffSize;
-                this.cmdPackage.updateBufferCmds.push(cmd);
-
-                this.cmdPackage.cmds.push(WebGLCmd.UPDATE_BUFFER);
-            }
-        } else {
-            errorID(16329);
-        }
+        errorID(16329);
     }
 
     public copyBuffersToTexture (buffers: Readonly<ArrayBufferView[]>, texture: Texture, regions: Readonly<BufferTextureCopy[]>): void {
-        if (this._type === CommandBufferType.PRIMARY && !this._isInRenderPass
-            || this._type === CommandBufferType.SECONDARY) {
-            const gpuTexture = (texture as WebGLTexture).gpuTexture;
-            if (gpuTexture) {
-                const cmd = this._cmdAllocator.copyBufferToTextureCmdPool.alloc(WebGLCmdCopyBufferToTexture);
-                if (cmd) {
-                    cmd.gpuTexture = gpuTexture;
-                    cmd.regions = regions as BufferTextureCopy[];
-                    // TODO: Have to copy to staging buffer first to make this work for the execution is deferred.
-                    // But since we are using specialized primary command buffers in WebGL backends, we leave it as is for now
-                    cmd.buffers = buffers as ArrayBufferView[];
-
-                    this.cmdPackage.copyBufferToTextureCmds.push(cmd);
-                    this.cmdPackage.cmds.push(WebGLCmd.COPY_BUFFER_TO_TEXTURE);
-                }
-            }
-        } else {
-            errorID(16330);
-        }
+        errorID(16330);
     }
 
     public execute (cmdBuffs: Readonly<CommandBuffer[]>, count: number): void {
-        for (let i = 0; i < count; ++i) {
-            const webGLCmdBuff = cmdBuffs[i] as WebGLCommandBuffer;
-
-            for (let c = 0; c < webGLCmdBuff.cmdPackage.beginRenderPassCmds.length; ++c) {
-                const cmd = webGLCmdBuff.cmdPackage.beginRenderPassCmds.array[c];
-                ++cmd.refCount;
-                this.cmdPackage.beginRenderPassCmds.push(cmd);
-            }
-
-            for (let c = 0; c < webGLCmdBuff.cmdPackage.bindStatesCmds.length; ++c) {
-                const cmd = webGLCmdBuff.cmdPackage.bindStatesCmds.array[c];
-                ++cmd.refCount;
-                this.cmdPackage.bindStatesCmds.push(cmd);
-            }
-
-            for (let c = 0; c < webGLCmdBuff.cmdPackage.drawCmds.length; ++c) {
-                const cmd = webGLCmdBuff.cmdPackage.drawCmds.array[c];
-                ++cmd.refCount;
-                this.cmdPackage.drawCmds.push(cmd);
-            }
-
-            for (let c = 0; c < webGLCmdBuff.cmdPackage.updateBufferCmds.length; ++c) {
-                const cmd = webGLCmdBuff.cmdPackage.updateBufferCmds.array[c];
-                ++cmd.refCount;
-                this.cmdPackage.updateBufferCmds.push(cmd);
-            }
-
-            for (let c = 0; c < webGLCmdBuff.cmdPackage.copyBufferToTextureCmds.length; ++c) {
-                const cmd = webGLCmdBuff.cmdPackage.copyBufferToTextureCmds.array[c];
-                ++cmd.refCount;
-                this.cmdPackage.copyBufferToTextureCmds.push(cmd);
-            }
-
-            for (let c = 0; c < webGLCmdBuff.cmdPackage.blitTextureCmds.length; ++c) {
-                const cmd = webGLCmdBuff.cmdPackage.blitTextureCmds.array[c];
-                ++cmd.refCount;
-                this.cmdPackage.blitTextureCmds.push(cmd);
-            }
-
-            this.cmdPackage.cmds.concat(webGLCmdBuff.cmdPackage.cmds.array);
-
-            this._numDrawCalls += webGLCmdBuff._numDrawCalls;
-            this._numInstances += webGLCmdBuff._numInstances;
-            this._numTris += webGLCmdBuff._numTris;
-        }
+        errorID(16402);
     }
 
     public pipelineBarrier (
@@ -419,32 +267,10 @@ export class WebGLCommandBuffer extends CommandBuffer {
     ): void {}
 
     protected bindStates (): void {
-        const bindStatesCmd = this._cmdAllocator.bindStatesCmdPool.alloc(WebGLCmdBindStates);
-
-        if (bindStatesCmd) {
-            bindStatesCmd.gpuPipelineState = this._curGPUPipelineState;
-            Array.prototype.push.apply(bindStatesCmd.gpuDescriptorSets, this._curGPUDescriptorSets);
-            Array.prototype.push.apply(bindStatesCmd.dynamicOffsets, this._curDynamicOffsets);
-            bindStatesCmd.gpuInputAssembler = this._curGPUInputAssembler;
-            bindStatesCmd.dynamicStates.copy(this._curDynamicStates);
-
-            this.cmdPackage.bindStatesCmds.push(bindStatesCmd);
-            this.cmdPackage.cmds.push(WebGLCmd.BIND_STATES);
-
-            this._isStateInvalied = false;
-        }
+        errorID(16401);
     }
 
     public blitTexture (srcTexture: Readonly<Texture>, dstTexture: Texture, regions: Readonly<TextureBlit []>, filter: Filter): void {
-        const blitTextureCmd = this._cmdAllocator.blitTextureCmdPool.alloc(WebGLCmdBlitTexture);
-        blitTextureCmd.srcTexture = (srcTexture as WebGLTexture).gpuTexture;
-        blitTextureCmd.dstTexture = (dstTexture as WebGLTexture).gpuTexture;
-        blitTextureCmd.regions = regions as TextureBlit[];
-        blitTextureCmd.filter = filter;
-
-        ++this._numDrawCalls; // blit is also seen as draw call in webgl1
-
-        this.cmdPackage.blitTextureCmds.push(blitTextureCmd);
-        this.cmdPackage.cmds.push(WebGLCmd.BLIT_TEXTURE);
+        errorID(16401);
     }
 }
diff --git a/cocos/gfx/webgl/webgl-commands.ts b/cocos/gfx/webgl/webgl-commands.ts
index 4d7955cd94c..b390174684b 100644
--- a/cocos/gfx/webgl/webgl-commands.ts
+++ b/cocos/gfx/webgl/webgl-commands.ts
@@ -22,8 +22,6 @@
  THE SOFTWARE.
 */
 
-import { debugID, error, errorID, CachedArray, cclegacy, assertID } from '../../core';
-import { WebGLCommandAllocator } from './webgl-command-allocator';
 import { WebGLEXT } from './webgl-define';
 import { WebGLDevice } from './webgl-device';
 import {
@@ -31,105 +29,112 @@ import {
     IWebGLGPUPipelineState, IWebGLGPUShader, IWebGLGPUTexture, IWebGLGPUUniformBlock, IWebGLGPUUniformSamplerTexture, IWebGLGPURenderPass,
 } from './webgl-gpu-objects';
 import {
-    BufferUsageBit, ClearFlagBit, ClearFlags, ColorMask, CullMode, Format, BufferTextureCopy, Color, Rect,
+    BufferUsageBit, ColorMask, CullMode, Format, BufferTextureCopy, Color, Rect,
     FormatInfos, FormatSize, LoadOp, MemoryUsageBit, ShaderStageFlagBit, UniformSamplerTexture,
     TextureFlagBit, TextureType, Type, FormatInfo, DynamicStateFlagBit, BufferSource, DrawInfo,
     IndirectBuffer, DynamicStates, Extent, getTypedArrayConstructor, formatAlignment, Offset, alignTo,
     TextureBlit, Filter,
 } from '../base/define';
-import { WebGLStateCache } from './webgl-state-cache';
+
+import { WebGLConstants } from '../gl-constants';
+import { assertID, debugID, error, errorID } from '../../core/platform/debug';
+import { cclegacy } from '../../core/global-exports';
+
+function max (a: number, b: number): number {
+    return Math.max(a, b);
+}
 
 export function GFXFormatToWebGLType (format: Format, gl: WebGLRenderingContext): GLenum {
     switch (format) {
-    case Format.R8: return gl.UNSIGNED_BYTE;
-    case Format.R8SN: return gl.BYTE;
-    case Format.R8UI: return gl.UNSIGNED_BYTE;
-    case Format.R8I: return gl.BYTE;
+    case Format.R8: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.R8SN: return WebGLConstants.BYTE;
+    case Format.R8UI: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.R8I: return WebGLConstants.BYTE;
     case Format.R16F: return WebGLEXT.HALF_FLOAT_OES;
-    case Format.R16UI: return gl.UNSIGNED_SHORT;
-    case Format.R16I: return gl.SHORT;
-    case Format.R32F: return gl.FLOAT;
-    case Format.R32UI: return gl.UNSIGNED_INT;
-    case Format.R32I: return gl.INT;
-
-    case Format.RG8: return gl.UNSIGNED_BYTE;
-    case Format.RG8SN: return gl.BYTE;
-    case Format.RG8UI: return gl.UNSIGNED_BYTE;
-    case Format.RG8I: return gl.BYTE;
+    case Format.R16UI: return WebGLConstants.UNSIGNED_SHORT;
+    case Format.R16I: return WebGLConstants.SHORT;
+    case Format.R32F: return WebGLConstants.FLOAT;
+    case Format.R32UI: return WebGLConstants.UNSIGNED_INT;
+    case Format.R32I: return WebGLConstants.INT;
+
+    case Format.RG8: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.RG8SN: return WebGLConstants.BYTE;
+    case Format.RG8UI: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.RG8I: return WebGLConstants.BYTE;
     case Format.RG16F: return WebGLEXT.HALF_FLOAT_OES;
-    case Format.RG16UI: return gl.UNSIGNED_SHORT;
-    case Format.RG16I: return gl.SHORT;
-    case Format.RG32F: return gl.FLOAT;
-    case Format.RG32UI: return gl.UNSIGNED_INT;
-    case Format.RG32I: return gl.INT;
-
-    case Format.RGB8: return gl.UNSIGNED_BYTE;
-    case Format.SRGB8: return gl.UNSIGNED_BYTE;
-    case Format.RGB8SN: return gl.BYTE;
-    case Format.RGB8UI: return gl.UNSIGNED_BYTE;
-    case Format.RGB8I: return gl.BYTE;
+    case Format.RG16UI: return WebGLConstants.UNSIGNED_SHORT;
+    case Format.RG16I: return WebGLConstants.SHORT;
+    case Format.RG32F: return WebGLConstants.FLOAT;
+    case Format.RG32UI: return WebGLConstants.UNSIGNED_INT;
+    case Format.RG32I: return WebGLConstants.INT;
+
+    case Format.RGB8: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.SRGB8: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.RGB8SN: return WebGLConstants.BYTE;
+    case Format.RGB8UI: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.RGB8I: return WebGLConstants.BYTE;
     case Format.RGB16F: return WebGLEXT.HALF_FLOAT_OES;
-    case Format.RGB16UI: return gl.UNSIGNED_SHORT;
-    case Format.RGB16I: return gl.SHORT;
-    case Format.RGB32F: return gl.FLOAT;
-    case Format.RGB32UI: return gl.UNSIGNED_INT;
-    case Format.RGB32I: return gl.INT;
-
-    case Format.BGRA8: return gl.UNSIGNED_BYTE;
-    case Format.RGBA8: return gl.UNSIGNED_BYTE;
-    case Format.SRGB8_A8: return gl.UNSIGNED_BYTE;
-    case Format.RGBA8SN: return gl.BYTE;
-    case Format.RGBA8UI: return gl.UNSIGNED_BYTE;
-    case Format.RGBA8I: return gl.BYTE;
+    case Format.RGB16UI: return WebGLConstants.UNSIGNED_SHORT;
+    case Format.RGB16I: return WebGLConstants.SHORT;
+    case Format.RGB32F: return WebGLConstants.FLOAT;
+    case Format.RGB32UI: return WebGLConstants.UNSIGNED_INT;
+    case Format.RGB32I: return WebGLConstants.INT;
+
+    case Format.BGRA8: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.RGBA8: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.SRGB8_A8: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.RGBA8SN: return WebGLConstants.BYTE;
+    case Format.RGBA8UI: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.RGBA8I: return WebGLConstants.BYTE;
     case Format.RGBA16F: return WebGLEXT.HALF_FLOAT_OES;
-    case Format.RGBA16UI: return gl.UNSIGNED_SHORT;
-    case Format.RGBA16I: return gl.SHORT;
-    case Format.RGBA32F: return gl.FLOAT;
-    case Format.RGBA32UI: return gl.UNSIGNED_INT;
-    case Format.RGBA32I: return gl.INT;
-
-    case Format.R5G6B5: return gl.UNSIGNED_SHORT_5_6_5;
-    case Format.R11G11B10F: return gl.FLOAT;
-    case Format.RGB5A1: return gl.UNSIGNED_SHORT_5_5_5_1;
-    case Format.RGBA4: return gl.UNSIGNED_SHORT_4_4_4_4;
-    case Format.RGB10A2: return gl.UNSIGNED_BYTE;
-    case Format.RGB10A2UI: return gl.UNSIGNED_INT;
-    case Format.RGB9E5: return gl.UNSIGNED_BYTE;
-
-    case Format.DEPTH: return gl.UNSIGNED_INT;
+    case Format.RGBA16UI: return WebGLConstants.UNSIGNED_SHORT;
+    case Format.RGBA16I: return WebGLConstants.SHORT;
+    case Format.RGBA32F: return WebGLConstants.FLOAT;
+    case Format.RGBA32UI: return WebGLConstants.UNSIGNED_INT;
+    case Format.RGBA32I: return WebGLConstants.INT;
+
+    case Format.R5G6B5: return WebGLConstants.UNSIGNED_SHORT_5_6_5;
+    case Format.R11G11B10F: return WebGLConstants.FLOAT;
+    case Format.RGB5A1: return WebGLConstants.UNSIGNED_SHORT_5_5_5_1;
+    case Format.RGBA4: return WebGLConstants.UNSIGNED_SHORT_4_4_4_4;
+    case Format.RGB10A2: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.RGB10A2UI: return WebGLConstants.UNSIGNED_INT;
+    case Format.RGB9E5: return WebGLConstants.UNSIGNED_BYTE;
+
+    case Format.DEPTH: return WebGLConstants.UNSIGNED_INT;
     case Format.DEPTH_STENCIL: return WebGLEXT.UNSIGNED_INT_24_8_WEBGL;
 
-    case Format.BC1: return gl.UNSIGNED_BYTE;
-    case Format.BC1_SRGB: return gl.UNSIGNED_BYTE;
-    case Format.BC2: return gl.UNSIGNED_BYTE;
-    case Format.BC2_SRGB: return gl.UNSIGNED_BYTE;
-    case Format.BC3: return gl.UNSIGNED_BYTE;
-    case Format.BC3_SRGB: return gl.UNSIGNED_BYTE;
-    case Format.BC4: return gl.UNSIGNED_BYTE;
-    case Format.BC4_SNORM: return gl.BYTE;
-    case Format.BC5: return gl.UNSIGNED_BYTE;
-    case Format.BC5_SNORM: return gl.BYTE;
-    case Format.BC6H_SF16: return gl.FLOAT;
-    case Format.BC6H_UF16: return gl.FLOAT;
-    case Format.BC7: return gl.UNSIGNED_BYTE;
-    case Format.BC7_SRGB: return gl.UNSIGNED_BYTE;
-
-    case Format.ETC_RGB8: return gl.UNSIGNED_BYTE;
-    case Format.ETC2_RGB8: return gl.UNSIGNED_BYTE;
-    case Format.ETC2_SRGB8: return gl.UNSIGNED_BYTE;
-    case Format.ETC2_RGB8_A1: return gl.UNSIGNED_BYTE;
-    case Format.ETC2_SRGB8_A1: return gl.UNSIGNED_BYTE;
-    case Format.EAC_R11: return gl.UNSIGNED_BYTE;
-    case Format.EAC_R11SN: return gl.BYTE;
-    case Format.EAC_RG11: return gl.UNSIGNED_BYTE;
-    case Format.EAC_RG11SN: return gl.BYTE;
-
-    case Format.PVRTC_RGB2: return gl.UNSIGNED_BYTE;
-    case Format.PVRTC_RGBA2: return gl.UNSIGNED_BYTE;
-    case Format.PVRTC_RGB4: return gl.UNSIGNED_BYTE;
-    case Format.PVRTC_RGBA4: return gl.UNSIGNED_BYTE;
-    case Format.PVRTC2_2BPP: return gl.UNSIGNED_BYTE;
-    case Format.PVRTC2_4BPP: return gl.UNSIGNED_BYTE;
+    case Format.BC1: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.BC1_SRGB: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.BC2: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.BC2_SRGB: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.BC3: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.BC3_SRGB: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.BC4: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.BC4_SNORM: return WebGLConstants.BYTE;
+    case Format.BC5: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.BC5_SNORM: return WebGLConstants.BYTE;
+    case Format.BC6H_SF16: return WebGLConstants.FLOAT;
+    case Format.BC6H_UF16: return WebGLConstants.FLOAT;
+    case Format.BC7: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.BC7_SRGB: return WebGLConstants.UNSIGNED_BYTE;
+
+    case Format.ETC_RGB8: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.ETC2_RGB8: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.ETC2_SRGB8: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.ETC2_RGB8_A1: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.ETC2_SRGB8_A1: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.EAC_R11: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.EAC_R11SN: return WebGLConstants.BYTE;
+    case Format.EAC_RG11: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.EAC_RG11SN: return WebGLConstants.BYTE;
+
+    case Format.PVRTC_RGB2: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.PVRTC_RGBA2: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.PVRTC_RGB4: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.PVRTC_RGBA4: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.PVRTC2_2BPP: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.PVRTC2_4BPP: return WebGLConstants.UNSIGNED_BYTE;
 
     case Format.ASTC_RGBA_4X4:
     case Format.ASTC_RGBA_5X4:
@@ -159,50 +164,50 @@ export function GFXFormatToWebGLType (format: Format, gl: WebGLRenderingContext)
     case Format.ASTC_SRGBA_10X10:
     case Format.ASTC_SRGBA_12X10:
     case Format.ASTC_SRGBA_12X12:
-        return gl.UNSIGNED_BYTE;
+        return WebGLConstants.UNSIGNED_BYTE;
 
     default: {
-        return gl.UNSIGNED_BYTE;
+        return WebGLConstants.UNSIGNED_BYTE;
     }
     }
 }
 
 export function GFXFormatToWebGLInternalFormat (format: Format, gl: WebGLRenderingContext): GLenum {
     switch (format) {
-    case Format.R5G6B5: return gl.RGB565;
-    case Format.RGB5A1: return gl.RGB5_A1;
-    case Format.RGBA4: return gl.RGBA4;
+    case Format.R5G6B5: return WebGLConstants.RGB565;
+    case Format.RGB5A1: return WebGLConstants.RGB5_A1;
+    case Format.RGBA4: return WebGLConstants.RGBA4;
     case Format.RGBA16F: return WebGLEXT.RGBA16F_EXT;
     case Format.RGBA32F: return WebGLEXT.RGBA32F_EXT;
     case Format.SRGB8_A8: return WebGLEXT.SRGB8_ALPHA8_EXT;
-    case Format.DEPTH: return gl.DEPTH_COMPONENT16;
-    case Format.DEPTH_STENCIL: return gl.DEPTH_STENCIL;
+    case Format.DEPTH: return WebGLConstants.DEPTH_COMPONENT16;
+    case Format.DEPTH_STENCIL: return WebGLConstants.DEPTH_STENCIL;
 
     default: {
         errorID(16309);
-        return gl.RGBA;
+        return WebGLConstants.RGBA;
     }
     }
 }
 
 export function GFXFormatToWebGLFormat (format: Format, gl: WebGLRenderingContext): GLenum {
     switch (format) {
-    case Format.A8: return gl.ALPHA;
-    case Format.L8: return gl.LUMINANCE;
-    case Format.LA8: return gl.LUMINANCE_ALPHA;
-    case Format.RGB8: return gl.RGB;
-    case Format.RGB16F: return gl.RGB;
-    case Format.RGB32F: return gl.RGB;
-    case Format.BGRA8: return gl.RGBA;
-    case Format.RGBA8: return gl.RGBA;
-    case Format.SRGB8_A8: return gl.RGBA;
-    case Format.RGBA16F: return gl.RGBA;
-    case Format.RGBA32F: return gl.RGBA;
-    case Format.R5G6B5: return gl.RGB;
-    case Format.RGB5A1: return gl.RGBA;
-    case Format.RGBA4: return gl.RGBA;
-    case Format.DEPTH: return gl.DEPTH_COMPONENT;
-    case Format.DEPTH_STENCIL: return gl.DEPTH_STENCIL;
+    case Format.A8: return WebGLConstants.ALPHA;
+    case Format.L8: return WebGLConstants.LUMINANCE;
+    case Format.LA8: return WebGLConstants.LUMINANCE_ALPHA;
+    case Format.RGB8: return WebGLConstants.RGB;
+    case Format.RGB16F: return WebGLConstants.RGB;
+    case Format.RGB32F: return WebGLConstants.RGB;
+    case Format.BGRA8: return WebGLConstants.RGBA;
+    case Format.RGBA8: return WebGLConstants.RGBA;
+    case Format.SRGB8_A8: return WebGLConstants.RGBA;
+    case Format.RGBA16F: return WebGLConstants.RGBA;
+    case Format.RGBA32F: return WebGLConstants.RGBA;
+    case Format.R5G6B5: return WebGLConstants.RGB;
+    case Format.RGB5A1: return WebGLConstants.RGBA;
+    case Format.RGBA4: return WebGLConstants.RGBA;
+    case Format.DEPTH: return WebGLConstants.DEPTH_COMPONENT;
+    case Format.DEPTH_STENCIL: return WebGLConstants.DEPTH_STENCIL;
 
     case Format.BC1: return WebGLEXT.COMPRESSED_RGB_S3TC_DXT1_EXT;
     case Format.BC1_ALPHA: return WebGLEXT.COMPRESSED_RGBA_S3TC_DXT1_EXT;
@@ -262,31 +267,31 @@ export function GFXFormatToWebGLFormat (format: Format, gl: WebGLRenderingContex
 
     default: {
         errorID(16310);
-        return gl.RGBA;
+        return WebGLConstants.RGBA;
     }
     }
 }
 
 function GFXTypeToWebGLType (type: Type, gl: WebGLRenderingContext): GLenum {
     switch (type) {
-    case Type.BOOL: return gl.BOOL;
-    case Type.BOOL2: return gl.BOOL_VEC2;
-    case Type.BOOL3: return gl.BOOL_VEC3;
-    case Type.BOOL4: return gl.BOOL_VEC4;
-    case Type.INT: return gl.INT;
-    case Type.INT2: return gl.INT_VEC2;
-    case Type.INT3: return gl.INT_VEC3;
-    case Type.INT4: return gl.INT_VEC4;
-    case Type.UINT: return gl.UNSIGNED_INT;
-    case Type.FLOAT: return gl.FLOAT;
-    case Type.FLOAT2: return gl.FLOAT_VEC2;
-    case Type.FLOAT3: return gl.FLOAT_VEC3;
-    case Type.FLOAT4: return gl.FLOAT_VEC4;
-    case Type.MAT2: return gl.FLOAT_MAT2;
-    case Type.MAT3: return gl.FLOAT_MAT3;
-    case Type.MAT4: return gl.FLOAT_MAT4;
-    case Type.SAMPLER2D: return gl.SAMPLER_2D;
-    case Type.SAMPLER_CUBE: return gl.SAMPLER_CUBE;
+    case Type.BOOL: return WebGLConstants.BOOL;
+    case Type.BOOL2: return WebGLConstants.BOOL_VEC2;
+    case Type.BOOL3: return WebGLConstants.BOOL_VEC3;
+    case Type.BOOL4: return WebGLConstants.BOOL_VEC4;
+    case Type.INT: return WebGLConstants.INT;
+    case Type.INT2: return WebGLConstants.INT_VEC2;
+    case Type.INT3: return WebGLConstants.INT_VEC3;
+    case Type.INT4: return WebGLConstants.INT_VEC4;
+    case Type.UINT: return WebGLConstants.UNSIGNED_INT;
+    case Type.FLOAT: return WebGLConstants.FLOAT;
+    case Type.FLOAT2: return WebGLConstants.FLOAT_VEC2;
+    case Type.FLOAT3: return WebGLConstants.FLOAT_VEC3;
+    case Type.FLOAT4: return WebGLConstants.FLOAT_VEC4;
+    case Type.MAT2: return WebGLConstants.FLOAT_MAT2;
+    case Type.MAT3: return WebGLConstants.FLOAT_MAT3;
+    case Type.MAT4: return WebGLConstants.FLOAT_MAT4;
+    case Type.SAMPLER2D: return WebGLConstants.SAMPLER_2D;
+    case Type.SAMPLER_CUBE: return WebGLConstants.SAMPLER_CUBE;
     default: {
         errorID(16311);
         return Type.UNKNOWN;
@@ -323,24 +328,24 @@ function GFXTypeToTypedArrayCtor (type: Type): Int32ArrayConstructor | Float32Ar
 
 function WebGLTypeToGFXType (glType: GLenum, gl: WebGLRenderingContext): Type {
     switch (glType) {
-    case gl.BOOL: return Type.BOOL;
-    case gl.BOOL_VEC2: return Type.BOOL2;
-    case gl.BOOL_VEC3: return Type.BOOL3;
-    case gl.BOOL_VEC4: return Type.BOOL4;
-    case gl.INT: return Type.INT;
-    case gl.INT_VEC2: return Type.INT2;
-    case gl.INT_VEC3: return Type.INT3;
-    case gl.INT_VEC4: return Type.INT4;
-    case gl.UNSIGNED_INT: return Type.UINT;
-    case gl.FLOAT: return Type.FLOAT;
-    case gl.FLOAT_VEC2: return Type.FLOAT2;
-    case gl.FLOAT_VEC3: return Type.FLOAT3;
-    case gl.FLOAT_VEC4: return Type.FLOAT4;
-    case gl.FLOAT_MAT2: return Type.MAT2;
-    case gl.FLOAT_MAT3: return Type.MAT3;
-    case gl.FLOAT_MAT4: return Type.MAT4;
-    case gl.SAMPLER_2D: return Type.SAMPLER2D;
-    case gl.SAMPLER_CUBE: return Type.SAMPLER_CUBE;
+    case WebGLConstants.BOOL: return Type.BOOL;
+    case WebGLConstants.BOOL_VEC2: return Type.BOOL2;
+    case WebGLConstants.BOOL_VEC3: return Type.BOOL3;
+    case WebGLConstants.BOOL_VEC4: return Type.BOOL4;
+    case WebGLConstants.INT: return Type.INT;
+    case WebGLConstants.INT_VEC2: return Type.INT2;
+    case WebGLConstants.INT_VEC3: return Type.INT3;
+    case WebGLConstants.INT_VEC4: return Type.INT4;
+    case WebGLConstants.UNSIGNED_INT: return Type.UINT;
+    case WebGLConstants.FLOAT: return Type.FLOAT;
+    case WebGLConstants.FLOAT_VEC2: return Type.FLOAT2;
+    case WebGLConstants.FLOAT_VEC3: return Type.FLOAT3;
+    case WebGLConstants.FLOAT_VEC4: return Type.FLOAT4;
+    case WebGLConstants.FLOAT_MAT2: return Type.MAT2;
+    case WebGLConstants.FLOAT_MAT3: return Type.MAT3;
+    case WebGLConstants.FLOAT_MAT4: return Type.MAT4;
+    case WebGLConstants.SAMPLER_2D: return Type.SAMPLER2D;
+    case WebGLConstants.SAMPLER_CUBE: return Type.SAMPLER_CUBE;
     default: {
         errorID(16313);
         return Type.UNKNOWN;
@@ -350,24 +355,24 @@ function WebGLTypeToGFXType (glType: GLenum, gl: WebGLRenderingContext): Type {
 
 function WebGLGetTypeSize (glType: GLenum, gl: WebGLRenderingContext): number {
     switch (glType) {
-    case gl.BOOL: return 4;
-    case gl.BOOL_VEC2: return 8;
-    case gl.BOOL_VEC3: return 12;
-    case gl.BOOL_VEC4: return 16;
-    case gl.INT: return 4;
-    case gl.INT_VEC2: return 8;
-    case gl.INT_VEC3: return 12;
-    case gl.INT_VEC4: return 16;
-    case gl.UNSIGNED_INT: return 4;
-    case gl.FLOAT: return 4;
-    case gl.FLOAT_VEC2: return 8;
-    case gl.FLOAT_VEC3: return 12;
-    case gl.FLOAT_VEC4: return 16;
-    case gl.FLOAT_MAT2: return 16;
-    case gl.FLOAT_MAT3: return 36;
-    case gl.FLOAT_MAT4: return 64;
-    case gl.SAMPLER_2D: return 4;
-    case gl.SAMPLER_CUBE: return 4;
+    case WebGLConstants.BOOL: return 4;
+    case WebGLConstants.BOOL_VEC2: return 8;
+    case WebGLConstants.BOOL_VEC3: return 12;
+    case WebGLConstants.BOOL_VEC4: return 16;
+    case WebGLConstants.INT: return 4;
+    case WebGLConstants.INT_VEC2: return 8;
+    case WebGLConstants.INT_VEC3: return 12;
+    case WebGLConstants.INT_VEC4: return 16;
+    case WebGLConstants.UNSIGNED_INT: return 4;
+    case WebGLConstants.FLOAT: return 4;
+    case WebGLConstants.FLOAT_VEC2: return 8;
+    case WebGLConstants.FLOAT_VEC3: return 12;
+    case WebGLConstants.FLOAT_VEC4: return 16;
+    case WebGLConstants.FLOAT_MAT2: return 16;
+    case WebGLConstants.FLOAT_MAT3: return 36;
+    case WebGLConstants.FLOAT_MAT4: return 64;
+    case WebGLConstants.SAMPLER_2D: return 4;
+    case WebGLConstants.SAMPLER_CUBE: return 4;
     default: {
         errorID(16314);
         return 0;
@@ -377,9 +382,9 @@ function WebGLGetTypeSize (glType: GLenum, gl: WebGLRenderingContext): number {
 
 function WebGLGetComponentCount (glType: GLenum, gl: WebGLRenderingContext): number {
     switch (glType) {
-    case gl.FLOAT_MAT2: return 2;
-    case gl.FLOAT_MAT3: return 3;
-    case gl.FLOAT_MAT4: return 4;
+    case WebGLConstants.FLOAT_MAT2: return 2;
+    case WebGLConstants.FLOAT_MAT3: return 3;
+    case WebGLConstants.FLOAT_MAT4: return 4;
     default: {
         return 1;
     }
@@ -434,238 +439,74 @@ const WebGLBlendFactors: GLenum[] = [
     0x8004, // WebGLRenderingContext.ONE_MINUS_CONSTANT_ALPHA,
 ];
 
-export enum WebGLCmd {
-    BEGIN_RENDER_PASS,
-    END_RENDER_PASS,
-    BIND_STATES,
-    DRAW,
-    UPDATE_BUFFER,
-    COPY_BUFFER_TO_TEXTURE,
-    BLIT_TEXTURE,
-    COUNT,
-}
-
-export abstract class WebGLCmdObject {
-    public declare cmdType: WebGLCmd;
-    public refCount = 0;
-
-    constructor (type: WebGLCmd) {
-        this.cmdType = type;
-    }
-
-    public abstract clear (): void;
-}
-
-export class WebGLCmdBeginRenderPass extends WebGLCmdObject {
-    public gpuRenderPass: IWebGLGPURenderPass | null = null;
-    public gpuFramebuffer: IWebGLGPUFramebuffer | null = null;
-    public renderArea = new Rect();
-    public clearFlag: ClearFlags = ClearFlagBit.NONE;
-    public clearColors: Color[] = [];
-    public clearDepth = 1.0;
-    public clearStencil = 0;
-
-    constructor () {
-        super(WebGLCmd.BEGIN_RENDER_PASS);
-    }
-
-    public clear (): void {
-        this.gpuFramebuffer = null;
-        this.clearColors.length = 0;
-    }
-}
-
-export class WebGLCmdBindStates extends WebGLCmdObject {
-    public gpuPipelineState: IWebGLGPUPipelineState | null = null;
-    public gpuInputAssembler: IWebGLGPUInputAssembler | null = null;
-    public gpuDescriptorSets: IWebGLGPUDescriptorSet[] = [];
-    public dynamicOffsets: number[] = [];
-    public dynamicStates: DynamicStates = new DynamicStates();
-
-    constructor () {
-        super(WebGLCmd.BIND_STATES);
-    }
-
-    public clear (): void {
-        this.gpuPipelineState = null;
-        this.gpuDescriptorSets.length = 0;
-        this.gpuInputAssembler = null;
-        this.dynamicOffsets.length = 0;
-    }
-}
-
-export class WebGLCmdDraw extends WebGLCmdObject {
-    public drawInfo = new DrawInfo();
-
-    constructor () {
-        super(WebGLCmd.DRAW);
-    }
-
-    public clear (): void {}
-}
-
-export class WebGLCmdUpdateBuffer extends WebGLCmdObject {
-    public gpuBuffer: IWebGLGPUBuffer | null = null;
-    public buffer: BufferSource | null = null;
-    public offset = 0;
-    public size = 0;
-
-    constructor () {
-        super(WebGLCmd.UPDATE_BUFFER);
-    }
-
-    public clear (): void {
-        this.gpuBuffer = null;
-        this.buffer = null;
-    }
-}
-
-export class WebGLCmdCopyBufferToTexture extends WebGLCmdObject {
-    public gpuTexture: IWebGLGPUTexture | null = null;
-    public buffers: ArrayBufferView[] = [];
-    public regions: BufferTextureCopy[] = [];
-
-    constructor () {
-        super(WebGLCmd.COPY_BUFFER_TO_TEXTURE);
-    }
-
-    public clear (): void {
-        this.gpuTexture = null;
-        this.buffers.length = 0;
-        this.regions.length = 0;
-    }
-}
-
-export class WebGLCmdBlitTexture extends WebGLCmdObject {
-    public srcTexture: IWebGLGPUTexture | null = null;
-    public dstTexture: IWebGLGPUTexture | null = null;
-    public regions: TextureBlit[] = [];
-    public filter: Filter = Filter.LINEAR;
-
-    constructor () {
-        super(WebGLCmd.BLIT_TEXTURE);
-    }
-
-    public clear (): void {
-        this.srcTexture = null;
-        this.dstTexture = null;
-        this.regions.length = 0;
-    }
-}
-
-export class WebGLCmdPackage {
-    public cmds: CachedArray<WebGLCmd> = new CachedArray(1);
-    public beginRenderPassCmds: CachedArray<WebGLCmdBeginRenderPass> = new CachedArray(1);
-    public bindStatesCmds: CachedArray<WebGLCmdBindStates> = new CachedArray(1);
-    public drawCmds: CachedArray<WebGLCmdDraw> = new CachedArray(1);
-    public updateBufferCmds: CachedArray<WebGLCmdUpdateBuffer> = new CachedArray(1);
-    public copyBufferToTextureCmds: CachedArray<WebGLCmdCopyBufferToTexture> = new CachedArray(1);
-    public blitTextureCmds: CachedArray<WebGLCmdBlitTexture> = new CachedArray(1);
-
-    public clearCmds (allocator: WebGLCommandAllocator): void {
-        if (this.beginRenderPassCmds.length) {
-            allocator.beginRenderPassCmdPool.freeCmds(this.beginRenderPassCmds);
-            this.beginRenderPassCmds.clear();
-        }
-
-        if (this.bindStatesCmds.length) {
-            allocator.bindStatesCmdPool.freeCmds(this.bindStatesCmds);
-            this.bindStatesCmds.clear();
-        }
-
-        if (this.drawCmds.length) {
-            allocator.drawCmdPool.freeCmds(this.drawCmds);
-            this.drawCmds.clear();
-        }
-
-        if (this.updateBufferCmds.length) {
-            allocator.updateBufferCmdPool.freeCmds(this.updateBufferCmds);
-            this.updateBufferCmds.clear();
-        }
-
-        if (this.copyBufferToTextureCmds.length) {
-            allocator.copyBufferToTextureCmdPool.freeCmds(this.copyBufferToTextureCmds);
-            this.copyBufferToTextureCmds.clear();
-        }
-
-        if (this.blitTextureCmds.length) {
-            allocator.blitTextureCmdPool.freeCmds(this.blitTextureCmds);
-            this.blitTextureCmds.clear();
-        }
-
-        this.cmds.clear();
-    }
-}
-
 export function WebGLCmdFuncCreateBuffer (device: WebGLDevice, gpuBuffer: IWebGLGPUBuffer): void {
-    const { gl } = device;
-    const cache = device.stateCache;
-    const glUsage: GLenum = gpuBuffer.memUsage & MemoryUsageBit.HOST ? gl.DYNAMIC_DRAW : gl.STATIC_DRAW;
+    const { gl, stateCache } = device;
+    const glUsage: GLenum = gpuBuffer.memUsage$ & MemoryUsageBit.HOST ? WebGLConstants.DYNAMIC_DRAW : WebGLConstants.STATIC_DRAW;
 
-    if (gpuBuffer.usage & BufferUsageBit.VERTEX) {
-        gpuBuffer.glTarget = gl.ARRAY_BUFFER;
+    if (gpuBuffer.usage$ & BufferUsageBit.VERTEX) {
+        gpuBuffer.glTarget$ = WebGLConstants.ARRAY_BUFFER;
         const glBuffer = gl.createBuffer();
         if (glBuffer) {
-            gpuBuffer.glBuffer = glBuffer;
-            if (gpuBuffer.size > 0) {
-                if (device.extensions.useVAO) {
-                    if (cache.glVAO) {
-                        device.extensions.OES_vertex_array_object!.bindVertexArrayOES(null);
-                        cache.glVAO = null;
+            gpuBuffer.glBuffer$ = glBuffer;
+            if (gpuBuffer.size$ > 0) {
+                if (device.extensions.useVAO$) {
+                    if (stateCache.glVAO$) {
+                        device.extensions.OES_vertex_array_object$!.bindVertexArrayOES(null);
+                        stateCache.glVAO$ = null;
                     }
                 }
-                gfxStateCache.gpuInputAssembler = null;
+                gfxStateCache.gpuInputAssembler$ = null;
 
-                if (device.stateCache.glArrayBuffer !== gpuBuffer.glBuffer) {
-                    gl.bindBuffer(gl.ARRAY_BUFFER, gpuBuffer.glBuffer);
-                    device.stateCache.glArrayBuffer = gpuBuffer.glBuffer;
+                if (stateCache.glArrayBuffer$ !== gpuBuffer.glBuffer$) {
+                    gl.bindBuffer(WebGLConstants.ARRAY_BUFFER, gpuBuffer.glBuffer$);
+                    stateCache.glArrayBuffer$ = gpuBuffer.glBuffer$;
                 }
 
-                gl.bufferData(gl.ARRAY_BUFFER, gpuBuffer.size, glUsage);
-                gl.bindBuffer(gl.ARRAY_BUFFER, null);
-                device.stateCache.glArrayBuffer = null;
+                gl.bufferData(WebGLConstants.ARRAY_BUFFER, gpuBuffer.size$, glUsage);
+                gl.bindBuffer(WebGLConstants.ARRAY_BUFFER, null);
+                stateCache.glArrayBuffer$ = null;
             }
         }
-    } else if (gpuBuffer.usage & BufferUsageBit.INDEX) {
-        gpuBuffer.glTarget = gl.ELEMENT_ARRAY_BUFFER;
+    } else if (gpuBuffer.usage$ & BufferUsageBit.INDEX) {
+        gpuBuffer.glTarget$ = WebGLConstants.ELEMENT_ARRAY_BUFFER;
         const glBuffer = gl.createBuffer();
 
         if (glBuffer) {
-            gpuBuffer.glBuffer = glBuffer;
-            if (gpuBuffer.size > 0) {
-                if (device.extensions.useVAO) {
-                    if (cache.glVAO) {
-                        device.extensions.OES_vertex_array_object!.bindVertexArrayOES(null);
-                        cache.glVAO = null;
+            gpuBuffer.glBuffer$ = glBuffer;
+            if (gpuBuffer.size$ > 0) {
+                if (device.extensions.useVAO$) {
+                    if (stateCache.glVAO$) {
+                        device.extensions.OES_vertex_array_object$!.bindVertexArrayOES(null);
+                        stateCache.glVAO$ = null;
                     }
                 }
-                gfxStateCache.gpuInputAssembler = null;
+                gfxStateCache.gpuInputAssembler$ = null;
 
-                if (device.stateCache.glElementArrayBuffer !== gpuBuffer.glBuffer) {
-                    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gpuBuffer.glBuffer);
-                    device.stateCache.glElementArrayBuffer = gpuBuffer.glBuffer;
+                if (stateCache.glElementArrayBuffer$ !== gpuBuffer.glBuffer$) {
+                    gl.bindBuffer(WebGLConstants.ELEMENT_ARRAY_BUFFER, gpuBuffer.glBuffer$);
+                    stateCache.glElementArrayBuffer$ = gpuBuffer.glBuffer$;
                 }
 
-                gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, gpuBuffer.size, glUsage);
-                gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
-                device.stateCache.glElementArrayBuffer = null;
+                gl.bufferData(WebGLConstants.ELEMENT_ARRAY_BUFFER, gpuBuffer.size$, glUsage);
+                gl.bindBuffer(WebGLConstants.ELEMENT_ARRAY_BUFFER, null);
+                stateCache.glElementArrayBuffer$ = null;
             }
         }
-    } else if (gpuBuffer.usage & BufferUsageBit.UNIFORM) {
-        gpuBuffer.glTarget = gl.NONE;
+    } else if (gpuBuffer.usage$ & BufferUsageBit.UNIFORM) {
+        gpuBuffer.glTarget$ = WebGLConstants.NONE;
 
-        if (gpuBuffer.buffer) {
-            gpuBuffer.vf32 = new Float32Array(gpuBuffer.buffer.buffer);
+        if (gpuBuffer.buffer$) {
+            gpuBuffer.vf32 = new Float32Array(gpuBuffer.buffer$.buffer);
         }
-    } else if (gpuBuffer.usage & BufferUsageBit.INDIRECT) {
-        gpuBuffer.glTarget = gl.NONE;
-    } else if (gpuBuffer.usage & BufferUsageBit.TRANSFER_DST) {
-        gpuBuffer.glTarget = gl.NONE;
-    } else if (gpuBuffer.usage & BufferUsageBit.TRANSFER_SRC) {
-        gpuBuffer.glTarget = gl.NONE;
+    } else if (gpuBuffer.usage$ & BufferUsageBit.INDIRECT) {
+        gpuBuffer.glTarget$ = WebGLConstants.NONE;
+    } else if (gpuBuffer.usage$ & BufferUsageBit.TRANSFER_DST) {
+        gpuBuffer.glTarget$ = WebGLConstants.NONE;
+    } else if (gpuBuffer.usage$ & BufferUsageBit.TRANSFER_SRC) {
+        gpuBuffer.glTarget$ = WebGLConstants.NONE;
     } else {
         errorID(16315);
-        gpuBuffer.glTarget = gl.NONE;
+        gpuBuffer.glTarget$ = WebGLConstants.NONE;
     }
 }
 
@@ -673,98 +514,97 @@ export function WebGLCmdFuncDestroyBuffer (device: WebGLDevice, gpuBuffer: IWebG
     const { gl } = device;
     const cache = device.stateCache;
 
-    if (gpuBuffer.glBuffer) {
+    if (gpuBuffer.glBuffer$) {
         // Firefox 75+ implicitly unbind whatever buffer there was on the slot sometimes
         // can be reproduced in the static batching scene at https://github.com/cocos-creator/test-cases-3d
-        switch (gpuBuffer.glTarget) {
-        case gl.ARRAY_BUFFER:
-            if (device.extensions.useVAO) {
-                if (cache.glVAO) {
-                    device.extensions.OES_vertex_array_object!.bindVertexArrayOES(null);
-                    device.stateCache.glVAO = null;
+        switch (gpuBuffer.glTarget$) {
+        case WebGLConstants.ARRAY_BUFFER:
+            if (device.extensions.useVAO$) {
+                if (cache.glVAO$) {
+                    device.extensions.OES_vertex_array_object$!.bindVertexArrayOES(null);
+                    cache.glVAO$ = null;
                 }
             }
-            gfxStateCache.gpuInputAssembler = null;
+            gfxStateCache.gpuInputAssembler$ = null;
 
-            gl.bindBuffer(gl.ARRAY_BUFFER, null);
-            device.stateCache.glArrayBuffer = null;
+            gl.bindBuffer(WebGLConstants.ARRAY_BUFFER, null);
+            cache.glArrayBuffer$ = null;
             break;
-        case gl.ELEMENT_ARRAY_BUFFER:
-            if (device.extensions.useVAO) {
-                if (cache.glVAO) {
-                    device.extensions.OES_vertex_array_object!.bindVertexArrayOES(null);
-                    device.stateCache.glVAO = null;
+        case WebGLConstants.ELEMENT_ARRAY_BUFFER:
+            if (device.extensions.useVAO$) {
+                if (cache.glVAO$) {
+                    device.extensions.OES_vertex_array_object$!.bindVertexArrayOES(null);
+                    cache.glVAO$ = null;
                 }
             }
-            gfxStateCache.gpuInputAssembler = null;
+            gfxStateCache.gpuInputAssembler$ = null;
 
-            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
-            device.stateCache.glElementArrayBuffer = null;
+            gl.bindBuffer(WebGLConstants.ELEMENT_ARRAY_BUFFER, null);
+            cache.glElementArrayBuffer$ = null;
             break;
         default:
         }
 
-        gl.deleteBuffer(gpuBuffer.glBuffer);
-        gpuBuffer.glBuffer = null;
+        gl.deleteBuffer(gpuBuffer.glBuffer$);
+        gpuBuffer.glBuffer$ = null;
     }
 }
 
 export function WebGLCmdFuncResizeBuffer (device: WebGLDevice, gpuBuffer: IWebGLGPUBuffer): void {
-    const { gl } = device;
-    const cache = device.stateCache;
-    const glUsage: GLenum = gpuBuffer.memUsage & MemoryUsageBit.HOST ? gl.DYNAMIC_DRAW : gl.STATIC_DRAW;
+    const { gl, stateCache } = device;
+    const glUsage: GLenum = gpuBuffer.memUsage$ & MemoryUsageBit.HOST ? WebGLConstants.DYNAMIC_DRAW : WebGLConstants.STATIC_DRAW;
 
-    if (gpuBuffer.usage & BufferUsageBit.VERTEX) {
-        if (device.extensions.useVAO) {
-            if (cache.glVAO) {
-                device.extensions.OES_vertex_array_object!.bindVertexArrayOES(null);
-                cache.glVAO = null;
+    if (gpuBuffer.usage$ & BufferUsageBit.VERTEX) {
+        if (device.extensions.useVAO$) {
+            if (stateCache.glVAO$) {
+                device.extensions.OES_vertex_array_object$!.bindVertexArrayOES(null);
+                stateCache.glVAO$ = null;
             }
         }
-        gfxStateCache.gpuInputAssembler = null;
+        gfxStateCache.gpuInputAssembler$ = null;
 
-        if (device.stateCache.glArrayBuffer !== gpuBuffer.glBuffer) {
-            gl.bindBuffer(gl.ARRAY_BUFFER, gpuBuffer.glBuffer);
+        if (stateCache.glArrayBuffer$ !== gpuBuffer.glBuffer$) {
+            gl.bindBuffer(WebGLConstants.ARRAY_BUFFER, gpuBuffer.glBuffer$);
         }
 
-        if (gpuBuffer.buffer) {
-            gl.bufferData(gl.ARRAY_BUFFER, gpuBuffer.buffer, glUsage);
+        if (gpuBuffer.buffer$) {
+            gl.bufferData(WebGLConstants.ARRAY_BUFFER, gpuBuffer.buffer$, glUsage);
         } else {
-            gl.bufferData(gl.ARRAY_BUFFER, gpuBuffer.size, glUsage);
+            gl.bufferData(WebGLConstants.ARRAY_BUFFER, gpuBuffer.size$, glUsage);
         }
-        gl.bindBuffer(gl.ARRAY_BUFFER, null);
-        device.stateCache.glArrayBuffer = null;
-    } else if (gpuBuffer.usage & BufferUsageBit.INDEX) {
-        if (device.extensions.useVAO) {
-            if (cache.glVAO) {
-                device.extensions.OES_vertex_array_object!.bindVertexArrayOES(null);
-                cache.glVAO = null;
+        gl.bindBuffer(WebGLConstants.ARRAY_BUFFER, null);
+        stateCache.glArrayBuffer$ = null;
+    } else if (gpuBuffer.usage$ & BufferUsageBit.INDEX) {
+        if (device.extensions.useVAO$) {
+            if (stateCache.glVAO$) {
+                device.extensions.OES_vertex_array_object$!.bindVertexArrayOES(null);
+                stateCache.glVAO$ = null;
             }
         }
-        gfxStateCache.gpuInputAssembler = null;
+        gfxStateCache.gpuInputAssembler$ = null;
 
-        if (device.stateCache.glElementArrayBuffer !== gpuBuffer.glBuffer) {
-            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gpuBuffer.glBuffer);
+        if (stateCache.glElementArrayBuffer$ !== gpuBuffer.glBuffer$) {
+            gl.bindBuffer(WebGLConstants.ELEMENT_ARRAY_BUFFER, gpuBuffer.glBuffer$);
         }
 
-        if (gpuBuffer.buffer) {
-            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, gpuBuffer.buffer, glUsage);
+        if (gpuBuffer.buffer$) {
+            gl.bufferData(WebGLConstants.ELEMENT_ARRAY_BUFFER, gpuBuffer.buffer$, glUsage);
         } else {
-            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, gpuBuffer.size, glUsage);
-        }
-        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
-        device.stateCache.glElementArrayBuffer = null;
-    } else if (gpuBuffer.usage & BufferUsageBit.UNIFORM) {
-        if (gpuBuffer.buffer) {
-            gpuBuffer.vf32 = new Float32Array(gpuBuffer.buffer.buffer);
-        }
-    } else if ((gpuBuffer.usage & BufferUsageBit.INDIRECT)
-            || (gpuBuffer.usage & BufferUsageBit.TRANSFER_DST)
-            || (gpuBuffer.usage & BufferUsageBit.TRANSFER_SRC)) {
-        gpuBuffer.glTarget = gl.NONE;
+            gl.bufferData(WebGLConstants.ELEMENT_ARRAY_BUFFER, gpuBuffer.size$, glUsage);
+        }
+        gl.bindBuffer(WebGLConstants.ELEMENT_ARRAY_BUFFER, null);
+        stateCache.glElementArrayBuffer$ = null;
+    } else if (gpuBuffer.usage$ & BufferUsageBit.UNIFORM) {
+        if (gpuBuffer.buffer$) {
+            gpuBuffer.vf32 = new Float32Array(gpuBuffer.buffer$.buffer);
+        }
+    } else if ((gpuBuffer.usage$ & BufferUsageBit.INDIRECT)
+            || (gpuBuffer.usage$ & BufferUsageBit.TRANSFER_DST)
+            || (gpuBuffer.usage$ & BufferUsageBit.TRANSFER_SRC)) {
+        gpuBuffer.glTarget$ = WebGLConstants.NONE;
     } else {
         errorID(16315);
-        gpuBuffer.glTarget = gl.NONE;
+        gpuBuffer.glTarget$ = WebGLConstants.NONE;
     }
 }
 
@@ -775,51 +615,50 @@ export function WebGLCmdFuncUpdateBuffer (
     offset: number,
     size: number,
 ): void {
-    if (gpuBuffer.usage & BufferUsageBit.UNIFORM) {
+    if (gpuBuffer.usage$ & BufferUsageBit.UNIFORM) {
         if (ArrayBuffer.isView(buffer)) {
             gpuBuffer.vf32!.set(buffer as Float32Array, offset / Float32Array.BYTES_PER_ELEMENT);
         } else {
             gpuBuffer.vf32!.set(new Float32Array(buffer as ArrayBuffer), offset / Float32Array.BYTES_PER_ELEMENT);
         }
-    } else if (gpuBuffer.usage & BufferUsageBit.INDIRECT) {
-        gpuBuffer.indirects.clearDraws();
+    } else if (gpuBuffer.usage$ & BufferUsageBit.INDIRECT) {
+        gpuBuffer.indirects$.clearDraws$();
         const drawInfos = (buffer as IndirectBuffer).drawInfos;
         for (let i = 0; i < drawInfos.length; ++i) {
-            gpuBuffer.indirects.setDrawInfo(offset + i, drawInfos[i]);
+            gpuBuffer.indirects$.setDrawInfo$(offset + i, drawInfos[i]);
         }
     } else {
         const buff = buffer as ArrayBuffer;
-        const { gl } = device;
-        const cache = device.stateCache;
+        const { gl, stateCache } = device;
 
-        switch (gpuBuffer.glTarget) {
-        case gl.ARRAY_BUFFER: {
-            if (device.extensions.useVAO) {
-                if (cache.glVAO) {
-                    device.extensions.OES_vertex_array_object!.bindVertexArrayOES(null);
-                    cache.glVAO = null;
+        switch (gpuBuffer.glTarget$) {
+        case WebGLConstants.ARRAY_BUFFER: {
+            if (device.extensions.useVAO$) {
+                if (stateCache.glVAO$) {
+                    device.extensions.OES_vertex_array_object$!.bindVertexArrayOES(null);
+                    stateCache.glVAO$ = null;
                 }
             }
-            gfxStateCache.gpuInputAssembler = null;
+            gfxStateCache.gpuInputAssembler$ = null;
 
-            if (device.stateCache.glArrayBuffer !== gpuBuffer.glBuffer) {
-                gl.bindBuffer(gl.ARRAY_BUFFER, gpuBuffer.glBuffer);
-                device.stateCache.glArrayBuffer = gpuBuffer.glBuffer;
+            if (stateCache.glArrayBuffer$ !== gpuBuffer.glBuffer$) {
+                gl.bindBuffer(WebGLConstants.ARRAY_BUFFER, gpuBuffer.glBuffer$);
+                stateCache.glArrayBuffer$ = gpuBuffer.glBuffer$;
             }
             break;
         }
-        case gl.ELEMENT_ARRAY_BUFFER: {
-            if (device.extensions.useVAO) {
-                if (cache.glVAO) {
-                    device.extensions.OES_vertex_array_object!.bindVertexArrayOES(null);
-                    cache.glVAO = null;
+        case WebGLConstants.ELEMENT_ARRAY_BUFFER: {
+            if (device.extensions.useVAO$) {
+                if (stateCache.glVAO$) {
+                    device.extensions.OES_vertex_array_object$!.bindVertexArrayOES(null);
+                    stateCache.glVAO$ = null;
                 }
             }
-            gfxStateCache.gpuInputAssembler = null;
+            gfxStateCache.gpuInputAssembler$ = null;
 
-            if (device.stateCache.glElementArrayBuffer !== gpuBuffer.glBuffer) {
-                gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gpuBuffer.glBuffer);
-                device.stateCache.glElementArrayBuffer = gpuBuffer.glBuffer;
+            if (stateCache.glElementArrayBuffer$ !== gpuBuffer.glBuffer$) {
+                gl.bindBuffer(WebGLConstants.ELEMENT_ARRAY_BUFFER, gpuBuffer.glBuffer$);
+                stateCache.glElementArrayBuffer$ = gpuBuffer.glBuffer$;
             }
             break;
         }
@@ -830,286 +669,286 @@ export function WebGLCmdFuncUpdateBuffer (
         }
 
         if (size === buff.byteLength) {
-            gl.bufferSubData(gpuBuffer.glTarget, offset, buff);
+            gl.bufferSubData(gpuBuffer.glTarget$, offset, buff);
         } else {
-            gl.bufferSubData(gpuBuffer.glTarget, offset, buff.slice(0, size));
+            gl.bufferSubData(gpuBuffer.glTarget$, offset, buff.slice(0, size));
         }
     }
 }
 
 export function WebGLCmdFuncCreateTexture (device: WebGLDevice, gpuTexture: IWebGLGPUTexture): void {
-    const { gl } = device;
+    const { gl, stateCache } = device;
 
-    gpuTexture.glFormat = gpuTexture.glInternalFmt = GFXFormatToWebGLFormat(gpuTexture.format, gl);
-    gpuTexture.glType = GFXFormatToWebGLType(gpuTexture.format, gl);
+    gpuTexture.glFormat$ = gpuTexture.glInternalFmt$ = GFXFormatToWebGLFormat(gpuTexture.format$, gl);
+    gpuTexture.glType$ = GFXFormatToWebGLType(gpuTexture.format$, gl);
 
-    let w = gpuTexture.width;
-    let h = gpuTexture.height;
+    let w = gpuTexture.width$;
+    let h = gpuTexture.height$;
 
-    switch (gpuTexture.type) {
+    switch (gpuTexture.type$) {
     case TextureType.TEX2D: {
-        gpuTexture.glTarget = gl.TEXTURE_2D;
+        gpuTexture.glTarget$ = WebGLConstants.TEXTURE_2D;
 
-        const maxSize = Math.max(w, h);
+        const maxSize = max(w, h);
         if (maxSize > device.capabilities.maxTextureSize) {
             errorID(9100, maxSize, device.capabilities.maxTextureSize);
         }
 
-        if (!device.textureExclusive[gpuTexture.format] && (!device.extensions.WEBGL_depth_texture && FormatInfos[gpuTexture.format].hasDepth)) {
-            gpuTexture.glInternalFmt = GFXFormatToWebGLInternalFormat(gpuTexture.format, gl);
-            gpuTexture.glRenderbuffer = gl.createRenderbuffer();
-            if (gpuTexture.size > 0) {
-                if (device.stateCache.glRenderbuffer !== gpuTexture.glRenderbuffer) {
-                    gl.bindRenderbuffer(gl.RENDERBUFFER, gpuTexture.glRenderbuffer);
-                    device.stateCache.glRenderbuffer = gpuTexture.glRenderbuffer;
+        if (!device.textureExclusive[gpuTexture.format$] && (!device.extensions.WEBGL_depth_texture$ && FormatInfos[gpuTexture.format$].hasDepth)) {
+            gpuTexture.glInternalFmt$ = GFXFormatToWebGLInternalFormat(gpuTexture.format$, gl);
+            gpuTexture.glRenderbuffer$ = gl.createRenderbuffer();
+            if (gpuTexture.size$ > 0) {
+                if (stateCache.glRenderbuffer$ !== gpuTexture.glRenderbuffer$) {
+                    gl.bindRenderbuffer(WebGLConstants.RENDERBUFFER, gpuTexture.glRenderbuffer$);
+                    stateCache.glRenderbuffer$ = gpuTexture.glRenderbuffer$;
                 }
-                gl.renderbufferStorage(gl.RENDERBUFFER, gpuTexture.glInternalFmt, w, h);
+                gl.renderbufferStorage(WebGLConstants.RENDERBUFFER, gpuTexture.glInternalFmt$, w, h);
             }
         } else {
-            gpuTexture.glTexture = gl.createTexture();
-            if (gpuTexture.size > 0) {
-                const glTexUnit = device.stateCache.glTexUnits[device.stateCache.texUnit];
+            gpuTexture.glTexture$ = gl.createTexture();
+            if (gpuTexture.size$ > 0) {
+                const glTexUnit = stateCache.glTexUnits$[stateCache.texUnit$];
 
-                if (glTexUnit.glTexture !== gpuTexture.glTexture) {
-                    gl.bindTexture(gl.TEXTURE_2D, gpuTexture.glTexture);
-                    glTexUnit.glTexture = gpuTexture.glTexture;
+                if (glTexUnit.glTexture$ !== gpuTexture.glTexture$) {
+                    gl.bindTexture(WebGLConstants.TEXTURE_2D, gpuTexture.glTexture$);
+                    glTexUnit.glTexture$ = gpuTexture.glTexture$;
                 }
 
-                if (FormatInfos[gpuTexture.format].isCompressed) {
-                    for (let i = 0; i < gpuTexture.mipLevel; ++i) {
-                        const imgSize = FormatSize(gpuTexture.format, w, h, 1);
+                if (FormatInfos[gpuTexture.format$].isCompressed) {
+                    for (let i = 0; i < gpuTexture.mipLevel$; ++i) {
+                        const imgSize = FormatSize(gpuTexture.format$, w, h, 1);
                         const view: Uint8Array = new Uint8Array(imgSize);
-                        gl.compressedTexImage2D(gl.TEXTURE_2D, i, gpuTexture.glInternalFmt, w, h, 0, view);
-                        w = Math.max(1, w >> 1);
-                        h = Math.max(1, h >> 1);
+                        gl.compressedTexImage2D(WebGLConstants.TEXTURE_2D, i, gpuTexture.glInternalFmt$, w, h, 0, view);
+                        w = max(1, w >> 1);
+                        h = max(1, h >> 1);
                     }
                 } else {
-                    for (let i = 0; i < gpuTexture.mipLevel; ++i) {
-                        gl.texImage2D(gl.TEXTURE_2D, i, gpuTexture.glInternalFmt, w, h, 0, gpuTexture.glFormat, gpuTexture.glType, null);
-                        w = Math.max(1, w >> 1);
-                        h = Math.max(1, h >> 1);
+                    for (let i = 0; i < gpuTexture.mipLevel$; ++i) {
+                        gl.texImage2D(WebGLConstants.TEXTURE_2D, i, gpuTexture.glInternalFmt$, w, h, 0, gpuTexture.glFormat$, gpuTexture.glType$, null);
+                        w = max(1, w >> 1);
+                        h = max(1, h >> 1);
                     }
                 }
 
-                if (gpuTexture.isPowerOf2) {
-                    gpuTexture.glWrapS = gl.REPEAT;
-                    gpuTexture.glWrapT = gl.REPEAT;
+                if (gpuTexture.isPowerOf2$) {
+                    gpuTexture.glWrapS$ = WebGLConstants.REPEAT;
+                    gpuTexture.glWrapT$ = WebGLConstants.REPEAT;
                 } else {
-                    gpuTexture.glWrapS = gl.CLAMP_TO_EDGE;
-                    gpuTexture.glWrapT = gl.CLAMP_TO_EDGE;
+                    gpuTexture.glWrapS$ = WebGLConstants.CLAMP_TO_EDGE;
+                    gpuTexture.glWrapT$ = WebGLConstants.CLAMP_TO_EDGE;
                 }
-                gpuTexture.glMinFilter = gl.LINEAR;
-                gpuTexture.glMagFilter = gl.LINEAR;
+                gpuTexture.glMinFilter$ = WebGLConstants.LINEAR;
+                gpuTexture.glMagFilter$ = WebGLConstants.LINEAR;
 
-                gl.texParameteri(gpuTexture.glTarget, gl.TEXTURE_WRAP_S, gpuTexture.glWrapS);
-                gl.texParameteri(gpuTexture.glTarget, gl.TEXTURE_WRAP_T, gpuTexture.glWrapT);
-                gl.texParameteri(gpuTexture.glTarget, gl.TEXTURE_MIN_FILTER, gpuTexture.glMinFilter);
-                gl.texParameteri(gpuTexture.glTarget, gl.TEXTURE_MAG_FILTER, gpuTexture.glMagFilter);
+                gl.texParameteri(gpuTexture.glTarget$, WebGLConstants.TEXTURE_WRAP_S, gpuTexture.glWrapS$);
+                gl.texParameteri(gpuTexture.glTarget$, WebGLConstants.TEXTURE_WRAP_T, gpuTexture.glWrapT$);
+                gl.texParameteri(gpuTexture.glTarget$, WebGLConstants.TEXTURE_MIN_FILTER, gpuTexture.glMinFilter$);
+                gl.texParameteri(gpuTexture.glTarget$, WebGLConstants.TEXTURE_MAG_FILTER, gpuTexture.glMagFilter$);
             }
         }
 
         break;
     }
     case TextureType.CUBE: {
-        gpuTexture.glTarget = gl.TEXTURE_CUBE_MAP;
+        gpuTexture.glTarget$ = WebGLConstants.TEXTURE_CUBE_MAP;
 
-        const maxSize = Math.max(w, h);
+        const maxSize = max(w, h);
         if (maxSize > device.capabilities.maxCubeMapTextureSize) {
             errorID(9100, maxSize, device.capabilities.maxTextureSize);
         }
 
-        gpuTexture.glTexture = gl.createTexture();
-        if (gpuTexture.size > 0) {
-            const glTexUnit = device.stateCache.glTexUnits[device.stateCache.texUnit];
+        gpuTexture.glTexture$ = gl.createTexture();
+        if (gpuTexture.size$ > 0) {
+            const glTexUnit = stateCache.glTexUnits$[stateCache.texUnit$];
 
-            if (glTexUnit.glTexture !== gpuTexture.glTexture) {
-                gl.bindTexture(gl.TEXTURE_CUBE_MAP, gpuTexture.glTexture);
-                glTexUnit.glTexture = gpuTexture.glTexture;
+            if (glTexUnit.glTexture$ !== gpuTexture.glTexture$) {
+                gl.bindTexture(WebGLConstants.TEXTURE_CUBE_MAP, gpuTexture.glTexture$);
+                glTexUnit.glTexture$ = gpuTexture.glTexture$;
             }
 
-            if (FormatInfos[gpuTexture.format].isCompressed) {
+            if (FormatInfos[gpuTexture.format$].isCompressed) {
                 for (let f = 0; f < 6; ++f) {
-                    w = gpuTexture.width;
-                    h = gpuTexture.height;
-                    for (let i = 0; i < gpuTexture.mipLevel; ++i) {
-                        const imgSize = FormatSize(gpuTexture.format, w, h, 1);
+                    w = gpuTexture.width$;
+                    h = gpuTexture.height$;
+                    for (let i = 0; i < gpuTexture.mipLevel$; ++i) {
+                        const imgSize = FormatSize(gpuTexture.format$, w, h, 1);
                         const view: Uint8Array = new Uint8Array(imgSize);
-                        gl.compressedTexImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + f, i, gpuTexture.glInternalFmt, w, h, 0, view);
-                        w = Math.max(1, w >> 1);
-                        h = Math.max(1, h >> 1);
+                        gl.compressedTexImage2D(WebGLConstants.TEXTURE_CUBE_MAP_POSITIVE_X + f, i, gpuTexture.glInternalFmt$, w, h, 0, view);
+                        w = max(1, w >> 1);
+                        h = max(1, h >> 1);
                     }
                 }
             } else {
                 for (let f = 0; f < 6; ++f) {
-                    w = gpuTexture.width;
-                    h = gpuTexture.height;
-                    for (let i = 0; i < gpuTexture.mipLevel; ++i) {
+                    w = gpuTexture.width$;
+                    h = gpuTexture.height$;
+                    for (let i = 0; i < gpuTexture.mipLevel$; ++i) {
                         gl.texImage2D(
-                            gl.TEXTURE_CUBE_MAP_POSITIVE_X + f,
+                            WebGLConstants.TEXTURE_CUBE_MAP_POSITIVE_X + f,
                             i,
-                            gpuTexture.glInternalFmt,
+                            gpuTexture.glInternalFmt$,
                             w,
                             h,
                             0,
-                            gpuTexture.glFormat,
-                            gpuTexture.glType,
+                            gpuTexture.glFormat$,
+                            gpuTexture.glType$,
                             null,
                         );
-                        w = Math.max(1, w >> 1);
-                        h = Math.max(1, h >> 1);
+                        w = max(1, w >> 1);
+                        h = max(1, h >> 1);
                     }
                 }
             }
 
-            if (gpuTexture.isPowerOf2) {
-                gpuTexture.glWrapS = gl.REPEAT;
-                gpuTexture.glWrapT = gl.REPEAT;
+            if (gpuTexture.isPowerOf2$) {
+                gpuTexture.glWrapS$ = WebGLConstants.REPEAT;
+                gpuTexture.glWrapT$ = WebGLConstants.REPEAT;
             } else {
-                gpuTexture.glWrapS = gl.CLAMP_TO_EDGE;
-                gpuTexture.glWrapT = gl.CLAMP_TO_EDGE;
+                gpuTexture.glWrapS$ = WebGLConstants.CLAMP_TO_EDGE;
+                gpuTexture.glWrapT$ = WebGLConstants.CLAMP_TO_EDGE;
             }
-            gpuTexture.glMinFilter = gl.LINEAR;
-            gpuTexture.glMagFilter = gl.LINEAR;
+            gpuTexture.glMinFilter$ = WebGLConstants.LINEAR;
+            gpuTexture.glMagFilter$ = WebGLConstants.LINEAR;
 
-            gl.texParameteri(gpuTexture.glTarget, gl.TEXTURE_WRAP_S, gpuTexture.glWrapS);
-            gl.texParameteri(gpuTexture.glTarget, gl.TEXTURE_WRAP_T, gpuTexture.glWrapT);
-            gl.texParameteri(gpuTexture.glTarget, gl.TEXTURE_MIN_FILTER, gpuTexture.glMinFilter);
-            gl.texParameteri(gpuTexture.glTarget, gl.TEXTURE_MAG_FILTER, gpuTexture.glMagFilter);
+            gl.texParameteri(gpuTexture.glTarget$, WebGLConstants.TEXTURE_WRAP_S, gpuTexture.glWrapS$);
+            gl.texParameteri(gpuTexture.glTarget$, WebGLConstants.TEXTURE_WRAP_T, gpuTexture.glWrapT$);
+            gl.texParameteri(gpuTexture.glTarget$, WebGLConstants.TEXTURE_MIN_FILTER, gpuTexture.glMinFilter$);
+            gl.texParameteri(gpuTexture.glTarget$, WebGLConstants.TEXTURE_MAG_FILTER, gpuTexture.glMagFilter$);
         }
 
         break;
     }
     default: {
         errorID(16317);
-        gpuTexture.type = TextureType.TEX2D;
-        gpuTexture.glTarget = gl.TEXTURE_2D;
+        gpuTexture.type$ = TextureType.TEX2D;
+        gpuTexture.glTarget$ = WebGLConstants.TEXTURE_2D;
     }
     }
 }
 
 export function WebGLCmdFuncDestroyTexture (device: WebGLDevice, gpuTexture: IWebGLGPUTexture): void {
-    const { gl } = device;
-    if (gpuTexture.glTexture) {
-        const glTexUnits = device.stateCache.glTexUnits;
-        let texUnit = device.stateCache.texUnit;
-        gl.deleteTexture(gpuTexture.glTexture);
+    const { gl, stateCache } = device;
+    if (gpuTexture.glTexture$) {
+        const glTexUnits = stateCache.glTexUnits$;
+        let texUnit = stateCache.texUnit$;
+        gl.deleteTexture(gpuTexture.glTexture$);
         for (let i = 0; i < glTexUnits.length; i++) {
-            if (glTexUnits[i].glTexture === gpuTexture.glTexture) {
-                gl.activeTexture(gl.TEXTURE0 + i);
+            if (glTexUnits[i].glTexture$ === gpuTexture.glTexture$) {
+                gl.activeTexture(WebGLConstants.TEXTURE0 + i);
                 texUnit = i;
-                gl.bindTexture(gpuTexture.glTarget, null);
-                glTexUnits[i].glTexture = null;
+                gl.bindTexture(gpuTexture.glTarget$, null);
+                glTexUnits[i].glTexture$ = null;
             }
         }
-        device.stateCache.texUnit = texUnit;
-        gpuTexture.glTexture = null;
+        stateCache.texUnit$ = texUnit;
+        gpuTexture.glTexture$ = null;
     }
 
-    if (gpuTexture.glRenderbuffer) {
-        let glRenderbuffer = device.stateCache.glRenderbuffer;
-        gl.deleteRenderbuffer(gpuTexture.glRenderbuffer);
-        if (glRenderbuffer === gpuTexture.glRenderbuffer) {
-            gl.bindRenderbuffer(gl.RENDERBUFFER, null);
+    if (gpuTexture.glRenderbuffer$) {
+        let glRenderbuffer = stateCache.glRenderbuffer$;
+        gl.deleteRenderbuffer(gpuTexture.glRenderbuffer$);
+        if (glRenderbuffer === gpuTexture.glRenderbuffer$) {
+            gl.bindRenderbuffer(WebGLConstants.RENDERBUFFER, null);
             glRenderbuffer = null;
         }
-        gpuTexture.glRenderbuffer = null;
+        gpuTexture.glRenderbuffer$ = null;
     }
 }
 
 export function WebGLCmdFuncResizeTexture (device: WebGLDevice, gpuTexture: IWebGLGPUTexture): void {
-    if (!gpuTexture.size) return;
+    if (!gpuTexture.size$) return;
 
-    const { gl } = device;
+    const { gl, stateCache } = device;
 
-    let w = gpuTexture.width;
-    let h = gpuTexture.height;
+    let w = gpuTexture.width$;
+    let h = gpuTexture.height$;
 
-    switch (gpuTexture.type) {
+    switch (gpuTexture.type$) {
     case TextureType.TEX2D: {
-        gpuTexture.glTarget = gl.TEXTURE_2D;
+        gpuTexture.glTarget$ = WebGLConstants.TEXTURE_2D;
 
-        const maxSize = Math.max(w, h);
+        const maxSize = max(w, h);
         if (maxSize > device.capabilities.maxTextureSize) {
             errorID(9100, maxSize, device.capabilities.maxTextureSize);
         }
 
-        if (gpuTexture.glRenderbuffer) {
-            if (device.stateCache.glRenderbuffer !== gpuTexture.glRenderbuffer) {
-                gl.bindRenderbuffer(gl.RENDERBUFFER, gpuTexture.glRenderbuffer);
-                device.stateCache.glRenderbuffer = gpuTexture.glRenderbuffer;
+        if (gpuTexture.glRenderbuffer$) {
+            if (stateCache.glRenderbuffer$ !== gpuTexture.glRenderbuffer$) {
+                gl.bindRenderbuffer(WebGLConstants.RENDERBUFFER, gpuTexture.glRenderbuffer$);
+                stateCache.glRenderbuffer$ = gpuTexture.glRenderbuffer$;
             }
-            gl.renderbufferStorage(gl.RENDERBUFFER, gpuTexture.glInternalFmt, w, h);
-        } else if (gpuTexture.glTexture) {
-            const glTexUnit = device.stateCache.glTexUnits[device.stateCache.texUnit];
+            gl.renderbufferStorage(WebGLConstants.RENDERBUFFER, gpuTexture.glInternalFmt$, w, h);
+        } else if (gpuTexture.glTexture$) {
+            const glTexUnit = stateCache.glTexUnits$[stateCache.texUnit$];
 
-            if (glTexUnit.glTexture !== gpuTexture.glTexture) {
-                gl.bindTexture(gl.TEXTURE_2D, gpuTexture.glTexture);
-                glTexUnit.glTexture = gpuTexture.glTexture;
+            if (glTexUnit.glTexture$ !== gpuTexture.glTexture$) {
+                gl.bindTexture(WebGLConstants.TEXTURE_2D, gpuTexture.glTexture$);
+                glTexUnit.glTexture$ = gpuTexture.glTexture$;
             }
 
-            if (FormatInfos[gpuTexture.format].isCompressed) {
-                for (let i = 0; i < gpuTexture.mipLevel; ++i) {
-                    const imgSize = FormatSize(gpuTexture.format, w, h, 1);
+            if (FormatInfos[gpuTexture.format$].isCompressed) {
+                for (let i = 0; i < gpuTexture.mipLevel$; ++i) {
+                    const imgSize = FormatSize(gpuTexture.format$, w, h, 1);
                     const view: Uint8Array = new Uint8Array(imgSize);
-                    gl.compressedTexImage2D(gl.TEXTURE_2D, i, gpuTexture.glInternalFmt, w, h, 0, view);
-                    w = Math.max(1, w >> 1);
-                    h = Math.max(1, h >> 1);
+                    gl.compressedTexImage2D(WebGLConstants.TEXTURE_2D, i, gpuTexture.glInternalFmt$, w, h, 0, view);
+                    w = max(1, w >> 1);
+                    h = max(1, h >> 1);
                 }
             } else {
-                for (let i = 0; i < gpuTexture.mipLevel; ++i) {
-                    gl.texImage2D(gl.TEXTURE_2D, i, gpuTexture.glInternalFmt, w, h, 0, gpuTexture.glFormat, gpuTexture.glType, null);
-                    w = Math.max(1, w >> 1);
-                    h = Math.max(1, h >> 1);
+                for (let i = 0; i < gpuTexture.mipLevel$; ++i) {
+                    gl.texImage2D(WebGLConstants.TEXTURE_2D, i, gpuTexture.glInternalFmt$, w, h, 0, gpuTexture.glFormat$, gpuTexture.glType$, null);
+                    w = max(1, w >> 1);
+                    h = max(1, h >> 1);
                 }
             }
         }
         break;
     }
     case TextureType.CUBE: {
-        gpuTexture.glTarget = gl.TEXTURE_CUBE_MAP;
+        gpuTexture.glTarget$ = WebGLConstants.TEXTURE_CUBE_MAP;
 
-        const maxSize = Math.max(w, h);
+        const maxSize = max(w, h);
         if (maxSize > device.capabilities.maxCubeMapTextureSize) {
             errorID(9100, maxSize, device.capabilities.maxTextureSize);
         }
 
-        const glTexUnit = device.stateCache.glTexUnits[device.stateCache.texUnit];
+        const glTexUnit = stateCache.glTexUnits$[stateCache.texUnit$];
 
-        if (glTexUnit.glTexture !== gpuTexture.glTexture) {
-            gl.bindTexture(gl.TEXTURE_CUBE_MAP, gpuTexture.glTexture);
-            glTexUnit.glTexture = gpuTexture.glTexture;
+        if (glTexUnit.glTexture$ !== gpuTexture.glTexture$) {
+            gl.bindTexture(WebGLConstants.TEXTURE_CUBE_MAP, gpuTexture.glTexture$);
+            glTexUnit.glTexture$ = gpuTexture.glTexture$;
         }
 
-        if (FormatInfos[gpuTexture.format].isCompressed) {
+        if (FormatInfos[gpuTexture.format$].isCompressed) {
             for (let f = 0; f < 6; ++f) {
-                w = gpuTexture.width;
-                h = gpuTexture.height;
-                for (let i = 0; i < gpuTexture.mipLevel; ++i) {
-                    const imgSize = FormatSize(gpuTexture.format, w, h, 1);
+                w = gpuTexture.width$;
+                h = gpuTexture.height$;
+                for (let i = 0; i < gpuTexture.mipLevel$; ++i) {
+                    const imgSize = FormatSize(gpuTexture.format$, w, h, 1);
                     const view: Uint8Array = new Uint8Array(imgSize);
-                    gl.compressedTexImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + f, i, gpuTexture.glInternalFmt, w, h, 0, view);
-                    w = Math.max(1, w >> 1);
-                    h = Math.max(1, h >> 1);
+                    gl.compressedTexImage2D(WebGLConstants.TEXTURE_CUBE_MAP_POSITIVE_X + f, i, gpuTexture.glInternalFmt$, w, h, 0, view);
+                    w = max(1, w >> 1);
+                    h = max(1, h >> 1);
                 }
             }
         } else {
             for (let f = 0; f < 6; ++f) {
-                w = gpuTexture.width;
-                h = gpuTexture.height;
-                for (let i = 0; i < gpuTexture.mipLevel; ++i) {
+                w = gpuTexture.width$;
+                h = gpuTexture.height$;
+                for (let i = 0; i < gpuTexture.mipLevel$; ++i) {
                     gl.texImage2D(
-                        gl.TEXTURE_CUBE_MAP_POSITIVE_X + f,
+                        WebGLConstants.TEXTURE_CUBE_MAP_POSITIVE_X + f,
                         i,
-                        gpuTexture.glInternalFmt,
+                        gpuTexture.glInternalFmt$,
                         w,
                         h,
                         0,
-                        gpuTexture.glFormat,
-                        gpuTexture.glType,
+                        gpuTexture.glFormat$,
+                        gpuTexture.glType$,
                         null,
                     );
-                    w = Math.max(1, w >> 1);
-                    h = Math.max(1, h >> 1);
+                    w = max(1, w >> 1);
+                    h = max(1, h >> 1);
                 }
             }
         }
@@ -1117,101 +956,101 @@ export function WebGLCmdFuncResizeTexture (device: WebGLDevice, gpuTexture: IWeb
     }
     default: {
         errorID(16317);
-        gpuTexture.type = TextureType.TEX2D;
-        gpuTexture.glTarget = gl.TEXTURE_2D;
+        gpuTexture.type$ = TextureType.TEX2D;
+        gpuTexture.glTarget$ = WebGLConstants.TEXTURE_2D;
     }
     }
 }
 
 export function WebGLCmdFuncCreateFramebuffer (device: WebGLDevice, gpuFramebuffer: IWebGLGPUFramebuffer): void {
-    for (let i = 0; i < gpuFramebuffer.gpuColorTextures.length; ++i) {
-        const tex = gpuFramebuffer.gpuColorTextures[i];
-        if (tex.isSwapchainTexture) {
-            gpuFramebuffer.isOffscreen = false;
+    for (let i = 0; i < gpuFramebuffer.gpuColorTextures$.length; ++i) {
+        const tex = gpuFramebuffer.gpuColorTextures$[i];
+        if (tex.isSwapchainTexture$) {
+            gpuFramebuffer.isOffscreen$ = false;
             return;
         }
     }
 
-    const { gl } = device;
+    const { gl, stateCache } = device;
     const attachments: GLenum[] = [];
 
     const glFramebuffer = gl.createFramebuffer();
     if (glFramebuffer) {
-        gpuFramebuffer.glFramebuffer = glFramebuffer;
+        gpuFramebuffer.glFramebuffer$ = glFramebuffer;
 
-        if (device.stateCache.glFramebuffer !== gpuFramebuffer.glFramebuffer) {
-            gl.bindFramebuffer(gl.FRAMEBUFFER, gpuFramebuffer.glFramebuffer);
+        if (stateCache.glFramebuffer$ !== gpuFramebuffer.glFramebuffer$) {
+            gl.bindFramebuffer(WebGLConstants.FRAMEBUFFER, gpuFramebuffer.glFramebuffer$);
         }
 
-        for (let i = 0; i < gpuFramebuffer.gpuColorTextures.length; ++i) {
-            const gpuTexture = gpuFramebuffer.gpuColorTextures[i];
+        for (let i = 0; i < gpuFramebuffer.gpuColorTextures$.length; ++i) {
+            const gpuTexture = gpuFramebuffer.gpuColorTextures$[i];
             if (gpuTexture) {
-                if (gpuTexture.glTexture) {
+                if (gpuTexture.glTexture$) {
                     gl.framebufferTexture2D(
-                        gl.FRAMEBUFFER,
-                        gl.COLOR_ATTACHMENT0 + i,
-                        gpuTexture.glTarget,
-                        gpuTexture.glTexture,
+                        WebGLConstants.FRAMEBUFFER,
+                        WebGLConstants.COLOR_ATTACHMENT0 + i,
+                        gpuTexture.glTarget$,
+                        gpuTexture.glTexture$,
                         0,
                     ); // level must be 0
                 } else {
                     gl.framebufferRenderbuffer(
-                        gl.FRAMEBUFFER,
-                        gl.COLOR_ATTACHMENT0 + i,
-                        gl.RENDERBUFFER,
-                        gpuTexture.glRenderbuffer,
+                        WebGLConstants.FRAMEBUFFER,
+                        WebGLConstants.COLOR_ATTACHMENT0 + i,
+                        WebGLConstants.RENDERBUFFER,
+                        gpuTexture.glRenderbuffer$,
                     );
                 }
 
-                attachments.push(gl.COLOR_ATTACHMENT0 + i);
-                gpuFramebuffer.width = Math.min(gpuFramebuffer.width, gpuTexture.width);
-                gpuFramebuffer.height = Math.min(gpuFramebuffer.height, gpuTexture.height);
+                attachments.push(WebGLConstants.COLOR_ATTACHMENT0 + i);
+                gpuFramebuffer.width$ = Math.min(gpuFramebuffer.width$, gpuTexture.width$);
+                gpuFramebuffer.height$ = Math.min(gpuFramebuffer.height$, gpuTexture.height$);
             }
         }
 
-        const dst = gpuFramebuffer.gpuDepthStencilTexture;
+        const dst = gpuFramebuffer.gpuDepthStencilTexture$;
         if (dst) {
-            const glAttachment = FormatInfos[dst.format].hasStencil ? gl.DEPTH_STENCIL_ATTACHMENT : gl.DEPTH_ATTACHMENT;
-            if (dst.glTexture) {
+            const glAttachment = FormatInfos[dst.format$].hasStencil ? WebGLConstants.DEPTH_STENCIL_ATTACHMENT : WebGLConstants.DEPTH_ATTACHMENT;
+            if (dst.glTexture$) {
                 gl.framebufferTexture2D(
-                    gl.FRAMEBUFFER,
+                    WebGLConstants.FRAMEBUFFER,
                     glAttachment,
-                    dst.glTarget,
-                    dst.glTexture,
+                    dst.glTarget$,
+                    dst.glTexture$,
                     0,
                 ); // level must be 0
             } else {
                 gl.framebufferRenderbuffer(
-                    gl.FRAMEBUFFER,
+                    WebGLConstants.FRAMEBUFFER,
                     glAttachment,
-                    gl.RENDERBUFFER,
-                    dst.glRenderbuffer,
+                    WebGLConstants.RENDERBUFFER,
+                    dst.glRenderbuffer$,
                 );
             }
-            gpuFramebuffer.width = Math.min(gpuFramebuffer.width, dst.width);
-            gpuFramebuffer.height = Math.min(gpuFramebuffer.height, dst.height);
+            gpuFramebuffer.width$ = Math.min(gpuFramebuffer.width$, dst.width$);
+            gpuFramebuffer.height$ = Math.min(gpuFramebuffer.height$, dst.height$);
         }
 
-        if (device.extensions.WEBGL_draw_buffers) {
-            device.extensions.WEBGL_draw_buffers.drawBuffersWEBGL(attachments);
+        if (device.extensions.WEBGL_draw_buffers$) {
+            device.extensions.WEBGL_draw_buffers$.drawBuffersWEBGL(attachments);
         }
 
-        const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
-        if (status !== gl.FRAMEBUFFER_COMPLETE) {
+        const status = gl.checkFramebufferStatus(WebGLConstants.FRAMEBUFFER);
+        if (status !== WebGLConstants.FRAMEBUFFER_COMPLETE) {
             switch (status) {
-            case gl.FRAMEBUFFER_INCOMPLETE_ATTACHMENT: {
+            case WebGLConstants.FRAMEBUFFER_INCOMPLETE_ATTACHMENT: {
                 errorID(16318);
                 break;
             }
-            case gl.FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT: {
+            case WebGLConstants.FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT: {
                 errorID(16319);
                 break;
             }
-            case gl.FRAMEBUFFER_INCOMPLETE_DIMENSIONS: {
+            case WebGLConstants.FRAMEBUFFER_INCOMPLETE_DIMENSIONS: {
                 errorID(16320);
                 break;
             }
-            case gl.FRAMEBUFFER_UNSUPPORTED: {
+            case WebGLConstants.FRAMEBUFFER_UNSUPPORTED: {
                 errorID(16321);
                 break;
             }
@@ -1219,42 +1058,43 @@ export function WebGLCmdFuncCreateFramebuffer (device: WebGLDevice, gpuFramebuff
             }
         }
 
-        if (device.stateCache.glFramebuffer !== gpuFramebuffer.glFramebuffer) {
-            gl.bindFramebuffer(gl.FRAMEBUFFER, device.stateCache.glFramebuffer);
+        if (stateCache.glFramebuffer$ !== gpuFramebuffer.glFramebuffer$) {
+            gl.bindFramebuffer(WebGLConstants.FRAMEBUFFER, stateCache.glFramebuffer$);
         }
     }
 }
 
 export function WebGLCmdFuncDestroyFramebuffer (device: WebGLDevice, gpuFramebuffer: IWebGLGPUFramebuffer): void {
-    if (gpuFramebuffer.glFramebuffer) {
-        device.gl.deleteFramebuffer(gpuFramebuffer.glFramebuffer);
-        if (device.stateCache.glFramebuffer === gpuFramebuffer.glFramebuffer) {
-            device.gl.bindFramebuffer(device.gl.FRAMEBUFFER, null);
-            device.stateCache.glFramebuffer = null;
+    const { gl, stateCache } = device;
+    if (gpuFramebuffer.glFramebuffer$) {
+        gl.deleteFramebuffer(gpuFramebuffer.glFramebuffer$);
+        if (stateCache.glFramebuffer$ === gpuFramebuffer.glFramebuffer$) {
+            gl.bindFramebuffer(WebGLConstants.FRAMEBUFFER, null);
+            stateCache.glFramebuffer$ = null;
         }
-        gpuFramebuffer.glFramebuffer = null;
+        gpuFramebuffer.glFramebuffer$ = null;
     }
 }
 
 export function WebGLCmdFuncCreateShader (device: WebGLDevice, gpuShader: IWebGLGPUShader): void {
-    const { gl } = device;
+    const { gl, stateCache } = device;
 
-    for (let k = 0; k < gpuShader.gpuStages.length; k++) {
-        const gpuStage = gpuShader.gpuStages[k];
+    for (let k = 0; k < gpuShader.gpuStages$.length; k++) {
+        const gpuStage = gpuShader.gpuStages$[k];
 
         let glShaderType: GLenum = 0;
         let shaderTypeStr = '';
         let lineNumber = 1;
 
-        switch (gpuStage.type) {
+        switch (gpuStage.type$) {
         case ShaderStageFlagBit.VERTEX: {
             shaderTypeStr = 'VertexShader';
-            glShaderType = gl.VERTEX_SHADER;
+            glShaderType = WebGLConstants.VERTEX_SHADER;
             break;
         }
         case ShaderStageFlagBit.FRAGMENT: {
             shaderTypeStr = 'FragmentShader';
-            glShaderType = gl.FRAGMENT_SHADER;
+            glShaderType = WebGLConstants.FRAGMENT_SHADER;
             break;
         }
         default: {
@@ -1265,20 +1105,20 @@ export function WebGLCmdFuncCreateShader (device: WebGLDevice, gpuShader: IWebGL
 
         const glShader = gl.createShader(glShaderType);
         if (glShader) {
-            gpuStage.glShader = glShader;
-            gl.shaderSource(gpuStage.glShader, gpuStage.source);
-            gl.compileShader(gpuStage.glShader);
-
-            if (!gl.getShaderParameter(gpuStage.glShader, gl.COMPILE_STATUS)) {
-                errorID(16323, shaderTypeStr, gpuShader.name);
-                errorID(16324, gpuStage.source.replace(/^|\n/g, (): string => `\n${lineNumber++} `));
-                error(gl.getShaderInfoLog(gpuStage.glShader));
-
-                for (let l = 0; l < gpuShader.gpuStages.length; l++) {
-                    const stage = gpuShader.gpuStages[k];
-                    if (stage.glShader) {
-                        gl.deleteShader(stage.glShader);
-                        stage.glShader = null;
+            gpuStage.glShader$ = glShader;
+            gl.shaderSource(gpuStage.glShader$, gpuStage.source$);
+            gl.compileShader(gpuStage.glShader$);
+
+            if (!gl.getShaderParameter(gpuStage.glShader$, WebGLConstants.COMPILE_STATUS)) {
+                errorID(16323, shaderTypeStr, gpuShader.name$);
+                errorID(16324, gpuStage.source$.replace(/^|\n/g, (): string => `\n${lineNumber++} `));
+                error(gl.getShaderInfoLog(gpuStage.glShader$));
+
+                for (let l = 0; l < gpuShader.gpuStages$.length; l++) {
+                    const stage = gpuShader.gpuStages$[k];
+                    if (stage.glShader$) {
+                        gl.deleteShader(stage.glShader$);
+                        stage.glShader$ = null;
                     }
                 }
                 return;
@@ -1291,85 +1131,86 @@ export function WebGLCmdFuncCreateShader (device: WebGLDevice, gpuShader: IWebGL
         return;
     }
 
-    gpuShader.glProgram = glProgram;
+    gpuShader.glProgram$ = glProgram;
 
     // link program
-    for (let k = 0; k < gpuShader.gpuStages.length; k++) {
-        const gpuStage = gpuShader.gpuStages[k];
-        gl.attachShader(gpuShader.glProgram, gpuStage.glShader!);
+    for (let k = 0; k < gpuShader.gpuStages$.length; k++) {
+        const gpuStage = gpuShader.gpuStages$[k];
+        gl.attachShader(gpuShader.glProgram$, gpuStage.glShader$!);
     }
 
-    gl.linkProgram(gpuShader.glProgram);
+    gl.linkProgram(gpuShader.glProgram$);
 
     // detach & delete immediately
-    if (device.extensions.destroyShadersImmediately) {
-        for (let k = 0; k < gpuShader.gpuStages.length; k++) {
-            const gpuStage = gpuShader.gpuStages[k];
-            if (gpuStage.glShader) {
-                gl.detachShader(gpuShader.glProgram, gpuStage.glShader);
-                gl.deleteShader(gpuStage.glShader);
-                gpuStage.glShader = null;
+    if (device.extensions.destroyShadersImmediately$) {
+        for (let k = 0; k < gpuShader.gpuStages$.length; k++) {
+            const gpuStage = gpuShader.gpuStages$[k];
+            if (gpuStage.glShader$) {
+                gl.detachShader(gpuShader.glProgram$, gpuStage.glShader$);
+                gl.deleteShader(gpuStage.glShader$);
+                gpuStage.glShader$ = null;
             }
         }
     }
 
-    if (gl.getProgramParameter(gpuShader.glProgram, gl.LINK_STATUS)) {
-        debugID(16325, gpuShader.name);
+    if (gl.getProgramParameter(gpuShader.glProgram$, WebGLConstants.LINK_STATUS)) {
+        debugID(16325, gpuShader.name$);
     } else {
-        errorID(16326, gpuShader.name);
-        error(gl.getProgramInfoLog(gpuShader.glProgram));
+        errorID(16326, gpuShader.name$);
+        error(gl.getProgramInfoLog(gpuShader.glProgram$));
         return;
     }
 
     // parse inputs
-    const activeAttribCount: number = gl.getProgramParameter(gpuShader.glProgram, gl.ACTIVE_ATTRIBUTES);
-    gpuShader.glInputs = new Array<IWebGLGPUInput>(activeAttribCount);
+    const activeAttribCount: number = gl.getProgramParameter(gpuShader.glProgram$, WebGLConstants.ACTIVE_ATTRIBUTES);
+    gpuShader.glInputs$ = new Array<IWebGLGPUInput>(activeAttribCount);
 
     for (let i = 0; i < activeAttribCount; ++i) {
-        const attribInfo = gl.getActiveAttrib(gpuShader.glProgram, i);
+        const attribInfo = gl.getActiveAttrib(gpuShader.glProgram$, i);
         if (attribInfo) {
+            const { type: attribType, name: attribName, size: attribSize } = attribInfo;
             let varName: string;
-            const nameOffset = attribInfo.name.indexOf('[');
+            const nameOffset = attribName.indexOf('[');
             if (nameOffset !== -1) {
-                varName = attribInfo.name.substr(0, nameOffset);
+                varName = attribName.substr(0, nameOffset);
             } else {
-                varName = attribInfo.name;
+                varName = attribName;
             }
 
-            const glLoc = gl.getAttribLocation(gpuShader.glProgram, varName);
-            const type = WebGLTypeToGFXType(attribInfo.type, gl);
-            const stride = WebGLGetTypeSize(attribInfo.type, gl);
+            const glLoc = gl.getAttribLocation(gpuShader.glProgram$, varName);
+            const gfxType = WebGLTypeToGFXType(attribType, gl);
+            const stride = WebGLGetTypeSize(attribType, gl);
 
-            gpuShader.glInputs[i] = {
-                binding: glLoc,
-                name: varName,
-                type,
-                stride,
-                count: attribInfo.size,
-                size: stride * attribInfo.size,
+            gpuShader.glInputs$[i] = {
+                binding$: glLoc,
+                name$: varName,
+                type$: gfxType,
+                stride$: stride,
+                count$: attribSize,
+                size$: stride * attribSize,
 
-                glType: attribInfo.type,
-                glLoc,
+                glType$: attribType,
+                glLoc$: glLoc,
             };
         }
     }
 
     // create uniform blocks
-    if (gpuShader.blocks.length > 0) {
-        gpuShader.glBlocks = new Array<IWebGLGPUUniformBlock>(gpuShader.blocks.length);
-        for (let i = 0; i < gpuShader.blocks.length; ++i) {
-            const block = gpuShader.blocks[i];
+    if (gpuShader.blocks$.length > 0) {
+        gpuShader.glBlocks$ = new Array<IWebGLGPUUniformBlock>(gpuShader.blocks$.length);
+        for (let i = 0; i < gpuShader.blocks$.length; ++i) {
+            const block = gpuShader.blocks$[i];
 
             const glBlock: IWebGLGPUUniformBlock = {
-                set: block.set,
-                binding: block.binding,
-                name: block.name,
-                size: 0,
-                glUniforms: new Array<IWebGLGPUUniform>(block.members.length),
-                glActiveUniforms: [],
+                set$: block.set,
+                binding$: block.binding,
+                name$: block.name,
+                size$: 0,
+                glUniforms$: new Array<IWebGLGPUUniform>(block.members.length),
+                glActiveUniforms$: [],
             };
 
-            gpuShader.glBlocks[i] = glBlock;
+            gpuShader.glBlocks$[i] = glBlock;
 
             for (let u = 0; u < block.members.length; ++u) {
                 const uniform = block.members[u];
@@ -1377,63 +1218,63 @@ export function WebGLCmdFuncCreateShader (device: WebGLDevice, gpuShader: IWebGL
                 const stride = WebGLGetTypeSize(glType, gl);
                 const size = stride * uniform.count;
 
-                glBlock.glUniforms[u] = {
-                    binding: -1,
-                    name: uniform.name,
-                    type: uniform.type,
-                    stride,
-                    count: uniform.count,
-                    size,
-                    offset: 0,
-
-                    glType,
-                    glLoc: null!,
-                    array: null!,
+                glBlock.glUniforms$[u] = {
+                    binding$: -1,
+                    name$: uniform.name,
+                    type$: uniform.type,
+                    stride$: stride,
+                    count$: uniform.count,
+                    size$: size,
+                    offset$: 0,
+
+                    glType$: glType,
+                    glLoc$: null!,
+                    array$: null!,
                 };
             }
         }
     }
 
     // WebGL doesn't support Framebuffer Fetch
-    for (let i = 0; i < gpuShader.subpassInputs.length; ++i) {
-        const subpassInput = gpuShader.subpassInputs[i];
-        gpuShader.samplerTextures.push(
+    for (let i = 0; i < gpuShader.subpassInputs$.length; ++i) {
+        const subpassInput = gpuShader.subpassInputs$[i];
+        gpuShader.samplerTextures$.push(
             new UniformSamplerTexture(subpassInput.set, subpassInput.binding, subpassInput.name, Type.SAMPLER2D, subpassInput.count),
         );
     }
 
     // create uniform sampler textures
-    if (gpuShader.samplerTextures.length > 0) {
-        gpuShader.glSamplerTextures = new Array<IWebGLGPUUniformSamplerTexture>(gpuShader.samplerTextures.length);
-
-        for (let i = 0; i < gpuShader.samplerTextures.length; ++i) {
-            const sampler = gpuShader.samplerTextures[i];
-            gpuShader.glSamplerTextures[i] = {
-                set: sampler.set,
-                binding: sampler.binding,
-                name: sampler.name,
-                type: sampler.type,
-                count: sampler.count,
-                units: [],
-                glUnits: null!,
-                glType: GFXTypeToWebGLType(sampler.type, gl),
-                glLoc: null!,
+    if (gpuShader.samplerTextures$.length > 0) {
+        gpuShader.glSamplerTextures$ = new Array<IWebGLGPUUniformSamplerTexture>(gpuShader.samplerTextures$.length);
+
+        for (let i = 0; i < gpuShader.samplerTextures$.length; ++i) {
+            const sampler = gpuShader.samplerTextures$[i];
+            gpuShader.glSamplerTextures$[i] = {
+                set$: sampler.set,
+                binding$: sampler.binding,
+                name$: sampler.name,
+                type$: sampler.type,
+                count$: sampler.count,
+                units$: [],
+                glUnits$: null!,
+                glType$: GFXTypeToWebGLType(sampler.type, gl),
+                glLoc$: null!,
             };
         }
     }
 
     // parse uniforms
-    const activeUniformCount = gl.getProgramParameter(gpuShader.glProgram, gl.ACTIVE_UNIFORMS);
+    const activeUniformCount = gl.getProgramParameter(gpuShader.glProgram$, WebGLConstants.ACTIVE_UNIFORMS);
 
     for (let i = 0; i < activeUniformCount; ++i) {
-        const uniformInfo = gl.getActiveUniform(gpuShader.glProgram, i);
+        const uniformInfo = gl.getActiveUniform(gpuShader.glProgram$, i);
         if (uniformInfo) {
-            const isSampler = (uniformInfo.type === gl.SAMPLER_2D)
-                || (uniformInfo.type === gl.SAMPLER_CUBE);
+            const isSampler = (uniformInfo.type === WebGLConstants.SAMPLER_2D)
+                || (uniformInfo.type === WebGLConstants.SAMPLER_CUBE);
 
             if (!isSampler) {
-                const glLoc = gl.getUniformLocation(gpuShader.glProgram, uniformInfo.name);
-                if (device.extensions.isLocationActive(glLoc)) {
+                const glLoc = gl.getUniformLocation(gpuShader.glProgram$, uniformInfo.name);
+                if (device.extensions.isLocationActive$(glLoc)) {
                     let varName: string;
                     const nameOffset = uniformInfo.name.indexOf('[');
                     if (nameOffset !== -1) {
@@ -1443,18 +1284,18 @@ export function WebGLCmdFuncCreateShader (device: WebGLDevice, gpuShader: IWebGL
                     }
 
                     // build uniform block mapping
-                    for (let j = 0; j < gpuShader.glBlocks.length; j++) {
-                        const glBlock = gpuShader.glBlocks[j];
-
-                        for (let k = 0; k < glBlock.glUniforms.length; k++) {
-                            const glUniform = glBlock.glUniforms[k];
-                            if (glUniform.name === varName) {
-                                glUniform.glLoc = glLoc;
-                                glUniform.count = uniformInfo.size;
-                                glUniform.size = glUniform.stride * glUniform.count;
-                                glUniform.array = new (GFXTypeToTypedArrayCtor(glUniform.type))(glUniform.size / 4);
-
-                                glBlock.glActiveUniforms.push(glUniform);
+                    for (let j = 0; j < gpuShader.glBlocks$.length; j++) {
+                        const glBlock = gpuShader.glBlocks$[j];
+
+                        for (let k = 0; k < glBlock.glUniforms$.length; k++) {
+                            const glUniform = glBlock.glUniforms$[k];
+                            if (glUniform.name$ === varName) {
+                                glUniform.glLoc$ = glLoc;
+                                glUniform.count$ = uniformInfo.size;
+                                glUniform.size$ = glUniform.stride$ * glUniform.count$;
+                                glUniform.array$ = new (GFXTypeToTypedArrayCtor(glUniform.type$))(glUniform.size$ / 4);
+
+                                glBlock.glActiveUniforms$.push(glUniform);
                                 break;
                             }
                         }
@@ -1467,54 +1308,55 @@ export function WebGLCmdFuncCreateShader (device: WebGLDevice, gpuShader: IWebGL
     // calculate offset & size
     // WARNING: we can't handle inactive uniform arrays with wrong input sizes
     // and there is no way to detect that for now
-    for (let j = 0; j < gpuShader.glBlocks.length; j++) {
-        const glBlock = gpuShader.glBlocks[j];
-        for (let k = 0; k < glBlock.glUniforms.length; k++) {
-            const glUniform = glBlock.glUniforms[k];
-            glUniform.offset = glBlock.size / 4;
-            glBlock.size += glUniform.size;
+    for (let j = 0; j < gpuShader.glBlocks$.length; j++) {
+        const glBlock = gpuShader.glBlocks$[j];
+        for (let k = 0; k < glBlock.glUniforms$.length; k++) {
+            const glUniform = glBlock.glUniforms$[k];
+            glUniform.offset$ = glBlock.size$ / 4;
+            glBlock.size$ += glUniform.size$;
         }
     }
 
     // texture unit index mapping optimization
     const glActiveSamplers: IWebGLGPUUniformSamplerTexture[] = [];
     const glActiveSamplerLocations: WebGLUniformLocation[] = [];
-    const { bindingMappings } = device;
-    const { texUnitCacheMap } = device.stateCache;
+    const { bindingMappings, capabilities } = device;
+    const { texUnitCacheMap$: texUnitCacheMap } = device.stateCache;
+    const { maxTextureUnits } = capabilities;
 
     if (!(cclegacy.rendering && cclegacy.rendering.enableEffectImport)) {
         let flexibleSetBaseOffset = 0;
-        for (let i = 0; i < gpuShader.blocks.length; ++i) {
-            if (gpuShader.blocks[i].set === bindingMappings.flexibleSet) {
+        for (let i = 0; i < gpuShader.blocks$.length; ++i) {
+            if (gpuShader.blocks$[i].set === bindingMappings.flexibleSet$) {
                 flexibleSetBaseOffset++;
             }
         }
 
         let arrayOffset = 0;
-        for (let i = 0; i < gpuShader.samplerTextures.length; ++i) {
-            const sampler = gpuShader.samplerTextures[i];
-            const glLoc = gl.getUniformLocation(gpuShader.glProgram, sampler.name);
-            if (device.extensions.isLocationActive(glLoc)) {
-                glActiveSamplers.push(gpuShader.glSamplerTextures[i]);
+        for (let i = 0; i < gpuShader.samplerTextures$.length; ++i) {
+            const sampler = gpuShader.samplerTextures$[i];
+            const glLoc = gl.getUniformLocation(gpuShader.glProgram$, sampler.name);
+            if (device.extensions.isLocationActive$(glLoc)) {
+                glActiveSamplers.push(gpuShader.glSamplerTextures$[i]);
                 glActiveSamplerLocations.push(glLoc);
             }
             if (texUnitCacheMap[sampler.name] === undefined) {
-                let binding = sampler.binding + bindingMappings.samplerTextureOffsets[sampler.set] + arrayOffset;
-                if (sampler.set === bindingMappings.flexibleSet) { binding -= flexibleSetBaseOffset; }
-                texUnitCacheMap[sampler.name] = binding % device.capabilities.maxTextureUnits;
+                let binding = sampler.binding + bindingMappings.samplerTextureOffsets$[sampler.set] + arrayOffset;
+                if (sampler.set === bindingMappings.flexibleSet$) { binding -= flexibleSetBaseOffset; }
+                texUnitCacheMap[sampler.name] = binding % maxTextureUnits;
                 arrayOffset += sampler.count - 1;
             }
         }
     } else {
-        for (let i = 0; i < gpuShader.samplerTextures.length; ++i) {
-            const sampler = gpuShader.samplerTextures[i];
-            const glLoc = gl.getUniformLocation(gpuShader.glProgram, sampler.name);
-            if (device.extensions.isLocationActive(glLoc)) {
-                glActiveSamplers.push(gpuShader.glSamplerTextures[i]);
+        for (let i = 0; i < gpuShader.samplerTextures$.length; ++i) {
+            const sampler = gpuShader.samplerTextures$[i];
+            const glLoc = gl.getUniformLocation(gpuShader.glProgram$, sampler.name);
+            if (device.extensions.isLocationActive$(glLoc)) {
+                glActiveSamplers.push(gpuShader.glSamplerTextures$[i]);
                 glActiveSamplerLocations.push(glLoc);
             }
             if (texUnitCacheMap[sampler.name] === undefined) {
-                texUnitCacheMap[sampler.name] = sampler.flattened % device.capabilities.maxTextureUnits;
+                texUnitCacheMap[sampler.name] = sampler.flattened % maxTextureUnits;
             }
         }
     }
@@ -1525,14 +1367,14 @@ export function WebGLCmdFuncCreateShader (device: WebGLDevice, gpuShader: IWebGL
         for (let i = 0; i < glActiveSamplers.length; ++i) {
             const glSampler = glActiveSamplers[i];
 
-            let cachedUnit = texUnitCacheMap[glSampler.name];
+            let cachedUnit = texUnitCacheMap[glSampler.name$];
             if (cachedUnit !== undefined) {
-                glSampler.glLoc = glActiveSamplerLocations[i];
-                for (let t = 0; t < glSampler.count; ++t) {
+                glSampler.glLoc$ = glActiveSamplerLocations[i];
+                for (let t = 0; t < glSampler.count$; ++t) {
                     while (usedTexUnits[cachedUnit]) {
-                        cachedUnit = (cachedUnit + 1) % device.capabilities.maxTextureUnits;
+                        cachedUnit = (cachedUnit + 1) % maxTextureUnits;
                     }
-                    glSampler.units.push(cachedUnit);
+                    glSampler.units$.push(cachedUnit);
                     usedTexUnits[cachedUnit] = true;
                 }
             }
@@ -1542,99 +1384,100 @@ export function WebGLCmdFuncCreateShader (device: WebGLDevice, gpuShader: IWebGL
         for (let i = 0; i < glActiveSamplers.length; ++i) {
             const glSampler = glActiveSamplers[i];
 
-            if (!device.extensions.isLocationActive(glSampler.glLoc)) {
-                glSampler.glLoc = glActiveSamplerLocations[i];
-                for (let t = 0; t < glSampler.count; ++t) {
+            if (!device.extensions.isLocationActive$(glSampler.glLoc$)) {
+                glSampler.glLoc$ = glActiveSamplerLocations[i];
+                for (let t = 0; t < glSampler.count$; ++t) {
                     while (usedTexUnits[unitIdx]) {
-                        unitIdx = (unitIdx + 1) % device.capabilities.maxTextureUnits;
+                        unitIdx = (unitIdx + 1) % maxTextureUnits;
                     }
-                    if (texUnitCacheMap[glSampler.name] === undefined) {
-                        texUnitCacheMap[glSampler.name] = unitIdx;
+                    if (texUnitCacheMap[glSampler.name$] === undefined) {
+                        texUnitCacheMap[glSampler.name$] = unitIdx;
                     }
-                    glSampler.units.push(unitIdx);
+                    glSampler.units$.push(unitIdx);
                     usedTexUnits[unitIdx] = true;
                 }
             }
         }
 
-        if (device.stateCache.glProgram !== gpuShader.glProgram) {
-            gl.useProgram(gpuShader.glProgram);
+        if (stateCache.glProgram$ !== gpuShader.glProgram$) {
+            gl.useProgram(gpuShader.glProgram$);
         }
 
         for (let i = 0; i < glActiveSamplers.length; i++) {
             const glSampler = glActiveSamplers[i];
-            glSampler.glUnits = new Int32Array(glSampler.units);
-            gl.uniform1iv(glSampler.glLoc, glSampler.glUnits);
+            glSampler.glUnits$ = new Int32Array(glSampler.units$);
+            gl.uniform1iv(glSampler.glLoc$, glSampler.glUnits$);
         }
 
-        if (device.stateCache.glProgram !== gpuShader.glProgram) {
-            gl.useProgram(device.stateCache.glProgram);
+        if (stateCache.glProgram$ !== gpuShader.glProgram$) {
+            gl.useProgram(stateCache.glProgram$);
         }
     }
 
     // strip out the inactive ones
-    for (let i = 0; i < gpuShader.glBlocks.length;) {
-        if (gpuShader.glBlocks[i].glActiveUniforms.length) {
+    for (let i = 0; i < gpuShader.glBlocks$.length;) {
+        if (gpuShader.glBlocks$[i].glActiveUniforms$.length) {
             i++;
         } else {
-            gpuShader.glBlocks[i] = gpuShader.glBlocks[gpuShader.glBlocks.length - 1];
-            gpuShader.glBlocks.length--;
+            gpuShader.glBlocks$[i] = gpuShader.glBlocks$[gpuShader.glBlocks$.length - 1];
+            gpuShader.glBlocks$.length--;
         }
     }
 
-    gpuShader.glSamplerTextures = glActiveSamplers;
+    gpuShader.glSamplerTextures$ = glActiveSamplers;
 }
 
 export function WebGLCmdFuncDestroyShader (device: WebGLDevice, gpuShader: IWebGLGPUShader): void {
-    if (gpuShader.glProgram) {
-        const { gl } = device;
-        if (!device.extensions.destroyShadersImmediately) {
-            for (let k = 0; k < gpuShader.gpuStages.length; k++) {
-                const gpuStage = gpuShader.gpuStages[k];
-                if (gpuStage.glShader) {
-                    gl.detachShader(gpuShader.glProgram, gpuStage.glShader);
-                    gl.deleteShader(gpuStage.glShader);
-                    gpuStage.glShader = null;
+    if (gpuShader.glProgram$) {
+        const { gl, stateCache } = device;
+        if (!device.extensions.destroyShadersImmediately$) {
+            for (let k = 0; k < gpuShader.gpuStages$.length; k++) {
+                const gpuStage = gpuShader.gpuStages$[k];
+                if (gpuStage.glShader$) {
+                    gl.detachShader(gpuShader.glProgram$, gpuStage.glShader$);
+                    gl.deleteShader(gpuStage.glShader$);
+                    gpuStage.glShader$ = null;
                 }
             }
         }
-        gl.deleteProgram(gpuShader.glProgram);
-        if (device.stateCache.glProgram === gpuShader.glProgram) {
-            device.gl.useProgram(null);
-            device.stateCache.glProgram = null;
+        gl.deleteProgram(gpuShader.glProgram$);
+        if (stateCache.glProgram$ === gpuShader.glProgram$) {
+            gl.useProgram(null);
+            stateCache.glProgram$ = null;
         }
-        gpuShader.glProgram = null;
+        gpuShader.glProgram$ = null;
     }
 }
 
 export function WebGLCmdFuncCreateInputAssember (device: WebGLDevice, gpuInputAssembler: IWebGLGPUInputAssembler): void {
     const { gl } = device;
 
-    gpuInputAssembler.glAttribs = new Array<IWebGLAttrib>(gpuInputAssembler.attributes.length);
+    gpuInputAssembler.glAttribs$ = new Array<IWebGLAttrib>(gpuInputAssembler.attributes$.length);
 
     const offsets = [0, 0, 0, 0, 0, 0, 0, 0];
 
-    for (let i = 0; i < gpuInputAssembler.attributes.length; ++i) {
-        const attrib = gpuInputAssembler.attributes[i];
+    for (let i = 0; i < gpuInputAssembler.attributes$.length; ++i) {
+        const attrib = gpuInputAssembler.attributes$[i];
+        const { format: attribFormat, isNormalized: attribIsNormalized, isInstanced: attribIsInstanced } = attrib;
 
         const stream = attrib.stream !== undefined ? attrib.stream : 0;
 
-        const gpuBuffer = gpuInputAssembler.gpuVertexBuffers[stream];
-
-        const glType = GFXFormatToWebGLType(attrib.format, gl);
-        const { size } = FormatInfos[attrib.format];
-
-        gpuInputAssembler.glAttribs[i] = {
-            name: attrib.name,
-            glBuffer: gpuBuffer.glBuffer,
-            glType,
-            size,
-            count: FormatInfos[attrib.format].count,
-            stride: gpuBuffer.stride,
-            componentCount: WebGLGetComponentCount(glType, gl),
-            isNormalized: (attrib.isNormalized !== undefined ? attrib.isNormalized : false),
-            isInstanced: (attrib.isInstanced !== undefined ? attrib.isInstanced : false),
-            offset: offsets[stream],
+        const gpuBuffer = gpuInputAssembler.gpuVertexBuffers$[stream];
+
+        const glType = GFXFormatToWebGLType(attribFormat, gl);
+        const { size } = FormatInfos[attribFormat];
+
+        gpuInputAssembler.glAttribs$[i] = {
+            name$: attrib.name,
+            glBuffer$: gpuBuffer.glBuffer$,
+            glType$: glType,
+            size$: size,
+            count$: FormatInfos[attribFormat].count,
+            stride$: gpuBuffer.stride$,
+            componentCount$: WebGLGetComponentCount(glType, gl),
+            isNormalized$: (attribIsNormalized !== undefined ? attribIsNormalized : false),
+            isInstanced$: (attribIsInstanced !== undefined ? attribIsInstanced : false),
+            offset$: offsets[stream],
         };
 
         offsets[stream] += size;
@@ -1642,10 +1485,11 @@ export function WebGLCmdFuncCreateInputAssember (device: WebGLDevice, gpuInputAs
 }
 
 export function WebGLCmdFuncDestroyInputAssembler (device: WebGLDevice, gpuInputAssembler: IWebGLGPUInputAssembler): void {
-    const it = gpuInputAssembler.glVAOs.values();
+    const { stateCache } = device;
+    const it = gpuInputAssembler.glVAOs$.values();
     let res = it.next();
-    const OES_vertex_array_object = device.extensions.OES_vertex_array_object!;
-    let glVAO = device.stateCache.glVAO;
+    const OES_vertex_array_object = device.extensions.OES_vertex_array_object$!;
+    let glVAO = stateCache.glVAO$;
     while (!res.done) {
         OES_vertex_array_object.deleteVertexArrayOES(res.value);
         if (glVAO === res.value) {
@@ -1654,19 +1498,19 @@ export function WebGLCmdFuncDestroyInputAssembler (device: WebGLDevice, gpuInput
         }
         res = it.next();
     }
-    device.stateCache.glVAO = glVAO;
-    gpuInputAssembler.glVAOs.clear();
+    stateCache.glVAO$ = glVAO;
+    gpuInputAssembler.glVAOs$.clear();
 }
 
 interface IWebGLStateCache {
-    gpuPipelineState: IWebGLGPUPipelineState | null;
-    gpuInputAssembler: IWebGLGPUInputAssembler | null;
-    glPrimitive: number;
+    gpuPipelineState$: IWebGLGPUPipelineState | null;
+    gpuInputAssembler$: IWebGLGPUInputAssembler | null;
+    glPrimitive$: number;
 }
 const gfxStateCache: IWebGLStateCache = {
-    gpuPipelineState: null,
-    gpuInputAssembler: null,
-    glPrimitive: 0,
+    gpuPipelineState$: null,
+    gpuInputAssembler$: null,
+    glPrimitive$: 0,
 };
 
 const realRenderArea = new Rect();
@@ -1684,68 +1528,75 @@ export function WebGLCmdFuncBeginRenderPass (
     let clears: GLbitfield = 0;
 
     if (gpuFramebuffer) {
-        realRenderArea.x = renderArea.x << gpuFramebuffer.lodLevel;
-        realRenderArea.y = renderArea.y << gpuFramebuffer.lodLevel;
-        realRenderArea.width = renderArea.width << gpuFramebuffer.lodLevel;
-        realRenderArea.height = renderArea.height << gpuFramebuffer.lodLevel;
+        const lodLevel = gpuFramebuffer.lodLevel$;
+        realRenderArea.x = renderArea.x << lodLevel;
+        realRenderArea.y = renderArea.y << lodLevel;
+        realRenderArea.width = renderArea.width << lodLevel;
+        realRenderArea.height = renderArea.height << lodLevel;
     }
 
     if (gpuFramebuffer && gpuRenderPass) {
-        if (cache.glFramebuffer !== gpuFramebuffer.glFramebuffer) {
-            gl.bindFramebuffer(gl.FRAMEBUFFER, gpuFramebuffer.glFramebuffer);
-            cache.glFramebuffer = gpuFramebuffer.glFramebuffer;
+        const curGPUFrameBuffer = gpuFramebuffer.glFramebuffer$;
+        const { x: realRenderAreaX, y: realRenderAreaY, width: realRenderAreaWidth, height: realRenderAreaHeight } = realRenderArea;
+        if (cache.glFramebuffer$ !== curGPUFrameBuffer) {
+            gl.bindFramebuffer(WebGLConstants.FRAMEBUFFER, curGPUFrameBuffer);
+            cache.glFramebuffer$ = curGPUFrameBuffer;
         }
 
-        if (cache.viewport.left !== realRenderArea.x
-            || cache.viewport.top !== realRenderArea.y
-            || cache.viewport.width !== realRenderArea.width
-            || cache.viewport.height !== realRenderArea.height) {
-            gl.viewport(realRenderArea.x, realRenderArea.y, realRenderArea.width, realRenderArea.height);
+        const cacheViewport = cache.viewport$;
+        if (cacheViewport.left !== realRenderAreaX
+            || cacheViewport.top !== realRenderAreaY
+            || cacheViewport.width !== realRenderAreaWidth
+            || cacheViewport.height !== realRenderAreaHeight) {
+            gl.viewport(realRenderAreaX, realRenderAreaY, realRenderAreaWidth, realRenderAreaHeight);
 
-            cache.viewport.left = realRenderArea.x;
-            cache.viewport.top = realRenderArea.y;
-            cache.viewport.width = realRenderArea.width;
-            cache.viewport.height = realRenderArea.height;
+            cacheViewport.left = realRenderAreaX;
+            cacheViewport.top = realRenderAreaY;
+            cacheViewport.width = realRenderAreaWidth;
+            cacheViewport.height = realRenderAreaHeight;
         }
 
-        if (cache.scissorRect.x !== realRenderArea.x
-            || cache.scissorRect.y !== realRenderArea.y
-            || cache.scissorRect.width !== realRenderArea.width
-            || cache.scissorRect.height !== realRenderArea.height) {
-            gl.scissor(realRenderArea.x, realRenderArea.y, realRenderArea.width, realRenderArea.height);
+        const cacheScissorRect = cache.scissorRect$;
+        if (cacheScissorRect.x !== realRenderAreaX
+            || cacheScissorRect.y !== realRenderAreaY
+            || cacheScissorRect.width !== realRenderAreaWidth
+            || cacheScissorRect.height !== realRenderAreaHeight) {
+            gl.scissor(realRenderAreaX, realRenderAreaY, realRenderAreaWidth, realRenderAreaHeight);
 
-            cache.scissorRect.x = realRenderArea.x;
-            cache.scissorRect.y = realRenderArea.y;
-            cache.scissorRect.width = realRenderArea.width;
-            cache.scissorRect.height = realRenderArea.height;
+            cacheScissorRect.x = realRenderAreaX;
+            cacheScissorRect.y = realRenderAreaY;
+            cacheScissorRect.width = realRenderAreaWidth;
+            cacheScissorRect.height = realRenderAreaHeight;
         }
 
         // const invalidateAttachments: GLenum[] = [];
         let clearCount = clearColors.length;
 
-        if (!device.extensions.WEBGL_draw_buffers) {
+        if (!device.extensions.WEBGL_draw_buffers$) {
             clearCount = 1;
         }
 
+        const cacheDSS = cache.dss$;
+
         for (let j = 0; j < clearCount; ++j) {
-            const colorAttachment = gpuRenderPass.colorAttachments[j];
+            const colorAttachment = gpuRenderPass.colorAttachments$[j];
 
             if (colorAttachment.format !== Format.UNKNOWN) {
                 switch (colorAttachment.loadOp) {
                 case LoadOp.LOAD: break; // GL default behavior
                 case LoadOp.CLEAR: {
-                    if (cache.bs.targets[0].blendColorMask !== ColorMask.ALL) {
+                    if (cache.bs$.targets[0].blendColorMask !== ColorMask.ALL) {
                         gl.colorMask(true, true, true, true);
                     }
 
                     const clearColor = clearColors[0];
                     gl.clearColor(clearColor.x, clearColor.y, clearColor.z, clearColor.w);
-                    clears |= gl.COLOR_BUFFER_BIT;
+                    clears |= WebGLConstants.COLOR_BUFFER_BIT;
                     break;
                 }
                 case LoadOp.DISCARD: {
                     // invalidate the framebuffer
-                    // invalidateAttachments.push(gl.COLOR_ATTACHMENT0 + j);
+                    // invalidateAttachments.push(WebGLConstants.COLOR_ATTACHMENT0 + j);
                     break;
                 }
                 default:
@@ -1753,47 +1604,47 @@ export function WebGLCmdFuncBeginRenderPass (
             }
         } // if (curGPURenderPass)
 
-        if (gpuRenderPass.depthStencilAttachment) {
-            if (gpuRenderPass.depthStencilAttachment.format !== Format.UNKNOWN) {
-                switch (gpuRenderPass.depthStencilAttachment.depthLoadOp) {
+        if (gpuRenderPass.depthStencilAttachment$) {
+            if (gpuRenderPass.depthStencilAttachment$.format !== Format.UNKNOWN) {
+                switch (gpuRenderPass.depthStencilAttachment$.depthLoadOp) {
                 case LoadOp.LOAD: break; // GL default behavior
                 case LoadOp.CLEAR: {
-                    if (!cache.dss.depthWrite) {
+                    if (!cacheDSS.depthWrite) {
                         gl.depthMask(true);
                     }
 
                     gl.clearDepth(clearDepth);
 
-                    clears |= gl.DEPTH_BUFFER_BIT;
+                    clears |= WebGLConstants.DEPTH_BUFFER_BIT;
                     break;
                 }
                 case LoadOp.DISCARD: {
                     // invalidate the framebuffer
-                    // invalidateAttachments.push(gl.DEPTH_ATTACHMENT);
+                    // invalidateAttachments.push(WebGLConstants.DEPTH_ATTACHMENT);
                     break;
                 }
                 default:
                 }
 
-                if (FormatInfos[gpuRenderPass.depthStencilAttachment.format].hasStencil) {
-                    switch (gpuRenderPass.depthStencilAttachment.stencilLoadOp) {
+                if (FormatInfos[gpuRenderPass.depthStencilAttachment$.format].hasStencil) {
+                    switch (gpuRenderPass.depthStencilAttachment$.stencilLoadOp) {
                     case LoadOp.LOAD: break; // GL default behavior
                     case LoadOp.CLEAR: {
-                        if (!cache.dss.stencilWriteMaskFront) {
-                            gl.stencilMaskSeparate(gl.FRONT, 0xffff);
+                        if (!cacheDSS.stencilWriteMaskFront) {
+                            gl.stencilMaskSeparate(WebGLConstants.FRONT, 0xffff);
                         }
 
-                        if (!cache.dss.stencilWriteMaskBack) {
-                            gl.stencilMaskSeparate(gl.BACK, 0xffff);
+                        if (!cacheDSS.stencilWriteMaskBack) {
+                            gl.stencilMaskSeparate(WebGLConstants.BACK, 0xffff);
                         }
 
                         gl.clearStencil(clearStencil);
-                        clears |= gl.STENCIL_BUFFER_BIT;
+                        clears |= WebGLConstants.STENCIL_BUFFER_BIT;
                         break;
                     }
                     case LoadOp.DISCARD: {
                         // invalidate the framebuffer
-                        // invalidateAttachments.push(gl.STENCIL_ATTACHMENT);
+                        // invalidateAttachments.push(WebGLConstants.STENCIL_ATTACHMENT);
                         break;
                     }
                     default:
@@ -1804,7 +1655,7 @@ export function WebGLCmdFuncBeginRenderPass (
 
         /*
         if (invalidateAttachments.length) {
-            gl.invalidateFramebuffer(gl.FRAMEBUFFER, invalidateAttachments);
+            gl.invalidateFramebuffer(WebGLConstants.FRAMEBUFFER, invalidateAttachments);
         }
         */
 
@@ -1813,8 +1664,8 @@ export function WebGLCmdFuncBeginRenderPass (
         }
 
         // restore states
-        if (clears & gl.COLOR_BUFFER_BIT) {
-            const colorMask = cache.bs.targets[0].blendColorMask;
+        if (clears & WebGLConstants.COLOR_BUFFER_BIT) {
+            const colorMask = cache.bs$.targets[0].blendColorMask;
             if (colorMask !== ColorMask.ALL) {
                 const r = (colorMask & ColorMask.R) !== ColorMask.NONE;
                 const g = (colorMask & ColorMask.G) !== ColorMask.NONE;
@@ -1824,18 +1675,18 @@ export function WebGLCmdFuncBeginRenderPass (
             }
         }
 
-        if ((clears & gl.DEPTH_BUFFER_BIT)
-            && !cache.dss.depthWrite) {
+        if ((clears & WebGLConstants.DEPTH_BUFFER_BIT)
+            && !cacheDSS.depthWrite) {
             gl.depthMask(false);
         }
 
-        if (clears & gl.STENCIL_BUFFER_BIT) {
-            if (!cache.dss.stencilWriteMaskFront) {
-                gl.stencilMaskSeparate(gl.FRONT, 0);
+        if (clears & WebGLConstants.STENCIL_BUFFER_BIT) {
+            if (!cacheDSS.stencilWriteMaskFront) {
+                gl.stencilMaskSeparate(WebGLConstants.FRONT, 0);
             }
 
-            if (!cache.dss.stencilWriteMaskBack) {
-                gl.stencilMaskSeparate(gl.BACK, 0);
+            if (!cacheDSS.stencilWriteMaskBack) {
+                gl.stencilMaskSeparate(WebGLConstants.BACK, 0);
             }
         }
     } // if (gpuFramebuffer)
@@ -1851,7 +1702,9 @@ export function WebGLCmdFuncBindStates (
 ): void {
     const { gl } = device;
     const cache = device.stateCache;
-    const gpuShader = gpuPipelineState && gpuPipelineState.gpuShader;
+    const cacheDSS = cache.dss$;
+    const cacheBS = cache.bs$;
+    const gpuShader = gpuPipelineState && gpuPipelineState.gpuShader$;
 
     let isShaderChanged = false;
     let glWrapS: number;
@@ -1859,201 +1712,204 @@ export function WebGLCmdFuncBindStates (
     let glMinFilter: number;
 
     // bind pipeline
-    if (gpuPipelineState && gfxStateCache.gpuPipelineState !== gpuPipelineState) {
-        gfxStateCache.gpuPipelineState = gpuPipelineState;
-        gfxStateCache.glPrimitive = gpuPipelineState.glPrimitive;
+    if (gpuPipelineState && gfxStateCache.gpuPipelineState$ !== gpuPipelineState) {
+        gfxStateCache.gpuPipelineState$ = gpuPipelineState;
+        gfxStateCache.glPrimitive$ = gpuPipelineState.glPrimitive$;
 
-        if (gpuPipelineState.gpuShader) {
-            const { glProgram } = gpuPipelineState.gpuShader;
-            if (cache.glProgram !== glProgram) {
+        if (gpuPipelineState.gpuShader$) {
+            const { glProgram$: glProgram } = gpuPipelineState.gpuShader$;
+            if (cache.glProgram$ !== glProgram) {
                 gl.useProgram(glProgram);
-                cache.glProgram = glProgram;
+                cache.glProgram$ = glProgram;
                 isShaderChanged = true;
             }
         }
 
         // rasterizer state
-        const { rs } = gpuPipelineState;
+        const { rs$: rs } = gpuPipelineState;
+        const cacheRS = cache.rs$;
         if (rs) {
-            if (cache.rs.cullMode !== rs.cullMode) {
+            if (cacheRS.cullMode !== rs.cullMode) {
                 switch (rs.cullMode) {
                 case CullMode.NONE: {
-                    gl.disable(gl.CULL_FACE);
+                    gl.disable(WebGLConstants.CULL_FACE);
                     break;
                 }
                 case CullMode.FRONT: {
-                    gl.enable(gl.CULL_FACE);
-                    gl.cullFace(gl.FRONT);
+                    gl.enable(WebGLConstants.CULL_FACE);
+                    gl.cullFace(WebGLConstants.FRONT);
                     break;
                 }
                 case CullMode.BACK: {
-                    gl.enable(gl.CULL_FACE);
-                    gl.cullFace(gl.BACK);
+                    gl.enable(WebGLConstants.CULL_FACE);
+                    gl.cullFace(WebGLConstants.BACK);
                     break;
                 }
                 default:
                 }
 
-                cache.rs.cullMode = rs.cullMode;
+                cacheRS.cullMode = rs.cullMode;
             }
 
             const isFrontFaceCCW = rs.isFrontFaceCCW;
-            if (cache.rs.isFrontFaceCCW !== isFrontFaceCCW) {
-                gl.frontFace(isFrontFaceCCW ? gl.CCW : gl.CW);
-                cache.rs.isFrontFaceCCW = isFrontFaceCCW;
+            if (cacheRS.isFrontFaceCCW !== isFrontFaceCCW) {
+                gl.frontFace(isFrontFaceCCW ? WebGLConstants.CCW : WebGLConstants.CW);
+                cacheRS.isFrontFaceCCW = isFrontFaceCCW;
             }
 
-            if ((cache.rs.depthBias !== rs.depthBias)
-                || (cache.rs.depthBiasSlop !== rs.depthBiasSlop)) {
+            if ((cacheRS.depthBias !== rs.depthBias)
+                || (cacheRS.depthBiasSlop !== rs.depthBiasSlop)) {
                 gl.polygonOffset(rs.depthBias, rs.depthBiasSlop);
-                cache.rs.depthBias = rs.depthBias;
-                cache.rs.depthBiasSlop = rs.depthBiasSlop;
+                cacheRS.depthBias = rs.depthBias;
+                cacheRS.depthBiasSlop = rs.depthBiasSlop;
             }
 
-            if (cache.rs.lineWidth !== rs.lineWidth) {
+            if (cacheRS.lineWidth !== rs.lineWidth) {
                 gl.lineWidth(rs.lineWidth);
-                cache.rs.lineWidth = rs.lineWidth;
+                cacheRS.lineWidth = rs.lineWidth;
             }
         } // rasterizater state
 
         // depth-stencil state
-        const { dss } = gpuPipelineState;
+        const { dss$: dss } = gpuPipelineState;
+
         if (dss) {
-            if (cache.dss.depthTest !== dss.depthTest) {
+            if (cacheDSS.depthTest !== dss.depthTest) {
                 if (dss.depthTest) {
-                    gl.enable(gl.DEPTH_TEST);
+                    gl.enable(WebGLConstants.DEPTH_TEST);
                 } else {
-                    gl.disable(gl.DEPTH_TEST);
+                    gl.disable(WebGLConstants.DEPTH_TEST);
                 }
-                cache.dss.depthTest = dss.depthTest;
+                cacheDSS.depthTest = dss.depthTest;
             }
 
-            if (cache.dss.depthWrite !== dss.depthWrite) {
+            if (cacheDSS.depthWrite !== dss.depthWrite) {
                 gl.depthMask(dss.depthWrite);
-                cache.dss.depthWrite = dss.depthWrite;
+                cacheDSS.depthWrite = dss.depthWrite;
             }
 
-            if (cache.dss.depthFunc !== dss.depthFunc) {
+            if (cacheDSS.depthFunc !== dss.depthFunc) {
                 gl.depthFunc(WebGLCmpFuncs[dss.depthFunc]);
-                cache.dss.depthFunc = dss.depthFunc;
+                cacheDSS.depthFunc = dss.depthFunc;
             }
 
             // front
-            if ((cache.dss.stencilTestFront !== dss.stencilTestFront)
-                || (cache.dss.stencilTestBack !== dss.stencilTestBack)) {
+            if ((cacheDSS.stencilTestFront !== dss.stencilTestFront)
+                || (cacheDSS.stencilTestBack !== dss.stencilTestBack)) {
                 if (dss.stencilTestFront || dss.stencilTestBack) {
-                    gl.enable(gl.STENCIL_TEST);
+                    gl.enable(WebGLConstants.STENCIL_TEST);
                 } else {
-                    gl.disable(gl.STENCIL_TEST);
+                    gl.disable(WebGLConstants.STENCIL_TEST);
                 }
-                cache.dss.stencilTestFront = dss.stencilTestFront;
-                cache.dss.stencilTestBack = dss.stencilTestBack;
+                cacheDSS.stencilTestFront = dss.stencilTestFront;
+                cacheDSS.stencilTestBack = dss.stencilTestBack;
             }
 
-            if ((cache.dss.stencilFuncFront !== dss.stencilFuncFront)
-                || (cache.dss.stencilRefFront !== dss.stencilRefFront)
-                || (cache.dss.stencilReadMaskFront !== dss.stencilReadMaskFront)) {
+            if ((cacheDSS.stencilFuncFront !== dss.stencilFuncFront)
+                || (cacheDSS.stencilRefFront !== dss.stencilRefFront)
+                || (cacheDSS.stencilReadMaskFront !== dss.stencilReadMaskFront)) {
                 gl.stencilFuncSeparate(
-                    gl.FRONT,
+                    WebGLConstants.FRONT,
                     WebGLCmpFuncs[dss.stencilFuncFront],
                     dss.stencilRefFront,
                     dss.stencilReadMaskFront,
                 );
 
-                cache.dss.stencilFuncFront = dss.stencilFuncFront;
-                cache.dss.stencilRefFront = dss.stencilRefFront;
-                cache.dss.stencilReadMaskFront = dss.stencilReadMaskFront;
+                cacheDSS.stencilFuncFront = dss.stencilFuncFront;
+                cacheDSS.stencilRefFront = dss.stencilRefFront;
+                cacheDSS.stencilReadMaskFront = dss.stencilReadMaskFront;
             }
 
-            if ((cache.dss.stencilFailOpFront !== dss.stencilFailOpFront)
-                || (cache.dss.stencilZFailOpFront !== dss.stencilZFailOpFront)
-                || (cache.dss.stencilPassOpFront !== dss.stencilPassOpFront)) {
+            if ((cacheDSS.stencilFailOpFront !== dss.stencilFailOpFront)
+                || (cacheDSS.stencilZFailOpFront !== dss.stencilZFailOpFront)
+                || (cacheDSS.stencilPassOpFront !== dss.stencilPassOpFront)) {
                 gl.stencilOpSeparate(
-                    gl.FRONT,
+                    WebGLConstants.FRONT,
                     WebGLStencilOps[dss.stencilFailOpFront],
                     WebGLStencilOps[dss.stencilZFailOpFront],
                     WebGLStencilOps[dss.stencilPassOpFront],
                 );
 
-                cache.dss.stencilFailOpFront = dss.stencilFailOpFront;
-                cache.dss.stencilZFailOpFront = dss.stencilZFailOpFront;
-                cache.dss.stencilPassOpFront = dss.stencilPassOpFront;
+                cacheDSS.stencilFailOpFront = dss.stencilFailOpFront;
+                cacheDSS.stencilZFailOpFront = dss.stencilZFailOpFront;
+                cacheDSS.stencilPassOpFront = dss.stencilPassOpFront;
             }
 
-            if (cache.dss.stencilWriteMaskFront !== dss.stencilWriteMaskFront) {
-                gl.stencilMaskSeparate(gl.FRONT, dss.stencilWriteMaskFront);
-                cache.dss.stencilWriteMaskFront = dss.stencilWriteMaskFront;
+            if (cacheDSS.stencilWriteMaskFront !== dss.stencilWriteMaskFront) {
+                gl.stencilMaskSeparate(WebGLConstants.FRONT, dss.stencilWriteMaskFront);
+                cacheDSS.stencilWriteMaskFront = dss.stencilWriteMaskFront;
             }
 
             // back
-            if ((cache.dss.stencilFuncBack !== dss.stencilFuncBack)
-                || (cache.dss.stencilRefBack !== dss.stencilRefBack)
-                || (cache.dss.stencilReadMaskBack !== dss.stencilReadMaskBack)) {
+            if ((cacheDSS.stencilFuncBack !== dss.stencilFuncBack)
+                || (cacheDSS.stencilRefBack !== dss.stencilRefBack)
+                || (cacheDSS.stencilReadMaskBack !== dss.stencilReadMaskBack)) {
                 gl.stencilFuncSeparate(
-                    gl.BACK,
+                    WebGLConstants.BACK,
                     WebGLCmpFuncs[dss.stencilFuncBack],
                     dss.stencilRefBack,
                     dss.stencilReadMaskBack,
                 );
 
-                cache.dss.stencilFuncBack = dss.stencilFuncBack;
-                cache.dss.stencilRefBack = dss.stencilRefBack;
-                cache.dss.stencilReadMaskBack = dss.stencilReadMaskBack;
+                cacheDSS.stencilFuncBack = dss.stencilFuncBack;
+                cacheDSS.stencilRefBack = dss.stencilRefBack;
+                cacheDSS.stencilReadMaskBack = dss.stencilReadMaskBack;
             }
 
-            if ((cache.dss.stencilFailOpBack !== dss.stencilFailOpBack)
-                || (cache.dss.stencilZFailOpBack !== dss.stencilZFailOpBack)
-                || (cache.dss.stencilPassOpBack !== dss.stencilPassOpBack)) {
+            if ((cacheDSS.stencilFailOpBack !== dss.stencilFailOpBack)
+                || (cacheDSS.stencilZFailOpBack !== dss.stencilZFailOpBack)
+                || (cacheDSS.stencilPassOpBack !== dss.stencilPassOpBack)) {
                 gl.stencilOpSeparate(
-                    gl.BACK,
+                    WebGLConstants.BACK,
                     WebGLStencilOps[dss.stencilFailOpBack],
                     WebGLStencilOps[dss.stencilZFailOpBack],
                     WebGLStencilOps[dss.stencilPassOpBack],
                 );
 
-                cache.dss.stencilFailOpBack = dss.stencilFailOpBack;
-                cache.dss.stencilZFailOpBack = dss.stencilZFailOpBack;
-                cache.dss.stencilPassOpBack = dss.stencilPassOpBack;
+                cacheDSS.stencilFailOpBack = dss.stencilFailOpBack;
+                cacheDSS.stencilZFailOpBack = dss.stencilZFailOpBack;
+                cacheDSS.stencilPassOpBack = dss.stencilPassOpBack;
             }
 
-            if (cache.dss.stencilWriteMaskBack !== dss.stencilWriteMaskBack) {
-                gl.stencilMaskSeparate(gl.BACK, dss.stencilWriteMaskBack);
-                cache.dss.stencilWriteMaskBack = dss.stencilWriteMaskBack;
+            if (cacheDSS.stencilWriteMaskBack !== dss.stencilWriteMaskBack) {
+                gl.stencilMaskSeparate(WebGLConstants.BACK, dss.stencilWriteMaskBack);
+                cacheDSS.stencilWriteMaskBack = dss.stencilWriteMaskBack;
             }
         } // depth-stencil state
 
         // blend state
-        const { bs } = gpuPipelineState;
+        const { bs$: bs } = gpuPipelineState;
+
         if (bs) {
-            if (cache.bs.isA2C !== bs.isA2C) {
+            if (cacheBS.isA2C !== bs.isA2C) {
                 if (bs.isA2C) {
-                    gl.enable(gl.SAMPLE_ALPHA_TO_COVERAGE);
+                    gl.enable(WebGLConstants.SAMPLE_ALPHA_TO_COVERAGE);
                 } else {
-                    gl.disable(gl.SAMPLE_ALPHA_TO_COVERAGE);
+                    gl.disable(WebGLConstants.SAMPLE_ALPHA_TO_COVERAGE);
                 }
-                cache.bs.isA2C = bs.isA2C;
+                cacheBS.isA2C = bs.isA2C;
             }
 
-            if ((cache.bs.blendColor.x !== bs.blendColor.x)
-                || (cache.bs.blendColor.y !== bs.blendColor.y)
-                || (cache.bs.blendColor.z !== bs.blendColor.z)
-                || (cache.bs.blendColor.w !== bs.blendColor.w)) {
+            if ((cacheBS.blendColor.x !== bs.blendColor.x)
+                || (cacheBS.blendColor.y !== bs.blendColor.y)
+                || (cacheBS.blendColor.z !== bs.blendColor.z)
+                || (cacheBS.blendColor.w !== bs.blendColor.w)) {
                 gl.blendColor(bs.blendColor.x, bs.blendColor.y, bs.blendColor.z, bs.blendColor.w);
 
-                cache.bs.blendColor.x = bs.blendColor.x;
-                cache.bs.blendColor.y = bs.blendColor.y;
-                cache.bs.blendColor.z = bs.blendColor.z;
-                cache.bs.blendColor.w = bs.blendColor.w;
+                cacheBS.blendColor.x = bs.blendColor.x;
+                cacheBS.blendColor.y = bs.blendColor.y;
+                cacheBS.blendColor.z = bs.blendColor.z;
+                cacheBS.blendColor.w = bs.blendColor.w;
             }
 
             const target0 = bs.targets[0];
-            const target0Cache = cache.bs.targets[0];
+            const target0Cache = cacheBS.targets[0];
 
             if (target0Cache.blend !== target0.blend) {
                 if (target0.blend) {
-                    gl.enable(gl.BLEND);
+                    gl.enable(WebGLConstants.BLEND);
                 } else {
-                    gl.disable(gl.BLEND);
+                    gl.disable(WebGLConstants.BLEND);
                 }
                 target0Cache.blend = target0.blend;
             }
@@ -2096,28 +1952,28 @@ export function WebGLCmdFuncBindStates (
     } // bind pipeline
 
     // bind descriptor sets
-    if (gpuPipelineState && gpuPipelineState.gpuPipelineLayout && gpuShader) {
-        const blockLen = gpuShader.glBlocks.length;
-        const { dynamicOffsetIndices } = gpuPipelineState.gpuPipelineLayout;
+    if (gpuPipelineState && gpuPipelineState.gpuPipelineLayout$ && gpuShader) {
+        const blockLen = gpuShader.glBlocks$.length;
+        const { dynamicOffsetIndices$: dynamicOffsetIndices } = gpuPipelineState.gpuPipelineLayout$;
 
         for (let j = 0; j < blockLen; j++) {
-            const glBlock = gpuShader.glBlocks[j];
-            const gpuDescriptorSet = gpuDescriptorSets[glBlock.set];
-            const descriptorIdx = gpuDescriptorSet && gpuDescriptorSet.descriptorIndices[glBlock.binding];
-            const gpuDescriptor = descriptorIdx >= 0 && gpuDescriptorSet.gpuDescriptors[descriptorIdx];
+            const glBlock = gpuShader.glBlocks$[j];
+            const gpuDescriptorSet = gpuDescriptorSets[glBlock.set$];
+            const descriptorIdx = gpuDescriptorSet && gpuDescriptorSet.descriptorIndices$[glBlock.binding$];
+            const gpuDescriptor = descriptorIdx >= 0 && gpuDescriptorSet.gpuDescriptors$[descriptorIdx];
             let vf32: Float32Array | null = null; let offset = 0;
 
-            if (gpuDescriptor && gpuDescriptor.gpuBuffer) {
-                const { gpuBuffer } = gpuDescriptor;
-                const dynamicOffsetIndexSet = dynamicOffsetIndices[glBlock.set];
-                const dynamicOffsetIndex = dynamicOffsetIndexSet && dynamicOffsetIndexSet[glBlock.binding];
+            if (gpuDescriptor && gpuDescriptor.gpuBuffer$) {
+                const { gpuBuffer$: gpuBuffer } = gpuDescriptor;
+                const dynamicOffsetIndexSet = dynamicOffsetIndices[glBlock.set$];
+                const dynamicOffsetIndex = dynamicOffsetIndexSet && dynamicOffsetIndexSet[glBlock.binding$];
                 if (dynamicOffsetIndex >= 0) { offset = dynamicOffsets[dynamicOffsetIndex]; }
 
                 if ('vf32' in gpuBuffer) {
                     vf32 = gpuBuffer.vf32;
                 } else {
-                    offset += gpuBuffer.offset;
-                    vf32 = gpuBuffer.gpuBuffer.vf32;
+                    offset += gpuBuffer.offset$;
+                    vf32 = gpuBuffer.gpuBuffer$.vf32;
                 }
                 offset >>= 2;
             }
@@ -2127,152 +1983,152 @@ export function WebGLCmdFuncBindStates (
                 continue;
             }
 
-            const uniformLen = glBlock.glActiveUniforms.length;
+            const uniformLen = glBlock.glActiveUniforms$.length;
             for (let l = 0; l < uniformLen; l++) {
-                const glUniform = glBlock.glActiveUniforms[l];
-                switch (glUniform.glType) {
-                case gl.BOOL:
-                case gl.INT: {
-                    for (let u = 0; u < glUniform.array.length; ++u) {
-                        const idx = glUniform.offset + offset + u;
-                        if (vf32[idx] !== glUniform.array[u]) {
-                            for (let n = u, m = idx; n < glUniform.array.length; ++n, ++m) {
-                                glUniform.array[n] = vf32[m];
+                const glUniform = glBlock.glActiveUniforms$[l];
+                switch (glUniform.glType$) {
+                case WebGLConstants.BOOL:
+                case WebGLConstants.INT: {
+                    for (let u = 0; u < glUniform.array$.length; ++u) {
+                        const idx = glUniform.offset$ + offset + u;
+                        if (vf32[idx] !== glUniform.array$[u]) {
+                            for (let n = u, m = idx; n < glUniform.array$.length; ++n, ++m) {
+                                glUniform.array$[n] = vf32[m];
                             }
-                            gl.uniform1iv(glUniform.glLoc, glUniform.array as Int32Array);
+                            gl.uniform1iv(glUniform.glLoc$, glUniform.array$ as Int32Array);
                             break;
                         }
                     }
                     break;
                 }
-                case gl.BOOL_VEC2:
-                case gl.INT_VEC2: {
-                    for (let u = 0; u < glUniform.array.length; ++u) {
-                        const idx = glUniform.offset + offset + u;
-                        if (vf32[idx] !== glUniform.array[u]) {
-                            for (let n = u, m = idx; n < glUniform.array.length; ++n, ++m) {
-                                glUniform.array[n] = vf32[m];
+                case WebGLConstants.BOOL_VEC2:
+                case WebGLConstants.INT_VEC2: {
+                    for (let u = 0; u < glUniform.array$.length; ++u) {
+                        const idx = glUniform.offset$ + offset + u;
+                        if (vf32[idx] !== glUniform.array$[u]) {
+                            for (let n = u, m = idx; n < glUniform.array$.length; ++n, ++m) {
+                                glUniform.array$[n] = vf32[m];
                             }
-                            gl.uniform2iv(glUniform.glLoc, glUniform.array as Int32Array);
+                            gl.uniform2iv(glUniform.glLoc$, glUniform.array$ as Int32Array);
                             break;
                         }
                     }
                     break;
                 }
-                case gl.BOOL_VEC3:
-                case gl.INT_VEC3: {
-                    for (let u = 0; u < glUniform.array.length; ++u) {
-                        const idx = glUniform.offset + offset + u;
-                        if (vf32[idx] !== glUniform.array[u]) {
-                            for (let n = u, m = idx; n < glUniform.array.length; ++n, ++m) {
-                                glUniform.array[n] = vf32[m];
+                case WebGLConstants.BOOL_VEC3:
+                case WebGLConstants.INT_VEC3: {
+                    for (let u = 0; u < glUniform.array$.length; ++u) {
+                        const idx = glUniform.offset$ + offset + u;
+                        if (vf32[idx] !== glUniform.array$[u]) {
+                            for (let n = u, m = idx; n < glUniform.array$.length; ++n, ++m) {
+                                glUniform.array$[n] = vf32[m];
                             }
-                            gl.uniform3iv(glUniform.glLoc, glUniform.array as Int32Array);
+                            gl.uniform3iv(glUniform.glLoc$, glUniform.array$ as Int32Array);
                             break;
                         }
                     }
                     break;
                 }
-                case gl.BOOL_VEC4:
-                case gl.INT_VEC4: {
-                    for (let u = 0; u < glUniform.array.length; ++u) {
-                        const idx = glUniform.offset + offset + u;
-                        if (vf32[idx] !== glUniform.array[u]) {
-                            for (let n = u, m = idx; n < glUniform.array.length; ++n, ++m) {
-                                glUniform.array[n] = vf32[m];
+                case WebGLConstants.BOOL_VEC4:
+                case WebGLConstants.INT_VEC4: {
+                    for (let u = 0; u < glUniform.array$.length; ++u) {
+                        const idx = glUniform.offset$ + offset + u;
+                        if (vf32[idx] !== glUniform.array$[u]) {
+                            for (let n = u, m = idx; n < glUniform.array$.length; ++n, ++m) {
+                                glUniform.array$[n] = vf32[m];
                             }
-                            gl.uniform4iv(glUniform.glLoc, glUniform.array as Int32Array);
+                            gl.uniform4iv(glUniform.glLoc$, glUniform.array$ as Int32Array);
                             break;
                         }
                     }
                     break;
                 }
-                case gl.FLOAT: {
-                    for (let u = 0; u < glUniform.array.length; ++u) {
-                        const idx = glUniform.offset + offset + u;
-                        if (vf32[idx] !== glUniform.array[u]) {
-                            for (let n = u, m = idx; n < glUniform.array.length; ++n, ++m) {
-                                glUniform.array[n] = vf32[m];
+                case WebGLConstants.FLOAT: {
+                    for (let u = 0; u < glUniform.array$.length; ++u) {
+                        const idx = glUniform.offset$ + offset + u;
+                        if (vf32[idx] !== glUniform.array$[u]) {
+                            for (let n = u, m = idx; n < glUniform.array$.length; ++n, ++m) {
+                                glUniform.array$[n] = vf32[m];
                             }
-                            gl.uniform1fv(glUniform.glLoc, glUniform.array as Float32Array);
+                            gl.uniform1fv(glUniform.glLoc$, glUniform.array$ as Float32Array);
                             break;
                         }
                     }
                     break;
                 }
-                case gl.FLOAT_VEC2: {
-                    for (let u = 0; u < glUniform.array.length; ++u) {
-                        const idx = glUniform.offset + offset + u;
-                        if (vf32[idx] !== glUniform.array[u]) {
-                            for (let n = u, m = idx; n < glUniform.array.length; ++n, ++m) {
-                                glUniform.array[n] = vf32[m];
+                case WebGLConstants.FLOAT_VEC2: {
+                    for (let u = 0; u < glUniform.array$.length; ++u) {
+                        const idx = glUniform.offset$ + offset + u;
+                        if (vf32[idx] !== glUniform.array$[u]) {
+                            for (let n = u, m = idx; n < glUniform.array$.length; ++n, ++m) {
+                                glUniform.array$[n] = vf32[m];
                             }
-                            gl.uniform2fv(glUniform.glLoc, glUniform.array as Float32Array);
+                            gl.uniform2fv(glUniform.glLoc$, glUniform.array$ as Float32Array);
                             break;
                         }
                     }
                     break;
                 }
-                case gl.FLOAT_VEC3: {
-                    for (let u = 0; u < glUniform.array.length; ++u) {
-                        const idx = glUniform.offset + offset + u;
-                        if (vf32[idx] !== glUniform.array[u]) {
-                            for (let n = u, m = idx; n < glUniform.array.length; ++n, ++m) {
-                                glUniform.array[n] = vf32[m];
+                case WebGLConstants.FLOAT_VEC3: {
+                    for (let u = 0; u < glUniform.array$.length; ++u) {
+                        const idx = glUniform.offset$ + offset + u;
+                        if (vf32[idx] !== glUniform.array$[u]) {
+                            for (let n = u, m = idx; n < glUniform.array$.length; ++n, ++m) {
+                                glUniform.array$[n] = vf32[m];
                             }
-                            gl.uniform3fv(glUniform.glLoc, glUniform.array as Float32Array);
+                            gl.uniform3fv(glUniform.glLoc$, glUniform.array$ as Float32Array);
                             break;
                         }
                     }
                     break;
                 }
-                case gl.FLOAT_VEC4: {
-                    for (let u = 0; u < glUniform.array.length; ++u) {
-                        const idx = glUniform.offset + offset + u;
-                        if (vf32[idx] !== glUniform.array[u]) {
-                            for (let n = u, m = idx; n < glUniform.array.length; ++n, ++m) {
-                                glUniform.array[n] = vf32[m];
+                case WebGLConstants.FLOAT_VEC4: {
+                    for (let u = 0; u < glUniform.array$.length; ++u) {
+                        const idx = glUniform.offset$ + offset + u;
+                        if (vf32[idx] !== glUniform.array$[u]) {
+                            for (let n = u, m = idx; n < glUniform.array$.length; ++n, ++m) {
+                                glUniform.array$[n] = vf32[m];
                             }
-                            gl.uniform4fv(glUniform.glLoc, glUniform.array as Float32Array);
+                            gl.uniform4fv(glUniform.glLoc$, glUniform.array$ as Float32Array);
                             break;
                         }
                     }
                     break;
                 }
-                case gl.FLOAT_MAT2: {
-                    for (let u = 0; u < glUniform.array.length; ++u) {
-                        const idx = glUniform.offset + offset + u;
-                        if (vf32[idx] !== glUniform.array[u]) {
-                            for (let n = u, m = idx; n < glUniform.array.length; ++n, ++m) {
-                                glUniform.array[n] = vf32[m];
+                case WebGLConstants.FLOAT_MAT2: {
+                    for (let u = 0; u < glUniform.array$.length; ++u) {
+                        const idx = glUniform.offset$ + offset + u;
+                        if (vf32[idx] !== glUniform.array$[u]) {
+                            for (let n = u, m = idx; n < glUniform.array$.length; ++n, ++m) {
+                                glUniform.array$[n] = vf32[m];
                             }
-                            gl.uniformMatrix2fv(glUniform.glLoc, false, glUniform.array as Float32Array);
+                            gl.uniformMatrix2fv(glUniform.glLoc$, false, glUniform.array$ as Float32Array);
                             break;
                         }
                     }
                     break;
                 }
-                case gl.FLOAT_MAT3: {
-                    for (let u = 0; u < glUniform.array.length; ++u) {
-                        const idx = glUniform.offset + offset + u;
-                        if (vf32[idx] !== glUniform.array[u]) {
-                            for (let n = u, m = idx; n < glUniform.array.length; ++n, ++m) {
-                                glUniform.array[n] = vf32[m];
+                case WebGLConstants.FLOAT_MAT3: {
+                    for (let u = 0; u < glUniform.array$.length; ++u) {
+                        const idx = glUniform.offset$ + offset + u;
+                        if (vf32[idx] !== glUniform.array$[u]) {
+                            for (let n = u, m = idx; n < glUniform.array$.length; ++n, ++m) {
+                                glUniform.array$[n] = vf32[m];
                             }
-                            gl.uniformMatrix3fv(glUniform.glLoc, false, glUniform.array as Float32Array);
+                            gl.uniformMatrix3fv(glUniform.glLoc$, false, glUniform.array$ as Float32Array);
                             break;
                         }
                     }
                     break;
                 }
-                case gl.FLOAT_MAT4: {
-                    for (let u = 0; u < glUniform.array.length; ++u) {
-                        const idx = glUniform.offset + offset + u;
-                        if (vf32[idx] !== glUniform.array[u]) {
-                            for (let n = u, m = idx; n < glUniform.array.length; ++n, ++m) {
-                                glUniform.array[n] = vf32[m];
+                case WebGLConstants.FLOAT_MAT4: {
+                    for (let u = 0; u < glUniform.array$.length; ++u) {
+                        const idx = glUniform.offset$ + offset + u;
+                        if (vf32[idx] !== glUniform.array$[u]) {
+                            for (let n = u, m = idx; n < glUniform.array$.length; ++n, ++m) {
+                                glUniform.array$[n] = vf32[m];
                             }
-                            gl.uniformMatrix4fv(glUniform.glLoc, false, glUniform.array as Float32Array);
+                            gl.uniformMatrix4fv(glUniform.glLoc$, false, glUniform.array$ as Float32Array);
                             break;
                         }
                     }
@@ -2284,295 +2140,295 @@ export function WebGLCmdFuncBindStates (
             continue;
         }
 
-        const samplerLen = gpuShader.glSamplerTextures.length;
+        const samplerLen = gpuShader.glSamplerTextures$.length;
         for (let i = 0; i < samplerLen; i++) {
-            const glSampler = gpuShader.glSamplerTextures[i];
-            const gpuDescriptorSet = gpuDescriptorSets[glSampler.set];
-            let descriptorIndex = gpuDescriptorSet && gpuDescriptorSet.descriptorIndices[glSampler.binding];
-            let gpuDescriptor = descriptorIndex >= 0 && gpuDescriptorSet.gpuDescriptors[descriptorIndex];
+            const glSampler = gpuShader.glSamplerTextures$[i];
+            const gpuDescriptorSet = gpuDescriptorSets[glSampler.set$];
+            let descriptorIndex = gpuDescriptorSet && gpuDescriptorSet.descriptorIndices$[glSampler.binding$];
+            let gpuDescriptor = descriptorIndex >= 0 && gpuDescriptorSet.gpuDescriptors$[descriptorIndex];
 
-            const texUnitLen = glSampler.units.length;
+            const texUnitLen = glSampler.units$.length;
             for (let l = 0; l < texUnitLen; l++) {
-                const texUnit = glSampler.units[l];
+                const texUnit = glSampler.units$[l];
 
-                if (!gpuDescriptor || !gpuDescriptor.gpuSampler) {
+                if (!gpuDescriptor || !gpuDescriptor.gpuSampler$) {
                     // error(`Sampler binding '${glSampler.name}' at set ${glSampler.set} binding ${glSampler.binding} index ${l} is not bounded`);
                     continue;
                 }
 
-                if (gpuDescriptor.gpuTexture && gpuDescriptor.gpuTexture.size > 0) {
-                    const { gpuTexture } = gpuDescriptor;
-                    const glTexUnit = cache.glTexUnits[texUnit];
+                if (gpuDescriptor.gpuTexture$ && gpuDescriptor.gpuTexture$.size$ > 0) {
+                    const { gpuTexture$: gpuTexture } = gpuDescriptor;
+                    const glTexUnit = cache.glTexUnits$[texUnit];
 
-                    if (glTexUnit.glTexture !== gpuTexture.glTexture) {
-                        if (cache.texUnit !== texUnit) {
-                            gl.activeTexture(gl.TEXTURE0 + texUnit);
-                            cache.texUnit = texUnit;
+                    if (glTexUnit.glTexture$ !== gpuTexture.glTexture$) {
+                        if (cache.texUnit$ !== texUnit) {
+                            gl.activeTexture(WebGLConstants.TEXTURE0 + texUnit);
+                            cache.texUnit$ = texUnit;
                         }
-                        if (gpuTexture.glTexture) {
-                            gl.bindTexture(gpuTexture.glTarget, gpuTexture.glTexture);
+                        if (gpuTexture.glTexture$) {
+                            gl.bindTexture(gpuTexture.glTarget$, gpuTexture.glTexture$);
                         } else {
-                            gl.bindTexture(gpuTexture.glTarget, device.nullTex2D.gpuTexture.glTexture);
+                            gl.bindTexture(gpuTexture.glTarget$, device.nullTex2D.gpuTexture.glTexture$);
                         }
-                        glTexUnit.glTexture = gpuTexture.glTexture;
+                        glTexUnit.glTexture$ = gpuTexture.glTexture$;
                     }
 
-                    const { gpuSampler } = gpuDescriptor;
-                    if (gpuTexture.isPowerOf2) {
-                        glWrapS = gpuSampler.glWrapS;
-                        glWrapT = gpuSampler.glWrapT;
+                    const { gpuSampler$: gpuSampler } = gpuDescriptor;
+                    if (gpuTexture.isPowerOf2$) {
+                        glWrapS = gpuSampler.glWrapS$;
+                        glWrapT = gpuSampler.glWrapT$;
                     } else {
-                        glWrapS = gl.CLAMP_TO_EDGE;
-                        glWrapT = gl.CLAMP_TO_EDGE;
+                        glWrapS = WebGLConstants.CLAMP_TO_EDGE;
+                        glWrapT = WebGLConstants.CLAMP_TO_EDGE;
                     }
 
-                    if (gpuTexture.isPowerOf2) {
-                        if (gpuTexture.mipLevel <= 1
-                            && (gpuSampler.glMinFilter === gl.LINEAR_MIPMAP_NEAREST
-                            || gpuSampler.glMinFilter === gl.LINEAR_MIPMAP_LINEAR)) {
-                            glMinFilter = gl.LINEAR;
+                    if (gpuTexture.isPowerOf2$) {
+                        if (gpuTexture.mipLevel$ <= 1
+                            && (gpuSampler.glMinFilter$ === WebGLConstants.LINEAR_MIPMAP_NEAREST
+                            || gpuSampler.glMinFilter$ === WebGLConstants.LINEAR_MIPMAP_LINEAR)) {
+                            glMinFilter = WebGLConstants.LINEAR;
                         } else {
-                            glMinFilter = gpuSampler.glMinFilter;
+                            glMinFilter = gpuSampler.glMinFilter$;
                         }
-                    } else if (gpuSampler.glMinFilter === gl.LINEAR
-                            || gpuSampler.glMinFilter === gl.LINEAR_MIPMAP_NEAREST
-                            || gpuSampler.glMinFilter === gl.LINEAR_MIPMAP_LINEAR) {
-                        glMinFilter = gl.LINEAR;
+                    } else if (gpuSampler.glMinFilter$ === WebGLConstants.LINEAR
+                            || gpuSampler.glMinFilter$ === WebGLConstants.LINEAR_MIPMAP_NEAREST
+                            || gpuSampler.glMinFilter$ === WebGLConstants.LINEAR_MIPMAP_LINEAR) {
+                        glMinFilter = WebGLConstants.LINEAR;
                     } else {
-                        glMinFilter = gl.NEAREST;
+                        glMinFilter = WebGLConstants.NEAREST;
                     }
 
-                    if (gpuTexture.glWrapS !== glWrapS) {
-                        if (cache.texUnit !== texUnit) {
-                            gl.activeTexture(gl.TEXTURE0 + texUnit);
-                            cache.texUnit = texUnit;
+                    if (gpuTexture.glWrapS$ !== glWrapS) {
+                        if (cache.texUnit$ !== texUnit) {
+                            gl.activeTexture(WebGLConstants.TEXTURE0 + texUnit);
+                            cache.texUnit$ = texUnit;
                         }
-                        gl.texParameteri(gpuTexture.glTarget, gl.TEXTURE_WRAP_S, glWrapS);
-                        gpuTexture.glWrapS = glWrapS;
+                        gl.texParameteri(gpuTexture.glTarget$, WebGLConstants.TEXTURE_WRAP_S, glWrapS);
+                        gpuTexture.glWrapS$ = glWrapS;
                     }
 
-                    if (gpuTexture.glWrapT !== glWrapT) {
-                        if (cache.texUnit !== texUnit) {
-                            gl.activeTexture(gl.TEXTURE0 + texUnit);
-                            cache.texUnit = texUnit;
+                    if (gpuTexture.glWrapT$ !== glWrapT) {
+                        if (cache.texUnit$ !== texUnit) {
+                            gl.activeTexture(WebGLConstants.TEXTURE0 + texUnit);
+                            cache.texUnit$ = texUnit;
                         }
-                        gl.texParameteri(gpuTexture.glTarget, gl.TEXTURE_WRAP_T, glWrapT);
-                        gpuTexture.glWrapT = glWrapT;
+                        gl.texParameteri(gpuTexture.glTarget$, WebGLConstants.TEXTURE_WRAP_T, glWrapT);
+                        gpuTexture.glWrapT$ = glWrapT;
                     }
 
-                    if (gpuTexture.glMinFilter !== glMinFilter) {
-                        if (cache.texUnit !== texUnit) {
-                            gl.activeTexture(gl.TEXTURE0 + texUnit);
-                            cache.texUnit = texUnit;
+                    if (gpuTexture.glMinFilter$ !== glMinFilter) {
+                        if (cache.texUnit$ !== texUnit) {
+                            gl.activeTexture(WebGLConstants.TEXTURE0 + texUnit);
+                            cache.texUnit$ = texUnit;
                         }
-                        gl.texParameteri(gpuTexture.glTarget, gl.TEXTURE_MIN_FILTER, glMinFilter);
-                        gpuTexture.glMinFilter = glMinFilter;
+                        gl.texParameteri(gpuTexture.glTarget$, WebGLConstants.TEXTURE_MIN_FILTER, glMinFilter);
+                        gpuTexture.glMinFilter$ = glMinFilter;
                     }
 
-                    if (gpuTexture.glMagFilter !== gpuSampler.glMagFilter) {
-                        if (cache.texUnit !== texUnit) {
-                            gl.activeTexture(gl.TEXTURE0 + texUnit);
-                            cache.texUnit = texUnit;
+                    if (gpuTexture.glMagFilter$ !== gpuSampler.glMagFilter$) {
+                        if (cache.texUnit$ !== texUnit) {
+                            gl.activeTexture(WebGLConstants.TEXTURE0 + texUnit);
+                            cache.texUnit$ = texUnit;
                         }
-                        gl.texParameteri(gpuTexture.glTarget, gl.TEXTURE_MAG_FILTER, gpuSampler.glMagFilter);
-                        gpuTexture.glMagFilter = gpuSampler.glMagFilter;
+                        gl.texParameteri(gpuTexture.glTarget$, WebGLConstants.TEXTURE_MAG_FILTER, gpuSampler.glMagFilter$);
+                        gpuTexture.glMagFilter$ = gpuSampler.glMagFilter$;
                     }
                 }
 
-                gpuDescriptor = gpuDescriptorSet.gpuDescriptors[++descriptorIndex];
+                gpuDescriptor = gpuDescriptorSet.gpuDescriptors$[++descriptorIndex];
             }
         }
     } // bind descriptor sets
 
     // bind vertex/index buffer
     if (gpuInputAssembler && gpuShader
-        && (isShaderChanged || gfxStateCache.gpuInputAssembler !== gpuInputAssembler)) {
-        gfxStateCache.gpuInputAssembler = gpuInputAssembler;
-        const ia = device.extensions.ANGLE_instanced_arrays;
+        && (isShaderChanged || gfxStateCache.gpuInputAssembler$ !== gpuInputAssembler)) {
+        gfxStateCache.gpuInputAssembler$ = gpuInputAssembler;
+        const ia = device.extensions.ANGLE_instanced_arrays$;
 
-        if (device.extensions.useVAO) {
-            const vao = device.extensions.OES_vertex_array_object!;
+        if (device.extensions.useVAO$) {
+            const vao = device.extensions.OES_vertex_array_object$!;
 
             // check vao
-            let glVAO = gpuInputAssembler.glVAOs.get(gpuShader.glProgram!);
+            let glVAO = gpuInputAssembler.glVAOs$.get(gpuShader.glProgram$!);
             if (!glVAO) {
                 glVAO = vao.createVertexArrayOES()!;
-                gpuInputAssembler.glVAOs.set(gpuShader.glProgram!, glVAO);
+                gpuInputAssembler.glVAOs$.set(gpuShader.glProgram$!, glVAO);
 
                 vao.bindVertexArrayOES(glVAO);
-                gl.bindBuffer(gl.ARRAY_BUFFER, null);
-                gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
-                cache.glArrayBuffer = null;
-                cache.glElementArrayBuffer = null;
+                gl.bindBuffer(WebGLConstants.ARRAY_BUFFER, null);
+                gl.bindBuffer(WebGLConstants.ELEMENT_ARRAY_BUFFER, null);
+                cache.glArrayBuffer$ = null;
+                cache.glElementArrayBuffer$ = null;
 
                 let glAttrib: IWebGLAttrib | null;
-                const inputLen = gpuShader.glInputs.length;
+                const inputLen = gpuShader.glInputs$.length;
                 for (let j = 0; j < inputLen; j++) {
-                    const glInput = gpuShader.glInputs[j];
+                    const glInput = gpuShader.glInputs$[j];
                     glAttrib = null;
 
-                    const attribLen = gpuInputAssembler.glAttribs.length;
+                    const attribLen = gpuInputAssembler.glAttribs$.length;
                     for (let k = 0; k < attribLen; k++) {
-                        const attrib = gpuInputAssembler.glAttribs[k];
-                        if (attrib.name === glInput.name) {
+                        const attrib = gpuInputAssembler.glAttribs$[k];
+                        if (attrib.name$ === glInput.name$) {
                             glAttrib = attrib;
                             break;
                         }
                     }
 
                     if (glAttrib) {
-                        if (cache.glArrayBuffer !== glAttrib.glBuffer) {
-                            gl.bindBuffer(gl.ARRAY_BUFFER, glAttrib.glBuffer);
-                            cache.glArrayBuffer = glAttrib.glBuffer;
+                        if (cache.glArrayBuffer$ !== glAttrib.glBuffer$) {
+                            gl.bindBuffer(WebGLConstants.ARRAY_BUFFER, glAttrib.glBuffer$);
+                            cache.glArrayBuffer$ = glAttrib.glBuffer$;
                         }
 
-                        for (let c = 0; c < glAttrib.componentCount; ++c) {
-                            const glLoc = glInput.glLoc + c;
-                            const attribOffset = glAttrib.offset + glAttrib.size * c;
+                        for (let c = 0; c < glAttrib.componentCount$; ++c) {
+                            const glLoc = glInput.glLoc$ + c;
+                            const attribOffset = glAttrib.offset$ + glAttrib.size$ * c;
 
                             gl.enableVertexAttribArray(glLoc);
-                            cache.glCurrentAttribLocs[glLoc] = true;
+                            cache.glCurrentAttribLocs$[glLoc] = true;
 
-                            gl.vertexAttribPointer(glLoc, glAttrib.count, glAttrib.glType, glAttrib.isNormalized, glAttrib.stride, attribOffset);
-                            if (ia) { ia.vertexAttribDivisorANGLE(glLoc, glAttrib.isInstanced ? 1 : 0); }
+                            gl.vertexAttribPointer(glLoc, glAttrib.count$, glAttrib.glType$, glAttrib.isNormalized$, glAttrib.stride$, attribOffset);
+                            if (ia) { ia.vertexAttribDivisorANGLE(glLoc, glAttrib.isInstanced$ ? 1 : 0); }
                         }
                     }
                 }
 
-                const gpuBuffer = gpuInputAssembler.gpuIndexBuffer;
+                const gpuBuffer = gpuInputAssembler.gpuIndexBuffer$;
                 if (gpuBuffer) {
-                    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gpuBuffer.glBuffer);
+                    gl.bindBuffer(WebGLConstants.ELEMENT_ARRAY_BUFFER, gpuBuffer.glBuffer$);
                 }
 
                 vao.bindVertexArrayOES(null);
-                gl.bindBuffer(gl.ARRAY_BUFFER, null);
-                gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
-                cache.glArrayBuffer = null;
-                cache.glElementArrayBuffer = null;
+                gl.bindBuffer(WebGLConstants.ARRAY_BUFFER, null);
+                gl.bindBuffer(WebGLConstants.ELEMENT_ARRAY_BUFFER, null);
+                cache.glArrayBuffer$ = null;
+                cache.glElementArrayBuffer$ = null;
             }
 
-            if (cache.glVAO !== glVAO) {
+            if (cache.glVAO$ !== glVAO) {
                 vao.bindVertexArrayOES(glVAO);
-                cache.glVAO = glVAO;
+                cache.glVAO$ = glVAO;
             }
         } else {
             for (let a = 0; a < device.capabilities.maxVertexAttributes; ++a) {
-                cache.glCurrentAttribLocs[a] = false;
+                cache.glCurrentAttribLocs$[a] = false;
             }
 
-            const inputLen = gpuShader.glInputs.length;
+            const inputLen = gpuShader.glInputs$.length;
             for (let j = 0; j < inputLen; j++) {
-                const glInput = gpuShader.glInputs[j];
+                const glInput = gpuShader.glInputs$[j];
                 let glAttrib: IWebGLAttrib | null = null;
 
-                const attribLen = gpuInputAssembler.glAttribs.length;
+                const attribLen = gpuInputAssembler.glAttribs$.length;
                 for (let k = 0; k < attribLen; k++) {
-                    const attrib = gpuInputAssembler.glAttribs[k];
-                    if (attrib.name === glInput.name) {
+                    const attrib = gpuInputAssembler.glAttribs$[k];
+                    if (attrib.name$ === glInput.name$) {
                         glAttrib = attrib;
                         break;
                     }
                 }
 
                 if (glAttrib) {
-                    if (cache.glArrayBuffer !== glAttrib.glBuffer) {
-                        gl.bindBuffer(gl.ARRAY_BUFFER, glAttrib.glBuffer);
-                        cache.glArrayBuffer = glAttrib.glBuffer;
+                    if (cache.glArrayBuffer$ !== glAttrib.glBuffer$) {
+                        gl.bindBuffer(WebGLConstants.ARRAY_BUFFER, glAttrib.glBuffer$);
+                        cache.glArrayBuffer$ = glAttrib.glBuffer$;
                     }
 
-                    for (let c = 0; c < glAttrib.componentCount; ++c) {
-                        const glLoc = glInput.glLoc + c;
-                        const attribOffset = glAttrib.offset + glAttrib.size * c;
+                    for (let c = 0; c < glAttrib.componentCount$; ++c) {
+                        const glLoc = glInput.glLoc$ + c;
+                        const attribOffset = glAttrib.offset$ + glAttrib.size$ * c;
 
-                        if (!cache.glEnabledAttribLocs[glLoc] && glLoc >= 0) {
+                        if (!cache.glEnabledAttribLocs$[glLoc] && glLoc >= 0) {
                             gl.enableVertexAttribArray(glLoc);
-                            cache.glEnabledAttribLocs[glLoc] = true;
+                            cache.glEnabledAttribLocs$[glLoc] = true;
                         }
-                        cache.glCurrentAttribLocs[glLoc] = true;
+                        cache.glCurrentAttribLocs$[glLoc] = true;
 
-                        gl.vertexAttribPointer(glLoc, glAttrib.count, glAttrib.glType, glAttrib.isNormalized, glAttrib.stride, attribOffset);
-                        if (ia) { ia.vertexAttribDivisorANGLE(glLoc, glAttrib.isInstanced ? 1 : 0); }
+                        gl.vertexAttribPointer(glLoc, glAttrib.count$, glAttrib.glType$, glAttrib.isNormalized$, glAttrib.stride$, attribOffset);
+                        if (ia) { ia.vertexAttribDivisorANGLE(glLoc, glAttrib.isInstanced$ ? 1 : 0); }
                     }
                 }
             } // for
 
-            const gpuBuffer = gpuInputAssembler.gpuIndexBuffer;
+            const gpuBuffer = gpuInputAssembler.gpuIndexBuffer$;
             if (gpuBuffer) {
-                if (cache.glElementArrayBuffer !== gpuBuffer.glBuffer) {
-                    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gpuBuffer.glBuffer);
-                    cache.glElementArrayBuffer = gpuBuffer.glBuffer;
+                if (cache.glElementArrayBuffer$ !== gpuBuffer.glBuffer$) {
+                    gl.bindBuffer(WebGLConstants.ELEMENT_ARRAY_BUFFER, gpuBuffer.glBuffer$);
+                    cache.glElementArrayBuffer$ = gpuBuffer.glBuffer$;
                 }
             }
 
             for (let a = 0; a < device.capabilities.maxVertexAttributes; ++a) {
-                if (cache.glEnabledAttribLocs[a] !== cache.glCurrentAttribLocs[a]) {
+                if (cache.glEnabledAttribLocs$[a] !== cache.glCurrentAttribLocs$[a]) {
                     gl.disableVertexAttribArray(a);
-                    cache.glEnabledAttribLocs[a] = false;
+                    cache.glEnabledAttribLocs$[a] = false;
                 }
             }
         }
     } // bind vertex/index buffer
 
     // update dynamic states
-    if (gpuPipelineState && gpuPipelineState.dynamicStates.length) {
-        const dsLen = gpuPipelineState.dynamicStates.length;
+    if (gpuPipelineState && gpuPipelineState.dynamicStates$.length) {
+        const dsLen = gpuPipelineState.dynamicStates$.length;
         for (let j = 0; j < dsLen; j++) {
-            const dynamicState = gpuPipelineState.dynamicStates[j];
+            const dynamicState = gpuPipelineState.dynamicStates$[j];
             switch (dynamicState) {
             case DynamicStateFlagBit.LINE_WIDTH: {
-                if (cache.rs.lineWidth !== dynamicStates.lineWidth) {
+                if (cache.rs$.lineWidth !== dynamicStates.lineWidth) {
                     gl.lineWidth(dynamicStates.lineWidth);
-                    cache.rs.lineWidth = dynamicStates.lineWidth;
+                    cache.rs$.lineWidth = dynamicStates.lineWidth;
                 }
                 break;
             }
             case DynamicStateFlagBit.DEPTH_BIAS: {
-                if (cache.rs.depthBias !== dynamicStates.depthBiasConstant
-                    || cache.rs.depthBiasSlop !== dynamicStates.depthBiasSlope) {
+                if (cache.rs$.depthBias !== dynamicStates.depthBiasConstant
+                    || cache.rs$.depthBiasSlop !== dynamicStates.depthBiasSlope) {
                     gl.polygonOffset(dynamicStates.depthBiasConstant, dynamicStates.depthBiasSlope);
-                    cache.rs.depthBias = dynamicStates.depthBiasConstant;
-                    cache.rs.depthBiasSlop = dynamicStates.depthBiasSlope;
+                    cache.rs$.depthBias = dynamicStates.depthBiasConstant;
+                    cache.rs$.depthBiasSlop = dynamicStates.depthBiasSlope;
                 }
                 break;
             }
             case DynamicStateFlagBit.BLEND_CONSTANTS: {
                 const blendConstant = dynamicStates.blendConstant;
-                if ((cache.bs.blendColor.x !== blendConstant.x)
-                    || (cache.bs.blendColor.y !== blendConstant.y)
-                    || (cache.bs.blendColor.z !== blendConstant.z)
-                    || (cache.bs.blendColor.w !== blendConstant.w)) {
+                if ((cacheBS.blendColor.x !== blendConstant.x)
+                    || (cacheBS.blendColor.y !== blendConstant.y)
+                    || (cacheBS.blendColor.z !== blendConstant.z)
+                    || (cacheBS.blendColor.w !== blendConstant.w)) {
                     gl.blendColor(blendConstant.x, blendConstant.y, blendConstant.z, blendConstant.w);
-                    cache.bs.blendColor.copy(blendConstant);
+                    cacheBS.blendColor.copy(blendConstant);
                 }
                 break;
             }
             case DynamicStateFlagBit.STENCIL_WRITE_MASK: {
                 const front = dynamicStates.stencilStatesFront;
                 const back = dynamicStates.stencilStatesBack;
-                if (cache.dss.stencilWriteMaskFront !== front.writeMask) {
-                    gl.stencilMaskSeparate(gl.FRONT, front.writeMask);
-                    cache.dss.stencilWriteMaskFront = front.writeMask;
+                if (cacheDSS.stencilWriteMaskFront !== front.writeMask) {
+                    gl.stencilMaskSeparate(WebGLConstants.FRONT, front.writeMask);
+                    cacheDSS.stencilWriteMaskFront = front.writeMask;
                 }
-                if (cache.dss.stencilWriteMaskBack !== back.writeMask) {
-                    gl.stencilMaskSeparate(gl.BACK, back.writeMask);
-                    cache.dss.stencilWriteMaskBack = back.writeMask;
+                if (cacheDSS.stencilWriteMaskBack !== back.writeMask) {
+                    gl.stencilMaskSeparate(WebGLConstants.BACK, back.writeMask);
+                    cacheDSS.stencilWriteMaskBack = back.writeMask;
                 }
                 break;
             }
             case DynamicStateFlagBit.STENCIL_COMPARE_MASK: {
                 const front = dynamicStates.stencilStatesFront;
                 const back = dynamicStates.stencilStatesBack;
-                if (cache.dss.stencilRefFront !== front.reference
-                    || cache.dss.stencilReadMaskFront !== front.compareMask) {
-                    gl.stencilFuncSeparate(gl.FRONT, WebGLCmpFuncs[cache.dss.stencilFuncFront], front.reference, front.compareMask);
-                    cache.dss.stencilRefFront = front.reference;
-                    cache.dss.stencilReadMaskFront = front.compareMask;
-                }
-                if (cache.dss.stencilRefBack !== back.reference
-                    || cache.dss.stencilReadMaskBack !== back.compareMask) {
-                    gl.stencilFuncSeparate(gl.BACK, WebGLCmpFuncs[cache.dss.stencilFuncBack], back.reference, back.compareMask);
-                    cache.dss.stencilRefBack = back.reference;
-                    cache.dss.stencilReadMaskBack = back.compareMask;
+                if (cacheDSS.stencilRefFront !== front.reference
+                    || cacheDSS.stencilReadMaskFront !== front.compareMask) {
+                    gl.stencilFuncSeparate(WebGLConstants.FRONT, WebGLCmpFuncs[cacheDSS.stencilFuncFront], front.reference, front.compareMask);
+                    cacheDSS.stencilRefFront = front.reference;
+                    cacheDSS.stencilReadMaskFront = front.compareMask;
+                }
+                if (cacheDSS.stencilRefBack !== back.reference
+                    || cacheDSS.stencilReadMaskBack !== back.compareMask) {
+                    gl.stencilFuncSeparate(WebGLConstants.BACK, WebGLCmpFuncs[cacheDSS.stencilFuncBack], back.reference, back.compareMask);
+                    cacheDSS.stencilRefBack = back.reference;
+                    cacheDSS.stencilReadMaskBack = back.compareMask;
                 }
                 break;
             }
@@ -2584,95 +2440,95 @@ export function WebGLCmdFuncBindStates (
 
 export function WebGLCmdFuncDraw (device: WebGLDevice, drawInfo: Readonly<DrawInfo>): void {
     const { gl } = device;
-    const { ANGLE_instanced_arrays: ia, WEBGL_multi_draw: md } = device.extensions;
-    const { gpuInputAssembler, glPrimitive } = gfxStateCache;
+    const { ANGLE_instanced_arrays$: ia, WEBGL_multi_draw$: md } = device.extensions;
+    const { gpuInputAssembler$: gpuInputAssembler, glPrimitive$: glPrimitive } = gfxStateCache;
 
     if (gpuInputAssembler) {
-        const indexBuffer = gpuInputAssembler.gpuIndexBuffer;
-        if (gpuInputAssembler.gpuIndirectBuffer) {
-            const indirects = gpuInputAssembler.gpuIndirectBuffer.indirects;
-            if (indirects.drawByIndex) {
-                for (let j = 0; j < indirects.drawCount; j++) {
-                    indirects.byteOffsets[j] = indirects.offsets[j] * indexBuffer!.stride;
+        const indexBuffer = gpuInputAssembler.gpuIndexBuffer$;
+        if (gpuInputAssembler.gpuIndirectBuffer$) {
+            const indirects = gpuInputAssembler.gpuIndirectBuffer$.indirects$;
+            if (indirects.drawByIndex$) {
+                for (let j = 0; j < indirects.drawCount$; j++) {
+                    indirects.byteOffsets$[j] = indirects.offsets$[j] * indexBuffer!.stride$;
                 }
                 if (md) {
-                    if (indirects.instancedDraw) {
+                    if (indirects.instancedDraw$) {
                         md.multiDrawElementsInstancedWEBGL(
                             glPrimitive,
-                            indirects.counts,
+                            indirects.counts$,
                             0,
-                            gpuInputAssembler.glIndexType,
-                            indirects.byteOffsets,
+                            gpuInputAssembler.glIndexType$,
+                            indirects.byteOffsets$,
                             0,
-                            indirects.instances,
+                            indirects.instances$,
                             0,
-                            indirects.drawCount,
+                            indirects.drawCount$,
                         );
                     } else {
                         md.multiDrawElementsWEBGL(
                             glPrimitive,
-                            indirects.counts,
+                            indirects.counts$,
                             0,
-                            gpuInputAssembler.glIndexType,
-                            indirects.byteOffsets,
+                            gpuInputAssembler.glIndexType$,
+                            indirects.byteOffsets$,
                             0,
-                            indirects.drawCount,
+                            indirects.drawCount$,
                         );
                     }
                 } else {
-                    for (let j = 0; j < indirects.drawCount; j++) {
-                        if (indirects.instances[j] && ia) {
+                    for (let j = 0; j < indirects.drawCount$; j++) {
+                        if (indirects.instances$[j] && ia) {
                             ia.drawElementsInstancedANGLE(
                                 glPrimitive,
-                                indirects.counts[j],
-                                gpuInputAssembler.glIndexType,
-                                indirects.byteOffsets[j],
-                                indirects.instances[j],
+                                indirects.counts$[j],
+                                gpuInputAssembler.glIndexType$,
+                                indirects.byteOffsets$[j],
+                                indirects.instances$[j],
                             );
                         } else {
-                            gl.drawElements(glPrimitive, indirects.counts[j], gpuInputAssembler.glIndexType, indirects.byteOffsets[j]);
+                            gl.drawElements(glPrimitive, indirects.counts$[j], gpuInputAssembler.glIndexType$, indirects.byteOffsets$[j]);
                         }
                     }
                 }
             } else if (md) {
-                if (indirects.instancedDraw) {
+                if (indirects.instancedDraw$) {
                     md.multiDrawArraysInstancedWEBGL(
                         glPrimitive,
-                        indirects.offsets,
+                        indirects.offsets$,
                         0,
-                        indirects.counts,
+                        indirects.counts$,
                         0,
-                        indirects.instances,
+                        indirects.instances$,
                         0,
-                        indirects.drawCount,
+                        indirects.drawCount$,
                     );
                 } else {
                     md.multiDrawArraysWEBGL(
                         glPrimitive,
-                        indirects.offsets,
+                        indirects.offsets$,
                         0,
-                        indirects.counts,
+                        indirects.counts$,
                         0,
-                        indirects.drawCount,
+                        indirects.drawCount$,
                     );
                 }
             } else {
-                for (let j = 0; j < indirects.drawCount; j++) {
-                    if (indirects.instances[j] && ia) {
-                        ia.drawArraysInstancedANGLE(glPrimitive, indirects.offsets[j], indirects.counts[j], indirects.instances[j]);
+                for (let j = 0; j < indirects.drawCount$; j++) {
+                    if (indirects.instances$[j] && ia) {
+                        ia.drawArraysInstancedANGLE(glPrimitive, indirects.offsets$[j], indirects.counts$[j], indirects.instances$[j]);
                     } else {
-                        gl.drawArrays(glPrimitive, indirects.offsets[j], indirects.counts[j]);
+                        gl.drawArrays(glPrimitive, indirects.offsets$[j], indirects.counts$[j]);
                     }
                 }
             }
         } else if (drawInfo.instanceCount && ia) {
             if (indexBuffer) {
                 if (drawInfo.indexCount > 0) {
-                    const offset = drawInfo.firstIndex * indexBuffer.stride;
+                    const offset = drawInfo.firstIndex * indexBuffer.stride$;
                     ia.drawElementsInstancedANGLE(
                         glPrimitive,
                         drawInfo.indexCount,
-                        gpuInputAssembler.glIndexType,
+                        gpuInputAssembler.glIndexType$,
                         offset,
                         drawInfo.instanceCount,
                     );
@@ -2682,8 +2538,8 @@ export function WebGLCmdFuncDraw (device: WebGLDevice, drawInfo: Readonly<DrawIn
             }
         } else if (indexBuffer) {
             if (drawInfo.indexCount > 0) {
-                const offset = drawInfo.firstIndex * indexBuffer.stride;
-                gl.drawElements(glPrimitive, drawInfo.indexCount, gpuInputAssembler.glIndexType, offset);
+                const offset = drawInfo.firstIndex * indexBuffer.stride$;
+                gl.drawElements(glPrimitive, drawInfo.indexCount, gpuInputAssembler.glIndexType$, offset);
             }
         } else if (drawInfo.vertexCount > 0) {
             gl.drawArrays(glPrimitive, drawInfo.firstVertex, drawInfo.vertexCount);
@@ -2691,118 +2547,52 @@ export function WebGLCmdFuncDraw (device: WebGLDevice, drawInfo: Readonly<DrawIn
     }
 }
 
-const cmdIds = new Array<number>(WebGLCmd.COUNT);
-export function WebGLCmdFuncExecuteCmds (device: WebGLDevice, cmdPackage: WebGLCmdPackage): void {
-    cmdIds.fill(0);
-
-    for (let i = 0; i < cmdPackage.cmds.length; ++i) {
-        const cmd = cmdPackage.cmds.array[i];
-        const cmdId = cmdIds[cmd]++;
-
-        switch (cmd) {
-        case WebGLCmd.BEGIN_RENDER_PASS: {
-            const cmd0 = cmdPackage.beginRenderPassCmds.array[cmdId];
-            WebGLCmdFuncBeginRenderPass(
-                device,
-                cmd0.gpuRenderPass,
-                cmd0.gpuFramebuffer,
-                cmd0.renderArea,
-                cmd0.clearColors,
-                cmd0.clearDepth,
-                cmd0.clearStencil,
-            );
-            break;
-        }
-        /*
-            case WebGLCmd.END_RENDER_PASS: {
-                // WebGL 1.0 doesn't support store operation of attachments.
-                // StoreOp.Store is the default GL behavior.
-                break;
-            }
-            */
-        case WebGLCmd.BIND_STATES: {
-            const cmd2 = cmdPackage.bindStatesCmds.array[cmdId];
-            WebGLCmdFuncBindStates(
-                device,
-                cmd2.gpuPipelineState,
-                cmd2.gpuInputAssembler,
-                cmd2.gpuDescriptorSets,
-                cmd2.dynamicOffsets,
-                cmd2.dynamicStates,
-            );
-            break;
-        }
-        case WebGLCmd.DRAW: {
-            const cmd3 = cmdPackage.drawCmds.array[cmdId];
-            WebGLCmdFuncDraw(device, cmd3.drawInfo);
-            break;
-        }
-        case WebGLCmd.UPDATE_BUFFER: {
-            const cmd4 = cmdPackage.updateBufferCmds.array[cmdId];
-            WebGLCmdFuncUpdateBuffer(device, cmd4.gpuBuffer as IWebGLGPUBuffer, cmd4.buffer as BufferSource, cmd4.offset, cmd4.size);
-            break;
-        }
-        case WebGLCmd.COPY_BUFFER_TO_TEXTURE: {
-            const cmd5 = cmdPackage.copyBufferToTextureCmds.array[cmdId];
-            WebGLCmdFuncCopyBuffersToTexture(device, cmd5.buffers, cmd5.gpuTexture as IWebGLGPUTexture, cmd5.regions);
-            break;
-        }
-        case WebGLCmd.BLIT_TEXTURE: {
-            const cmd6 = cmdPackage.blitTextureCmds.array[cmdId];
-            WebGLCmdFuncBlitTexture(device, cmd6.srcTexture as IWebGLGPUTexture, cmd6.dstTexture as IWebGLGPUTexture, cmd6.regions, cmd6.filter);
-            break;
-        }
-        default:
-        } // switch
-    } // for
-}
-
 export function WebGLCmdFuncCopyTexImagesToTexture (
     device: WebGLDevice,
     texImages: Readonly<TexImageSource[]>,
     gpuTexture: IWebGLGPUTexture,
     regions: Readonly<BufferTextureCopy[]>,
 ): void {
-    const { gl } = device;
-    const glTexUnit = device.stateCache.glTexUnits[device.stateCache.texUnit];
-    if (glTexUnit.glTexture !== gpuTexture.glTexture) {
-        gl.bindTexture(gpuTexture.glTarget, gpuTexture.glTexture);
-        glTexUnit.glTexture = gpuTexture.glTexture;
+    const { gl, stateCache } = device;
+    const glTexUnit = stateCache.glTexUnits$[stateCache.texUnit$];
+    if (glTexUnit.glTexture$ !== gpuTexture.glTexture$) {
+        gl.bindTexture(gpuTexture.glTarget$, gpuTexture.glTexture$);
+        glTexUnit.glTexture$ = gpuTexture.glTexture$;
     }
 
     let n = 0;
     let f = 0;
 
-    switch (gpuTexture.glTarget) {
-    case gl.TEXTURE_2D: {
+    switch (gpuTexture.glTarget$) {
+    case WebGLConstants.TEXTURE_2D: {
         for (let i = 0; i < regions.length; i++) {
             const region = regions[i];
             // console.debug('Copying image to texture 2D: ' + region.texExtent.width + ' x ' + region.texExtent.height);
             gl.texSubImage2D(
-                gl.TEXTURE_2D,
+                WebGLConstants.TEXTURE_2D,
                 region.texSubres.mipLevel,
                 region.texOffset.x,
                 region.texOffset.y,
-                gpuTexture.glFormat,
-                gpuTexture.glType,
+                gpuTexture.glFormat$,
+                gpuTexture.glType$,
                 texImages[n++],
             );
         }
         break;
     }
-    case gl.TEXTURE_CUBE_MAP: {
+    case WebGLConstants.TEXTURE_CUBE_MAP: {
         for (let i = 0; i < regions.length; i++) {
             const region = regions[i];
             // console.debug('Copying image to texture cube: ' + region.texExtent.width + ' x ' + region.texExtent.height);
             const fcount = region.texSubres.baseArrayLayer + region.texSubres.layerCount;
             for (f = region.texSubres.baseArrayLayer; f < fcount; ++f) {
                 gl.texSubImage2D(
-                    gl.TEXTURE_CUBE_MAP_POSITIVE_X + f,
+                    WebGLConstants.TEXTURE_CUBE_MAP_POSITIVE_X + f,
                     region.texSubres.mipLevel,
                     region.texOffset.x,
                     region.texOffset.y,
-                    gpuTexture.glFormat,
-                    gpuTexture.glType,
+                    gpuTexture.glFormat$,
+                    gpuTexture.glType$,
                     texImages[n++],
                 );
             }
@@ -2814,9 +2604,9 @@ export function WebGLCmdFuncCopyTexImagesToTexture (
     }
     }
 
-    if ((gpuTexture.flags & TextureFlagBit.GEN_MIPMAP)
-        && gpuTexture.isPowerOf2) {
-        gl.generateMipmap(gpuTexture.glTarget);
+    if ((gpuTexture.flags$ & TextureFlagBit.GEN_MIPMAP)
+        && gpuTexture.isPowerOf2$) {
+        gl.generateMipmap(gpuTexture.glTarget$);
     }
 }
 
@@ -2865,27 +2655,27 @@ export function WebGLCmdFuncCopyBuffersToTexture (
     gpuTexture: IWebGLGPUTexture,
     regions: Readonly<BufferTextureCopy[]>,
 ): void {
-    const { gl } = device;
-    const glTexUnit = device.stateCache.glTexUnits[device.stateCache.texUnit];
-    if (glTexUnit.glTexture !== gpuTexture.glTexture) {
-        gl.bindTexture(gpuTexture.glTarget, gpuTexture.glTexture);
-        glTexUnit.glTexture = gpuTexture.glTexture;
+    const { gl, stateCache } = device;
+    const glTexUnit = stateCache.glTexUnits$[stateCache.texUnit$];
+    if (glTexUnit.glTexture$ !== gpuTexture.glTexture$) {
+        gl.bindTexture(gpuTexture.glTarget$, gpuTexture.glTexture$);
+        glTexUnit.glTexture$ = gpuTexture.glTexture$;
     }
 
     let n = 0;
     let f = 0;
-    const fmtInfo: FormatInfo = FormatInfos[gpuTexture.format];
+    const fmtInfo: FormatInfo = FormatInfos[gpuTexture.format$];
     const ArrayBufferCtor: TypedArrayConstructor = getTypedArrayConstructor(fmtInfo);
     const { isCompressed } = fmtInfo;
 
-    const blockSize = formatAlignment(gpuTexture.format);
+    const blockSize = formatAlignment(gpuTexture.format$);
 
     const extent: Extent = new Extent();
     const offset: Offset = new Offset();
     const stride: Extent = new Extent();
 
-    switch (gpuTexture.glTarget) {
-    case gl.TEXTURE_2D: {
+    switch (gpuTexture.glTarget$) {
+    case WebGLConstants.TEXTURE_2D: {
         for (let i = 0; i < regions.length; i++) {
             const region = regions[i];
             const mipLevel = region.texSubres.mipLevel;
@@ -2898,47 +2688,47 @@ export function WebGLCmdFuncCopyBuffersToTexture (
             stride.width = region.buffStride > 0 ?  region.buffStride : extent.width;
             stride.height = region.buffTexHeight > 0 ? region.buffTexHeight : extent.height;
 
-            const destWidth  = (region.texExtent.width + offset.x === (gpuTexture.width >> mipLevel)) ? region.texExtent.width : extent.width;
-            const destHeight = (region.texExtent.height + offset.y === (gpuTexture.height >> mipLevel)) ? region.texExtent.height : extent.height;
+            const destWidth  = (region.texExtent.width + offset.x === (gpuTexture.width$ >> mipLevel)) ? region.texExtent.width : extent.width;
+            const destHeight = (region.texExtent.height + offset.y === (gpuTexture.height$ >> mipLevel)) ? region.texExtent.height : extent.height;
 
             let pixels: ArrayBufferView;
             const buffer = buffers[n++];
             if (stride.width === extent.width && stride.height === extent.height) {
-                const length = FormatSize(gpuTexture.format, destWidth, destHeight, 1) / ArrayBufferCtor.BYTES_PER_ELEMENT;
+                const length = FormatSize(gpuTexture.format$, destWidth, destHeight, 1) / ArrayBufferCtor.BYTES_PER_ELEMENT;
                 assertID(Number.isInteger(length), 9101);
                 pixels = new ArrayBufferCtor(buffer.buffer, buffer.byteOffset + region.buffOffset, length);
             } else {
-                pixels = pixelBufferPick(buffer, gpuTexture.format, region.buffOffset, stride, extent);
+                pixels = pixelBufferPick(buffer, gpuTexture.format$, region.buffOffset, stride, extent);
             }
 
             if (!isCompressed) {
                 gl.texSubImage2D(
-                    gl.TEXTURE_2D,
+                    WebGLConstants.TEXTURE_2D,
                     mipLevel,
                     offset.x,
                     offset.y,
                     destWidth,
                     destHeight,
-                    gpuTexture.glFormat,
-                    gpuTexture.glType,
+                    gpuTexture.glFormat$,
+                    gpuTexture.glType$,
                     pixels,
                 );
-            } else if (gpuTexture.glInternalFmt !== (WebGLEXT.COMPRESSED_RGB_ETC1_WEBGL as number) && !device.extensions.noCompressedTexSubImage2D) {
+            } else if (gpuTexture.glInternalFmt$ !== (WebGLEXT.COMPRESSED_RGB_ETC1_WEBGL as number) && !device.extensions.noCompressedTexSubImage2D$) {
                 gl.compressedTexSubImage2D(
-                    gl.TEXTURE_2D,
+                    WebGLConstants.TEXTURE_2D,
                     mipLevel,
                     offset.x,
                     offset.y,
                     destWidth,
                     destHeight,
-                    gpuTexture.glFormat,
+                    gpuTexture.glFormat$,
                     pixels,
                 );
             } else { // WEBGL_compressed_texture_etc1
                 gl.compressedTexImage2D(
-                    gl.TEXTURE_2D,
+                    WebGLConstants.TEXTURE_2D,
                     mipLevel,
-                    gpuTexture.glInternalFmt,
+                    gpuTexture.glInternalFmt$,
                     destWidth,
                     destHeight,
                     0,
@@ -2948,7 +2738,7 @@ export function WebGLCmdFuncCopyBuffersToTexture (
         }
         break;
     }
-    case gl.TEXTURE_CUBE_MAP: {
+    case WebGLConstants.TEXTURE_CUBE_MAP: {
         for (let i = 0; i < regions.length; i++) {
             const region = regions[i];
             const mipLevel = region.texSubres.mipLevel;
@@ -2961,50 +2751,50 @@ export function WebGLCmdFuncCopyBuffersToTexture (
             stride.width = region.buffStride > 0 ?  region.buffStride : extent.width;
             stride.height = region.buffTexHeight > 0 ? region.buffTexHeight : extent.height;
 
-            const destWidth  = (region.texExtent.width + offset.x === (gpuTexture.width >> mipLevel)) ? region.texExtent.width : extent.width;
-            const destHeight = (region.texExtent.height + offset.y === (gpuTexture.height >> mipLevel)) ? region.texExtent.height : extent.height;
+            const destWidth  = (region.texExtent.width + offset.x === (gpuTexture.width$ >> mipLevel)) ? region.texExtent.width : extent.width;
+            const destHeight = (region.texExtent.height + offset.y === (gpuTexture.height$ >> mipLevel)) ? region.texExtent.height : extent.height;
 
             const fcount = region.texSubres.baseArrayLayer + region.texSubres.layerCount;
             for (f = region.texSubres.baseArrayLayer; f < fcount; ++f) {
                 let pixels: ArrayBufferView;
                 const buffer = buffers[n++];
                 if (stride.width === extent.width && stride.height === extent.height) {
-                    const length = FormatSize(gpuTexture.format, destWidth, destHeight, 1) / ArrayBufferCtor.BYTES_PER_ELEMENT;
+                    const length = FormatSize(gpuTexture.format$, destWidth, destHeight, 1) / ArrayBufferCtor.BYTES_PER_ELEMENT;
                     assertID(Number.isInteger(length), 9101);
                     pixels = new ArrayBufferCtor(buffer.buffer, buffer.byteOffset + region.buffOffset, length);
                 } else {
-                    pixels = pixelBufferPick(buffer, gpuTexture.format, region.buffOffset, stride, extent);
+                    pixels = pixelBufferPick(buffer, gpuTexture.format$, region.buffOffset, stride, extent);
                 }
 
                 if (!isCompressed) {
                     gl.texSubImage2D(
-                        gl.TEXTURE_CUBE_MAP_POSITIVE_X + f,
+                        WebGLConstants.TEXTURE_CUBE_MAP_POSITIVE_X + f,
                         mipLevel,
                         offset.x,
                         offset.y,
                         destWidth,
                         destHeight,
-                        gpuTexture.glFormat,
-                        gpuTexture.glType,
+                        gpuTexture.glFormat$,
+                        gpuTexture.glType$,
                         pixels,
                     );
-                } else if (gpuTexture.glInternalFmt !== (WebGLEXT.COMPRESSED_RGB_ETC1_WEBGL as number)
-                    && !device.extensions.noCompressedTexSubImage2D) {
+                } else if (gpuTexture.glInternalFmt$ !== (WebGLEXT.COMPRESSED_RGB_ETC1_WEBGL as number)
+                    && !device.extensions.noCompressedTexSubImage2D$) {
                     gl.compressedTexSubImage2D(
-                        gl.TEXTURE_CUBE_MAP_POSITIVE_X + f,
+                        WebGLConstants.TEXTURE_CUBE_MAP_POSITIVE_X + f,
                         mipLevel,
                         offset.x,
                         offset.y,
                         destWidth,
                         destHeight,
-                        gpuTexture.glFormat,
+                        gpuTexture.glFormat$,
                         pixels,
                     );
                 } else { // WEBGL_compressed_texture_etc1
                     gl.compressedTexImage2D(
-                        gl.TEXTURE_CUBE_MAP_POSITIVE_X + f,
+                        WebGLConstants.TEXTURE_CUBE_MAP_POSITIVE_X + f,
                         mipLevel,
-                        gpuTexture.glInternalFmt,
+                        gpuTexture.glInternalFmt$,
                         destWidth,
                         destHeight,
                         0,
@@ -3020,8 +2810,8 @@ export function WebGLCmdFuncCopyBuffersToTexture (
     }
     }
 
-    if (gpuTexture.flags & TextureFlagBit.GEN_MIPMAP) {
-        gl.generateMipmap(gpuTexture.glTarget);
+    if (gpuTexture.flags$ & TextureFlagBit.GEN_MIPMAP) {
+        gl.generateMipmap(gpuTexture.glTarget$);
     }
 }
 
@@ -3035,31 +2825,31 @@ export function WebGLCmdFuncCopyTextureToBuffers (
     const cache = device.stateCache;
 
     const framebuffer = gl.createFramebuffer();
-    gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+    gl.bindFramebuffer(WebGLConstants.FRAMEBUFFER, framebuffer);
     let x = 0;
     let y = 0;
     let w = 1;
     let h = 1;
 
-    switch (gpuTexture.glTarget) {
-    case gl.TEXTURE_2D: {
+    switch (gpuTexture.glTarget$) {
+    case WebGLConstants.TEXTURE_2D: {
         for (let k = 0; k < regions.length; k++) {
             const region = regions[k];
-            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gpuTexture.glTarget, gpuTexture.glTexture, region.texSubres.mipLevel);
+            gl.framebufferTexture2D(WebGLConstants.FRAMEBUFFER, WebGLConstants.COLOR_ATTACHMENT0, gpuTexture.glTarget$, gpuTexture.glTexture$, region.texSubres.mipLevel);
             x = region.texOffset.x;
             y = region.texOffset.y;
             w = region.texExtent.width;
             h = region.texExtent.height;
-            gl.readPixels(x, y, w, h, gpuTexture.glFormat, gpuTexture.glType, buffers[k]);
+            gl.readPixels(x, y, w, h, gpuTexture.glFormat$, gpuTexture.glType$, buffers[k]);
         }
         break;
     }
     default: {
-        error('Unsupported GL texture type, copy texture to buffers failed.');
+        errorID(16399);
     }
     }
-    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-    cache.glFramebuffer = null;
+    gl.bindFramebuffer(WebGLConstants.FRAMEBUFFER, null);
+    cache.glFramebuffer$ = null;
     gl.deleteFramebuffer(framebuffer);
 }
 
diff --git a/cocos/gfx/webgl/webgl-define.ts b/cocos/gfx/webgl/webgl-define.ts
index 39db595f0da..399a40cf305 100644
--- a/cocos/gfx/webgl/webgl-define.ts
+++ b/cocos/gfx/webgl/webgl-define.ts
@@ -98,46 +98,46 @@ export enum WebGLEXT {
 }
 
 export interface IWebGLExtensions {
-    EXT_texture_filter_anisotropic: EXT_texture_filter_anisotropic | null;
-    EXT_blend_minmax: EXT_blend_minmax | null;
-    EXT_frag_depth: EXT_frag_depth | null;
-    EXT_shader_texture_lod: EXT_shader_texture_lod | null;
-    EXT_sRGB: EXT_sRGB | null;
-    OES_vertex_array_object: OES_vertex_array_object | null;
-    EXT_color_buffer_half_float: EXT_color_buffer_half_float | null;
-    WEBGL_multi_draw: WEBGL_multi_draw | null;
-    WEBGL_color_buffer_float: WEBGL_color_buffer_float | null;
-    WEBGL_compressed_texture_etc1: WEBGL_compressed_texture_etc1 | null;
-    WEBGL_compressed_texture_etc: WEBGL_compressed_texture_etc | null;
-    WEBGL_compressed_texture_pvrtc: WEBGL_compressed_texture_pvrtc | null;
-    WEBGL_compressed_texture_astc: WEBGL_compressed_texture_astc | null;
-    WEBGL_compressed_texture_s3tc: WEBGL_compressed_texture_s3tc | null;
-    WEBGL_compressed_texture_s3tc_srgb: WEBGL_compressed_texture_s3tc_srgb | null;
-    WEBGL_debug_shaders: WEBGL_debug_shaders | null;
-    WEBGL_draw_buffers: WEBGL_draw_buffers | null;
-    WEBGL_lose_context: WEBGL_lose_context | null;
-    WEBGL_depth_texture: WEBGL_depth_texture | null;
-    WEBGL_debug_renderer_info: WEBGL_debug_renderer_info | null;
-    OES_texture_half_float: OES_texture_half_float | null;
-    OES_texture_half_float_linear: OES_texture_half_float_linear | null;
-    OES_texture_float: OES_texture_float | null;
-    OES_texture_float_linear: OES_texture_float_linear | null;
-    OES_standard_derivatives: OES_standard_derivatives | null;
-    OES_element_index_uint: OES_element_index_uint | null;
-    ANGLE_instanced_arrays: ANGLE_instanced_arrays | null;
-    destroyShadersImmediately: boolean;
-    noCompressedTexSubImage2D: boolean;
-    isLocationActive: (glLoc: unknown) => glLoc is WebGLUniformLocation;
-    useVAO: boolean;
+    EXT_texture_filter_anisotropic$: EXT_texture_filter_anisotropic | null;
+    EXT_blend_minmax$: EXT_blend_minmax | null;
+    EXT_frag_depth$: EXT_frag_depth | null;
+    EXT_shader_texture_lod$: EXT_shader_texture_lod | null;
+    EXT_sRGB$: EXT_sRGB | null;
+    OES_vertex_array_object$: OES_vertex_array_object | null;
+    EXT_color_buffer_half_float$: EXT_color_buffer_half_float | null;
+    WEBGL_multi_draw$: WEBGL_multi_draw | null;
+    WEBGL_color_buffer_float$: WEBGL_color_buffer_float | null;
+    WEBGL_compressed_texture_etc1$: WEBGL_compressed_texture_etc1 | null;
+    WEBGL_compressed_texture_etc$: WEBGL_compressed_texture_etc | null;
+    WEBGL_compressed_texture_pvrtc$: WEBGL_compressed_texture_pvrtc | null;
+    WEBGL_compressed_texture_astc$: WEBGL_compressed_texture_astc | null;
+    WEBGL_compressed_texture_s3tc$: WEBGL_compressed_texture_s3tc | null;
+    WEBGL_compressed_texture_s3tc_srgb$: WEBGL_compressed_texture_s3tc_srgb | null;
+    WEBGL_debug_shaders$: WEBGL_debug_shaders | null;
+    WEBGL_draw_buffers$: WEBGL_draw_buffers | null;
+    WEBGL_lose_context$: WEBGL_lose_context | null;
+    WEBGL_depth_texture$: WEBGL_depth_texture | null;
+    WEBGL_debug_renderer_info$: WEBGL_debug_renderer_info | null;
+    OES_texture_half_float$: OES_texture_half_float | null;
+    OES_texture_half_float_linear$: OES_texture_half_float_linear | null;
+    OES_texture_float$: OES_texture_float | null;
+    OES_texture_float_linear$: OES_texture_float_linear | null;
+    OES_standard_derivatives$: OES_standard_derivatives | null;
+    OES_element_index_uint$: OES_element_index_uint | null;
+    ANGLE_instanced_arrays$: ANGLE_instanced_arrays | null;
+    destroyShadersImmediately$: boolean;
+    noCompressedTexSubImage2D$: boolean;
+    isLocationActive$: (glLoc: unknown) => glLoc is WebGLUniformLocation;
+    useVAO$: boolean;
 }
 
 // put the global instance here so that we won't have circular dependencies
 export class WebGLDeviceManager {
     static get instance (): WebGLDevice {
-        return WebGLDeviceManager._instance!;
+        return WebGLDeviceManager._instance$!;
     }
-    static setInstance (instance: WebGLDevice): void {
-        WebGLDeviceManager._instance = instance;
+    static setInstance$ (instance: WebGLDevice): void {
+        WebGLDeviceManager._instance$ = instance;
     }
-    private static _instance: WebGLDevice | null = null;
+    private static _instance$: WebGLDevice | null = null;
 }
diff --git a/cocos/gfx/webgl/webgl-descriptor-set-layout.ts b/cocos/gfx/webgl/webgl-descriptor-set-layout.ts
index c136df24b32..9365ae77a9d 100644
--- a/cocos/gfx/webgl/webgl-descriptor-set-layout.ts
+++ b/cocos/gfx/webgl/webgl-descriptor-set-layout.ts
@@ -27,37 +27,37 @@ import { DescriptorSetLayout } from '../base/descriptor-set-layout';
 import { IWebGLGPUDescriptorSetLayout } from './webgl-gpu-objects';
 
 export class WebGLDescriptorSetLayout extends DescriptorSetLayout {
-    get gpuDescriptorSetLayout (): IWebGLGPUDescriptorSetLayout { return this._gpuDescriptorSetLayout!; }
+    get gpuDescriptorSetLayout (): IWebGLGPUDescriptorSetLayout { return this._gpuDescriptorSetLayout$!; }
 
-    private _gpuDescriptorSetLayout: IWebGLGPUDescriptorSetLayout | null = null;
+    private _gpuDescriptorSetLayout$: IWebGLGPUDescriptorSetLayout | null = null;
 
     constructor () {
         super();
     }
 
     public initialize (info: Readonly<DescriptorSetLayoutInfo>): void {
-        Array.prototype.push.apply(this._bindings, info.bindings);
+        Array.prototype.push.apply(this._bindings$, info.bindings);
 
         let descriptorCount = 0; let maxBinding = -1;
         const flattenedIndices: number[] = [];
-        for (let i = 0; i < this._bindings.length; i++) {
-            const binding = this._bindings[i];
+        for (let i = 0; i < this._bindings$.length; i++) {
+            const binding = this._bindings$[i];
             flattenedIndices.push(descriptorCount);
             descriptorCount += binding.count;
             if (binding.binding > maxBinding) maxBinding = binding.binding;
         }
 
-        this._bindingIndices = Array(maxBinding + 1).fill(-1);
-        const descriptorIndices = this._descriptorIndices = Array(maxBinding + 1).fill(-1);
-        for (let i = 0; i < this._bindings.length; i++) {
-            const binding = this._bindings[i];
-            this._bindingIndices[binding.binding] = i;
+        this._bindingIndices$ = Array(maxBinding + 1).fill(-1);
+        const descriptorIndices = this._descriptorIndices$ = Array(maxBinding + 1).fill(-1);
+        for (let i = 0; i < this._bindings$.length; i++) {
+            const binding = this._bindings$[i];
+            this._bindingIndices$[binding.binding] = i;
             descriptorIndices[binding.binding] = flattenedIndices[i];
         }
 
         const dynamicBindings: number[] = [];
-        for (let i = 0; i < this._bindings.length; i++) {
-            const binding = this._bindings[i];
+        for (let i = 0; i < this._bindings$.length; i++) {
+            const binding = this._bindings$[i];
             if (binding.descriptorType & DESCRIPTOR_DYNAMIC_TYPE) {
                 for (let j = 0; j < binding.count; j++) {
                     dynamicBindings.push(binding.binding);
@@ -65,15 +65,15 @@ export class WebGLDescriptorSetLayout extends DescriptorSetLayout {
             }
         }
 
-        this._gpuDescriptorSetLayout = {
-            bindings: this._bindings,
-            dynamicBindings,
-            descriptorIndices,
-            descriptorCount,
+        this._gpuDescriptorSetLayout$ = {
+            bindings$: this._bindings$,
+            dynamicBindings$: dynamicBindings,
+            descriptorIndices$: descriptorIndices,
+            descriptorCount$: descriptorCount,
         };
     }
 
     public destroy (): void {
-        this._bindings.length = 0;
+        this._bindings$.length = 0;
     }
 }
diff --git a/cocos/gfx/webgl/webgl-descriptor-set.ts b/cocos/gfx/webgl/webgl-descriptor-set.ts
index 4acfab1749e..7e43b1c0ddf 100644
--- a/cocos/gfx/webgl/webgl-descriptor-set.ts
+++ b/cocos/gfx/webgl/webgl-descriptor-set.ts
@@ -32,63 +32,63 @@ import { DescriptorSetInfo, DESCRIPTOR_SAMPLER_TYPE, DESCRIPTOR_BUFFER_TYPE } fr
 
 export class WebGLDescriptorSet extends DescriptorSet {
     get gpuDescriptorSet (): IWebGLGPUDescriptorSet {
-        return this._gpuDescriptorSet as IWebGLGPUDescriptorSet;
+        return this._gpuDescriptorSet$ as IWebGLGPUDescriptorSet;
     }
 
-    private _gpuDescriptorSet: IWebGLGPUDescriptorSet | null = null;
+    private _gpuDescriptorSet$: IWebGLGPUDescriptorSet | null = null;
 
     constructor () {
         super();
     }
 
     public initialize (info: Readonly<DescriptorSetInfo>): void {
-        this._layout = info.layout;
-        const { bindings, descriptorIndices, descriptorCount } = (info.layout as WebGLDescriptorSetLayout).gpuDescriptorSetLayout;
+        this._layout$ = info.layout;
+        const { bindings$: bindings, descriptorIndices$: descriptorIndices, descriptorCount$: descriptorCount } = (info.layout as WebGLDescriptorSetLayout).gpuDescriptorSetLayout;
 
-        this._buffers = Array(descriptorCount).fill(null);
-        this._textures = Array(descriptorCount).fill(null);
-        this._samplers = Array(descriptorCount).fill(null);
+        this._buffers$ = Array(descriptorCount).fill(null);
+        this._textures$ = Array(descriptorCount).fill(null);
+        this._samplers$ = Array(descriptorCount).fill(null);
 
         const gpuDescriptors: IWebGLGPUDescriptor[] = [];
-        this._gpuDescriptorSet = { gpuDescriptors, descriptorIndices };
+        this._gpuDescriptorSet$ = { gpuDescriptors$: gpuDescriptors, descriptorIndices$: descriptorIndices };
 
         for (let i = 0; i < bindings.length; ++i) {
             const binding = bindings[i];
             for (let j = 0; j < binding.count; j++) {
                 gpuDescriptors.push({
-                    type: binding.descriptorType,
-                    gpuBuffer: null,
-                    gpuTexture: null,
-                    gpuSampler: null,
+                    type$: binding.descriptorType,
+                    gpuBuffer$: null,
+                    gpuTexture$: null,
+                    gpuSampler$: null,
                 });
             }
         }
     }
 
     public destroy (): void {
-        this._layout = null;
-        this._gpuDescriptorSet = null;
+        this._layout$ = null;
+        this._gpuDescriptorSet$ = null;
     }
 
     public update (): void {
-        if (this._isDirty && this._gpuDescriptorSet) {
-            const descriptors = this._gpuDescriptorSet.gpuDescriptors;
+        if (this._isDirty$ && this._gpuDescriptorSet$) {
+            const descriptors = this._gpuDescriptorSet$.gpuDescriptors$;
             for (let i = 0; i < descriptors.length; ++i) {
-                if (descriptors[i].type & DESCRIPTOR_BUFFER_TYPE) {
-                    const buffer = this._buffers[i] as WebGLBuffer | null;
+                if (descriptors[i].type$ & DESCRIPTOR_BUFFER_TYPE) {
+                    const buffer = this._buffers$[i] as WebGLBuffer | null;
                     if (buffer) {
-                        descriptors[i].gpuBuffer = buffer.gpuBuffer || buffer.gpuBufferView;
+                        descriptors[i].gpuBuffer$ = buffer.gpuBuffer || buffer.gpuBufferView;
                     }
-                } else if (descriptors[i].type & DESCRIPTOR_SAMPLER_TYPE) {
-                    if (this._textures[i]) {
-                        descriptors[i].gpuTexture = (this._textures[i] as WebGLTexture).gpuTexture;
+                } else if (descriptors[i].type$ & DESCRIPTOR_SAMPLER_TYPE) {
+                    if (this._textures$[i]) {
+                        descriptors[i].gpuTexture$ = (this._textures$[i] as WebGLTexture).gpuTexture;
                     }
-                    if (this._samplers[i]) {
-                        descriptors[i].gpuSampler = (this._samplers[i] as WebGLSampler).gpuSampler;
+                    if (this._samplers$[i]) {
+                        descriptors[i].gpuSampler$ = (this._samplers$[i] as WebGLSampler).gpuSampler;
                     }
                 }
             }
-            this._isDirty = false;
+            this._isDirty$ = false;
         }
     }
 }
diff --git a/cocos/gfx/webgl/webgl-device.ts b/cocos/gfx/webgl/webgl-device.ts
index a0f009e13cf..49dd25a9077 100644
--- a/cocos/gfx/webgl/webgl-device.ts
+++ b/cocos/gfx/webgl/webgl-device.ts
@@ -61,11 +61,12 @@ import { WebGLCmdFuncCopyBuffersToTexture, WebGLCmdFuncCopyTextureToBuffers, Web
 import { GeneralBarrier } from '../base/states/general-barrier';
 import { TextureBarrier } from '../base/states/texture-barrier';
 import { BufferBarrier } from '../base/states/buffer-barrier';
-import { debug, errorID } from '../../core';
 import { Swapchain } from '../base/swapchain';
 import { IWebGLExtensions, WebGLDeviceManager } from './webgl-define';
 import { IWebGLBindingMapping, IWebGLBlitManager } from './webgl-gpu-objects';
 import type { WebGLStateCache } from './webgl-state-cache';
+import { WebGLConstants } from '../gl-constants';
+import { debug, errorID } from '../../core/platform/debug';
 
 export class WebGLDevice extends Device {
     constructor () {
@@ -73,48 +74,48 @@ export class WebGLDevice extends Device {
     }
 
     get gl (): WebGLRenderingContext {
-        return this._context!;
+        return this._context$!;
     }
 
     get extensions (): IWebGLExtensions {
-        return this._swapchain!.extensions;
+        return this._swapchain$!.extensions;
     }
 
     get stateCache (): WebGLStateCache {
-        return this._swapchain!.stateCache;
+        return this._swapchain$!.stateCache$;
     }
 
     get nullTex2D (): WebGLTexture {
-        return this._swapchain!.nullTex2D;
+        return this._swapchain$!.nullTex2D$;
     }
 
     get nullTexCube (): WebGLTexture {
-        return this._swapchain!.nullTexCube;
+        return this._swapchain$!.nullTexCube$;
     }
 
     get textureExclusive (): boolean[] {
-        return this._textureExclusive;
+        return this._textureExclusive$;
     }
 
     get bindingMappings (): IWebGLBindingMapping {
-        return this._bindingMappings!;
+        return this._bindingMappings$!;
     }
 
     get blitManager (): IWebGLBlitManager {
-        return this._swapchain!.blitManager;
+        return this._swapchain$!.blitManager;
     }
 
-    private _swapchain: WebGLSwapchain | null = null;
-    private _context: WebGLRenderingContext | null = null;
-    private _bindingMappings: IWebGLBindingMapping | null = null;
+    private _swapchain$: WebGLSwapchain | null = null;
+    private _context$: WebGLRenderingContext | null = null;
+    private _bindingMappings$: IWebGLBindingMapping | null = null;
 
-    protected _textureExclusive = new Array<boolean>(Format.COUNT);
+    protected _textureExclusive$ = new Array<boolean>(Format.COUNT);
 
     public initialize (info: Readonly<DeviceInfo>): boolean {
-        WebGLDeviceManager.setInstance(this);
-        this._gfxAPI = API.WEBGL;
+        WebGLDeviceManager.setInstance$(this);
+        this._gfxAPI$ = API.WEBGL;
 
-        const mapping = this._bindingMappingInfo = info.bindingMappingInfo;
+        const mapping = this._bindingMappingInfo$ = info.bindingMappingInfo;
         const blockOffsets: number[] = [];
         const samplerTextureOffsets: number[] = [];
         const firstSet = mapping.setIndices[0];
@@ -132,13 +133,13 @@ export class WebGLDevice extends Device {
             // textures always come after UBOs
             samplerTextureOffsets[curSet] -= mapping.maxBlockCounts[curSet];
         }
-        this._bindingMappings = {
-            blockOffsets,
-            samplerTextureOffsets,
-            flexibleSet: mapping.setIndices[mapping.setIndices.length - 1],
+        this._bindingMappings$ = {
+            blockOffsets$: blockOffsets,
+            samplerTextureOffsets$: samplerTextureOffsets,
+            flexibleSet$: mapping.setIndices[mapping.setIndices.length - 1],
         };
 
-        const gl = this._context = getContext(Device.canvas);
+        const gl = this._context$ = getContext(Device.canvas);
 
         if (!gl) {
             errorID(16333);
@@ -146,21 +147,21 @@ export class WebGLDevice extends Device {
         }
 
         // create queue
-        this._queue = this.createQueue(new QueueInfo(QueueType.GRAPHICS));
-        this._cmdBuff = this.createCommandBuffer(new CommandBufferInfo(this._queue));
-
-        this._caps.maxVertexAttributes = gl.getParameter(gl.MAX_VERTEX_ATTRIBS);
-        this._caps.maxVertexUniformVectors = gl.getParameter(gl.MAX_VERTEX_UNIFORM_VECTORS);
-        this._caps.maxFragmentUniformVectors = gl.getParameter(gl.MAX_FRAGMENT_UNIFORM_VECTORS);
-        this._caps.maxTextureUnits = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS);
-        this._caps.maxVertexTextureUnits = gl.getParameter(gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS);
-        this._caps.maxTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE);
-        this._caps.maxCubeMapTextureSize = gl.getParameter(gl.MAX_CUBE_MAP_TEXTURE_SIZE);
-        this._caps.maxArrayTextureLayers = 0;
-        this._caps.max3DTextureSize = 0;
+        this._queue$ = this.createQueue(new QueueInfo(QueueType.GRAPHICS));
+        this._cmdBuff$ = this.createCommandBuffer(new CommandBufferInfo(this._queue$));
+
+        this._caps$.maxVertexAttributes = gl.getParameter(WebGLConstants.MAX_VERTEX_ATTRIBS);
+        this._caps$.maxVertexUniformVectors = gl.getParameter(WebGLConstants.MAX_VERTEX_UNIFORM_VECTORS);
+        this._caps$.maxFragmentUniformVectors = gl.getParameter(WebGLConstants.MAX_FRAGMENT_UNIFORM_VECTORS);
+        this._caps$.maxTextureUnits = gl.getParameter(WebGLConstants.MAX_TEXTURE_IMAGE_UNITS);
+        this._caps$.maxVertexTextureUnits = gl.getParameter(WebGLConstants.MAX_VERTEX_TEXTURE_IMAGE_UNITS);
+        this._caps$.maxTextureSize = gl.getParameter(WebGLConstants.MAX_TEXTURE_SIZE);
+        this._caps$.maxCubeMapTextureSize = gl.getParameter(WebGLConstants.MAX_CUBE_MAP_TEXTURE_SIZE);
+        this._caps$.maxArrayTextureLayers = 0;
+        this._caps$.max3DTextureSize = 0;
         // WebGL doesn't support UBOs at all, so here we return
         // the guaranteed minimum number of available bindings in WebGL2
-        this._caps.maxUniformBufferBindings = 16;
+        this._caps$.maxUniformBufferBindings = 16;
 
         const extensions = gl.getSupportedExtensions();
         let extStr = '';
@@ -172,34 +173,34 @@ export class WebGLDevice extends Device {
 
         const exts = getExtensions(gl);
 
-        if (exts.WEBGL_debug_renderer_info) {
-            this._renderer = gl.getParameter(exts.WEBGL_debug_renderer_info.UNMASKED_RENDERER_WEBGL);
-            this._vendor = gl.getParameter(exts.WEBGL_debug_renderer_info.UNMASKED_VENDOR_WEBGL);
+        if (exts.WEBGL_debug_renderer_info$) {
+            this._renderer$ = gl.getParameter(exts.WEBGL_debug_renderer_info$.UNMASKED_RENDERER_WEBGL);
+            this._vendor$ = gl.getParameter(exts.WEBGL_debug_renderer_info$.UNMASKED_VENDOR_WEBGL);
         } else {
-            this._renderer = gl.getParameter(gl.RENDERER);
-            this._vendor = gl.getParameter(gl.VENDOR);
+            this._renderer$ = gl.getParameter(WebGLConstants.RENDERER);
+            this._vendor$ = gl.getParameter(WebGLConstants.VENDOR);
         }
 
-        const version: string = gl.getParameter(gl.VERSION);
+        const version: string = gl.getParameter(WebGLConstants.VERSION);
 
-        this._features.fill(false);
+        this._features$.fill(false);
 
         this.initFormatFeatures(exts);
 
-        if (exts.EXT_blend_minmax) {
-            this._features[Feature.BLEND_MINMAX] = true;
+        if (exts.EXT_blend_minmax$) {
+            this._features$[Feature.BLEND_MINMAX] = true;
         }
 
-        if (exts.OES_element_index_uint) {
-            this._features[Feature.ELEMENT_INDEX_UINT] = true;
+        if (exts.OES_element_index_uint$) {
+            this._features$[Feature.ELEMENT_INDEX_UINT] = true;
         }
 
-        if (exts.ANGLE_instanced_arrays) {
-            this._features[Feature.INSTANCED_ARRAYS] = true;
+        if (exts.ANGLE_instanced_arrays$) {
+            this._features$[Feature.INSTANCED_ARRAYS] = true;
         }
 
-        if (exts.WEBGL_draw_buffers) {
-            this._features[Feature.MULTIPLE_RENDER_TARGETS] = true;
+        if (exts.WEBGL_draw_buffers$) {
+            this._features$[Feature.MULTIPLE_RENDER_TARGETS] = true;
         }
 
         let compressedFormat = '';
@@ -225,8 +226,8 @@ export class WebGLDevice extends Device {
         }
 
         debug('WebGL device initialized.');
-        debug(`RENDERER: ${this._renderer}`);
-        debug(`VENDOR: ${this._vendor}`);
+        debug(`RENDERER: ${this._renderer$}`);
+        debug(`VENDOR: ${this._vendor$}`);
         debug(`VERSION: ${version}`);
         debug(`COMPRESSED_FORMAT: ${compressedFormat}`);
         debug(`EXTENSIONS: ${extStr}`);
@@ -235,17 +236,17 @@ export class WebGLDevice extends Device {
     }
 
     public destroy (): void {
-        if (this._queue) {
-            this._queue.destroy();
-            this._queue = null;
+        if (this._queue$) {
+            this._queue$.destroy();
+            this._queue$ = null;
         }
 
-        if (this._cmdBuff) {
-            this._cmdBuff.destroy();
-            this._cmdBuff = null;
+        if (this._cmdBuff$) {
+            this._cmdBuff$.destroy();
+            this._cmdBuff$ = null;
         }
 
-        this._swapchain = null;
+        this._swapchain$ = null;
     }
 
     public flushCommands (cmdBuffs: CommandBuffer[]): void {
@@ -257,171 +258,171 @@ export class WebGLDevice extends Device {
     }
 
     public present (): void {
-        const queue = (this._queue as WebGLQueue);
-        this._numDrawCalls = queue.numDrawCalls;
-        this._numInstances = queue.numInstances;
-        this._numTris = queue.numTris;
+        const queue = (this._queue$ as WebGLQueue);
+        this._numDrawCalls$ = queue.numDrawCalls$;
+        this._numInstances$ = queue.numInstances$;
+        this._numTris$ = queue.numTris$;
         queue.clear();
     }
 
     protected initFormatFeatures (exts: IWebGLExtensions): void {
-        this._formatFeatures.fill(FormatFeatureBit.NONE);
+        this._formatFeatures$.fill(FormatFeatureBit.NONE);
 
-        this._textureExclusive.fill(true);
+        this._textureExclusive$.fill(true);
 
         const tempFeature: FormatFeature = FormatFeatureBit.RENDER_TARGET | FormatFeatureBit.SAMPLED_TEXTURE
             | FormatFeatureBit.LINEAR_FILTER;
 
-        this._formatFeatures[Format.RGB8] = tempFeature;
-        this._formatFeatures[Format.R5G6B5] = tempFeature;
-        this._textureExclusive[Format.R5G6B5] = false;
+        this._formatFeatures$[Format.RGB8] = tempFeature;
+        this._formatFeatures$[Format.R5G6B5] = tempFeature;
+        this._textureExclusive$[Format.R5G6B5] = false;
 
-        this._formatFeatures[Format.RGBA8] = tempFeature;
-        this._formatFeatures[Format.RGBA4] = tempFeature;
-        this._textureExclusive[Format.RGBA4] = false;
+        this._formatFeatures$[Format.RGBA8] = tempFeature;
+        this._formatFeatures$[Format.RGBA4] = tempFeature;
+        this._textureExclusive$[Format.RGBA4] = false;
 
-        this._formatFeatures[Format.RGB5A1] = tempFeature;
-        this._textureExclusive[Format.RGB5A1] = false;
+        this._formatFeatures$[Format.RGB5A1] = tempFeature;
+        this._textureExclusive$[Format.RGB5A1] = false;
 
-        this._formatFeatures[Format.DEPTH] = FormatFeatureBit.RENDER_TARGET;
-        this._textureExclusive[Format.DEPTH] = false;
-        this._formatFeatures[Format.DEPTH_STENCIL] = FormatFeatureBit.RENDER_TARGET;
-        this._textureExclusive[Format.DEPTH_STENCIL] = false;
+        this._formatFeatures$[Format.DEPTH] = FormatFeatureBit.RENDER_TARGET;
+        this._textureExclusive$[Format.DEPTH] = false;
+        this._formatFeatures$[Format.DEPTH_STENCIL] = FormatFeatureBit.RENDER_TARGET;
+        this._textureExclusive$[Format.DEPTH_STENCIL] = false;
 
-        this._formatFeatures[Format.R8I] |= FormatFeatureBit.VERTEX_ATTRIBUTE;
-        this._formatFeatures[Format.RG8I] |= FormatFeatureBit.VERTEX_ATTRIBUTE;
-        this._formatFeatures[Format.RGB8I] |= FormatFeatureBit.VERTEX_ATTRIBUTE;
-        this._formatFeatures[Format.RGBA8I] |= FormatFeatureBit.VERTEX_ATTRIBUTE;
+        this._formatFeatures$[Format.R8I] |= FormatFeatureBit.VERTEX_ATTRIBUTE;
+        this._formatFeatures$[Format.RG8I] |= FormatFeatureBit.VERTEX_ATTRIBUTE;
+        this._formatFeatures$[Format.RGB8I] |= FormatFeatureBit.VERTEX_ATTRIBUTE;
+        this._formatFeatures$[Format.RGBA8I] |= FormatFeatureBit.VERTEX_ATTRIBUTE;
 
-        this._formatFeatures[Format.R8UI] |= FormatFeatureBit.VERTEX_ATTRIBUTE;
-        this._formatFeatures[Format.RG8UI] |= FormatFeatureBit.VERTEX_ATTRIBUTE;
-        this._formatFeatures[Format.RGB8UI] |= FormatFeatureBit.VERTEX_ATTRIBUTE;
-        this._formatFeatures[Format.RGBA8UI] |= FormatFeatureBit.VERTEX_ATTRIBUTE;
+        this._formatFeatures$[Format.R8UI] |= FormatFeatureBit.VERTEX_ATTRIBUTE;
+        this._formatFeatures$[Format.RG8UI] |= FormatFeatureBit.VERTEX_ATTRIBUTE;
+        this._formatFeatures$[Format.RGB8UI] |= FormatFeatureBit.VERTEX_ATTRIBUTE;
+        this._formatFeatures$[Format.RGBA8UI] |= FormatFeatureBit.VERTEX_ATTRIBUTE;
 
-        this._formatFeatures[Format.R8I] |= FormatFeatureBit.VERTEX_ATTRIBUTE;
-        this._formatFeatures[Format.RG8I] |= FormatFeatureBit.VERTEX_ATTRIBUTE;
-        this._formatFeatures[Format.RGB8I] |= FormatFeatureBit.VERTEX_ATTRIBUTE;
-        this._formatFeatures[Format.RGBA8I] |= FormatFeatureBit.VERTEX_ATTRIBUTE;
+        this._formatFeatures$[Format.R8I] |= FormatFeatureBit.VERTEX_ATTRIBUTE;
+        this._formatFeatures$[Format.RG8I] |= FormatFeatureBit.VERTEX_ATTRIBUTE;
+        this._formatFeatures$[Format.RGB8I] |= FormatFeatureBit.VERTEX_ATTRIBUTE;
+        this._formatFeatures$[Format.RGBA8I] |= FormatFeatureBit.VERTEX_ATTRIBUTE;
 
-        this._formatFeatures[Format.R8UI] |= FormatFeatureBit.VERTEX_ATTRIBUTE;
-        this._formatFeatures[Format.RG8UI] |= FormatFeatureBit.VERTEX_ATTRIBUTE;
-        this._formatFeatures[Format.RGB8UI] |= FormatFeatureBit.VERTEX_ATTRIBUTE;
-        this._formatFeatures[Format.RGBA8UI] |= FormatFeatureBit.VERTEX_ATTRIBUTE;
+        this._formatFeatures$[Format.R8UI] |= FormatFeatureBit.VERTEX_ATTRIBUTE;
+        this._formatFeatures$[Format.RG8UI] |= FormatFeatureBit.VERTEX_ATTRIBUTE;
+        this._formatFeatures$[Format.RGB8UI] |= FormatFeatureBit.VERTEX_ATTRIBUTE;
+        this._formatFeatures$[Format.RGBA8UI] |= FormatFeatureBit.VERTEX_ATTRIBUTE;
 
-        this._formatFeatures[Format.R32F] |= FormatFeatureBit.VERTEX_ATTRIBUTE;
-        this._formatFeatures[Format.RG32F] |= FormatFeatureBit.VERTEX_ATTRIBUTE;
-        this._formatFeatures[Format.RGB32F] |= FormatFeatureBit.VERTEX_ATTRIBUTE;
-        this._formatFeatures[Format.RGBA32F] |= FormatFeatureBit.VERTEX_ATTRIBUTE;
+        this._formatFeatures$[Format.R32F] |= FormatFeatureBit.VERTEX_ATTRIBUTE;
+        this._formatFeatures$[Format.RG32F] |= FormatFeatureBit.VERTEX_ATTRIBUTE;
+        this._formatFeatures$[Format.RGB32F] |= FormatFeatureBit.VERTEX_ATTRIBUTE;
+        this._formatFeatures$[Format.RGBA32F] |= FormatFeatureBit.VERTEX_ATTRIBUTE;
 
-        if (exts.EXT_sRGB) {
-            this._formatFeatures[Format.SRGB8] = tempFeature;
-            this._formatFeatures[Format.SRGB8_A8] = tempFeature;
+        if (exts.EXT_sRGB$) {
+            this._formatFeatures$[Format.SRGB8] = tempFeature;
+            this._formatFeatures$[Format.SRGB8_A8] = tempFeature;
 
-            this._textureExclusive[Format.SRGB8_A8] = false;
+            this._textureExclusive$[Format.SRGB8_A8] = false;
         }
 
-        if (exts.WEBGL_depth_texture) {
-            this._formatFeatures[Format.DEPTH] |= tempFeature;
-            this._formatFeatures[Format.DEPTH_STENCIL] |= tempFeature;
+        if (exts.WEBGL_depth_texture$) {
+            this._formatFeatures$[Format.DEPTH] |= tempFeature;
+            this._formatFeatures$[Format.DEPTH_STENCIL] |= tempFeature;
         }
 
-        if (exts.WEBGL_color_buffer_float) {
-            this._formatFeatures[Format.RGB32F] |= FormatFeatureBit.RENDER_TARGET;
-            this._formatFeatures[Format.RGBA32F] |= FormatFeatureBit.RENDER_TARGET;
-            this._textureExclusive[Format.RGB32F] = false;
-            this._textureExclusive[Format.RGBA32F] = false;
+        if (exts.WEBGL_color_buffer_float$) {
+            this._formatFeatures$[Format.RGB32F] |= FormatFeatureBit.RENDER_TARGET;
+            this._formatFeatures$[Format.RGBA32F] |= FormatFeatureBit.RENDER_TARGET;
+            this._textureExclusive$[Format.RGB32F] = false;
+            this._textureExclusive$[Format.RGBA32F] = false;
         }
 
-        if (exts.EXT_color_buffer_half_float) {
-            this._formatFeatures[Format.RGB16F] |= FormatFeatureBit.RENDER_TARGET;
-            this._formatFeatures[Format.RGBA16F] |= FormatFeatureBit.RENDER_TARGET;
-            this._textureExclusive[Format.RGB16F] = false;
-            this._textureExclusive[Format.RGBA16F] = false;
+        if (exts.EXT_color_buffer_half_float$) {
+            this._formatFeatures$[Format.RGB16F] |= FormatFeatureBit.RENDER_TARGET;
+            this._formatFeatures$[Format.RGBA16F] |= FormatFeatureBit.RENDER_TARGET;
+            this._textureExclusive$[Format.RGB16F] = false;
+            this._textureExclusive$[Format.RGBA16F] = false;
         }
 
-        if (exts.OES_texture_float) {
-            this._formatFeatures[Format.RGB32F] |= FormatFeatureBit.RENDER_TARGET | FormatFeatureBit.SAMPLED_TEXTURE;
-            this._formatFeatures[Format.RGBA32F] |= FormatFeatureBit.RENDER_TARGET | FormatFeatureBit.SAMPLED_TEXTURE;
+        if (exts.OES_texture_float$) {
+            this._formatFeatures$[Format.RGB32F] |= FormatFeatureBit.RENDER_TARGET | FormatFeatureBit.SAMPLED_TEXTURE;
+            this._formatFeatures$[Format.RGBA32F] |= FormatFeatureBit.RENDER_TARGET | FormatFeatureBit.SAMPLED_TEXTURE;
         }
 
-        if (exts.OES_texture_half_float) {
-            this._formatFeatures[Format.RGB16F] |= FormatFeatureBit.RENDER_TARGET | FormatFeatureBit.SAMPLED_TEXTURE;
-            this._formatFeatures[Format.RGBA16F] |= FormatFeatureBit.RENDER_TARGET | FormatFeatureBit.SAMPLED_TEXTURE;
+        if (exts.OES_texture_half_float$) {
+            this._formatFeatures$[Format.RGB16F] |= FormatFeatureBit.RENDER_TARGET | FormatFeatureBit.SAMPLED_TEXTURE;
+            this._formatFeatures$[Format.RGBA16F] |= FormatFeatureBit.RENDER_TARGET | FormatFeatureBit.SAMPLED_TEXTURE;
         }
 
-        if (exts.OES_texture_float_linear) {
-            this._formatFeatures[Format.RGB32F] |= FormatFeatureBit.LINEAR_FILTER;
-            this._formatFeatures[Format.RGBA32F] |= FormatFeatureBit.LINEAR_FILTER;
+        if (exts.OES_texture_float_linear$) {
+            this._formatFeatures$[Format.RGB32F] |= FormatFeatureBit.LINEAR_FILTER;
+            this._formatFeatures$[Format.RGBA32F] |= FormatFeatureBit.LINEAR_FILTER;
         }
 
-        if (exts.OES_texture_half_float_linear) {
-            this._formatFeatures[Format.RGB16F] |= FormatFeatureBit.LINEAR_FILTER;
-            this._formatFeatures[Format.RGBA16F] |= FormatFeatureBit.LINEAR_FILTER;
+        if (exts.OES_texture_half_float_linear$) {
+            this._formatFeatures$[Format.RGB16F] |= FormatFeatureBit.LINEAR_FILTER;
+            this._formatFeatures$[Format.RGBA16F] |= FormatFeatureBit.LINEAR_FILTER;
         }
 
         const compressedFeature: FormatFeature = FormatFeatureBit.SAMPLED_TEXTURE | FormatFeatureBit.LINEAR_FILTER;
 
-        if (exts.WEBGL_compressed_texture_etc1) {
-            this._formatFeatures[Format.ETC_RGB8] = compressedFeature;
-        }
-
-        if (exts.WEBGL_compressed_texture_etc) {
-            this._formatFeatures[Format.ETC2_RGB8] = compressedFeature;
-            this._formatFeatures[Format.ETC2_RGBA8] = compressedFeature;
-            this._formatFeatures[Format.ETC2_SRGB8] = compressedFeature;
-            this._formatFeatures[Format.ETC2_SRGB8_A8] = compressedFeature;
-            this._formatFeatures[Format.ETC2_RGB8_A1] = compressedFeature;
-            this._formatFeatures[Format.ETC2_SRGB8_A1] = compressedFeature;
-        }
-
-        if (exts.WEBGL_compressed_texture_s3tc) {
-            this._formatFeatures[Format.BC1] = compressedFeature;
-            this._formatFeatures[Format.BC1_ALPHA] = compressedFeature;
-            this._formatFeatures[Format.BC1_SRGB] = compressedFeature;
-            this._formatFeatures[Format.BC1_SRGB_ALPHA] = compressedFeature;
-            this._formatFeatures[Format.BC2] = compressedFeature;
-            this._formatFeatures[Format.BC2_SRGB] = compressedFeature;
-            this._formatFeatures[Format.BC3] = compressedFeature;
-            this._formatFeatures[Format.BC3_SRGB] = compressedFeature;
-        }
-
-        if (exts.WEBGL_compressed_texture_pvrtc) {
-            this._formatFeatures[Format.PVRTC_RGB2] |= compressedFeature;
-            this._formatFeatures[Format.PVRTC_RGBA2] |= compressedFeature;
-            this._formatFeatures[Format.PVRTC_RGB4] |= compressedFeature;
-            this._formatFeatures[Format.PVRTC_RGBA4] |= compressedFeature;
-        }
-
-        if (exts.WEBGL_compressed_texture_astc) {
-            this._formatFeatures[Format.ASTC_RGBA_4X4] |= compressedFeature;
-            this._formatFeatures[Format.ASTC_RGBA_5X4] |= compressedFeature;
-            this._formatFeatures[Format.ASTC_RGBA_5X5] |= compressedFeature;
-            this._formatFeatures[Format.ASTC_RGBA_6X5] |= compressedFeature;
-            this._formatFeatures[Format.ASTC_RGBA_6X6] |= compressedFeature;
-            this._formatFeatures[Format.ASTC_RGBA_8X5] |= compressedFeature;
-            this._formatFeatures[Format.ASTC_RGBA_8X6] |= compressedFeature;
-            this._formatFeatures[Format.ASTC_RGBA_8X8] |= compressedFeature;
-            this._formatFeatures[Format.ASTC_RGBA_10X5] |= compressedFeature;
-            this._formatFeatures[Format.ASTC_RGBA_10X6] |= compressedFeature;
-            this._formatFeatures[Format.ASTC_RGBA_10X8] |= compressedFeature;
-            this._formatFeatures[Format.ASTC_RGBA_10X10] |= compressedFeature;
-            this._formatFeatures[Format.ASTC_RGBA_12X10] |= compressedFeature;
-            this._formatFeatures[Format.ASTC_RGBA_12X12] |= compressedFeature;
-
-            this._formatFeatures[Format.ASTC_SRGBA_4X4] |= compressedFeature;
-            this._formatFeatures[Format.ASTC_SRGBA_5X4] |= compressedFeature;
-            this._formatFeatures[Format.ASTC_SRGBA_5X5] |= compressedFeature;
-            this._formatFeatures[Format.ASTC_SRGBA_6X5] |= compressedFeature;
-            this._formatFeatures[Format.ASTC_SRGBA_6X6] |= compressedFeature;
-            this._formatFeatures[Format.ASTC_SRGBA_8X5] |= compressedFeature;
-            this._formatFeatures[Format.ASTC_SRGBA_8X6] |= compressedFeature;
-            this._formatFeatures[Format.ASTC_SRGBA_8X8] |= compressedFeature;
-            this._formatFeatures[Format.ASTC_SRGBA_10X5] |= compressedFeature;
-            this._formatFeatures[Format.ASTC_SRGBA_10X6] |= compressedFeature;
-            this._formatFeatures[Format.ASTC_SRGBA_10X8] |= compressedFeature;
-            this._formatFeatures[Format.ASTC_SRGBA_10X10] |= compressedFeature;
-            this._formatFeatures[Format.ASTC_SRGBA_12X10] |= compressedFeature;
-            this._formatFeatures[Format.ASTC_SRGBA_12X12] |= compressedFeature;
+        if (exts.WEBGL_compressed_texture_etc1$) {
+            this._formatFeatures$[Format.ETC_RGB8] = compressedFeature;
+        }
+
+        if (exts.WEBGL_compressed_texture_etc$) {
+            this._formatFeatures$[Format.ETC2_RGB8] = compressedFeature;
+            this._formatFeatures$[Format.ETC2_RGBA8] = compressedFeature;
+            this._formatFeatures$[Format.ETC2_SRGB8] = compressedFeature;
+            this._formatFeatures$[Format.ETC2_SRGB8_A8] = compressedFeature;
+            this._formatFeatures$[Format.ETC2_RGB8_A1] = compressedFeature;
+            this._formatFeatures$[Format.ETC2_SRGB8_A1] = compressedFeature;
+        }
+
+        if (exts.WEBGL_compressed_texture_s3tc$) {
+            this._formatFeatures$[Format.BC1] = compressedFeature;
+            this._formatFeatures$[Format.BC1_ALPHA] = compressedFeature;
+            this._formatFeatures$[Format.BC1_SRGB] = compressedFeature;
+            this._formatFeatures$[Format.BC1_SRGB_ALPHA] = compressedFeature;
+            this._formatFeatures$[Format.BC2] = compressedFeature;
+            this._formatFeatures$[Format.BC2_SRGB] = compressedFeature;
+            this._formatFeatures$[Format.BC3] = compressedFeature;
+            this._formatFeatures$[Format.BC3_SRGB] = compressedFeature;
+        }
+
+        if (exts.WEBGL_compressed_texture_pvrtc$) {
+            this._formatFeatures$[Format.PVRTC_RGB2] |= compressedFeature;
+            this._formatFeatures$[Format.PVRTC_RGBA2] |= compressedFeature;
+            this._formatFeatures$[Format.PVRTC_RGB4] |= compressedFeature;
+            this._formatFeatures$[Format.PVRTC_RGBA4] |= compressedFeature;
+        }
+
+        if (exts.WEBGL_compressed_texture_astc$) {
+            this._formatFeatures$[Format.ASTC_RGBA_4X4] |= compressedFeature;
+            this._formatFeatures$[Format.ASTC_RGBA_5X4] |= compressedFeature;
+            this._formatFeatures$[Format.ASTC_RGBA_5X5] |= compressedFeature;
+            this._formatFeatures$[Format.ASTC_RGBA_6X5] |= compressedFeature;
+            this._formatFeatures$[Format.ASTC_RGBA_6X6] |= compressedFeature;
+            this._formatFeatures$[Format.ASTC_RGBA_8X5] |= compressedFeature;
+            this._formatFeatures$[Format.ASTC_RGBA_8X6] |= compressedFeature;
+            this._formatFeatures$[Format.ASTC_RGBA_8X8] |= compressedFeature;
+            this._formatFeatures$[Format.ASTC_RGBA_10X5] |= compressedFeature;
+            this._formatFeatures$[Format.ASTC_RGBA_10X6] |= compressedFeature;
+            this._formatFeatures$[Format.ASTC_RGBA_10X8] |= compressedFeature;
+            this._formatFeatures$[Format.ASTC_RGBA_10X10] |= compressedFeature;
+            this._formatFeatures$[Format.ASTC_RGBA_12X10] |= compressedFeature;
+            this._formatFeatures$[Format.ASTC_RGBA_12X12] |= compressedFeature;
+
+            this._formatFeatures$[Format.ASTC_SRGBA_4X4] |= compressedFeature;
+            this._formatFeatures$[Format.ASTC_SRGBA_5X4] |= compressedFeature;
+            this._formatFeatures$[Format.ASTC_SRGBA_5X5] |= compressedFeature;
+            this._formatFeatures$[Format.ASTC_SRGBA_6X5] |= compressedFeature;
+            this._formatFeatures$[Format.ASTC_SRGBA_6X6] |= compressedFeature;
+            this._formatFeatures$[Format.ASTC_SRGBA_8X5] |= compressedFeature;
+            this._formatFeatures$[Format.ASTC_SRGBA_8X6] |= compressedFeature;
+            this._formatFeatures$[Format.ASTC_SRGBA_8X8] |= compressedFeature;
+            this._formatFeatures$[Format.ASTC_SRGBA_10X5] |= compressedFeature;
+            this._formatFeatures$[Format.ASTC_SRGBA_10X6] |= compressedFeature;
+            this._formatFeatures$[Format.ASTC_SRGBA_10X8] |= compressedFeature;
+            this._formatFeatures$[Format.ASTC_SRGBA_10X10] |= compressedFeature;
+            this._formatFeatures$[Format.ASTC_SRGBA_12X10] |= compressedFeature;
+            this._formatFeatures$[Format.ASTC_SRGBA_12X12] |= compressedFeature;
         }
     }
 
@@ -435,7 +436,7 @@ export class WebGLDevice extends Device {
 
     public createSwapchain (info: Readonly<SwapchainInfo>): Swapchain {
         const swapchain = new WebGLSwapchain();
-        this._swapchain = swapchain;
+        this._swapchain$ = swapchain;
         swapchain.initialize(info);
         return swapchain;
     }
@@ -508,38 +509,38 @@ export class WebGLDevice extends Device {
 
     public getSampler (info: Readonly<SamplerInfo>): Sampler {
         const hash = Sampler.computeHash(info);
-        if (!this._samplers.has(hash)) {
-            this._samplers.set(hash, new WebGLSampler(info, hash));
+        if (!this._samplers$.has(hash)) {
+            this._samplers$.set(hash, new WebGLSampler(info, hash));
         }
-        return this._samplers.get(hash)!;
+        return this._samplers$.get(hash)!;
     }
 
     public getSwapchains (): Readonly<Swapchain[]> {
-        return [this._swapchain as Swapchain];
+        return [this._swapchain$ as Swapchain];
     }
 
     public getGeneralBarrier (info: Readonly<GeneralBarrierInfo>): GeneralBarrier {
         const hash = GeneralBarrier.computeHash(info);
-        if (!this._generalBarrierss.has(hash)) {
-            this._generalBarrierss.set(hash, new GeneralBarrier(info, hash));
+        if (!this._generalBarrierss$.has(hash)) {
+            this._generalBarrierss$.set(hash, new GeneralBarrier(info, hash));
         }
-        return this._generalBarrierss.get(hash)!;
+        return this._generalBarrierss$.get(hash)!;
     }
 
     public getTextureBarrier (info: Readonly<TextureBarrierInfo>): TextureBarrier {
         const hash = TextureBarrier.computeHash(info);
-        if (!this._textureBarriers.has(hash)) {
-            this._textureBarriers.set(hash, new TextureBarrier(info, hash));
+        if (!this._textureBarriers$.has(hash)) {
+            this._textureBarriers$.set(hash, new TextureBarrier(info, hash));
         }
-        return this._textureBarriers.get(hash)!;
+        return this._textureBarriers$.get(hash)!;
     }
 
     public getBufferBarrier (info: Readonly<BufferBarrierInfo>): BufferBarrier {
         const hash = BufferBarrier.computeHash(info);
-        if (!this._bufferBarriers.has(hash)) {
-            this._bufferBarriers.set(hash, new BufferBarrier(info, hash));
+        if (!this._bufferBarriers$.has(hash)) {
+            this._bufferBarriers$.set(hash, new BufferBarrier(info, hash));
         }
-        return this._bufferBarriers.get(hash)!;
+        return this._bufferBarriers$.get(hash)!;
     }
 
     public copyBuffersToTexture (buffers: Readonly<ArrayBufferView[]>, texture: Texture, regions: Readonly<BufferTextureCopy[]>): void {
diff --git a/cocos/gfx/webgl/webgl-framebuffer.ts b/cocos/gfx/webgl/webgl-framebuffer.ts
index f5ac220faf8..6a80a196e6a 100644
--- a/cocos/gfx/webgl/webgl-framebuffer.ts
+++ b/cocos/gfx/webgl/webgl-framebuffer.ts
@@ -33,12 +33,12 @@ import { WebGLTexture as CCWebGLTexture } from './webgl-texture';
 
 export class WebGLFramebuffer extends Framebuffer {
     get gpuFramebuffer (): IWebGLGPUFramebuffer {
-        return  this._gpuFramebuffer!;
+        return  this._gpuFramebuffer$!;
     }
 
-    private _gpuFramebuffer: IWebGLGPUFramebuffer | null = null;
-    private _gpuColorTextures: (WebGLTexture | null)[] = [];
-    private _gpuDepthStencilTexture: WebGLTexture | null | undefined;
+    private _gpuFramebuffer$: IWebGLGPUFramebuffer | null = null;
+    private _gpuColorTextures$: (WebGLTexture | null)[] = [];
+    private _gpuDepthStencilTexture$: WebGLTexture | null | undefined;
 
     constructor () {
         super();
@@ -46,12 +46,12 @@ export class WebGLFramebuffer extends Framebuffer {
 
     get needRebuild (): boolean {
         if (this.gpuFramebuffer) {
-            for (let i = 0; i < this.gpuFramebuffer.gpuColorTextures.length; i++) {
-                if (this.gpuFramebuffer.gpuColorTextures[i].glTexture !== this._gpuColorTextures[i]) {
+            for (let i = 0; i < this.gpuFramebuffer.gpuColorTextures$.length; i++) {
+                if (this.gpuFramebuffer.gpuColorTextures$[i].glTexture$ !== this._gpuColorTextures$[i]) {
                     return true;
                 }
             }
-            if (this.gpuFramebuffer.gpuDepthStencilTexture?.glTexture !== this._gpuDepthStencilTexture) {
+            if (this.gpuFramebuffer.gpuDepthStencilTexture$?.glTexture$ !== this._gpuDepthStencilTexture$) {
                 return true;
             }
         }
@@ -60,9 +60,9 @@ export class WebGLFramebuffer extends Framebuffer {
     }
 
     public initialize (info: Readonly<FramebufferInfo>): void {
-        this._renderPass = info.renderPass;
-        this._colorTextures = info.colorTextures || [];
-        const depthStencilTexture: CCWebGLTexture = this._depthStencilTexture = info.depthStencilTexture  as CCWebGLTexture || null;
+        this._renderPass$ = info.renderPass;
+        this._colorTextures$ = info.colorTextures || [];
+        const depthStencilTexture: CCWebGLTexture = this._depthStencilTexture$ = info.depthStencilTexture  as CCWebGLTexture || null;
 
         let lodLevel = 0;
 
@@ -83,50 +83,50 @@ export class WebGLFramebuffer extends Framebuffer {
 
         let width = Number.MAX_SAFE_INTEGER;
         let height = Number.MAX_SAFE_INTEGER;
-        this._gpuFramebuffer = {
-            gpuRenderPass: (info.renderPass as WebGLRenderPass).gpuRenderPass,
-            gpuColorTextures,
-            gpuDepthStencilTexture,
-            glFramebuffer: null,
-            isOffscreen: true,
-            get width (): number {
-                if (this.gpuColorTextures.length > 0) {
-                    return this.gpuColorTextures[0].width;
-                } else if (this.gpuDepthStencilTexture) {
-                    return this.gpuDepthStencilTexture.width;
+        this._gpuFramebuffer$ = {
+            gpuRenderPass$: (info.renderPass as WebGLRenderPass).gpuRenderPass,
+            gpuColorTextures$: gpuColorTextures,
+            gpuDepthStencilTexture$: gpuDepthStencilTexture,
+            glFramebuffer$: null,
+            isOffscreen$: true,
+            get width$ (): number {
+                if (this.gpuColorTextures$.length > 0) {
+                    return this.gpuColorTextures$[0].width$;
+                } else if (this.gpuDepthStencilTexture$) {
+                    return this.gpuDepthStencilTexture$.width$;
                 }
                 return width;
             },
-            set width (val) {
+            set width$ (val) {
                 width = val;
             },
-            get height (): number {
-                if (this.gpuColorTextures.length > 0) {
-                    return this.gpuColorTextures[0].height;
-                } else if (this.gpuDepthStencilTexture) {
-                    return this.gpuDepthStencilTexture.height;
+            get height$ (): number {
+                if (this.gpuColorTextures$.length > 0) {
+                    return this.gpuColorTextures$[0].height$;
+                } else if (this.gpuDepthStencilTexture$) {
+                    return this.gpuDepthStencilTexture$.height$;
                 }
                 return height;
             },
-            set height (val) {
+            set height$ (val) {
                 height = val;
             },
-            lodLevel,
+            lodLevel$: lodLevel,
         };
 
-        WebGLCmdFuncCreateFramebuffer(WebGLDeviceManager.instance, this._gpuFramebuffer);
-        this.gpuFramebuffer.gpuColorTextures.forEach((tex) => this._gpuColorTextures.push(tex.glTexture));
-        this._gpuDepthStencilTexture = this.gpuFramebuffer.gpuDepthStencilTexture?.glTexture;
-        this._width = this._gpuFramebuffer.width;
-        this._height = this._gpuFramebuffer.height;
+        WebGLCmdFuncCreateFramebuffer(WebGLDeviceManager.instance, this._gpuFramebuffer$);
+        this.gpuFramebuffer.gpuColorTextures$.forEach((tex) => this._gpuColorTextures$.push(tex.glTexture$));
+        this._gpuDepthStencilTexture$ = this.gpuFramebuffer.gpuDepthStencilTexture$?.glTexture$;
+        this._width$ = this._gpuFramebuffer$.width$;
+        this._height$ = this._gpuFramebuffer$.height$;
     }
 
     public destroy (): void {
-        if (this._gpuFramebuffer) {
-            WebGLCmdFuncDestroyFramebuffer(WebGLDeviceManager.instance, this._gpuFramebuffer);
-            this._gpuFramebuffer = null;
-            this._gpuColorTextures.length = 0;
-            this._gpuDepthStencilTexture = null;
+        if (this._gpuFramebuffer$) {
+            WebGLCmdFuncDestroyFramebuffer(WebGLDeviceManager.instance, this._gpuFramebuffer$);
+            this._gpuFramebuffer$ = null;
+            this._gpuColorTextures$.length = 0;
+            this._gpuDepthStencilTexture$ = null;
         }
     }
 }
diff --git a/cocos/gfx/webgl/webgl-gpu-objects.ts b/cocos/gfx/webgl/webgl-gpu-objects.ts
index e6698c73de7..f08606bb7ad 100644
--- a/cocos/gfx/webgl/webgl-gpu-objects.ts
+++ b/cocos/gfx/webgl/webgl-gpu-objects.ts
@@ -22,7 +22,6 @@
  THE SOFTWARE.
 */
 
-import { nextPow2 } from '../../core';
 import {
     DescriptorType, BufferUsage, Format, MemoryUsage, SampleCount, DynamicStateFlagBit,
     ShaderStageFlagBit, TextureFlags, TextureType, TextureUsage, Type,
@@ -37,310 +36,315 @@ import { WebGLCmdFuncBindStates, WebGLCmdFuncCreateBuffer, WebGLCmdFuncCreateInp
     WebGLCmdFuncDestroyShader, WebGLCmdFuncDraw, WebGLCmdFuncUpdateBuffer,
 } from './webgl-commands';
 import { WebGLDeviceManager } from './webgl-define';
+import { WebGLConstants } from '../gl-constants';
+import { nextPow2 } from '../../core/math/bits';
+
+function createInt32Array (capacity: number): Int32Array {
+    return new Int32Array(capacity);
+}
 
 export class WebGLIndirectDrawInfos {
-    public declare counts: Int32Array;
-    public declare offsets: Int32Array;
-    public declare instances: Int32Array;
-    public drawCount = 0;
-    public drawByIndex = false;
-    public instancedDraw = false;
+    public declare counts$: Int32Array;
+    public declare offsets$: Int32Array;
+    public declare instances$: Int32Array;
+    public drawCount$ = 0;
+    public drawByIndex$ = false;
+    public instancedDraw$ = false;
 
     // staging buffer
-    public declare byteOffsets: Int32Array;
+    public declare byteOffsets$: Int32Array;
 
-    private _capacity = 4;
+    private _capacity$ = 4;
 
     constructor () {
-        this.counts = new Int32Array(this._capacity);
-        this.offsets = new Int32Array(this._capacity);
-        this.instances  = new Int32Array(this._capacity);
-        this.byteOffsets = new Int32Array(this._capacity);
+        this.counts$ = createInt32Array(this._capacity$);
+        this.offsets$ = createInt32Array(this._capacity$);
+        this.instances$  = createInt32Array(this._capacity$);
+        this.byteOffsets$ = createInt32Array(this._capacity$);
     }
 
-    public clearDraws (): void {
-        this.drawCount = 0;
-        this.drawByIndex = false;
-        this.instancedDraw = false;
+    public clearDraws$ (): void {
+        this.drawCount$ = 0;
+        this.drawByIndex$ = false;
+        this.instancedDraw$ = false;
     }
 
-    public setDrawInfo (idx: number, info: Readonly<DrawInfo>): void {
-        this._ensureCapacity(idx);
-        this.drawByIndex = info.indexCount > 0;
-        this.instancedDraw = !!info.instanceCount;
-        this.drawCount = Math.max(idx + 1, this.drawCount);
+    public setDrawInfo$ (idx: number, info: Readonly<DrawInfo>): void {
+        this._ensureCapacity$(idx);
+        this.drawByIndex$ = info.indexCount > 0;
+        this.instancedDraw$ = !!info.instanceCount;
+        this.drawCount$ = Math.max(idx + 1, this.drawCount$);
 
-        if (this.drawByIndex) {
-            this.counts[idx] = info.indexCount;
-            this.offsets[idx] = info.firstIndex;
+        if (this.drawByIndex$) {
+            this.counts$[idx] = info.indexCount;
+            this.offsets$[idx] = info.firstIndex;
         } else {
-            this.counts[idx] = info.vertexCount;
-            this.offsets[idx] = info.firstVertex;
+            this.counts$[idx] = info.vertexCount;
+            this.offsets$[idx] = info.firstVertex;
         }
-        this.instances[idx] = Math.max(1, info.instanceCount);
+        this.instances$[idx] = Math.max(1, info.instanceCount);
     }
 
-    private _ensureCapacity (target: number): void {
-        if (this._capacity > target) return;
-        this._capacity = nextPow2(target);
+    private _ensureCapacity$ (target: number): void {
+        if (this._capacity$ > target) return;
+        this._capacity$ = nextPow2(target);
 
-        const counts = new Int32Array(this._capacity);
-        const offsets = new Int32Array(this._capacity);
-        const instances = new Int32Array(this._capacity);
-        this.byteOffsets = new Int32Array(this._capacity);
+        const counts = createInt32Array(this._capacity$);
+        const offsets = createInt32Array(this._capacity$);
+        const instances = createInt32Array(this._capacity$);
+        this.byteOffsets$ = createInt32Array(this._capacity$);
 
-        counts.set(this.counts);
-        offsets.set(this.offsets);
-        instances.set(this.instances);
+        counts.set(this.counts$);
+        offsets.set(this.offsets$);
+        instances.set(this.instances$);
 
-        this.counts = counts;
-        this.offsets = offsets;
-        this.instances = instances;
+        this.counts$ = counts;
+        this.offsets$ = offsets;
+        this.instances$ = instances;
     }
 }
 
 export interface IWebGLGPUUniformInfo {
-    name: string;
-    type: Type;
-    count: number;
-    offset: number;
-    view: Float32Array | Int32Array;
-    isDirty: boolean;
+    name$: string;
+    type$: Type;
+    count$: number;
+    offset$: number;
+    view$: Float32Array | Int32Array;
+    isDirty$: boolean;
 }
 
 export interface IWebGLBindingMapping {
-    blockOffsets: number[];
-    samplerTextureOffsets: number[];
-    flexibleSet: number;
+    blockOffsets$: number[];
+    samplerTextureOffsets$: number[];
+    flexibleSet$: number;
 }
 
 export interface IWebGLGPUBufferView {
-    gpuBuffer: IWebGLGPUBuffer;
-    offset: number;
-    range: number;
+    gpuBuffer$: IWebGLGPUBuffer;
+    offset$: number;
+    range$: number;
 }
 
 export interface IWebGLGPUBuffer {
-    usage: BufferUsage;
-    memUsage: MemoryUsage;
-    size: number;
-    stride: number;
+    usage$: BufferUsage;
+    memUsage$: MemoryUsage;
+    size$: number;
+    stride$: number;
 
-    glTarget: GLenum;
-    glBuffer: WebGLBuffer | null;
+    glTarget$: GLenum;
+    glBuffer$: WebGLBuffer | null;
 
-    buffer: ArrayBufferView | null;
+    buffer$: ArrayBufferView | null;
     vf32: Float32Array | null;
-    indirects: WebGLIndirectDrawInfos;
+    indirects$: WebGLIndirectDrawInfos;
 }
 
 export interface IWebGLGPUTexture {
-    type: TextureType;
-    format: Format;
-    usage: TextureUsage;
-    width: number;
-    height: number;
-    depth: number;
-    size: number;
-    arrayLayer: number;
-    mipLevel: number;
-    samples: SampleCount;
-    flags: TextureFlags;
-    isPowerOf2: boolean;
-
-    glTarget: GLenum;
-    glInternalFmt: GLenum;
-    glFormat: GLenum;
-    glType: GLenum;
-    glUsage: GLenum;
-    glTexture: WebGLTexture | null;
-    glRenderbuffer: WebGLRenderbuffer | null;
-    glWrapS: GLenum;
-    glWrapT: GLenum;
-    glMinFilter: GLenum;
-    glMagFilter: GLenum;
-
-    isSwapchainTexture: boolean;
+    type$: TextureType;
+    format$: Format;
+    usage$: TextureUsage;
+    width$: number;
+    height$: number;
+    depth$: number;
+    size$: number;
+    arrayLayer$: number;
+    mipLevel$: number;
+    samples$: SampleCount;
+    flags$: TextureFlags;
+    isPowerOf2$: boolean;
+
+    glTarget$: GLenum;
+    glInternalFmt$: GLenum;
+    glFormat$: GLenum;
+    glType$: GLenum;
+    glUsage$: GLenum;
+    glTexture$: WebGLTexture | null;
+    glRenderbuffer$: WebGLRenderbuffer | null;
+    glWrapS$: GLenum;
+    glWrapT$: GLenum;
+    glMinFilter$: GLenum;
+    glMagFilter$: GLenum;
+
+    isSwapchainTexture$: boolean;
 }
 
 export interface IWebGLGPURenderPass {
-    colorAttachments: ColorAttachment[];
-    depthStencilAttachment: DepthStencilAttachment | null;
+    colorAttachments$: ColorAttachment[];
+    depthStencilAttachment$: DepthStencilAttachment | null;
 }
 
 export interface IWebGLGPUFramebuffer {
-    gpuRenderPass: IWebGLGPURenderPass;
-    gpuColorTextures: IWebGLGPUTexture[];
-    gpuDepthStencilTexture: IWebGLGPUTexture | null;
-    glFramebuffer: WebGLFramebuffer | null;
-    isOffscreen: boolean;
-    width: number;
-    height: number;
-    lodLevel: number;
+    gpuRenderPass$: IWebGLGPURenderPass;
+    gpuColorTextures$: IWebGLGPUTexture[];
+    gpuDepthStencilTexture$: IWebGLGPUTexture | null;
+    glFramebuffer$: WebGLFramebuffer | null;
+    isOffscreen$: boolean;
+    width$: number;
+    height$: number;
+    lodLevel$: number;
 }
 
 export interface IWebGLGPUSampler {
-    glMinFilter: GLenum;
-    glMagFilter: GLenum;
-    glWrapS: GLenum;
-    glWrapT: GLenum;
-    glWrapR: GLenum;
+    glMinFilter$: GLenum;
+    glMagFilter$: GLenum;
+    glWrapS$: GLenum;
+    glWrapT$: GLenum;
+    glWrapR$: GLenum;
 }
 
 export interface IWebGLGPUInput {
-    binding: number;
-    name: string;
-    type: Type;
-    stride: number;
-    count: number;
-    size: number;
-
-    glType: GLenum;
-    glLoc: GLint;
+    binding$: number;
+    name$: string;
+    type$: Type;
+    stride$: number;
+    count$: number;
+    size$: number;
+
+    glType$: GLenum;
+    glLoc$: GLint;
 }
 
 export interface IWebGLGPUUniform {
-    binding: number;
-    name: string;
-    type: Type;
-    stride: number;
-    count: number;
-    size: number;
-    offset: number;
-
-    glType: GLenum;
-    glLoc: WebGLUniformLocation;
-    array: Int32Array | Float32Array;
+    binding$: number;
+    name$: string;
+    type$: Type;
+    stride$: number;
+    count$: number;
+    size$: number;
+    offset$: number;
+
+    glType$: GLenum;
+    glLoc$: WebGLUniformLocation;
+    array$: Int32Array | Float32Array;
 }
 
 export interface IWebGLGPUUniformBlock {
-    set: number;
-    binding: number;
-    name: string;
-    size: number;
-    glUniforms: IWebGLGPUUniform[];
-    glActiveUniforms: IWebGLGPUUniform[];
+    set$: number;
+    binding$: number;
+    name$: string;
+    size$: number;
+    glUniforms$: IWebGLGPUUniform[];
+    glActiveUniforms$: IWebGLGPUUniform[];
 }
 
 export interface IWebGLGPUUniformSamplerTexture {
-    set: number;
-    binding: number;
-    name: string;
-    type: Type;
-    count: number;
-    units: number[];
-    glUnits: Int32Array;
-
-    glType: GLenum;
-    glLoc: WebGLUniformLocation;
+    set$: number;
+    binding$: number;
+    name$: string;
+    type$: Type;
+    count$: number;
+    units$: number[];
+    glUnits$: Int32Array;
+
+    glType$: GLenum;
+    glLoc$: WebGLUniformLocation;
 }
 
 export interface IWebGLGPUShaderStage {
-    type: ShaderStageFlagBit;
-    source: string;
-    glShader: WebGLShader | null;
+    type$: ShaderStageFlagBit;
+    source$: string;
+    glShader$: WebGLShader | null;
 }
 
 export interface IWebGLGPUShader {
-    name: string;
-    blocks: UniformBlock[];
-    samplerTextures: UniformSamplerTexture[];
-    subpassInputs: UniformInputAttachment[];
-
-    gpuStages: IWebGLGPUShaderStage[];
-    glProgram: WebGLProgram | null;
-    glInputs: IWebGLGPUInput[];
-    glUniforms: IWebGLGPUUniform[];
-    glBlocks: IWebGLGPUUniformBlock[];
-    glSamplerTextures: IWebGLGPUUniformSamplerTexture[];
+    name$: string;
+    blocks$: UniformBlock[];
+    samplerTextures$: UniformSamplerTexture[];
+    subpassInputs$: UniformInputAttachment[];
+
+    gpuStages$: IWebGLGPUShaderStage[];
+    glProgram$: WebGLProgram | null;
+    glInputs$: IWebGLGPUInput[];
+    glUniforms$: IWebGLGPUUniform[];
+    glBlocks$: IWebGLGPUUniformBlock[];
+    glSamplerTextures$: IWebGLGPUUniformSamplerTexture[];
 }
 
 export interface IWebGLGPUDescriptorSetLayout {
-    bindings: DescriptorSetLayoutBinding[];
-    dynamicBindings: number[];
-    descriptorIndices: number[];
-    descriptorCount: number;
+    bindings$: DescriptorSetLayoutBinding[];
+    dynamicBindings$: number[];
+    descriptorIndices$: number[];
+    descriptorCount$: number;
 }
 
 export interface IWebGLGPUPipelineLayout {
-    gpuSetLayouts: IWebGLGPUDescriptorSetLayout[];
-    dynamicOffsetCount: number;
-    dynamicOffsetOffsets: number[];
-    dynamicOffsetIndices: number[][];
+    gpuSetLayouts$: IWebGLGPUDescriptorSetLayout[];
+    dynamicOffsetCount$: number;
+    dynamicOffsetOffsets$: number[];
+    dynamicOffsetIndices$: number[][];
 }
 
 export interface IWebGLGPUPipelineState {
-    glPrimitive: GLenum;
-    gpuShader: IWebGLGPUShader | null;
-    gpuPipelineLayout: IWebGLGPUPipelineLayout | null;
-    rs: RasterizerState;
-    dss: DepthStencilState;
-    bs: BlendState;
-    dynamicStates: DynamicStateFlagBit[];
-    gpuRenderPass: IWebGLGPURenderPass | null;
+    glPrimitive$: GLenum;
+    gpuShader$: IWebGLGPUShader | null;
+    gpuPipelineLayout$: IWebGLGPUPipelineLayout | null;
+    rs$: RasterizerState;
+    dss$: DepthStencilState;
+    bs$: BlendState;
+    dynamicStates$: DynamicStateFlagBit[];
+    gpuRenderPass$: IWebGLGPURenderPass | null;
 }
 
 export interface IWebGLGPUDescriptor {
-    type: DescriptorType;
-    gpuBuffer: IWebGLGPUBuffer | IWebGLGPUBufferView | null;
-    gpuTexture: IWebGLGPUTexture | null;
-    gpuSampler: IWebGLGPUSampler | null;
+    type$: DescriptorType;
+    gpuBuffer$: IWebGLGPUBuffer | IWebGLGPUBufferView | null;
+    gpuTexture$: IWebGLGPUTexture | null;
+    gpuSampler$: IWebGLGPUSampler | null;
 }
 
 export interface IWebGLGPUDescriptorSet {
-    gpuDescriptors: IWebGLGPUDescriptor[];
-    descriptorIndices: number[];
+    gpuDescriptors$: IWebGLGPUDescriptor[];
+    descriptorIndices$: number[];
 }
 
 export interface IWebGLAttrib {
-    name: string;
-    glBuffer: WebGLBuffer | null;
-    glType: GLenum;
-    size: number;
-    count: number;
-    stride: number;
-    componentCount: number;
-    isNormalized: boolean;
-    isInstanced: boolean;
-    offset: number;
+    name$: string;
+    glBuffer$: WebGLBuffer | null;
+    glType$: GLenum;
+    size$: number;
+    count$: number;
+    stride$: number;
+    componentCount$: number;
+    isNormalized$: boolean;
+    isInstanced$: boolean;
+    offset$: number;
 }
 
 export interface IWebGLGPUInputAssembler {
-    attributes: Attribute[];
-    gpuVertexBuffers: IWebGLGPUBuffer[];
-    gpuIndexBuffer: IWebGLGPUBuffer | null;
-    gpuIndirectBuffer: IWebGLGPUBuffer | null;
-
-    glAttribs: IWebGLAttrib[];
-    glIndexType: GLenum;
-    glVAOs: Map<WebGLProgram, WebGLVertexArrayObjectOES>;
+    attributes$: Attribute[];
+    gpuVertexBuffers$: IWebGLGPUBuffer[];
+    gpuIndexBuffer$: IWebGLGPUBuffer | null;
+    gpuIndirectBuffer$: IWebGLGPUBuffer | null;
+
+    glAttribs$: IWebGLAttrib[];
+    glIndexType$: GLenum;
+    glVAOs$: Map<WebGLProgram, WebGLVertexArrayObjectOES>;
 }
 
 export class IWebGLBlitManager {
-    private _gpuShader: IWebGLGPUShader | null = null;
-    private _gpuDescriptorSetLayout: IWebGLGPUDescriptorSetLayout | null = null;
-    private _gpuPipelineLayout: IWebGLGPUPipelineLayout | null = null;
-    private _gpuPipelineState: IWebGLGPUPipelineState | null = null;
-
-    private _gpuVertexBuffer: IWebGLGPUBuffer | null = null;
-    private _gpuInputAssembler: IWebGLGPUInputAssembler | null = null;
-    private _gpuPointSampler: IWebGLGPUSampler | null = null;
-    private _gpuLinearSampler: IWebGLGPUSampler | null = null;
-    private _gpuDescriptorSet: IWebGLGPUDescriptorSet | null = null;
-    private _gpuUniformBuffer: IWebGLGPUBuffer | null = null;
-    private _drawInfo: DrawInfo | null = null;
-    private _glFramebuffer: WebGLFramebuffer | null = null;
-
-    private _uniformBuffer: Float32Array | null = null;
+    private _gpuShader$: IWebGLGPUShader | null = null;
+    private _gpuDescriptorSetLayout$: IWebGLGPUDescriptorSetLayout | null = null;
+    private _gpuPipelineLayout$: IWebGLGPUPipelineLayout | null = null;
+    private _gpuPipelineState$: IWebGLGPUPipelineState | null = null;
+
+    private _gpuVertexBuffer$: IWebGLGPUBuffer | null = null;
+    private _gpuInputAssembler$: IWebGLGPUInputAssembler | null = null;
+    private _gpuPointSampler$: IWebGLGPUSampler | null = null;
+    private _gpuLinearSampler$: IWebGLGPUSampler | null = null;
+    private _gpuDescriptorSet$: IWebGLGPUDescriptorSet | null = null;
+    private _gpuUniformBuffer$: IWebGLGPUBuffer | null = null;
+    private _drawInfo$: DrawInfo | null = null;
+    private _glFramebuffer$: WebGLFramebuffer | null = null;
+
+    private _uniformBuffer$: Float32Array | null = null;
 
     constructor () {
-        const { gl } = WebGLDeviceManager.instance;
         const device = WebGLDeviceManager.instance;
         const samplerOffset = device.bindingMappingInfo.maxBlockCounts[0];
 
-        this._gpuShader = {
-            name: 'Blit Pass',
-            blocks: [
+        this._gpuShader$ = {
+            name$: 'Blit Pass',
+            blocks$: [
                 new UniformBlock(
                     0,
                     0,
@@ -352,174 +356,168 @@ export class IWebGLBlitManager {
                     1,
                 ),
             ],
-            samplerTextures: [new UniformSamplerTexture(0, samplerOffset, 'textureSrc', Type.SAMPLER2D, 1)],
-            subpassInputs: [],
-            gpuStages: [
+            samplerTextures$: [new UniformSamplerTexture(0, samplerOffset, 'textureSrc', Type.SAMPLER2D, 1)],
+            subpassInputs$: [],
+            gpuStages$: [
                 {
-                    type: ShaderStageFlagBit.VERTEX,
-                    source: `
-                    precision mediump float;
-
-                    attribute vec2 a_position;
-                    attribute vec2 a_texCoord;
-            
-                    uniform vec4 tilingOffsetSrc;
-                    uniform vec4 tilingOffsetDst;
-            
-                    varying vec2 v_texCoord;
-            
-                    void main() {
-                        v_texCoord = a_texCoord * tilingOffsetSrc.xy + tilingOffsetSrc.zw;
-                        gl_Position = vec4((a_position + 1.0) * tilingOffsetDst.xy - 1.0 + tilingOffsetDst.zw * 2.0, 0, 1);
-                    }`,
-                    glShader: null },
+                    type$: ShaderStageFlagBit.VERTEX,
+                    source$: `
+precision mediump float;
+attribute vec2 a_position;
+attribute vec2 a_texCoord;
+uniform vec4 tilingOffsetSrc;
+uniform vec4 tilingOffsetDst;
+varying vec2 v_texCoord;
+void main() {
+    v_texCoord = a_texCoord * tilingOffsetSrc.xy + tilingOffsetSrc.zw;
+    gl_Position = vec4((a_position + 1.0) * tilingOffsetDst.xy - 1.0 + tilingOffsetDst.zw * 2.0, 0, 1);
+}`,
+                    glShader$: null },
                 {
-                    type: ShaderStageFlagBit.FRAGMENT,
-                    source: `
-                    precision mediump float;
-                    uniform sampler2D textureSrc;
-
-                    varying vec2 v_texCoord;
-                    
-                    void main() {
-                        gl_FragColor = texture2D(textureSrc, v_texCoord);
-                    }`,
-                    glShader: null },
+                    type$: ShaderStageFlagBit.FRAGMENT,
+                    source$: `
+precision mediump float;
+uniform sampler2D textureSrc;
+varying vec2 v_texCoord;
+void main() {
+    gl_FragColor = texture2D(textureSrc, v_texCoord);
+}`,
+                    glShader$: null },
 
             ],
-            glProgram: null,
-            glInputs: [],
-            glUniforms: [],
-            glBlocks: [],
-            glSamplerTextures: [],
+            glProgram$: null,
+            glInputs$: [],
+            glUniforms$: [],
+            glBlocks$: [],
+            glSamplerTextures$: [],
         };
-        WebGLCmdFuncCreateShader(WebGLDeviceManager.instance, this._gpuShader);
+        WebGLCmdFuncCreateShader(WebGLDeviceManager.instance, this._gpuShader$);
 
-        this._gpuDescriptorSetLayout = {
-            bindings: [
+        this._gpuDescriptorSetLayout$ = {
+            bindings$: [
                 new DescriptorSetLayoutBinding(0, DescriptorType.UNIFORM_BUFFER, 1, ShaderStageFlagBit.VERTEX),
                 new DescriptorSetLayoutBinding(samplerOffset, DescriptorType.SAMPLER_TEXTURE, 1, ShaderStageFlagBit.FRAGMENT),
             ],
-            dynamicBindings: [],
-            descriptorIndices: [],
-            descriptorCount: samplerOffset + 1,
+            dynamicBindings$: [],
+            descriptorIndices$: [],
+            descriptorCount$: samplerOffset + 1,
         };
         for (let i = 0; i < samplerOffset; i++) {
-            this._gpuDescriptorSetLayout.descriptorIndices[i] = 0;
+            this._gpuDescriptorSetLayout$.descriptorIndices$[i] = 0;
         }
-        this._gpuDescriptorSetLayout.descriptorIndices.push(1);
+        this._gpuDescriptorSetLayout$.descriptorIndices$.push(1);
 
-        this._gpuPipelineLayout = {
-            gpuSetLayouts: [this._gpuDescriptorSetLayout],
-            dynamicOffsetCount: 0,
-            dynamicOffsetOffsets: [0],
-            dynamicOffsetIndices: [[]],
+        this._gpuPipelineLayout$ = {
+            gpuSetLayouts$: [this._gpuDescriptorSetLayout$],
+            dynamicOffsetCount$: 0,
+            dynamicOffsetOffsets$: [0],
+            dynamicOffsetIndices$: [[]],
         };
 
-        this._gpuPipelineState = {
-            glPrimitive: gl.TRIANGLE_STRIP,
-            gpuShader: this._gpuShader,
-            gpuPipelineLayout: this._gpuPipelineLayout,
-            rs: null!,
-            dss: new DepthStencilState(false, false),
-            bs: null!,
-            dynamicStates: [],
-            gpuRenderPass: null,
+        this._gpuPipelineState$ = {
+            glPrimitive$: WebGLConstants.TRIANGLE_STRIP,
+            gpuShader$: this._gpuShader$,
+            gpuPipelineLayout$: this._gpuPipelineLayout$,
+            rs$: null!,
+            dss$: new DepthStencilState(false, false),
+            bs$: null!,
+            dynamicStates$: [],
+            gpuRenderPass$: null,
         };
 
-        this._gpuVertexBuffer = {
-            usage: BufferUsageBit.VERTEX,
-            memUsage: MemoryUsageBit.DEVICE,
-            size: 16 * Float32Array.BYTES_PER_ELEMENT,
-            stride: 4 * Float32Array.BYTES_PER_ELEMENT,
-            buffer: null,
+        this._gpuVertexBuffer$ = {
+            usage$: BufferUsageBit.VERTEX,
+            memUsage$: MemoryUsageBit.DEVICE,
+            size$: 16 * Float32Array.BYTES_PER_ELEMENT,
+            stride$: 4 * Float32Array.BYTES_PER_ELEMENT,
+            buffer$: null,
             vf32: null,
-            indirects: new WebGLIndirectDrawInfos(),
-            glTarget: 0,
-            glBuffer: null,
+            indirects$: new WebGLIndirectDrawInfos(),
+            glTarget$: 0,
+            glBuffer$: null,
         };
-        WebGLCmdFuncCreateBuffer(WebGLDeviceManager.instance, this._gpuVertexBuffer);
-        WebGLDeviceManager.instance.memoryStatus.bufferSize += this._gpuVertexBuffer.size;
+        WebGLCmdFuncCreateBuffer(WebGLDeviceManager.instance, this._gpuVertexBuffer$);
+        WebGLDeviceManager.instance.memoryStatus.bufferSize += this._gpuVertexBuffer$.size$;
         const data  = new Float32Array(
             [-1.0, -1.0, 0.0, 0.0,
                 1.0, -1.0, 1.0, 0.0,
                 -1.0, 1.0, 0.0, 1.0,
                 1.0, 1.0, 1.0, 1.0],
         );
-        WebGLCmdFuncUpdateBuffer(WebGLDeviceManager.instance, this._gpuVertexBuffer, data, 0, data.length);
+        WebGLCmdFuncUpdateBuffer(WebGLDeviceManager.instance, this._gpuVertexBuffer$, data, 0, data.length);
 
-        this._gpuInputAssembler = {
-            attributes: [new Attribute(`a_position`, Format.RG32F), new Attribute(`a_texCoord`, Format.RG32F)],
-            gpuVertexBuffers: [this._gpuVertexBuffer],
-            gpuIndexBuffer: null,
-            gpuIndirectBuffer: null,
+        this._gpuInputAssembler$ = {
+            attributes$: [new Attribute(`a_position`, Format.RG32F), new Attribute(`a_texCoord`, Format.RG32F)],
+            gpuVertexBuffers$: [this._gpuVertexBuffer$],
+            gpuIndexBuffer$: null,
+            gpuIndirectBuffer$: null,
 
-            glAttribs: [],
-            glIndexType: 0,
-            glVAOs: new Map<WebGLProgram, WebGLVertexArrayObject>(),
+            glAttribs$: [],
+            glIndexType$: 0,
+            glVAOs$: new Map<WebGLProgram, WebGLVertexArrayObject>(),
         };
-        WebGLCmdFuncCreateInputAssember(WebGLDeviceManager.instance, this._gpuInputAssembler);
-
-        this._gpuPointSampler = {
-            glMinFilter: 0x2600, // WebGLRenderingContext.NEAREST
-            glMagFilter: 0x2600, // WebGLRenderingContext.NEAREST
-            glWrapS: 0x2901, // WebGLRenderingContext.REPEAT,
-            glWrapT: 0x2901, // WebGLRenderingContext.REPEAT,
-            glWrapR: 0x2901, // WebGLRenderingContext.REPEAT,
+        WebGLCmdFuncCreateInputAssember(WebGLDeviceManager.instance, this._gpuInputAssembler$);
+
+        this._gpuPointSampler$ = {
+            glMinFilter$: 0x2600, // WebGLRenderingContext.NEAREST
+            glMagFilter$: 0x2600, // WebGLRenderingContext.NEAREST
+            glWrapS$: 0x2901, // WebGLRenderingContext.REPEAT,
+            glWrapT$: 0x2901, // WebGLRenderingContext.REPEAT,
+            glWrapR$: 0x2901, // WebGLRenderingContext.REPEAT,
         };
 
-        this._gpuLinearSampler = {
-            glMinFilter: 0x2601, // WebGLRenderingContext.LINEAR;
-            glMagFilter: 0x2601, // WebGLRenderingContext.LINEAR;
-            glWrapS: 0x2901, // WebGLRenderingContext.REPEAT,
-            glWrapT: 0x2901, // WebGLRenderingContext.REPEAT,
-            glWrapR: 0x2901, // WebGLRenderingContext.REPEAT,
+        this._gpuLinearSampler$ = {
+            glMinFilter$: 0x2601, // WebGLRenderingContext.LINEAR;
+            glMagFilter$: 0x2601, // WebGLRenderingContext.LINEAR;
+            glWrapS$: 0x2901, // WebGLRenderingContext.REPEAT,
+            glWrapT$: 0x2901, // WebGLRenderingContext.REPEAT,
+            glWrapR$: 0x2901, // WebGLRenderingContext.REPEAT,
         };
 
-        this._uniformBuffer = new Float32Array(8);
-        this._gpuUniformBuffer = {
-            usage: BufferUsageBit.UNIFORM,
-            memUsage: MemoryUsageBit.DEVICE,
-            size: 8 * Float32Array.BYTES_PER_ELEMENT,
-            stride: 8 * Float32Array.BYTES_PER_ELEMENT,
-            buffer: this._uniformBuffer,
+        this._uniformBuffer$ = new Float32Array(8);
+        this._gpuUniformBuffer$ = {
+            usage$: BufferUsageBit.UNIFORM,
+            memUsage$: MemoryUsageBit.DEVICE,
+            size$: 8 * Float32Array.BYTES_PER_ELEMENT,
+            stride$: 8 * Float32Array.BYTES_PER_ELEMENT,
+            buffer$: this._uniformBuffer$,
             vf32: null,
-            indirects: new WebGLIndirectDrawInfos(),
-            glTarget: 0,
-            glBuffer: null,
+            indirects$: new WebGLIndirectDrawInfos(),
+            glTarget$: 0,
+            glBuffer$: null,
         };
-        WebGLCmdFuncCreateBuffer(WebGLDeviceManager.instance, this._gpuUniformBuffer);
-        WebGLDeviceManager.instance.memoryStatus.bufferSize += this._gpuUniformBuffer.size;
-
-        this._gpuDescriptorSet = {
-            gpuDescriptors: [
-                { type: DescriptorType.UNIFORM_BUFFER, gpuBuffer: this._gpuUniformBuffer, gpuTexture: null, gpuSampler: null },
-                { type: DescriptorType.SAMPLER_TEXTURE, gpuBuffer: null, gpuTexture: null, gpuSampler: null }],
-            descriptorIndices: this._gpuDescriptorSetLayout.descriptorIndices,
+        WebGLCmdFuncCreateBuffer(WebGLDeviceManager.instance, this._gpuUniformBuffer$);
+        WebGLDeviceManager.instance.memoryStatus.bufferSize += this._gpuUniformBuffer$.size$;
+
+        this._gpuDescriptorSet$ = {
+            gpuDescriptors$: [
+                { type$: DescriptorType.UNIFORM_BUFFER, gpuBuffer$: this._gpuUniformBuffer$, gpuTexture$: null, gpuSampler$: null },
+                { type$: DescriptorType.SAMPLER_TEXTURE, gpuBuffer$: null, gpuTexture$: null, gpuSampler$: null }],
+            descriptorIndices$: this._gpuDescriptorSetLayout$.descriptorIndices$,
         };
 
-        this._drawInfo = new DrawInfo(4, 0, 0, 0, 0, 0, 0);
-        this._glFramebuffer = WebGLDeviceManager.instance.gl.createFramebuffer();
+        this._drawInfo$ = new DrawInfo(4, 0, 0, 0, 0, 0, 0);
+        this._glFramebuffer$ = WebGLDeviceManager.instance.gl.createFramebuffer();
     }
 
     public destroy (): void {
-        if (this._glFramebuffer) {
-            WebGLDeviceManager.instance.gl.deleteFramebuffer(this._glFramebuffer);
-            this._glFramebuffer = null;
+        if (this._glFramebuffer$) {
+            WebGLDeviceManager.instance.gl.deleteFramebuffer(this._glFramebuffer$);
+            this._glFramebuffer$ = null;
         }
-        if (this._gpuVertexBuffer) {
-            WebGLDeviceManager.instance.memoryStatus.bufferSize -= this._gpuVertexBuffer.size;
-            WebGLCmdFuncDestroyBuffer(WebGLDeviceManager.instance, this._gpuVertexBuffer);
+        if (this._gpuVertexBuffer$) {
+            WebGLDeviceManager.instance.memoryStatus.bufferSize -= this._gpuVertexBuffer$.size$;
+            WebGLCmdFuncDestroyBuffer(WebGLDeviceManager.instance, this._gpuVertexBuffer$);
         }
-        if (this._gpuUniformBuffer) {
-            WebGLDeviceManager.instance.memoryStatus.bufferSize -= this._gpuUniformBuffer.size;
-            WebGLCmdFuncDestroyBuffer(WebGLDeviceManager.instance, this._gpuUniformBuffer);
+        if (this._gpuUniformBuffer$) {
+            WebGLDeviceManager.instance.memoryStatus.bufferSize -= this._gpuUniformBuffer$.size$;
+            WebGLCmdFuncDestroyBuffer(WebGLDeviceManager.instance, this._gpuUniformBuffer$);
         }
-        if (this._gpuShader) {
-            WebGLCmdFuncDestroyShader(WebGLDeviceManager.instance, this._gpuShader);
+        if (this._gpuShader$) {
+            WebGLCmdFuncDestroyShader(WebGLDeviceManager.instance, this._gpuShader$);
         }
-        if (this._gpuInputAssembler) {
-            WebGLCmdFuncDestroyInputAssembler(WebGLDeviceManager.instance, this._gpuInputAssembler);
+        if (this._gpuInputAssembler$) {
+            WebGLCmdFuncDestroyInputAssembler(WebGLDeviceManager.instance, this._gpuInputAssembler$);
         }
     }
 
@@ -527,86 +525,86 @@ export class IWebGLBlitManager {
         const device = WebGLDeviceManager.instance;
         const { gl } = device;
         const stateCache = device.stateCache;
-        const origFramebuffer = stateCache.glFramebuffer;
+        const origFramebuffer = stateCache.glFramebuffer$;
 
-        gl.viewport(0, 0, gpuTextureDst.width, gpuTextureDst.height);
-        gl.scissor(0, 0, gpuTextureDst.width, gpuTextureDst.height);
+        gl.viewport(0, 0, gpuTextureDst.width$, gpuTextureDst.height$);
+        gl.scissor(0, 0, gpuTextureDst.width$, gpuTextureDst.height$);
 
-        if (!this._uniformBuffer || !this._gpuUniformBuffer || !this._gpuPipelineState
-            || !this._gpuInputAssembler || !this._gpuDescriptorSet || !this._drawInfo) {
+        if (!this._uniformBuffer$ || !this._gpuUniformBuffer$ || !this._gpuPipelineState$
+            || !this._gpuInputAssembler$ || !this._gpuDescriptorSet$ || !this._drawInfo$) {
             return;
         }
 
-        const descriptor = this._gpuDescriptorSet.gpuDescriptors[1];
-        descriptor.gpuTexture = gpuTextureSrc;
-        descriptor.gpuSampler = filter === Filter.POINT ? this._gpuPointSampler : this._gpuLinearSampler;
+        const descriptor = this._gpuDescriptorSet$.gpuDescriptors$[1];
+        descriptor.gpuTexture$ = gpuTextureSrc;
+        descriptor.gpuSampler$ = filter === Filter.POINT ? this._gpuPointSampler$ : this._gpuLinearSampler$;
 
-        const formatInfo = FormatInfos[gpuTextureDst.format];
-        let attachment: number = gl.COLOR_ATTACHMENT0;
+        const formatInfo = FormatInfos[gpuTextureDst.format$];
+        let attachment: number = WebGLConstants.COLOR_ATTACHMENT0;
         if (formatInfo.hasStencil) {
-            attachment = gl.DEPTH_STENCIL_ATTACHMENT;
+            attachment = WebGLConstants.DEPTH_STENCIL_ATTACHMENT;
         } else if (formatInfo.hasDepth) {
-            attachment = gl.DEPTH_ATTACHMENT;
+            attachment = WebGLConstants.DEPTH_ATTACHMENT;
         }
 
         const regionIndices = regions.map((_, i): number => i);
         regionIndices.sort((a, b): number => regions[a].srcSubres.mipLevel - regions[b].srcSubres.mipLevel);
 
-        if (stateCache.glFramebuffer !== this._glFramebuffer) {
-            device.gl.bindFramebuffer(device.gl.FRAMEBUFFER, this._glFramebuffer);
-            stateCache.glFramebuffer = this._glFramebuffer;
+        if (stateCache.glFramebuffer$ !== this._glFramebuffer$) {
+            gl.bindFramebuffer(WebGLConstants.FRAMEBUFFER, this._glFramebuffer$);
+            stateCache.glFramebuffer$ = this._glFramebuffer$;
         }
 
         let mipLevel = regions[0].dstSubres.mipLevel;
-        if (gpuTextureDst.glTexture) {
-            gl.framebufferTexture2D(gl.FRAMEBUFFER, attachment, gpuTextureDst.glTarget, gpuTextureDst.glTexture, mipLevel);
+        if (gpuTextureDst.glTexture$) {
+            gl.framebufferTexture2D(WebGLConstants.FRAMEBUFFER, attachment, gpuTextureDst.glTarget$, gpuTextureDst.glTexture$, mipLevel);
         } else {
-            gl.framebufferRenderbuffer(gl.FRAMEBUFFER, attachment, gl.RENDERBUFFER, gpuTextureDst.glRenderbuffer);
+            gl.framebufferRenderbuffer(WebGLConstants.FRAMEBUFFER, attachment, WebGLConstants.RENDERBUFFER, gpuTextureDst.glRenderbuffer$);
         }
 
         for (let i = 0; i < regionIndices.length; ++i) {
             const region = regions[regionIndices[i]];
 
-            if (gpuTextureSrc.glTexture && mipLevel !== region.srcSubres.mipLevel) {
+            if (gpuTextureSrc.glTexture$ && mipLevel !== region.srcSubres.mipLevel) {
                 mipLevel = region.srcSubres.mipLevel;
-                gl.framebufferTexture2D(gl.FRAMEBUFFER, attachment, gpuTextureDst.glTarget, gpuTextureDst.glTexture, mipLevel);
+                gl.framebufferTexture2D(WebGLConstants.FRAMEBUFFER, attachment, gpuTextureDst.glTarget$, gpuTextureDst.glTexture$, mipLevel);
             }
 
-            const srcWidth = gpuTextureSrc.width;
-            const srcHeight = gpuTextureSrc.height;
-            const dstWidth = gpuTextureDst.width;
-            const dstHeight = gpuTextureDst.height;
+            const srcWidth = gpuTextureSrc.width$;
+            const srcHeight = gpuTextureSrc.height$;
+            const dstWidth = gpuTextureDst.width$;
+            const dstHeight = gpuTextureDst.height$;
 
-            this._uniformBuffer[0] = region.srcExtent.width / srcWidth;
-            this._uniformBuffer[1] = region.srcExtent.height / srcHeight;
-            this._uniformBuffer[2] = region.srcOffset.x / srcWidth;
-            this._uniformBuffer[3] = region.srcOffset.y / srcHeight;
-            this._uniformBuffer[4] = region.dstExtent.width / dstWidth;
-            this._uniformBuffer[5] = region.dstExtent.height / dstHeight;
-            this._uniformBuffer[6] = region.dstOffset.x / dstWidth;
-            this._uniformBuffer[7] = region.dstOffset.y / dstHeight;
+            this._uniformBuffer$[0] = region.srcExtent.width / srcWidth;
+            this._uniformBuffer$[1] = region.srcExtent.height / srcHeight;
+            this._uniformBuffer$[2] = region.srcOffset.x / srcWidth;
+            this._uniformBuffer$[3] = region.srcOffset.y / srcHeight;
+            this._uniformBuffer$[4] = region.dstExtent.width / dstWidth;
+            this._uniformBuffer$[5] = region.dstExtent.height / dstHeight;
+            this._uniformBuffer$[6] = region.dstOffset.x / dstWidth;
+            this._uniformBuffer$[7] = region.dstOffset.y / dstHeight;
 
             WebGLCmdFuncUpdateBuffer(
                 device,
-                this._gpuUniformBuffer,
-                this._uniformBuffer,
+                this._gpuUniformBuffer$,
+                this._uniformBuffer$,
                 0,
-                this._uniformBuffer.length * Float32Array.BYTES_PER_ELEMENT,
+                this._uniformBuffer$.length * Float32Array.BYTES_PER_ELEMENT,
             );
-            WebGLCmdFuncBindStates(device, this._gpuPipelineState, this._gpuInputAssembler, [this._gpuDescriptorSet], [], null!);
-            WebGLCmdFuncDraw(device, this._drawInfo);
+            WebGLCmdFuncBindStates(device, this._gpuPipelineState$, this._gpuInputAssembler$, [this._gpuDescriptorSet$], [], null!);
+            WebGLCmdFuncDraw(device, this._drawInfo$);
         }
 
         // restore fbo
-        if (stateCache.glFramebuffer !== origFramebuffer) {
-            device.gl.bindFramebuffer(device.gl.FRAMEBUFFER, origFramebuffer);
-            stateCache.glFramebuffer = origFramebuffer;
+        if (stateCache.glFramebuffer$ !== origFramebuffer) {
+            gl.bindFramebuffer(WebGLConstants.FRAMEBUFFER, origFramebuffer);
+            stateCache.glFramebuffer$ = origFramebuffer;
         }
         // restore viewport
-        const origViewport = stateCache.viewport;
+        const origViewport = stateCache.viewport$;
         gl.viewport(origViewport.left, origViewport.top, origViewport.width, origViewport.height);
         // restore scissor
-        const origScissor = stateCache.scissorRect;
+        const origScissor = stateCache.scissorRect$;
         gl.scissor(origScissor.x, origScissor.y, origScissor.width, origScissor.height);
     }
 }
diff --git a/cocos/gfx/webgl/webgl-input-assembler.ts b/cocos/gfx/webgl/webgl-input-assembler.ts
index 1a810a4cd9b..6abba7d76cc 100644
--- a/cocos/gfx/webgl/webgl-input-assembler.ts
+++ b/cocos/gfx/webgl/webgl-input-assembler.ts
@@ -32,10 +32,10 @@ import { IWebGLGPUInputAssembler, IWebGLGPUBuffer } from './webgl-gpu-objects';
 
 export class WebGLInputAssembler extends InputAssembler {
     get gpuInputAssembler (): IWebGLGPUInputAssembler {
-        return  this._gpuInputAssembler!;
+        return  this._gpuInputAssembler$!;
     }
 
-    private _gpuInputAssembler: IWebGLGPUInputAssembler | null = null;
+    private _gpuInputAssembler$: IWebGLGPUInputAssembler | null = null;
 
     constructor () {
         super();
@@ -47,24 +47,24 @@ export class WebGLInputAssembler extends InputAssembler {
             return;
         }
 
-        this._attributes = info.attributes;
-        this._attributesHash = this.computeAttributesHash();
-        this._vertexBuffers = info.vertexBuffers;
+        this._attributes$ = info.attributes;
+        this._attributesHash$ = this.computeAttributesHash();
+        this._vertexBuffers$ = info.vertexBuffers;
 
         if (info.indexBuffer) {
-            this._indexBuffer = info.indexBuffer;
-            this._drawInfo.indexCount = this._indexBuffer.size / this._indexBuffer.stride;
-            this._drawInfo.firstIndex = 0;
+            this._indexBuffer$ = info.indexBuffer;
+            this._drawInfo$.indexCount = this._indexBuffer$.size / this._indexBuffer$.stride;
+            this._drawInfo$.firstIndex = 0;
         } else {
-            const vertBuff = this._vertexBuffers[0];
-            this._drawInfo.vertexCount = vertBuff.size / vertBuff.stride;
-            this._drawInfo.firstVertex = 0;
-            this._drawInfo.vertexOffset = 0;
+            const vertBuff = this._vertexBuffers$[0];
+            this._drawInfo$.vertexCount = vertBuff.size / vertBuff.stride;
+            this._drawInfo$.firstVertex = 0;
+            this._drawInfo$.vertexOffset = 0;
         }
-        this._drawInfo.instanceCount = 0;
-        this._drawInfo.firstInstance = 0;
+        this._drawInfo$.instanceCount = 0;
+        this._drawInfo$.firstInstance = 0;
 
-        this._indirectBuffer = info.indirectBuffer || null;
+        this._indirectBuffer$ = info.indirectBuffer || null;
 
         const gpuVertexBuffers: IWebGLGPUBuffer[] = new Array<IWebGLGPUBuffer>(info.vertexBuffers.length);
         for (let i = 0; i < info.vertexBuffers.length; ++i) {
@@ -79,7 +79,7 @@ export class WebGLInputAssembler extends InputAssembler {
         if (info.indexBuffer) {
             gpuIndexBuffer = (info.indexBuffer as WebGLBuffer).gpuBuffer;
             if (gpuIndexBuffer) {
-                switch (gpuIndexBuffer.stride) {
+                switch (gpuIndexBuffer.stride$) {
                 case 1: glIndexType = 0x1401; break; // WebGLRenderingContext.UNSIGNED_BYTE
                 case 2: glIndexType = 0x1403; break; // WebGLRenderingContext.UNSIGNED_SHORT
                 case 4: glIndexType = 0x1405; break; // WebGLRenderingContext.UNSIGNED_INT
@@ -95,25 +95,25 @@ export class WebGLInputAssembler extends InputAssembler {
             gpuIndirectBuffer = (info.indirectBuffer as WebGLBuffer).gpuBuffer;
         }
 
-        this._gpuInputAssembler = {
-            attributes: info.attributes,
-            gpuVertexBuffers,
-            gpuIndexBuffer,
-            gpuIndirectBuffer,
+        this._gpuInputAssembler$ = {
+            attributes$: info.attributes,
+            gpuVertexBuffers$: gpuVertexBuffers,
+            gpuIndexBuffer$: gpuIndexBuffer,
+            gpuIndirectBuffer$: gpuIndirectBuffer,
 
-            glAttribs: [],
-            glIndexType,
-            glVAOs: new Map<WebGLProgram, WebGLVertexArrayObjectOES>(),
+            glAttribs$: [],
+            glIndexType$: glIndexType,
+            glVAOs$: new Map<WebGLProgram, WebGLVertexArrayObjectOES>(),
         };
 
-        WebGLCmdFuncCreateInputAssember(WebGLDeviceManager.instance, this._gpuInputAssembler);
+        WebGLCmdFuncCreateInputAssember(WebGLDeviceManager.instance, this._gpuInputAssembler$);
     }
 
     public destroy (): void {
         const device = WebGLDeviceManager.instance;
-        if (this._gpuInputAssembler && device.extensions.useVAO) {
-            WebGLCmdFuncDestroyInputAssembler(device, this._gpuInputAssembler);
+        if (this._gpuInputAssembler$ && device.extensions.useVAO$) {
+            WebGLCmdFuncDestroyInputAssembler(device, this._gpuInputAssembler$);
         }
-        this._gpuInputAssembler = null;
+        this._gpuInputAssembler$ = null;
     }
 }
diff --git a/cocos/gfx/webgl/webgl-pipeline-layout.ts b/cocos/gfx/webgl/webgl-pipeline-layout.ts
index 6d96eb7450c..907edaf787f 100644
--- a/cocos/gfx/webgl/webgl-pipeline-layout.ts
+++ b/cocos/gfx/webgl/webgl-pipeline-layout.ts
@@ -28,25 +28,25 @@ import { WebGLDescriptorSetLayout } from './webgl-descriptor-set-layout';
 import { PipelineLayoutInfo } from '../base/define';
 
 export class WebGLPipelineLayout extends PipelineLayout {
-    get gpuPipelineLayout (): IWebGLGPUPipelineLayout { return this._gpuPipelineLayout!; }
+    get gpuPipelineLayout (): IWebGLGPUPipelineLayout { return this._gpuPipelineLayout$!; }
 
-    private _gpuPipelineLayout: IWebGLGPUPipelineLayout | null = null;
+    private _gpuPipelineLayout$: IWebGLGPUPipelineLayout | null = null;
     constructor () {
         super();
     }
 
     public initialize (info: Readonly<PipelineLayoutInfo>): void {
-        Array.prototype.push.apply(this._setLayouts, info.setLayouts);
+        Array.prototype.push.apply(this._setLayouts$, info.setLayouts);
 
         const dynamicOffsetIndices: number[][] = [];
 
         const gpuSetLayouts: IWebGLGPUDescriptorSetLayout[] = [];
         let dynamicOffsetCount = 0;
         const dynamicOffsetOffsets: number[] = [];
-        for (let i = 0; i < this._setLayouts.length; i++) {
-            const setLayout = this._setLayouts[i] as WebGLDescriptorSetLayout;
-            const dynamicBindings = setLayout.gpuDescriptorSetLayout.dynamicBindings;
-            const indices = Array(setLayout.bindingIndices.length).fill(-1);
+        for (let i = 0; i < this._setLayouts$.length; i++) {
+            const setLayout = this._setLayouts$[i] as WebGLDescriptorSetLayout;
+            const dynamicBindings = setLayout.gpuDescriptorSetLayout.dynamicBindings$;
+            const indices = Array<number>(setLayout.bindingIndices.length).fill(-1);
             for (let j = 0; j < dynamicBindings.length; j++) {
                 const binding = dynamicBindings[j];
                 if (indices[binding] < 0) indices[binding] = dynamicOffsetCount + j;
@@ -58,15 +58,15 @@ export class WebGLPipelineLayout extends PipelineLayout {
             dynamicOffsetCount += dynamicBindings.length;
         }
 
-        this._gpuPipelineLayout = {
-            gpuSetLayouts,
-            dynamicOffsetIndices,
-            dynamicOffsetCount,
-            dynamicOffsetOffsets,
+        this._gpuPipelineLayout$ = {
+            gpuSetLayouts$: gpuSetLayouts,
+            dynamicOffsetIndices$: dynamicOffsetIndices,
+            dynamicOffsetCount$: dynamicOffsetCount,
+            dynamicOffsetOffsets$: dynamicOffsetOffsets,
         };
     }
 
     public destroy (): void {
-        this._setLayouts.length = 0;
+        this._setLayouts$.length = 0;
     }
 }
diff --git a/cocos/gfx/webgl/webgl-pipeline-state.ts b/cocos/gfx/webgl/webgl-pipeline-state.ts
index 1b7d6ae2244..09379b698e3 100644
--- a/cocos/gfx/webgl/webgl-pipeline-state.ts
+++ b/cocos/gfx/webgl/webgl-pipeline-state.ts
@@ -48,20 +48,20 @@ const WebGLPrimitives: GLenum[] = [
 
 export class WebGLPipelineState extends PipelineState {
     get gpuPipelineState (): IWebGLGPUPipelineState {
-        return  this._gpuPipelineState!;
+        return  this._gpuPipelineState$!;
     }
 
-    private _gpuPipelineState: IWebGLGPUPipelineState | null = null;
+    private _gpuPipelineState$: IWebGLGPUPipelineState | null = null;
 
     constructor () {
         super();
     }
 
     public initialize (info: Readonly<PipelineStateInfo>): void {
-        this._primitive = info.primitive;
-        this._shader = info.shader;
-        this._pipelineLayout = info.pipelineLayout;
-        const bs = this._bs;
+        this._primitive$ = info.primitive;
+        this._shader$ = info.shader;
+        this._pipelineLayout$ = info.pipelineLayout;
+        const bs = this._bs$;
         if (info.blendState) {
             const bsInfo = info.blendState;
             const { targets } = bsInfo;
@@ -75,32 +75,32 @@ export class WebGLPipelineState extends PipelineState {
             if (bsInfo.isIndepend !== undefined) { bs.isIndepend = bsInfo.isIndepend; }
             if (bsInfo.blendColor !== undefined) { bs.blendColor = bsInfo.blendColor; }
         }
-        Object.assign(this._rs, info.rasterizerState);
-        Object.assign(this._dss, info.depthStencilState);
-        this._is = info.inputState;
-        this._renderPass = info.renderPass;
-        this._dynamicStates = info.dynamicStates;
+        Object.assign(this._rs$, info.rasterizerState);
+        Object.assign(this._dss$, info.depthStencilState);
+        this._is$ = info.inputState;
+        this._renderPass$ = info.renderPass;
+        this._dynamicStates$ = info.dynamicStates;
 
         const dynamicStates: DynamicStateFlagBit[] = [];
         for (let i = 0; i < 31; i++) {
-            if (this._dynamicStates & (1 << i)) {
+            if (this._dynamicStates$ & (1 << i)) {
                 dynamicStates.push(1 << i);
             }
         }
 
-        this._gpuPipelineState = {
-            glPrimitive: WebGLPrimitives[info.primitive],
-            gpuShader: (info.shader as WebGLShader).gpuShader,
-            gpuPipelineLayout: (info.pipelineLayout as WebGLPipelineLayout).gpuPipelineLayout,
-            rs: info.rasterizerState,
-            dss: info.depthStencilState,
-            bs: info.blendState,
-            gpuRenderPass: (info.renderPass as WebGLRenderPass).gpuRenderPass,
-            dynamicStates,
+        this._gpuPipelineState$ = {
+            glPrimitive$: WebGLPrimitives[info.primitive],
+            gpuShader$: (info.shader as WebGLShader).gpuShader,
+            gpuPipelineLayout$: (info.pipelineLayout as WebGLPipelineLayout).gpuPipelineLayout,
+            rs$: info.rasterizerState,
+            dss$: info.depthStencilState,
+            bs$: info.blendState,
+            gpuRenderPass$: (info.renderPass as WebGLRenderPass).gpuRenderPass,
+            dynamicStates$: dynamicStates,
         };
     }
 
     public destroy (): void {
-        this._gpuPipelineState = null;
+        this._gpuPipelineState$ = null;
     }
 }
diff --git a/cocos/gfx/webgl/webgl-primary-command-buffer.ts b/cocos/gfx/webgl/webgl-primary-command-buffer.ts
index 9193464667e..11ee247d3da 100644
--- a/cocos/gfx/webgl/webgl-primary-command-buffer.ts
+++ b/cocos/gfx/webgl/webgl-primary-command-buffer.ts
@@ -32,13 +32,13 @@ import { WebGLBuffer } from './webgl-buffer';
 import { WebGLCommandBuffer } from './webgl-command-buffer';
 import {
     WebGLCmdFuncBeginRenderPass, WebGLCmdFuncBindStates, WebGLCmdFuncBlitTexture, WebGLCmdFuncCopyBuffersToTexture,
-    WebGLCmdFuncDraw, WebGLCmdFuncExecuteCmds, WebGLCmdFuncUpdateBuffer } from './webgl-commands';
+    WebGLCmdFuncDraw, WebGLCmdFuncUpdateBuffer } from './webgl-commands';
 import { WebGLFramebuffer } from './webgl-framebuffer';
 import { WebGLTexture } from './webgl-texture';
 import { RenderPass } from '../base/render-pass';
 import { WebGLRenderPass } from './webgl-render-pass';
 import { WebGLDeviceManager } from './webgl-define';
-import { errorID } from '../../core/platform/debug';
+import { error, errorID } from '../../core/platform/debug';
 
 export class WebGLPrimaryCommandBuffer extends WebGLCommandBuffer {
     public beginRenderPass (
@@ -58,12 +58,12 @@ export class WebGLPrimaryCommandBuffer extends WebGLCommandBuffer {
             clearDepth,
             clearStencil,
         );
-        this._isInRenderPass = true;
+        this._isInRenderPass$ = true;
     }
 
     public draw (infoOrAssembler: DrawInfo | InputAssembler): void {
-        if (this._isInRenderPass) {
-            if (this._isStateInvalied) {
+        if (this._isInRenderPass$) {
+            if (this._isStateInvalied$) {
                 this.bindStates();
             }
 
@@ -71,19 +71,19 @@ export class WebGLPrimaryCommandBuffer extends WebGLCommandBuffer {
 
             WebGLCmdFuncDraw(WebGLDeviceManager.instance, info);
 
-            ++this._numDrawCalls;
-            this._numInstances += info.instanceCount;
+            ++this._numDrawCalls$;
+            this._numInstances$ += info.instanceCount;
             const indexCount = info.indexCount || info.vertexCount;
-            if (this._curGPUPipelineState) {
-                const glPrimitive = this._curGPUPipelineState.glPrimitive;
+            if (this._curGPUPipelineState$) {
+                const glPrimitive = this._curGPUPipelineState$.glPrimitive$;
                 switch (glPrimitive) {
                 case 0x0004: { // WebGLRenderingContext.TRIANGLES
-                    this._numTris += indexCount / 3 * Math.max(info.instanceCount, 1);
+                    this._numTris$ += indexCount / 3 * Math.max(info.instanceCount, 1);
                     break;
                 }
                 case 0x0005: // WebGLRenderingContext.TRIANGLE_STRIP
                 case 0x0006: { // WebGLRenderingContext.TRIANGLE_FAN
-                    this._numTris += (indexCount - 2) * Math.max(info.instanceCount, 1);
+                    this._numTris$ += (indexCount - 2) * Math.max(info.instanceCount, 1);
                     break;
                 }
                 default:
@@ -97,37 +97,37 @@ export class WebGLPrimaryCommandBuffer extends WebGLCommandBuffer {
     public setViewport (viewport: Readonly<Viewport>): void {
         const { stateCache: cache, gl } = WebGLDeviceManager.instance;
 
-        if (cache.viewport.left !== viewport.left
-            || cache.viewport.top !== viewport.top
-            || cache.viewport.width !== viewport.width
-            || cache.viewport.height !== viewport.height) {
+        if (cache.viewport$.left !== viewport.left
+            || cache.viewport$.top !== viewport.top
+            || cache.viewport$.width !== viewport.width
+            || cache.viewport$.height !== viewport.height) {
             gl.viewport(viewport.left, viewport.top, viewport.width, viewport.height);
 
-            cache.viewport.left = viewport.left;
-            cache.viewport.top = viewport.top;
-            cache.viewport.width = viewport.width;
-            cache.viewport.height = viewport.height;
+            cache.viewport$.left = viewport.left;
+            cache.viewport$.top = viewport.top;
+            cache.viewport$.width = viewport.width;
+            cache.viewport$.height = viewport.height;
         }
     }
 
     public setScissor (scissor: Readonly<Rect>): void {
         const { stateCache: cache, gl } = WebGLDeviceManager.instance;
 
-        if (cache.scissorRect.x !== scissor.x
-            || cache.scissorRect.y !== scissor.y
-            || cache.scissorRect.width !== scissor.width
-            || cache.scissorRect.height !== scissor.height) {
+        if (cache.scissorRect$.x !== scissor.x
+            || cache.scissorRect$.y !== scissor.y
+            || cache.scissorRect$.width !== scissor.width
+            || cache.scissorRect$.height !== scissor.height) {
             gl.scissor(scissor.x, scissor.y, scissor.width, scissor.height);
 
-            cache.scissorRect.x = scissor.x;
-            cache.scissorRect.y = scissor.y;
-            cache.scissorRect.width = scissor.width;
-            cache.scissorRect.height = scissor.height;
+            cache.scissorRect$.x = scissor.x;
+            cache.scissorRect$.y = scissor.y;
+            cache.scissorRect$.width = scissor.width;
+            cache.scissorRect$.height = scissor.height;
         }
     }
 
     public updateBuffer (buffer: Buffer, data: Readonly<BufferSource>, size?: number): void {
-        if (!this._isInRenderPass) {
+        if (!this._isInRenderPass$) {
             const gpuBuffer = (buffer as WebGLBuffer).gpuBuffer;
             if (gpuBuffer) {
                 let buffSize: number;
@@ -147,7 +147,7 @@ export class WebGLPrimaryCommandBuffer extends WebGLCommandBuffer {
     }
 
     public copyBuffersToTexture (buffers: Readonly<ArrayBufferView[]>, texture: Texture, regions: Readonly<BufferTextureCopy[]>): void {
-        if (!this._isInRenderPass) {
+        if (!this._isInRenderPass$) {
             const gpuTexture = (texture as WebGLTexture).gpuTexture;
             if (gpuTexture) {
                 WebGLCmdFuncCopyBuffersToTexture(WebGLDeviceManager.instance, buffers, gpuTexture, regions);
@@ -158,26 +158,19 @@ export class WebGLPrimaryCommandBuffer extends WebGLCommandBuffer {
     }
 
     public execute (cmdBuffs: Readonly<CommandBuffer[]>, count: number): void {
-        for (let i = 0; i < count; ++i) {
-            // actually they are secondary buffers, the cast here is only for type checking
-            const webGLCmdBuff = cmdBuffs[i] as WebGLPrimaryCommandBuffer;
-            WebGLCmdFuncExecuteCmds(WebGLDeviceManager.instance, webGLCmdBuff.cmdPackage);
-            this._numDrawCalls += webGLCmdBuff._numDrawCalls;
-            this._numInstances += webGLCmdBuff._numInstances;
-            this._numTris += webGLCmdBuff._numTris;
-        }
+        errorID(16402);
     }
 
     protected bindStates (): void {
         WebGLCmdFuncBindStates(
             WebGLDeviceManager.instance,
-            this._curGPUPipelineState,
-            this._curGPUInputAssembler,
-            this._curGPUDescriptorSets,
-            this._curDynamicOffsets,
-            this._curDynamicStates,
+            this._curGPUPipelineState$,
+            this._curGPUInputAssembler$,
+            this._curGPUDescriptorSets$,
+            this._curDynamicOffsets$,
+            this._curDynamicStates$,
         );
-        this._isStateInvalied = false;
+        this._isStateInvalied$ = false;
     }
 
     public blitTexture (srcTexture: Readonly<Texture>, dstTexture: Texture, regions: Readonly<TextureBlit []>, filter: Filter): void {
diff --git a/cocos/gfx/webgl/webgl-queue.ts b/cocos/gfx/webgl/webgl-queue.ts
index d6c8c4021ad..9a3a99bac5d 100644
--- a/cocos/gfx/webgl/webgl-queue.ts
+++ b/cocos/gfx/webgl/webgl-queue.ts
@@ -27,16 +27,16 @@ import { CommandBuffer } from '../base/command-buffer';
 import { Queue } from '../base/queue';
 
 export class WebGLQueue extends Queue {
-    public numDrawCalls = 0;
-    public numInstances = 0;
-    public numTris = 0;
+    public numDrawCalls$ = 0;
+    public numInstances$ = 0;
+    public numTris$ = 0;
 
     constructor () {
         super();
     }
 
     public initialize (info: Readonly<QueueInfo>): void {
-        this._type = info.type;
+        this._type$ = info.type;
     }
 
     public destroy (): void {
@@ -47,15 +47,15 @@ export class WebGLQueue extends Queue {
         for (let i = 0; i < len; i++) {
             const cmdBuff = cmdBuffs[i];
             // WebGLCmdFuncExecuteCmds( this._device as WebGLDevice, (cmdBuff as WebGLCommandBuffer).cmdPackage); // opted out
-            this.numDrawCalls += cmdBuff.numDrawCalls;
-            this.numInstances += cmdBuff.numInstances;
-            this.numTris += cmdBuff.numTris;
+            this.numDrawCalls$ += cmdBuff.numDrawCalls;
+            this.numInstances$ += cmdBuff.numInstances;
+            this.numTris$ += cmdBuff.numTris;
         }
     }
 
     public clear (): void {
-        this.numDrawCalls = 0;
-        this.numInstances = 0;
-        this.numTris = 0;
+        this.numDrawCalls$ = 0;
+        this.numInstances$ = 0;
+        this.numTris$ = 0;
     }
 }
diff --git a/cocos/gfx/webgl/webgl-render-pass.ts b/cocos/gfx/webgl/webgl-render-pass.ts
index bfc72257708..1374871d362 100644
--- a/cocos/gfx/webgl/webgl-render-pass.ts
+++ b/cocos/gfx/webgl/webgl-render-pass.ts
@@ -28,29 +28,29 @@ import { IWebGLGPURenderPass } from './webgl-gpu-objects';
 
 export class WebGLRenderPass extends RenderPass {
     public get gpuRenderPass (): IWebGLGPURenderPass {
-        return  this._gpuRenderPass!;
+        return  this._gpuRenderPass$!;
     }
 
-    private _gpuRenderPass: IWebGLGPURenderPass | null = null;
+    private _gpuRenderPass$: IWebGLGPURenderPass | null = null;
 
     constructor () {
         super();
     }
 
     public initialize (info: Readonly<RenderPassInfo>): void {
-        this._colorInfos = info.colorAttachments;
-        this._depthStencilInfo = info.depthStencilAttachment;
-        this._subpasses = info.subpasses;
+        this._colorInfos$ = info.colorAttachments;
+        this._depthStencilInfo$ = info.depthStencilAttachment;
+        this._subpasses$ = info.subpasses;
 
-        this._gpuRenderPass = {
-            colorAttachments: this._colorInfos,
-            depthStencilAttachment: this._depthStencilInfo,
+        this._gpuRenderPass$ = {
+            colorAttachments$: this._colorInfos$,
+            depthStencilAttachment$: this._depthStencilInfo$,
         };
 
-        this._hash = this.computeHash();
+        this._hash$ = this.computeHash();
     }
 
     public destroy (): void {
-        this._gpuRenderPass = null;
+        this._gpuRenderPass$ = null;
     }
 }
diff --git a/cocos/gfx/webgl/webgl-shader.ts b/cocos/gfx/webgl/webgl-shader.ts
index bd32e50361d..5128bdaad18 100644
--- a/cocos/gfx/webgl/webgl-shader.ts
+++ b/cocos/gfx/webgl/webgl-shader.ts
@@ -30,53 +30,53 @@ import { IWebGLGPUShader, IWebGLGPUShaderStage } from './webgl-gpu-objects';
 
 export class WebGLShader extends Shader {
     get gpuShader (): IWebGLGPUShader {
-        if (this._gpuShader!.glProgram === null) {
-            WebGLCmdFuncCreateShader(WebGLDeviceManager.instance, this._gpuShader!);
+        if (this._gpuShader$!.glProgram$ === null) {
+            WebGLCmdFuncCreateShader(WebGLDeviceManager.instance, this._gpuShader$!);
         }
-        return this._gpuShader!;
+        return this._gpuShader$!;
     }
 
-    private _gpuShader: IWebGLGPUShader | null = null;
+    private _gpuShader$: IWebGLGPUShader | null = null;
 
     constructor () {
         super();
     }
 
     public initialize (info: Readonly<ShaderInfo>): void {
-        this._name = info.name;
-        this._stages = info.stages;
-        this._attributes = info.attributes;
-        this._blocks = info.blocks;
-        this._samplers = info.samplers;
+        this._name$ = info.name;
+        this._stages$ = info.stages;
+        this._attributes$ = info.attributes;
+        this._blocks$ = info.blocks;
+        this._samplers$ = info.samplers;
 
-        this._gpuShader = {
-            name: info.name,
-            blocks: info.blocks.slice(),
-            samplerTextures: info.samplerTextures.slice(),
-            subpassInputs: info.subpassInputs.slice(),
+        this._gpuShader$ = {
+            name$: info.name,
+            blocks$: info.blocks.slice(),
+            samplerTextures$: info.samplerTextures.slice(),
+            subpassInputs$: info.subpassInputs.slice(),
 
-            gpuStages: new Array<IWebGLGPUShaderStage>(info.stages.length),
-            glProgram: null,
-            glInputs: [],
-            glUniforms: [],
-            glBlocks: [],
-            glSamplerTextures: [],
+            gpuStages$: new Array<IWebGLGPUShaderStage>(info.stages.length),
+            glProgram$: null,
+            glInputs$: [],
+            glUniforms$: [],
+            glBlocks$: [],
+            glSamplerTextures$: [],
         };
 
         for (let i = 0; i < info.stages.length; ++i) {
             const stage = info.stages[i];
-            this._gpuShader.gpuStages[i] = {
-                type: stage.stage,
-                source: stage.source,
-                glShader: null,
+            this._gpuShader$.gpuStages$[i] = {
+                type$: stage.stage,
+                source$: stage.source,
+                glShader$: null,
             };
         }
     }
 
     public destroy (): void {
-        if (this._gpuShader) {
-            WebGLCmdFuncDestroyShader(WebGLDeviceManager.instance, this._gpuShader);
-            this._gpuShader = null;
+        if (this._gpuShader$) {
+            WebGLCmdFuncDestroyShader(WebGLDeviceManager.instance, this._gpuShader$);
+            this._gpuShader$ = null;
         }
     }
 }
diff --git a/cocos/gfx/webgl/webgl-state-cache.ts b/cocos/gfx/webgl/webgl-state-cache.ts
index 7114526a19d..c20fd03b34a 100644
--- a/cocos/gfx/webgl/webgl-state-cache.ts
+++ b/cocos/gfx/webgl/webgl-state-cache.ts
@@ -26,34 +26,34 @@ import { Rect, Viewport } from '../base/define';
 import { BlendState, DepthStencilState, RasterizerState } from '../base/pipeline-state';
 
 export interface IWebGLTexUnit {
-    glTexture: WebGLTexture | null;
+    glTexture$: WebGLTexture | null;
 }
 
 export class WebGLStateCache {
-    public glArrayBuffer: WebGLBuffer | null = null;
-    public glElementArrayBuffer: WebGLBuffer | null = null;
-    public glVAO: WebGLVertexArrayObjectOES | null = null;
-    public texUnit = 0;
-    public glTexUnits: IWebGLTexUnit[] = [];
-    public glRenderbuffer: WebGLRenderbuffer | null = null;
-    public glFramebuffer: WebGLFramebuffer | null = null;
-    public viewport = new Viewport();
-    public scissorRect = new Rect(0, 0, 0, 0);
-    public rs = new RasterizerState();
-    public dss = new DepthStencilState();
-    public bs = new BlendState();
-    public glProgram: WebGLProgram | null = null;
-    public glEnabledAttribLocs: boolean[] = [];
-    public glCurrentAttribLocs: boolean[] = [];
-    public texUnitCacheMap: Record<string, number> = {};
+    public glArrayBuffer$: WebGLBuffer | null = null;
+    public glElementArrayBuffer$: WebGLBuffer | null = null;
+    public glVAO$: WebGLVertexArrayObjectOES | null = null;
+    public texUnit$ = 0;
+    public glTexUnits$: IWebGLTexUnit[] = [];
+    public glRenderbuffer$: WebGLRenderbuffer | null = null;
+    public glFramebuffer$: WebGLFramebuffer | null = null;
+    public viewport$ = new Viewport();
+    public scissorRect$ = new Rect(0, 0, 0, 0);
+    public rs$ = new RasterizerState();
+    public dss$ = new DepthStencilState();
+    public bs$ = new BlendState();
+    public glProgram$: WebGLProgram | null = null;
+    public glEnabledAttribLocs$: boolean[] = [];
+    public glCurrentAttribLocs$: boolean[] = [];
+    public texUnitCacheMap$: Record<string, number> = {};
 
     initialize (texUnit: number, vertexAttributes: number): void {
-        for (let i = 0; i < texUnit; ++i) this.glTexUnits.push({ glTexture: null });
+        for (let i = 0; i < texUnit; ++i) this.glTexUnits$.push({ glTexture$: null });
 
-        this.glEnabledAttribLocs.length = vertexAttributes;
-        this.glEnabledAttribLocs.fill(false);
+        this.glEnabledAttribLocs$.length = vertexAttributes;
+        this.glEnabledAttribLocs$.fill(false);
 
-        this.glCurrentAttribLocs.length = vertexAttributes;
-        this.glCurrentAttribLocs.fill(false);
+        this.glCurrentAttribLocs$.length = vertexAttributes;
+        this.glCurrentAttribLocs$.fill(false);
     }
 }
diff --git a/cocos/gfx/webgl/webgl-swapchain.ts b/cocos/gfx/webgl/webgl-swapchain.ts
index 4ecceb9cd5c..0dd4031a926 100644
--- a/cocos/gfx/webgl/webgl-swapchain.ts
+++ b/cocos/gfx/webgl/webgl-swapchain.ts
@@ -24,55 +24,56 @@
 
 import { ALIPAY, RUNTIME_BASED, BYTEDANCE, WECHAT, LINKSURE, QTT, COCOSPLAY, HUAWEI, EDITOR, VIVO, TAOBAO, TAOBAO_MINIGAME, WECHAT_MINI_PROGRAM } from 'internal:constants';
 import { systemInfo } from 'pal/system-info';
-import { WebGLCommandAllocator } from './webgl-command-allocator';
 import { WebGLStateCache } from './webgl-state-cache';
 import { WebGLTexture } from './webgl-texture';
 import { Format, TextureInfo, TextureFlagBit, TextureType, TextureUsageBit,
     BufferTextureCopy, SwapchainInfo, SurfaceTransform } from '../base/define';
 import { Swapchain } from '../base/swapchain';
 import { IWebGLExtensions, WebGLDeviceManager } from './webgl-define';
-import { macro, warnID, warn, debug } from '../../core';
 import { BrowserType, OS } from '../../../pal/system-info/enum-type';
 import { IWebGLBlitManager } from './webgl-gpu-objects';
+import { WebGLConstants } from '../gl-constants';
+import { macro } from '../../core/platform/macro';
+import { debug, warn, warnID } from '../../core/platform/debug';
 
 const eventWebGLContextLost = 'webglcontextlost';
 
 function initStates (gl: WebGLRenderingContext): void {
-    gl.activeTexture(gl.TEXTURE0);
-    gl.pixelStorei(gl.PACK_ALIGNMENT, 1);
-    gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
-    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+    gl.activeTexture(WebGLConstants.TEXTURE0);
+    gl.pixelStorei(WebGLConstants.PACK_ALIGNMENT, 1);
+    gl.pixelStorei(WebGLConstants.UNPACK_ALIGNMENT, 1);
+    gl.pixelStorei(WebGLConstants.UNPACK_FLIP_Y_WEBGL, false);
 
-    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    gl.bindFramebuffer(WebGLConstants.FRAMEBUFFER, null);
 
     // rasterizer state
-    gl.enable(gl.SCISSOR_TEST);
-    gl.enable(gl.CULL_FACE);
-    gl.cullFace(gl.BACK);
-    gl.frontFace(gl.CCW);
-    gl.disable(gl.POLYGON_OFFSET_FILL);
+    gl.enable(WebGLConstants.SCISSOR_TEST);
+    gl.enable(WebGLConstants.CULL_FACE);
+    gl.cullFace(WebGLConstants.BACK);
+    gl.frontFace(WebGLConstants.CCW);
+    gl.disable(WebGLConstants.POLYGON_OFFSET_FILL);
     gl.polygonOffset(0.0, 0.0);
 
     // depth stencil state
-    gl.enable(gl.DEPTH_TEST);
+    gl.enable(WebGLConstants.DEPTH_TEST);
     gl.depthMask(true);
-    gl.depthFunc(gl.LESS);
+    gl.depthFunc(WebGLConstants.LESS);
     gl.depthRange(0.0, 1.0);
 
-    gl.stencilFuncSeparate(gl.FRONT, gl.ALWAYS, 1, 0xffff);
-    gl.stencilOpSeparate(gl.FRONT, gl.KEEP, gl.KEEP, gl.KEEP);
-    gl.stencilMaskSeparate(gl.FRONT, 0xffff);
-    gl.stencilFuncSeparate(gl.BACK, gl.ALWAYS, 1, 0xffff);
-    gl.stencilOpSeparate(gl.BACK, gl.KEEP, gl.KEEP, gl.KEEP);
-    gl.stencilMaskSeparate(gl.BACK, 0xffff);
+    gl.stencilFuncSeparate(WebGLConstants.FRONT, WebGLConstants.ALWAYS, 1, 0xffff);
+    gl.stencilOpSeparate(WebGLConstants.FRONT, WebGLConstants.KEEP, WebGLConstants.KEEP, WebGLConstants.KEEP);
+    gl.stencilMaskSeparate(WebGLConstants.FRONT, 0xffff);
+    gl.stencilFuncSeparate(WebGLConstants.BACK, WebGLConstants.ALWAYS, 1, 0xffff);
+    gl.stencilOpSeparate(WebGLConstants.BACK, WebGLConstants.KEEP, WebGLConstants.KEEP, WebGLConstants.KEEP);
+    gl.stencilMaskSeparate(WebGLConstants.BACK, 0xffff);
 
-    gl.disable(gl.STENCIL_TEST);
+    gl.disable(WebGLConstants.STENCIL_TEST);
 
     // blend state
-    gl.disable(gl.SAMPLE_ALPHA_TO_COVERAGE);
-    gl.disable(gl.BLEND);
-    gl.blendEquationSeparate(gl.FUNC_ADD, gl.FUNC_ADD);
-    gl.blendFuncSeparate(gl.ONE, gl.ZERO, gl.ONE, gl.ZERO);
+    gl.disable(WebGLConstants.SAMPLE_ALPHA_TO_COVERAGE);
+    gl.disable(WebGLConstants.BLEND);
+    gl.blendEquationSeparate(WebGLConstants.FUNC_ADD, WebGLConstants.FUNC_ADD);
+    gl.blendFuncSeparate(WebGLConstants.ONE, WebGLConstants.ZERO, WebGLConstants.ONE, WebGLConstants.ZERO);
     gl.colorMask(true, true, true, true);
     gl.blendColor(0.0, 0.0, 0.0, 0.0);
 }
@@ -90,37 +91,37 @@ function getExtension (gl: WebGLRenderingContext, ext: string): any {
 
 export function getExtensions (gl: WebGLRenderingContext): IWebGLExtensions {
     const res: IWebGLExtensions = {
-        EXT_texture_filter_anisotropic: getExtension(gl, 'EXT_texture_filter_anisotropic'),
-        EXT_blend_minmax: getExtension(gl, 'EXT_blend_minmax'),
-        EXT_frag_depth: getExtension(gl, 'EXT_frag_depth'),
-        EXT_shader_texture_lod: getExtension(gl, 'EXT_shader_texture_lod'),
-        EXT_sRGB: getExtension(gl, 'EXT_sRGB'),
-        OES_vertex_array_object: getExtension(gl, 'OES_vertex_array_object'),
-        EXT_color_buffer_half_float: getExtension(gl, 'EXT_color_buffer_half_float'),
-        WEBGL_color_buffer_float: getExtension(gl, 'WEBGL_color_buffer_float'),
-        WEBGL_compressed_texture_etc1: getExtension(gl, 'WEBGL_compressed_texture_etc1'),
-        WEBGL_compressed_texture_etc: getExtension(gl, 'WEBGL_compressed_texture_etc'),
-        WEBGL_compressed_texture_pvrtc: getExtension(gl, 'WEBGL_compressed_texture_pvrtc'),
-        WEBGL_compressed_texture_s3tc: getExtension(gl, 'WEBGL_compressed_texture_s3tc'),
-        WEBGL_compressed_texture_s3tc_srgb: getExtension(gl, 'WEBGL_compressed_texture_s3tc_srgb'),
-        WEBGL_debug_shaders: getExtension(gl, 'WEBGL_debug_shaders'),
-        WEBGL_draw_buffers: getExtension(gl, 'WEBGL_draw_buffers'),
-        WEBGL_lose_context: getExtension(gl, 'WEBGL_lose_context'),
-        WEBGL_depth_texture: getExtension(gl, 'WEBGL_depth_texture'),
-        OES_texture_half_float: getExtension(gl, 'OES_texture_half_float'),
-        OES_texture_half_float_linear: getExtension(gl, 'OES_texture_half_float_linear'),
-        OES_texture_float: getExtension(gl, 'OES_texture_float'),
-        OES_texture_float_linear: getExtension(gl, 'OES_texture_float_linear'),
-        OES_standard_derivatives: getExtension(gl, 'OES_standard_derivatives'),
-        OES_element_index_uint: getExtension(gl, 'OES_element_index_uint'),
-        ANGLE_instanced_arrays: getExtension(gl, 'ANGLE_instanced_arrays'),
-        WEBGL_debug_renderer_info: getExtension(gl, 'WEBGL_debug_renderer_info'),
-        WEBGL_multi_draw: null,
-        WEBGL_compressed_texture_astc: null,
-        destroyShadersImmediately: true,
-        noCompressedTexSubImage2D: false,
-        isLocationActive: (glLoc: unknown): glLoc is WebGLUniformLocation => !!glLoc,
-        useVAO: false,
+        EXT_texture_filter_anisotropic$: getExtension(gl, 'EXT_texture_filter_anisotropic'),
+        EXT_blend_minmax$: getExtension(gl, 'EXT_blend_minmax'),
+        EXT_frag_depth$: getExtension(gl, 'EXT_frag_depth'),
+        EXT_shader_texture_lod$: getExtension(gl, 'EXT_shader_texture_lod'),
+        EXT_sRGB$: getExtension(gl, 'EXT_sRGB'),
+        OES_vertex_array_object$: getExtension(gl, 'OES_vertex_array_object'),
+        EXT_color_buffer_half_float$: getExtension(gl, 'EXT_color_buffer_half_float'),
+        WEBGL_color_buffer_float$: getExtension(gl, 'WEBGL_color_buffer_float'),
+        WEBGL_compressed_texture_etc1$: getExtension(gl, 'WEBGL_compressed_texture_etc1'),
+        WEBGL_compressed_texture_etc$: getExtension(gl, 'WEBGL_compressed_texture_etc'),
+        WEBGL_compressed_texture_pvrtc$: getExtension(gl, 'WEBGL_compressed_texture_pvrtc'),
+        WEBGL_compressed_texture_s3tc$: getExtension(gl, 'WEBGL_compressed_texture_s3tc'),
+        WEBGL_compressed_texture_s3tc_srgb$: getExtension(gl, 'WEBGL_compressed_texture_s3tc_srgb'),
+        WEBGL_debug_shaders$: getExtension(gl, 'WEBGL_debug_shaders'),
+        WEBGL_draw_buffers$: getExtension(gl, 'WEBGL_draw_buffers'),
+        WEBGL_lose_context$: getExtension(gl, 'WEBGL_lose_context'),
+        WEBGL_depth_texture$: getExtension(gl, 'WEBGL_depth_texture'),
+        OES_texture_half_float$: getExtension(gl, 'OES_texture_half_float'),
+        OES_texture_half_float_linear$: getExtension(gl, 'OES_texture_half_float_linear'),
+        OES_texture_float$: getExtension(gl, 'OES_texture_float'),
+        OES_texture_float_linear$: getExtension(gl, 'OES_texture_float_linear'),
+        OES_standard_derivatives$: getExtension(gl, 'OES_standard_derivatives'),
+        OES_element_index_uint$: getExtension(gl, 'OES_element_index_uint'),
+        ANGLE_instanced_arrays$: getExtension(gl, 'ANGLE_instanced_arrays'),
+        WEBGL_debug_renderer_info$: getExtension(gl, 'WEBGL_debug_renderer_info'),
+        WEBGL_multi_draw$: null,
+        WEBGL_compressed_texture_astc$: null,
+        destroyShadersImmediately$: true,
+        noCompressedTexSubImage2D$: false,
+        isLocationActive$: (glLoc: unknown): glLoc is WebGLUniformLocation => !!glLoc,
+        useVAO$: false,
     };
 
     // platform-specific extension hacks
@@ -128,65 +129,65 @@ export function getExtensions (gl: WebGLRenderingContext): IWebGLExtensions {
     {
         // iOS 14 browsers crash on getExtension('WEBGL_compressed_texture_astc')
         if (systemInfo.os !== OS.IOS || systemInfo.osMainVersion !== 14 || !systemInfo.isBrowser) {
-            res.WEBGL_compressed_texture_astc = getExtension(gl, 'WEBGL_compressed_texture_astc');
+            res.WEBGL_compressed_texture_astc$ = getExtension(gl, 'WEBGL_compressed_texture_astc');
         }
 
         // Mobile implementation seems to have performance issues
         if (systemInfo.os !== OS.ANDROID && systemInfo.os !== OS.IOS) {
-            res.WEBGL_multi_draw = getExtension(gl, 'WEBGL_multi_draw');
+            res.WEBGL_multi_draw$ = getExtension(gl, 'WEBGL_multi_draw');
         }
 
         // UC browser instancing implementation doesn't work
         if (systemInfo.browserType === BrowserType.UC) {
-            res.ANGLE_instanced_arrays = null;
+            res.ANGLE_instanced_arrays$ = null;
         }
 
         // bytedance ios depth texture implementation doesn't work
         if (BYTEDANCE && systemInfo.os === OS.IOS) {
-            res.WEBGL_depth_texture = null;
+            res.WEBGL_depth_texture$ = null;
         }
 
         if (RUNTIME_BASED) {
             // VAO implementations doesn't work well on some runtime platforms
             if (LINKSURE || QTT || COCOSPLAY || HUAWEI) {
-                res.OES_vertex_array_object = null;
+                res.OES_vertex_array_object$ = null;
             }
         }
 
         // some earlier version of iOS and android wechat implement gl.detachShader incorrectly
         if ((systemInfo.os === OS.IOS && systemInfo.osMainVersion <= 10)
             || ((WECHAT || WECHAT_MINI_PROGRAM) && systemInfo.os === OS.ANDROID)) {
-            res.destroyShadersImmediately = false;
+            res.destroyShadersImmediately$ = false;
         }
 
         // getUniformLocation has always been problematic because the
         // paradigm differs from GLES, and many platforms get it wrong [eyerolling]
         if (WECHAT || WECHAT_MINI_PROGRAM) {
             // wEcHaT just returns { id: -1 } for inactive names
-            res.isLocationActive = (glLoc: unknown): glLoc is WebGLUniformLocation => !!glLoc && (glLoc as { id: number }).id !== -1;
+            res.isLocationActive$ = (glLoc: unknown): glLoc is WebGLUniformLocation => !!glLoc && (glLoc as { id: number }).id !== -1;
         }
         if (ALIPAY) {
             // aLiPaY just returns the location number directly on actual devices, and WebGLUniformLocation objects in simulators
-            res.isLocationActive = (glLoc: unknown): glLoc is WebGLUniformLocation => !!glLoc && glLoc !== -1 || glLoc === 0;
+            res.isLocationActive$ = (glLoc: unknown): glLoc is WebGLUniformLocation => !!glLoc && glLoc !== -1 || glLoc === 0;
         }
 
         // compressedTexSubImage2D too
         if (WECHAT || WECHAT_MINI_PROGRAM) {
-            res.noCompressedTexSubImage2D = true;
+            res.noCompressedTexSubImage2D$ = true;
         }
 
         // HACK: on Taobao Android, some devices can't query texture float extension correctly, especially Huawei devices
         // the query interface returns null.
         if ((TAOBAO || TAOBAO_MINIGAME) && systemInfo.os === OS.ANDROID) {
-            res.OES_texture_half_float = { HALF_FLOAT_OES: 36193 };
-            res.OES_texture_half_float_linear = {};
-            res.OES_texture_float = {};
-            res.OES_texture_float_linear = {};
+            res.OES_texture_half_float$ = { HALF_FLOAT_OES: 36193 };
+            res.OES_texture_half_float_linear$ = {};
+            res.OES_texture_float$ = {};
+            res.OES_texture_float_linear$ = {};
         }
     }
 
-    if (res.OES_vertex_array_object) {
-        res.useVAO = true;
+    if (res.OES_vertex_array_object$) {
+        res.useVAO$ = true;
     }
 
     return res;
@@ -216,41 +217,38 @@ export function getContext (canvas: HTMLCanvasElement): WebGLRenderingContext |
 
 export class WebGLSwapchain extends Swapchain {
     get extensions (): IWebGLExtensions {
-        return this._extensions as IWebGLExtensions;
+        return this._extensions$ as IWebGLExtensions;
     }
 
     get blitManager (): IWebGLBlitManager {
-        return this._blitManager!;
+        return this._blitManager$!;
     }
 
-    public stateCache: WebGLStateCache = new WebGLStateCache();
-    public cmdAllocator: WebGLCommandAllocator = new WebGLCommandAllocator();
-    public nullTex2D: WebGLTexture = null!;
-    public nullTexCube: WebGLTexture = null!;
+    public stateCache$: WebGLStateCache = new WebGLStateCache();
+    public nullTex2D$: WebGLTexture = null!;
+    public nullTexCube$: WebGLTexture = null!;
 
-    private _canvas: HTMLCanvasElement | null = null;
-    private _webGLContextLostHandler: ((event: Event) => void) | null = null;
-    private _extensions: IWebGLExtensions | null = null;
-    private _blitManager: IWebGLBlitManager | null = null;
+    private _canvas$: HTMLCanvasElement | null = null;
+    private _webGLContextLostHandler$: ((event: Event) => void) | null = null;
+    private _extensions$: IWebGLExtensions | null = null;
+    private _blitManager$: IWebGLBlitManager | null = null;
 
     constructor () {
         super();
     }
 
     public initialize (info: Readonly<SwapchainInfo>): void {
-        this._canvas = info.windowHandle;
+        this._canvas$ = info.windowHandle;
 
-        this._webGLContextLostHandler = this._onWebGLContextLost.bind(this);
-        this._canvas.addEventListener(eventWebGLContextLost, this._onWebGLContextLost);
+        this._webGLContextLostHandler$ = this._onWebGLContextLost$.bind(this);
+        this._canvas$.addEventListener(eventWebGLContextLost, this._webGLContextLostHandler$);
 
-        const gl = WebGLDeviceManager.instance.gl;
+        const { instance } = WebGLDeviceManager;
+        const { gl, capabilities } = instance;
 
-        this.stateCache.initialize(
-            WebGLDeviceManager.instance.capabilities.maxTextureUnits,
-            WebGLDeviceManager.instance.capabilities.maxVertexAttributes,
-        );
+        this.stateCache$.initialize(capabilities.maxTextureUnits, capabilities.maxVertexAttributes);
 
-        this._extensions = getExtensions(gl);
+        this._extensions$ = getExtensions(gl);
 
         // init states
         initStates(gl);
@@ -258,8 +256,8 @@ export class WebGLSwapchain extends Swapchain {
         const colorFmt = Format.RGBA8;
         let depthStencilFmt = Format.DEPTH_STENCIL;
 
-        let depthBits = gl.getParameter(gl.DEPTH_BITS);
-        const stencilBits = gl.getParameter(gl.STENCIL_BITS);
+        let depthBits = gl.getParameter(WebGLConstants.DEPTH_BITS);
+        const stencilBits = gl.getParameter(WebGLConstants.STENCIL_BITS);
 
         if (ALIPAY) {
             depthBits = 24;
@@ -268,16 +266,16 @@ export class WebGLSwapchain extends Swapchain {
         if (depthBits && stencilBits) depthStencilFmt = Format.DEPTH_STENCIL;
         else if (depthBits) depthStencilFmt = Format.DEPTH;
 
-        this._colorTexture = new WebGLTexture();
-        this._colorTexture.initAsSwapchainTexture({
+        this._colorTexture$ = new WebGLTexture();
+        this._colorTexture$.initAsSwapchainTexture({
             swapchain: this,
             format: colorFmt,
             width: info.width,
             height: info.height,
         });
 
-        this._depthStencilTexture = new WebGLTexture();
-        this._depthStencilTexture.initAsSwapchainTexture({
+        this._depthStencilTexture$ = new WebGLTexture();
+        this._depthStencilTexture$.initAsSwapchainTexture({
             swapchain: this,
             format: depthStencilFmt,
             width: info.width,
@@ -285,7 +283,7 @@ export class WebGLSwapchain extends Swapchain {
         });
 
         // create default null texture
-        this.nullTex2D = WebGLDeviceManager.instance.createTexture(new TextureInfo(
+        this.nullTex2D$ = instance.createTexture(new TextureInfo(
             TextureType.TEX2D,
             TextureUsageBit.SAMPLED,
             Format.RGBA8,
@@ -294,7 +292,7 @@ export class WebGLSwapchain extends Swapchain {
             TextureFlagBit.GEN_MIPMAP,
         )) as WebGLTexture;
 
-        this.nullTexCube = WebGLDeviceManager.instance.createTexture(new TextureInfo(
+        this.nullTexCube$ = instance.createTexture(new TextureInfo(
             TextureType.CUBE,
             TextureUsageBit.SAMPLED,
             Format.RGBA8,
@@ -308,55 +306,55 @@ export class WebGLSwapchain extends Swapchain {
         nullTexRegion.texExtent.width = 2;
         nullTexRegion.texExtent.height = 2;
 
-        const nullTexBuff = new Uint8Array(this.nullTex2D.size);
+        const nullTexBuff = new Uint8Array(this.nullTex2D$.size);
         nullTexBuff.fill(0);
-        WebGLDeviceManager.instance.copyBuffersToTexture([nullTexBuff], this.nullTex2D, [nullTexRegion]);
+        instance.copyBuffersToTexture([nullTexBuff], this.nullTex2D$, [nullTexRegion]);
 
         nullTexRegion.texSubres.layerCount = 6;
-        WebGLDeviceManager.instance.copyBuffersToTexture(
+        instance.copyBuffersToTexture(
             [nullTexBuff, nullTexBuff, nullTexBuff, nullTexBuff, nullTexBuff, nullTexBuff],
-            this.nullTexCube,
+            this.nullTexCube$,
             [nullTexRegion],
         );
-        this._blitManager = new IWebGLBlitManager();
+        this._blitManager$ = new IWebGLBlitManager();
     }
 
     public destroy (): void {
-        if (this._canvas && this._webGLContextLostHandler) {
-            this._canvas.removeEventListener(eventWebGLContextLost, this._webGLContextLostHandler);
-            this._webGLContextLostHandler = null;
+        if (this._canvas$ && this._webGLContextLostHandler$) {
+            this._canvas$.removeEventListener(eventWebGLContextLost, this._webGLContextLostHandler$);
+            this._webGLContextLostHandler$ = null;
         }
 
-        if (this.nullTex2D) {
-            this.nullTex2D.destroy();
-            this.nullTex2D = null!;
+        if (this.nullTex2D$) {
+            this.nullTex2D$.destroy();
+            this.nullTex2D$ = null!;
         }
 
-        if (this.nullTexCube) {
-            this.nullTexCube.destroy();
-            this.nullTexCube = null!;
+        if (this.nullTexCube$) {
+            this.nullTexCube$.destroy();
+            this.nullTexCube$ = null!;
         }
 
-        if (this._blitManager) {
-            this._blitManager.destroy();
-            this._blitManager = null!;
+        if (this._blitManager$) {
+            this._blitManager$.destroy();
+            this._blitManager$ = null!;
         }
 
-        this._extensions = null;
-        this._canvas = null;
+        this._extensions$ = null;
+        this._canvas$ = null;
     }
 
     public resize (width: number, height: number, surfaceTransform: SurfaceTransform): void {
-        if (this._colorTexture.width !== width || this._colorTexture.height !== height) {
+        if (this._colorTexture$.width !== width || this._colorTexture$.height !== height) {
             debug(`Resizing swapchain: ${width}x${height}`);
-            this._canvas!.width = width;
-            this._canvas!.height = height;
-            this._colorTexture.resize(width, height);
-            this._depthStencilTexture.resize(width, height);
+            this._canvas$!.width = width;
+            this._canvas$!.height = height;
+            this._colorTexture$.resize(width, height);
+            this._depthStencilTexture$.resize(width, height);
         }
     }
 
-    private _onWebGLContextLost (event: Event): void {
+    private _onWebGLContextLost$ (event: Event): void {
         warnID(11000);
         warn(event);
         // 2020.9.3: `preventDefault` is not available on some platforms
diff --git a/cocos/gfx/webgl/webgl-texture.ts b/cocos/gfx/webgl/webgl-texture.ts
index 3bf6754e8c1..30666a32bfa 100644
--- a/cocos/gfx/webgl/webgl-texture.ts
+++ b/cocos/gfx/webgl/webgl-texture.ts
@@ -30,15 +30,15 @@ import { IWebGLGPUTexture } from './webgl-gpu-objects';
 
 export class WebGLTexture extends Texture {
     get gpuTexture (): IWebGLGPUTexture {
-        return this._gpuTexture!;
+        return this._gpuTexture$!;
     }
 
     get lodLevel (): number {
-        return this._lodLevel;
+        return this._lodLevel$;
     }
 
-    private _gpuTexture: IWebGLGPUTexture | null = null;
-    private _lodLevel = 0;
+    private _gpuTexture$: IWebGLGPUTexture | null = null;
+    private _lodLevel$ = 0;
 
     constructor () {
         super();
@@ -50,123 +50,123 @@ export class WebGLTexture extends Texture {
 
         if ('texture' in info) {
             texInfo = viewInfo.texture.info;
-            this._isTextureView = true;
+            this._isTextureView$ = true;
         }
 
-        this._info.copy(texInfo);
+        this._info$.copy(texInfo);
 
-        this._isPowerOf2 = IsPowerOf2(this._info.width) && IsPowerOf2(this._info.height);
-        this._size = FormatSurfaceSize(
-            this._info.format,
+        this._isPowerOf2$ = IsPowerOf2(this._info$.width) && IsPowerOf2(this._info$.height);
+        this._size$ = FormatSurfaceSize(
+            this._info$.format,
             this.width,
             this.height,
             this.depth,
-            this._info.levelCount,
-        ) * this._info.layerCount;
-
-        if (!this._isTextureView) {
-            this._gpuTexture = {
-                type: texInfo.type,
-                format: texInfo.format,
-                usage: texInfo.usage,
-                width: texInfo.width,
-                height: texInfo.height,
-                depth: texInfo.depth,
-                size: this._size,
-                arrayLayer: texInfo.layerCount,
-                mipLevel: texInfo.levelCount,
-                samples: texInfo.samples,
-                flags: texInfo.flags,
-                isPowerOf2: this._isPowerOf2,
-
-                glTarget: 0,
-                glInternalFmt: 0,
-                glFormat: 0,
-                glType: 0,
-                glUsage: 0,
-                glTexture: null,
-                glRenderbuffer: null,
-                glWrapS: 0,
-                glWrapT: 0,
-                glMinFilter: 0,
-                glMagFilter: 0,
-
-                isSwapchainTexture: isSwapchainTexture || false,
+            this._info$.levelCount,
+        ) * this._info$.layerCount;
+
+        if (!this._isTextureView$) {
+            this._gpuTexture$ = {
+                type$: texInfo.type,
+                format$: texInfo.format,
+                usage$: texInfo.usage,
+                width$: texInfo.width,
+                height$: texInfo.height,
+                depth$: texInfo.depth,
+                size$: this._size$,
+                arrayLayer$: texInfo.layerCount,
+                mipLevel$: texInfo.levelCount,
+                samples$: texInfo.samples,
+                flags$: texInfo.flags,
+                isPowerOf2$: this._isPowerOf2$,
+
+                glTarget$: 0,
+                glInternalFmt$: 0,
+                glFormat$: 0,
+                glType$: 0,
+                glUsage$: 0,
+                glTexture$: null,
+                glRenderbuffer$: null,
+                glWrapS$: 0,
+                glWrapT$: 0,
+                glMinFilter$: 0,
+                glMagFilter$: 0,
+
+                isSwapchainTexture$: isSwapchainTexture || false,
             };
 
-            if (!this._gpuTexture.isSwapchainTexture) {
-                WebGLCmdFuncCreateTexture(WebGLDeviceManager.instance, this._gpuTexture);
-                WebGLDeviceManager.instance.memoryStatus.textureSize += this._size;
+            if (!this._gpuTexture$.isSwapchainTexture$) {
+                WebGLCmdFuncCreateTexture(WebGLDeviceManager.instance, this._gpuTexture$);
+                WebGLDeviceManager.instance.memoryStatus.textureSize += this._size$;
             }
 
-            this._viewInfo.texture = this;
-            this._viewInfo.type = info.type;
-            this._viewInfo.format = info.format;
-            this._viewInfo.baseLevel = 0;
-            this._viewInfo.levelCount = info.levelCount;
-            this._viewInfo.baseLayer = 0;
-            this._viewInfo.layerCount = info.layerCount;
+            this._viewInfo$.texture = this;
+            this._viewInfo$.type = info.type;
+            this._viewInfo$.format = info.format;
+            this._viewInfo$.baseLevel = 0;
+            this._viewInfo$.levelCount = info.levelCount;
+            this._viewInfo$.baseLayer = 0;
+            this._viewInfo$.layerCount = info.layerCount;
         } else {
-            this._viewInfo.copy(viewInfo);
-            this._lodLevel = viewInfo.baseLevel;
-            this._gpuTexture = (viewInfo.texture as WebGLTexture)._gpuTexture;
+            this._viewInfo$.copy(viewInfo);
+            this._lodLevel$ = viewInfo.baseLevel;
+            this._gpuTexture$ = (viewInfo.texture as WebGLTexture)._gpuTexture$;
         }
     }
 
     public destroy (): void {
-        if (!this._isTextureView && this._gpuTexture) {
-            WebGLCmdFuncDestroyTexture(WebGLDeviceManager.instance, this._gpuTexture);
-            WebGLDeviceManager.instance.memoryStatus.textureSize -= this._size;
-            this._gpuTexture = null;
+        if (!this._isTextureView$ && this._gpuTexture$) {
+            WebGLCmdFuncDestroyTexture(WebGLDeviceManager.instance, this._gpuTexture$);
+            WebGLDeviceManager.instance.memoryStatus.textureSize -= this._size$;
+            this._gpuTexture$ = null;
         }
     }
 
     public getTextureHandle (): number {
-        const gpuTexture = this._gpuTexture;
+        const gpuTexture = this._gpuTexture$;
         if (!gpuTexture) {
             return 0;
         }
 
-        if (gpuTexture.glTexture) {
-            return gpuTexture.glTexture as number;
-        } else if (gpuTexture.glRenderbuffer) {
-            return gpuTexture.glRenderbuffer as number;
+        if (gpuTexture.glTexture$) {
+            return gpuTexture.glTexture$ as number;
+        } else if (gpuTexture.glRenderbuffer$) {
+            return gpuTexture.glRenderbuffer$ as number;
         }
 
         return 0;
     }
 
     public resize (width: number, height: number): void {
-        if (this._info.width === width && this._info.height === height) {
+        if (this._info$.width === width && this._info$.height === height) {
             return;
         }
 
-        if (this._info.levelCount === WebGLTexture.getLevelCount(this._info.width, this._info.height)) {
-            this._info.levelCount = WebGLTexture.getLevelCount(width, height);
-        } else if (this._info.levelCount > 1) {
-            this._info.levelCount = Math.min(this._info.levelCount, WebGLTexture.getLevelCount(width, height));
+        if (this._info$.levelCount === WebGLTexture.getLevelCount(this._info$.width, this._info$.height)) {
+            this._info$.levelCount = WebGLTexture.getLevelCount(width, height);
+        } else if (this._info$.levelCount > 1) {
+            this._info$.levelCount = Math.min(this._info$.levelCount, WebGLTexture.getLevelCount(width, height));
         }
 
-        const oldSize = this._size;
-        this._info.width = width;
-        this._info.height = height;
+        const oldSize = this._size$;
+        this._info$.width = width;
+        this._info$.height = height;
 
-        this._size = FormatSurfaceSize(
-            this._info.format,
+        this._size$ = FormatSurfaceSize(
+            this._info$.format,
             this.width,
             this.height,
             this.depth,
-            this._info.levelCount,
-        ) * this._info.layerCount;
-
-        if (!this._isTextureView && this._gpuTexture) {
-            this._gpuTexture.width = width;
-            this._gpuTexture.height = height;
-            this._gpuTexture.size = this._size;
-            if (!this._gpuTexture.isSwapchainTexture) {
-                WebGLCmdFuncResizeTexture(WebGLDeviceManager.instance, this._gpuTexture);
+            this._info$.levelCount,
+        ) * this._info$.layerCount;
+
+        if (!this._isTextureView$ && this._gpuTexture$) {
+            this._gpuTexture$.width$ = width;
+            this._gpuTexture$.height$ = height;
+            this._gpuTexture$.size$ = this._size$;
+            if (!this._gpuTexture$.isSwapchainTexture$) {
+                WebGLCmdFuncResizeTexture(WebGLDeviceManager.instance, this._gpuTexture$);
                 WebGLDeviceManager.instance.memoryStatus.textureSize -= oldSize;
-                WebGLDeviceManager.instance.memoryStatus.textureSize += this._size;
+                WebGLDeviceManager.instance.memoryStatus.textureSize += this._size$;
             }
         }
     }
diff --git a/cocos/gfx/webgl2/states/webgl2-sampler.ts b/cocos/gfx/webgl2/states/webgl2-sampler.ts
index f1af1ca9bfc..4d84eee864a 100644
--- a/cocos/gfx/webgl2/states/webgl2-sampler.ts
+++ b/cocos/gfx/webgl2/states/webgl2-sampler.ts
@@ -24,6 +24,7 @@
 
 import { SamplerInfo } from '../../base/define';
 import { Sampler } from '../../base/states/sampler';
+import { WebGLConstants } from '../../gl-constants';
 import { WebGL2CmdFuncDestroySampler, WebGL2CmdFuncPrepareSamplerInfo } from '../webgl2-commands';
 import { WebGL2DeviceManager } from '../webgl2-define';
 import { WebGL2Device } from '../webgl2-device';
@@ -41,12 +42,12 @@ export class WebGL2Sampler extends Sampler {
 
         this._gpuSampler = {
             glSamplers: new Map<number, WebGL2Sampler>(),
-            minFilter: this._info.minFilter,
-            magFilter: this._info.magFilter,
-            mipFilter: this._info.mipFilter,
-            addressU: this._info.addressU,
-            addressV: this._info.addressV,
-            addressW: this._info.addressW,
+            minFilter: this._info$.minFilter,
+            magFilter: this._info$.magFilter,
+            mipFilter: this._info$.mipFilter,
+            addressU: this._info$.addressU,
+            addressV: this._info$.addressV,
+            addressW: this._info$.addressW,
 
             glMinFilter: 0,
             glMagFilter: 0,
@@ -54,20 +55,20 @@ export class WebGL2Sampler extends Sampler {
             glWrapT: 0,
             glWrapR: 0,
 
-            getGLSampler (device: WebGL2Device, minLod: number, maxLod: number) : WebGLSampler {
+            getGLSampler (device: WebGL2Device, minLod: number, maxLod: number): WebGLSampler {
                 const { gl } = device;
                 const samplerHash = minLod << 16 | maxLod;
                 if (!this.glSamplers.has(samplerHash)) {
                     const glSampler = gl.createSampler();
                     if (glSampler) {
                         this.glSamplers.set(samplerHash, glSampler);
-                        gl.samplerParameteri(glSampler, gl.TEXTURE_MIN_FILTER, this.glMinFilter);
-                        gl.samplerParameteri(glSampler, gl.TEXTURE_MAG_FILTER, this.glMagFilter);
-                        gl.samplerParameteri(glSampler, gl.TEXTURE_WRAP_S, this.glWrapS);
-                        gl.samplerParameteri(glSampler, gl.TEXTURE_WRAP_T, this.glWrapT);
-                        gl.samplerParameteri(glSampler, gl.TEXTURE_WRAP_R, this.glWrapR);
-                        gl.samplerParameterf(glSampler, gl.TEXTURE_MIN_LOD, minLod);
-                        gl.samplerParameterf(glSampler, gl.TEXTURE_MAX_LOD, maxLod);
+                        gl.samplerParameteri(glSampler, WebGLConstants.TEXTURE_MIN_FILTER, this.glMinFilter);
+                        gl.samplerParameteri(glSampler, WebGLConstants.TEXTURE_MAG_FILTER, this.glMagFilter);
+                        gl.samplerParameteri(glSampler, WebGLConstants.TEXTURE_WRAP_S, this.glWrapS);
+                        gl.samplerParameteri(glSampler, WebGLConstants.TEXTURE_WRAP_T, this.glWrapT);
+                        gl.samplerParameteri(glSampler, WebGLConstants.TEXTURE_WRAP_R, this.glWrapR);
+                        gl.samplerParameterf(glSampler, WebGLConstants.TEXTURE_MIN_LOD, minLod);
+                        gl.samplerParameterf(glSampler, WebGLConstants.TEXTURE_MAX_LOD, maxLod);
                     }
                 }
                 const sampler = this.glSamplers.get(samplerHash)!;
diff --git a/cocos/gfx/webgl2/webgl2-buffer.ts b/cocos/gfx/webgl2/webgl2-buffer.ts
index 11763ccce56..f83284b7fa6 100644
--- a/cocos/gfx/webgl2/webgl2-buffer.ts
+++ b/cocos/gfx/webgl2/webgl2-buffer.ts
@@ -22,7 +22,7 @@
  THE SOFTWARE.
 */
 
-import { warnID } from '../../core';
+import { warnID } from '../../core/platform/debug';
 import { Buffer } from '../base/buffer';
 import { BufferUsageBit, BufferSource, BufferInfo, BufferViewInfo } from '../base/define';
 import {
@@ -43,21 +43,21 @@ export class WebGL2Buffer extends Buffer {
 
     public initialize (info: Readonly<BufferInfo> | Readonly<BufferViewInfo>): void {
         if ('buffer' in info) { // buffer view
-            this._isBufferView = true;
+            this._isBufferView$ = true;
 
             const buffer = info.buffer as WebGL2Buffer;
 
-            this._usage = buffer.usage;
-            this._memUsage = buffer.memUsage;
-            this._size = this._stride = info.range;
-            this._count = 1;
-            this._flags = buffer.flags;
+            this._usage$ = buffer.usage;
+            this._memUsage$ = buffer.memUsage;
+            this._size$ = this._stride$ = info.range;
+            this._count$ = 1;
+            this._flags$ = buffer.flags;
 
             this._gpuBuffer = {
-                usage: this._usage,
-                memUsage: this._memUsage,
-                size: this._size,
-                stride: this._stride,
+                usage: this._usage$,
+                memUsage: this._memUsage$,
+                size: this._size$,
+                stride: this._stride$,
                 buffer: null,
                 indirects: buffer.gpuBuffer.indirects,
                 glTarget: buffer.gpuBuffer.glTarget,
@@ -65,18 +65,18 @@ export class WebGL2Buffer extends Buffer {
                 glOffset: info.offset,
             };
         } else { // native buffer
-            this._usage = info.usage;
-            this._memUsage = info.memUsage;
-            this._size = info.size;
-            this._stride = Math.max(info.stride || this._size, 1);
-            this._count = this._size / this._stride;
-            this._flags = info.flags;
+            this._usage$ = info.usage;
+            this._memUsage$ = info.memUsage;
+            this._size$ = info.size;
+            this._stride$ = Math.max(info.stride || this._size$, 1);
+            this._count$ = this._size$ / this._stride$;
+            this._flags$ = info.flags;
 
             this._gpuBuffer = {
-                usage: this._usage,
-                memUsage: this._memUsage,
-                size: this._size,
-                stride: this._stride,
+                usage: this._usage$,
+                memUsage: this._memUsage$,
+                size: this._size$,
+                stride: this._stride$,
                 buffer: null,
                 indirects: new WebGL2IndirectDrawInfos(),
                 glTarget: 0,
@@ -86,31 +86,31 @@ export class WebGL2Buffer extends Buffer {
 
             WebGL2CmdFuncCreateBuffer(WebGL2DeviceManager.instance, this._gpuBuffer);
 
-            WebGL2DeviceManager.instance.memoryStatus.bufferSize += this._size;
+            WebGL2DeviceManager.instance.memoryStatus.bufferSize += this._size$;
         }
     }
 
     public destroy (): void {
         if (this._gpuBuffer) {
-            if (!this._isBufferView) {
+            if (!this._isBufferView$) {
                 WebGL2CmdFuncDestroyBuffer(WebGL2DeviceManager.instance, this._gpuBuffer);
-                WebGL2DeviceManager.instance.memoryStatus.bufferSize -= this._size;
+                WebGL2DeviceManager.instance.memoryStatus.bufferSize -= this._size$;
             }
             this._gpuBuffer = null;
         }
     }
 
     public resize (size: number): void {
-        if (this._isBufferView) {
+        if (this._isBufferView$) {
             warnID(16379);
             return;
         }
 
-        const oldSize = this._size;
+        const oldSize = this._size$;
         if (oldSize === size) { return; }
 
-        this._size = size;
-        this._count = this._size / this._stride;
+        this._size$ = size;
+        this._count$ = this._size$ / this._stride$;
 
         if (this._gpuBuffer) {
             this._gpuBuffer.size = size;
@@ -123,7 +123,7 @@ export class WebGL2Buffer extends Buffer {
     }
 
     public update (buffer: Readonly<BufferSource>, size?: number): void {
-        if (this._isBufferView) {
+        if (this._isBufferView$) {
             warnID(16380);
             return;
         }
@@ -131,7 +131,7 @@ export class WebGL2Buffer extends Buffer {
         let buffSize: number;
         if (size !== undefined) {
             buffSize = size;
-        } else if (this._usage & BufferUsageBit.INDIRECT) {
+        } else if (this._usage$ & BufferUsageBit.INDIRECT) {
             buffSize = 0;
         } else {
             buffSize = (buffer as ArrayBuffer).byteLength;
diff --git a/cocos/gfx/webgl2/webgl2-command-buffer.ts b/cocos/gfx/webgl2/webgl2-command-buffer.ts
index 2e18b6c0a49..d268e72c008 100644
--- a/cocos/gfx/webgl2/webgl2-command-buffer.ts
+++ b/cocos/gfx/webgl2/webgl2-command-buffer.ts
@@ -75,8 +75,8 @@ export class WebGL2CommandBuffer extends CommandBuffer {
     protected _isStateInvalied = false;
 
     public initialize (info: Readonly<CommandBufferInfo>): void {
-        this._type = info.type;
-        this._queue = info.queue;
+        this._type$ = info.type;
+        this._queue$ = info.queue;
 
         const setCount = WebGL2DeviceManager.instance.bindingMappings.blockOffsets.length;
         for (let i = 0; i < setCount; i++) {
@@ -93,9 +93,9 @@ export class WebGL2CommandBuffer extends CommandBuffer {
         this._curGPUPipelineState = null;
         this._curGPUInputAssembler = null;
         this._curGPUDescriptorSets.length = 0;
-        this._numDrawCalls = 0;
-        this._numInstances = 0;
-        this._numTris = 0;
+        this._numDrawCalls$ = 0;
+        this._numInstances$ = 0;
+        this._numTris$ = 0;
     }
 
     public end (): void {
@@ -276,8 +276,8 @@ export class WebGL2CommandBuffer extends CommandBuffer {
     }
 
     public draw (infoOrAssembler: Readonly<DrawInfo> | Readonly<InputAssembler>): void {
-        if (this._type === CommandBufferType.PRIMARY && this._isInRenderPass
-            || this._type === CommandBufferType.SECONDARY) {
+        if (this._type$ === CommandBufferType.PRIMARY && this._isInRenderPass
+            || this._type$ === CommandBufferType.SECONDARY) {
             if (this._isStateInvalied) {
                 this.bindStates();
             }
@@ -289,19 +289,19 @@ export class WebGL2CommandBuffer extends CommandBuffer {
 
             this.cmdPackage.cmds.push(WebGL2Cmd.DRAW);
 
-            ++this._numDrawCalls;
-            this._numInstances += info.instanceCount;
+            ++this._numDrawCalls$;
+            this._numInstances$ += info.instanceCount;
             const indexCount = info.indexCount || info.vertexCount;
             if (this._curGPUPipelineState) {
                 const glPrimitive = this._curGPUPipelineState.glPrimitive;
                 switch (glPrimitive) {
                 case 0x0004: { // WebGLRenderingContext.TRIANGLES
-                    this._numTris += indexCount / 3 * Math.max(info.instanceCount, 1);
+                    this._numTris$ += indexCount / 3 * Math.max(info.instanceCount, 1);
                     break;
                 }
                 case 0x0005: // WebGLRenderingContext.TRIANGLE_STRIP
                 case 0x0006: { // WebGLRenderingContext.TRIANGLE_FAN
-                    this._numTris += (indexCount - 2) * Math.max(info.instanceCount, 1);
+                    this._numTris$ += (indexCount - 2) * Math.max(info.instanceCount, 1);
                     break;
                 }
                 default:
@@ -313,8 +313,8 @@ export class WebGL2CommandBuffer extends CommandBuffer {
     }
 
     public updateBuffer (buffer: Buffer, data: Readonly<BufferSource>, size?: number): void {
-        if (this._type === CommandBufferType.PRIMARY && !this._isInRenderPass
-            || this._type === CommandBufferType.SECONDARY) {
+        if (this._type$ === CommandBufferType.PRIMARY && !this._isInRenderPass
+            || this._type$ === CommandBufferType.SECONDARY) {
             const gpuBuffer = (buffer as WebGL2Buffer).gpuBuffer;
             if (gpuBuffer) {
                 const cmd = this._cmdAllocator.updateBufferCmdPool.alloc(WebGL2CmdUpdateBuffer);
@@ -348,8 +348,8 @@ export class WebGL2CommandBuffer extends CommandBuffer {
     }
 
     public copyBuffersToTexture (buffers: Readonly<ArrayBufferView[]>, texture: Texture, regions: Readonly<BufferTextureCopy[]>): void {
-        if (this._type === CommandBufferType.PRIMARY && !this._isInRenderPass
-            || this._type === CommandBufferType.SECONDARY) {
+        if (this._type$ === CommandBufferType.PRIMARY && !this._isInRenderPass
+            || this._type$ === CommandBufferType.SECONDARY) {
             const gpuTexture = (texture as WebGL2Texture).gpuTexture;
             if (gpuTexture) {
                 const cmd = this._cmdAllocator.copyBufferToTextureCmdPool.alloc(WebGL2CmdCopyBufferToTexture);
@@ -409,9 +409,9 @@ export class WebGL2CommandBuffer extends CommandBuffer {
 
             this.cmdPackage.cmds.concat(webGL2CmdBuff.cmdPackage.cmds.array);
 
-            this._numDrawCalls += webGL2CmdBuff._numDrawCalls;
-            this._numInstances += webGL2CmdBuff._numInstances;
-            this._numTris += webGL2CmdBuff._numTris;
+            this._numDrawCalls$ += webGL2CmdBuff._numDrawCalls$;
+            this._numInstances$ += webGL2CmdBuff._numInstances$;
+            this._numTris$ += webGL2CmdBuff._numTris$;
         }
     }
 
@@ -444,7 +444,7 @@ export class WebGL2CommandBuffer extends CommandBuffer {
         blitTextureCmd.regions = regions as TextureBlit[];
         blitTextureCmd.filter = filter;
 
-        ++this._numDrawCalls;
+        ++this._numDrawCalls$;
 
         this.cmdPackage.blitTextureCmds.push(blitTextureCmd);
         this.cmdPackage.cmds.push(WebGL2Cmd.BLIT_TEXTURE);
diff --git a/cocos/gfx/webgl2/webgl2-commands.ts b/cocos/gfx/webgl2/webgl2-commands.ts
index f5354b13589..f2225ba20a0 100644
--- a/cocos/gfx/webgl2/webgl2-commands.ts
+++ b/cocos/gfx/webgl2/webgl2-commands.ts
@@ -47,12 +47,13 @@ import {
     IWebGL2GPURenderPass,
 } from './webgl2-gpu-objects';
 import { CachedArray, error, errorID, cclegacy, assertID, debugID } from '../../core';
+import { WebGLConstants } from '../gl-constants';
 
 const WebGLWraps: GLenum[] = [
-    0x2901, // WebGLRenderingContext.REPEAT
-    0x8370, // WebGLRenderingContext.MIRRORED_REPEAT
-    0x812F, // WebGLRenderingContext.CLAMP_TO_EDGE
-    0x812F, // WebGLRenderingContext.CLAMP_TO_EDGE
+    WebGLConstants.REPEAT,
+    WebGLConstants.MIRRORED_REPEAT,
+    WebGLConstants.CLAMP_TO_EDGE,
+    WebGLConstants.CLAMP_TO_EDGE,
 ];
 
 const _f32v4 = new Float32Array(4);
@@ -64,95 +65,95 @@ function CmpF32NotEuqal (a: number, b: number): boolean {
 
 export function GFXFormatToWebGLType (format: Format, gl: WebGL2RenderingContext): GLenum {
     switch (format) {
-    case Format.R8: return gl.UNSIGNED_BYTE;
-    case Format.R8SN: return gl.BYTE;
-    case Format.R8UI: return gl.UNSIGNED_BYTE;
-    case Format.R8I: return gl.BYTE;
-    case Format.R16F: return gl.HALF_FLOAT;
-    case Format.R16UI: return gl.UNSIGNED_SHORT;
-    case Format.R16I: return gl.SHORT;
-    case Format.R32F: return gl.FLOAT;
-    case Format.R32UI: return gl.UNSIGNED_INT;
-    case Format.R32I: return gl.INT;
-
-    case Format.RG8: return gl.UNSIGNED_BYTE;
-    case Format.RG8SN: return gl.BYTE;
-    case Format.RG8UI: return gl.UNSIGNED_BYTE;
-    case Format.RG8I: return gl.BYTE;
-    case Format.RG16F: return gl.HALF_FLOAT;
-    case Format.RG16UI: return gl.UNSIGNED_SHORT;
-    case Format.RG16I: return gl.SHORT;
-    case Format.RG32F: return gl.FLOAT;
-    case Format.RG32UI: return gl.UNSIGNED_INT;
-    case Format.RG32I: return gl.INT;
-
-    case Format.RGB8: return gl.UNSIGNED_BYTE;
-    case Format.SRGB8: return gl.UNSIGNED_BYTE;
-    case Format.RGB8SN: return gl.BYTE;
-    case Format.RGB8UI: return gl.UNSIGNED_BYTE;
-    case Format.RGB8I: return gl.BYTE;
-    case Format.RGB16F: return gl.HALF_FLOAT;
-    case Format.RGB16UI: return gl.UNSIGNED_SHORT;
-    case Format.RGB16I: return gl.SHORT;
-    case Format.RGB32F: return gl.FLOAT;
-    case Format.RGB32UI: return gl.UNSIGNED_INT;
-    case Format.RGB32I: return gl.INT;
-
-    case Format.BGRA8: return gl.UNSIGNED_BYTE;
-    case Format.RGBA8: return gl.UNSIGNED_BYTE;
-    case Format.SRGB8_A8: return gl.UNSIGNED_BYTE;
-    case Format.RGBA8SN: return gl.BYTE;
-    case Format.RGBA8UI: return gl.UNSIGNED_BYTE;
-    case Format.RGBA8I: return gl.BYTE;
-    case Format.RGBA16F: return gl.HALF_FLOAT;
-    case Format.RGBA16UI: return gl.UNSIGNED_SHORT;
-    case Format.RGBA16I: return gl.SHORT;
-    case Format.RGBA32F: return gl.FLOAT;
-    case Format.RGBA32UI: return gl.UNSIGNED_INT;
-    case Format.RGBA32I: return gl.INT;
-
-    case Format.R5G6B5: return gl.UNSIGNED_SHORT_5_6_5;
-    case Format.R11G11B10F: return gl.UNSIGNED_INT_10F_11F_11F_REV;
-    case Format.RGB5A1: return gl.UNSIGNED_SHORT_5_5_5_1;
-    case Format.RGBA4: return gl.UNSIGNED_SHORT_4_4_4_4;
-    case Format.RGB10A2: return gl.UNSIGNED_INT_2_10_10_10_REV;
-    case Format.RGB10A2UI: return gl.UNSIGNED_INT_2_10_10_10_REV;
-    case Format.RGB9E5: return gl.FLOAT;
-
-    case Format.DEPTH: return gl.FLOAT;
-    case Format.DEPTH_STENCIL: return gl.UNSIGNED_INT_24_8;
-
-    case Format.BC1: return gl.UNSIGNED_BYTE;
-    case Format.BC1_SRGB: return gl.UNSIGNED_BYTE;
-    case Format.BC2: return gl.UNSIGNED_BYTE;
-    case Format.BC2_SRGB: return gl.UNSIGNED_BYTE;
-    case Format.BC3: return gl.UNSIGNED_BYTE;
-    case Format.BC3_SRGB: return gl.UNSIGNED_BYTE;
-    case Format.BC4: return gl.UNSIGNED_BYTE;
-    case Format.BC4_SNORM: return gl.BYTE;
-    case Format.BC5: return gl.UNSIGNED_BYTE;
-    case Format.BC5_SNORM: return gl.BYTE;
-    case Format.BC6H_SF16: return gl.FLOAT;
-    case Format.BC6H_UF16: return gl.FLOAT;
-    case Format.BC7: return gl.UNSIGNED_BYTE;
-    case Format.BC7_SRGB: return gl.UNSIGNED_BYTE;
-
-    case Format.ETC_RGB8: return gl.UNSIGNED_BYTE;
-    case Format.ETC2_RGB8: return gl.UNSIGNED_BYTE;
-    case Format.ETC2_SRGB8: return gl.UNSIGNED_BYTE;
-    case Format.ETC2_RGB8_A1: return gl.UNSIGNED_BYTE;
-    case Format.ETC2_SRGB8_A1: return gl.UNSIGNED_BYTE;
-    case Format.EAC_R11: return gl.UNSIGNED_BYTE;
-    case Format.EAC_R11SN: return gl.BYTE;
-    case Format.EAC_RG11: return gl.UNSIGNED_BYTE;
-    case Format.EAC_RG11SN: return gl.BYTE;
-
-    case Format.PVRTC_RGB2: return gl.UNSIGNED_BYTE;
-    case Format.PVRTC_RGBA2: return gl.UNSIGNED_BYTE;
-    case Format.PVRTC_RGB4: return gl.UNSIGNED_BYTE;
-    case Format.PVRTC_RGBA4: return gl.UNSIGNED_BYTE;
-    case Format.PVRTC2_2BPP: return gl.UNSIGNED_BYTE;
-    case Format.PVRTC2_4BPP: return gl.UNSIGNED_BYTE;
+    case Format.R8: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.R8SN: return WebGLConstants.BYTE;
+    case Format.R8UI: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.R8I: return WebGLConstants.BYTE;
+    case Format.R16F: return WebGLConstants.HALF_FLOAT;
+    case Format.R16UI: return WebGLConstants.UNSIGNED_SHORT;
+    case Format.R16I: return WebGLConstants.SHORT;
+    case Format.R32F: return WebGLConstants.FLOAT;
+    case Format.R32UI: return WebGLConstants.UNSIGNED_INT;
+    case Format.R32I: return WebGLConstants.INT;
+
+    case Format.RG8: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.RG8SN: return WebGLConstants.BYTE;
+    case Format.RG8UI: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.RG8I: return WebGLConstants.BYTE;
+    case Format.RG16F: return WebGLConstants.HALF_FLOAT;
+    case Format.RG16UI: return WebGLConstants.UNSIGNED_SHORT;
+    case Format.RG16I: return WebGLConstants.SHORT;
+    case Format.RG32F: return WebGLConstants.FLOAT;
+    case Format.RG32UI: return WebGLConstants.UNSIGNED_INT;
+    case Format.RG32I: return WebGLConstants.INT;
+
+    case Format.RGB8: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.SRGB8: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.RGB8SN: return WebGLConstants.BYTE;
+    case Format.RGB8UI: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.RGB8I: return WebGLConstants.BYTE;
+    case Format.RGB16F: return WebGLConstants.HALF_FLOAT;
+    case Format.RGB16UI: return WebGLConstants.UNSIGNED_SHORT;
+    case Format.RGB16I: return WebGLConstants.SHORT;
+    case Format.RGB32F: return WebGLConstants.FLOAT;
+    case Format.RGB32UI: return WebGLConstants.UNSIGNED_INT;
+    case Format.RGB32I: return WebGLConstants.INT;
+
+    case Format.BGRA8: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.RGBA8: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.SRGB8_A8: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.RGBA8SN: return WebGLConstants.BYTE;
+    case Format.RGBA8UI: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.RGBA8I: return WebGLConstants.BYTE;
+    case Format.RGBA16F: return WebGLConstants.HALF_FLOAT;
+    case Format.RGBA16UI: return WebGLConstants.UNSIGNED_SHORT;
+    case Format.RGBA16I: return WebGLConstants.SHORT;
+    case Format.RGBA32F: return WebGLConstants.FLOAT;
+    case Format.RGBA32UI: return WebGLConstants.UNSIGNED_INT;
+    case Format.RGBA32I: return WebGLConstants.INT;
+
+    case Format.R5G6B5: return WebGLConstants.UNSIGNED_SHORT_5_6_5;
+    case Format.R11G11B10F: return WebGLConstants.UNSIGNED_INT_10F_11F_11F_REV;
+    case Format.RGB5A1: return WebGLConstants.UNSIGNED_SHORT_5_5_5_1;
+    case Format.RGBA4: return WebGLConstants.UNSIGNED_SHORT_4_4_4_4;
+    case Format.RGB10A2: return WebGLConstants.UNSIGNED_INT_2_10_10_10_REV;
+    case Format.RGB10A2UI: return WebGLConstants.UNSIGNED_INT_2_10_10_10_REV;
+    case Format.RGB9E5: return WebGLConstants.FLOAT;
+
+    case Format.DEPTH: return WebGLConstants.FLOAT;
+    case Format.DEPTH_STENCIL: return WebGLConstants.UNSIGNED_INT_24_8;
+
+    case Format.BC1: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.BC1_SRGB: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.BC2: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.BC2_SRGB: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.BC3: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.BC3_SRGB: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.BC4: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.BC4_SNORM: return WebGLConstants.BYTE;
+    case Format.BC5: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.BC5_SNORM: return WebGLConstants.BYTE;
+    case Format.BC6H_SF16: return WebGLConstants.FLOAT;
+    case Format.BC6H_UF16: return WebGLConstants.FLOAT;
+    case Format.BC7: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.BC7_SRGB: return WebGLConstants.UNSIGNED_BYTE;
+
+    case Format.ETC_RGB8: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.ETC2_RGB8: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.ETC2_SRGB8: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.ETC2_RGB8_A1: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.ETC2_SRGB8_A1: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.EAC_R11: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.EAC_R11SN: return WebGLConstants.BYTE;
+    case Format.EAC_RG11: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.EAC_RG11SN: return WebGLConstants.BYTE;
+
+    case Format.PVRTC_RGB2: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.PVRTC_RGBA2: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.PVRTC_RGB4: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.PVRTC_RGBA4: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.PVRTC2_2BPP: return WebGLConstants.UNSIGNED_BYTE;
+    case Format.PVRTC2_4BPP: return WebGLConstants.UNSIGNED_BYTE;
 
     case Format.ASTC_RGBA_4X4:
     case Format.ASTC_RGBA_5X4:
@@ -182,70 +183,70 @@ export function GFXFormatToWebGLType (format: Format, gl: WebGL2RenderingContext
     case Format.ASTC_SRGBA_10X10:
     case Format.ASTC_SRGBA_12X10:
     case Format.ASTC_SRGBA_12X12:
-        return gl.UNSIGNED_BYTE;
+        return WebGLConstants.UNSIGNED_BYTE;
 
     default: {
-        return gl.UNSIGNED_BYTE;
+        return WebGLConstants.UNSIGNED_BYTE;
     }
     }
 }
 
 export function GFXFormatToWebGLInternalFormat (format: Format, gl: WebGL2RenderingContext): GLenum {
     switch (format) {
-    case Format.A8: return gl.ALPHA;
-    case Format.L8: return gl.LUMINANCE;
-    case Format.LA8: return gl.LUMINANCE_ALPHA;
-    case Format.R8: return gl.R8;
-    case Format.R8SN: return gl.R8_SNORM;
-    case Format.R8UI: return gl.R8UI;
-    case Format.R8I: return gl.R8I;
-    case Format.RG8: return gl.RG8;
-    case Format.RG8SN: return gl.RG8_SNORM;
-    case Format.RG8UI: return gl.RG8UI;
-    case Format.RG8I: return gl.RG8I;
-    case Format.RGB8: return gl.RGB8;
-    case Format.RGB8SN: return gl.RGB8_SNORM;
-    case Format.RGB8UI: return gl.RGB8UI;
-    case Format.RGB8I: return gl.RGB8I;
-    case Format.BGRA8: return gl.RGBA8;
-    case Format.RGBA8: return gl.RGBA8;
-    case Format.RGBA8SN: return gl.RGBA8_SNORM;
-    case Format.RGBA8UI: return gl.RGBA8UI;
-    case Format.RGBA8I: return gl.RGBA8I;
-    case Format.R16I: return gl.R16I;
-    case Format.R16UI: return gl.R16UI;
-    case Format.R16F: return gl.R16F;
-    case Format.RG16I: return gl.RG16I;
-    case Format.RG16UI: return gl.RG16UI;
-    case Format.RG16F: return gl.RG16F;
-    case Format.RGB16I: return gl.RGB16I;
-    case Format.RGB16UI: return gl.RGB16UI;
-    case Format.RGB16F: return gl.RGB16F;
-    case Format.RGBA16I: return gl.RGBA16I;
-    case Format.RGBA16UI: return gl.RGBA16UI;
-    case Format.RGBA16F: return gl.RGBA16F;
-    case Format.R32I: return gl.R32I;
-    case Format.R32UI: return gl.R32UI;
-    case Format.R32F: return gl.R32F;
-    case Format.RG32I: return gl.RG32I;
-    case Format.RG32UI: return gl.RG32UI;
-    case Format.RG32F: return gl.RG32F;
-    case Format.RGB32I: return gl.RGB32I;
-    case Format.RGB32UI: return gl.RGB32UI;
-    case Format.RGB32F: return gl.RGB32F;
-    case Format.RGBA32I: return gl.RGBA32I;
-    case Format.RGBA32UI: return gl.RGBA32UI;
-    case Format.RGBA32F: return gl.RGBA32F;
-    case Format.R5G6B5: return gl.RGB565;
-    case Format.RGB5A1: return gl.RGB5_A1;
-    case Format.RGBA4: return gl.RGBA4;
-    case Format.SRGB8: return gl.SRGB8;
-    case Format.SRGB8_A8: return gl.SRGB8_ALPHA8;
-    case Format.RGB10A2: return gl.RGB10_A2;
-    case Format.RGB10A2UI: return gl.RGB10_A2UI;
-    case Format.R11G11B10F: return gl.R11F_G11F_B10F;
-    case Format.DEPTH: return gl.DEPTH_COMPONENT32F;
-    case Format.DEPTH_STENCIL: return gl.DEPTH24_STENCIL8;
+    case Format.A8: return WebGLConstants.ALPHA;
+    case Format.L8: return WebGLConstants.LUMINANCE;
+    case Format.LA8: return WebGLConstants.LUMINANCE_ALPHA;
+    case Format.R8: return WebGLConstants.R8;
+    case Format.R8SN: return WebGLConstants.R8_SNORM;
+    case Format.R8UI: return WebGLConstants.R8UI;
+    case Format.R8I: return WebGLConstants.R8I;
+    case Format.RG8: return WebGLConstants.RG8;
+    case Format.RG8SN: return WebGLConstants.RG8_SNORM;
+    case Format.RG8UI: return WebGLConstants.RG8UI;
+    case Format.RG8I: return WebGLConstants.RG8I;
+    case Format.RGB8: return WebGLConstants.RGB8;
+    case Format.RGB8SN: return WebGLConstants.RGB8_SNORM;
+    case Format.RGB8UI: return WebGLConstants.RGB8UI;
+    case Format.RGB8I: return WebGLConstants.RGB8I;
+    case Format.BGRA8: return WebGLConstants.RGBA8;
+    case Format.RGBA8: return WebGLConstants.RGBA8;
+    case Format.RGBA8SN: return WebGLConstants.RGBA8_SNORM;
+    case Format.RGBA8UI: return WebGLConstants.RGBA8UI;
+    case Format.RGBA8I: return WebGLConstants.RGBA8I;
+    case Format.R16I: return WebGLConstants.R16I;
+    case Format.R16UI: return WebGLConstants.R16UI;
+    case Format.R16F: return WebGLConstants.R16F;
+    case Format.RG16I: return WebGLConstants.RG16I;
+    case Format.RG16UI: return WebGLConstants.RG16UI;
+    case Format.RG16F: return WebGLConstants.RG16F;
+    case Format.RGB16I: return WebGLConstants.RGB16I;
+    case Format.RGB16UI: return WebGLConstants.RGB16UI;
+    case Format.RGB16F: return WebGLConstants.RGB16F;
+    case Format.RGBA16I: return WebGLConstants.RGBA16I;
+    case Format.RGBA16UI: return WebGLConstants.RGBA16UI;
+    case Format.RGBA16F: return WebGLConstants.RGBA16F;
+    case Format.R32I: return WebGLConstants.R32I;
+    case Format.R32UI: return WebGLConstants.R32UI;
+    case Format.R32F: return WebGLConstants.R32F;
+    case Format.RG32I: return WebGLConstants.RG32I;
+    case Format.RG32UI: return WebGLConstants.RG32UI;
+    case Format.RG32F: return WebGLConstants.RG32F;
+    case Format.RGB32I: return WebGLConstants.RGB32I;
+    case Format.RGB32UI: return WebGLConstants.RGB32UI;
+    case Format.RGB32F: return WebGLConstants.RGB32F;
+    case Format.RGBA32I: return WebGLConstants.RGBA32I;
+    case Format.RGBA32UI: return WebGLConstants.RGBA32UI;
+    case Format.RGBA32F: return WebGLConstants.RGBA32F;
+    case Format.R5G6B5: return WebGLConstants.RGB565;
+    case Format.RGB5A1: return WebGLConstants.RGB5_A1;
+    case Format.RGBA4: return WebGLConstants.RGBA4;
+    case Format.SRGB8: return WebGLConstants.SRGB8;
+    case Format.SRGB8_A8: return WebGLConstants.SRGB8_ALPHA8;
+    case Format.RGB10A2: return WebGLConstants.RGB10_A2;
+    case Format.RGB10A2UI: return WebGLConstants.RGB10_A2UI;
+    case Format.R11G11B10F: return WebGLConstants.R11F_G11F_B10F;
+    case Format.DEPTH: return WebGLConstants.DEPTH_COMPONENT32F;
+    case Format.DEPTH_STENCIL: return WebGLConstants.DEPTH24_STENCIL8;
 
     case Format.BC1: return WebGL2EXT.COMPRESSED_RGB_S3TC_DXT1_EXT;
     case Format.BC1_ALPHA: return WebGL2EXT.COMPRESSED_RGBA_S3TC_DXT1_EXT;
@@ -305,66 +306,66 @@ export function GFXFormatToWebGLInternalFormat (format: Format, gl: WebGL2Render
 
     default: {
         errorID(16309);
-        return gl.RGBA;
+        return WebGLConstants.RGBA;
     }
     }
 }
 
 export function GFXFormatToWebGLFormat (format: Format, gl: WebGL2RenderingContext): GLenum {
     switch (format) {
-    case Format.A8: return gl.ALPHA;
-    case Format.L8: return gl.LUMINANCE;
-    case Format.LA8: return gl.LUMINANCE_ALPHA;
+    case Format.A8: return WebGLConstants.ALPHA;
+    case Format.L8: return WebGLConstants.LUMINANCE;
+    case Format.LA8: return WebGLConstants.LUMINANCE_ALPHA;
     case Format.R8:
-    case Format.R8SN: return gl.RED;
+    case Format.R8SN: return WebGLConstants.RED;
     case Format.R8UI:
-    case Format.R8I: return gl.RED;
+    case Format.R8I: return WebGLConstants.RED;
     case Format.RG8:
     case Format.RG8SN:
     case Format.RG8UI:
-    case Format.RG8I: return gl.RG;
+    case Format.RG8I: return WebGLConstants.RG;
     case Format.RGB8:
     case Format.RGB8SN:
     case Format.RGB8UI:
-    case Format.RGB8I: return gl.RGB;
+    case Format.RGB8I: return WebGLConstants.RGB;
     case Format.BGRA8:
     case Format.RGBA8:
     case Format.RGBA8SN:
     case Format.RGBA8UI:
-    case Format.RGBA8I: return gl.RGBA;
+    case Format.RGBA8I: return WebGLConstants.RGBA;
     case Format.R16UI:
     case Format.R16I:
-    case Format.R16F: return gl.RED;
+    case Format.R16F: return WebGLConstants.RED;
     case Format.RG16UI:
     case Format.RG16I:
-    case Format.RG16F: return gl.RG;
+    case Format.RG16F: return WebGLConstants.RG;
     case Format.RGB16UI:
     case Format.RGB16I:
-    case Format.RGB16F: return gl.RGB;
+    case Format.RGB16F: return WebGLConstants.RGB;
     case Format.RGBA16UI:
     case Format.RGBA16I:
-    case Format.RGBA16F: return gl.RGBA;
+    case Format.RGBA16F: return WebGLConstants.RGBA;
     case Format.R32UI:
     case Format.R32I:
-    case Format.R32F: return gl.RED;
+    case Format.R32F: return WebGLConstants.RED;
     case Format.RG32UI:
     case Format.RG32I:
-    case Format.RG32F: return gl.RG;
+    case Format.RG32F: return WebGLConstants.RG;
     case Format.RGB32UI:
     case Format.RGB32I:
-    case Format.RGB32F: return gl.RGB;
+    case Format.RGB32F: return WebGLConstants.RGB;
     case Format.RGBA32UI:
     case Format.RGBA32I:
-    case Format.RGBA32F: return gl.RGBA;
-    case Format.RGB10A2: return gl.RGBA;
-    case Format.R11G11B10F: return gl.RGB;
-    case Format.R5G6B5: return gl.RGB;
-    case Format.RGB5A1: return gl.RGBA;
-    case Format.RGBA4: return gl.RGBA;
-    case Format.SRGB8: return gl.RGB;
-    case Format.SRGB8_A8: return gl.RGBA;
-    case Format.DEPTH: return gl.DEPTH_COMPONENT;
-    case Format.DEPTH_STENCIL: return gl.DEPTH_STENCIL;
+    case Format.RGBA32F: return WebGLConstants.RGBA;
+    case Format.RGB10A2: return WebGLConstants.RGBA;
+    case Format.R11G11B10F: return WebGLConstants.RGB;
+    case Format.R5G6B5: return WebGLConstants.RGB;
+    case Format.RGB5A1: return WebGLConstants.RGBA;
+    case Format.RGBA4: return WebGLConstants.RGBA;
+    case Format.SRGB8: return WebGLConstants.RGB;
+    case Format.SRGB8_A8: return WebGLConstants.RGBA;
+    case Format.DEPTH: return WebGLConstants.DEPTH_COMPONENT;
+    case Format.DEPTH_STENCIL: return WebGLConstants.DEPTH_STENCIL;
 
     case Format.BC1: return WebGL2EXT.COMPRESSED_RGB_S3TC_DXT1_EXT;
     case Format.BC1_ALPHA: return WebGL2EXT.COMPRESSED_RGBA_S3TC_DXT1_EXT;
@@ -424,39 +425,39 @@ export function GFXFormatToWebGLFormat (format: Format, gl: WebGL2RenderingConte
 
     default: {
         errorID(16310);
-        return gl.RGBA;
+        return WebGLConstants.RGBA;
     }
     }
 }
 
 function GFXTypeToWebGLType (type: Type, gl: WebGL2RenderingContext): GLenum {
     switch (type) {
-    case Type.BOOL: return gl.BOOL;
-    case Type.BOOL2: return gl.BOOL_VEC2;
-    case Type.BOOL3: return gl.BOOL_VEC3;
-    case Type.BOOL4: return gl.BOOL_VEC4;
-    case Type.INT: return gl.INT;
-    case Type.INT2: return gl.INT_VEC2;
-    case Type.INT3: return gl.INT_VEC3;
-    case Type.INT4: return gl.INT_VEC4;
-    case Type.UINT: return gl.UNSIGNED_INT;
-    case Type.FLOAT: return gl.FLOAT;
-    case Type.FLOAT2: return gl.FLOAT_VEC2;
-    case Type.FLOAT3: return gl.FLOAT_VEC3;
-    case Type.FLOAT4: return gl.FLOAT_VEC4;
-    case Type.MAT2: return gl.FLOAT_MAT2;
-    case Type.MAT2X3: return gl.FLOAT_MAT2x3;
-    case Type.MAT2X4: return gl.FLOAT_MAT2x4;
-    case Type.MAT3X2: return gl.FLOAT_MAT3x2;
-    case Type.MAT3: return gl.FLOAT_MAT3;
-    case Type.MAT3X4: return gl.FLOAT_MAT3x4;
-    case Type.MAT4X2: return gl.FLOAT_MAT4x2;
-    case Type.MAT4X3: return gl.FLOAT_MAT4x3;
-    case Type.MAT4: return gl.FLOAT_MAT4;
-    case Type.SAMPLER2D: return gl.SAMPLER_2D;
-    case Type.SAMPLER2D_ARRAY: return gl.SAMPLER_2D_ARRAY;
-    case Type.SAMPLER3D: return gl.SAMPLER_3D;
-    case Type.SAMPLER_CUBE: return gl.SAMPLER_CUBE;
+    case Type.BOOL: return WebGLConstants.BOOL;
+    case Type.BOOL2: return WebGLConstants.BOOL_VEC2;
+    case Type.BOOL3: return WebGLConstants.BOOL_VEC3;
+    case Type.BOOL4: return WebGLConstants.BOOL_VEC4;
+    case Type.INT: return WebGLConstants.INT;
+    case Type.INT2: return WebGLConstants.INT_VEC2;
+    case Type.INT3: return WebGLConstants.INT_VEC3;
+    case Type.INT4: return WebGLConstants.INT_VEC4;
+    case Type.UINT: return WebGLConstants.UNSIGNED_INT;
+    case Type.FLOAT: return WebGLConstants.FLOAT;
+    case Type.FLOAT2: return WebGLConstants.FLOAT_VEC2;
+    case Type.FLOAT3: return WebGLConstants.FLOAT_VEC3;
+    case Type.FLOAT4: return WebGLConstants.FLOAT_VEC4;
+    case Type.MAT2: return WebGLConstants.FLOAT_MAT2;
+    case Type.MAT2X3: return WebGLConstants.FLOAT_MAT2x3;
+    case Type.MAT2X4: return WebGLConstants.FLOAT_MAT2x4;
+    case Type.MAT3X2: return WebGLConstants.FLOAT_MAT3x2;
+    case Type.MAT3: return WebGLConstants.FLOAT_MAT3;
+    case Type.MAT3X4: return WebGLConstants.FLOAT_MAT3x4;
+    case Type.MAT4X2: return WebGLConstants.FLOAT_MAT4x2;
+    case Type.MAT4X3: return WebGLConstants.FLOAT_MAT4x3;
+    case Type.MAT4: return WebGLConstants.FLOAT_MAT4;
+    case Type.SAMPLER2D: return WebGLConstants.SAMPLER_2D;
+    case Type.SAMPLER2D_ARRAY: return WebGLConstants.SAMPLER_2D_ARRAY;
+    case Type.SAMPLER3D: return WebGLConstants.SAMPLER_3D;
+    case Type.SAMPLER_CUBE: return WebGLConstants.SAMPLER_CUBE;
     default: {
         errorID(16311);
         return Type.UNKNOWN;
@@ -466,35 +467,35 @@ function GFXTypeToWebGLType (type: Type, gl: WebGL2RenderingContext): GLenum {
 
 function WebGLTypeToGFXType (glType: GLenum, gl: WebGL2RenderingContext): Type {
     switch (glType) {
-    case gl.BOOL: return Type.BOOL;
-    case gl.BOOL_VEC2: return Type.BOOL2;
-    case gl.BOOL_VEC3: return Type.BOOL3;
-    case gl.BOOL_VEC4: return Type.BOOL4;
-    case gl.INT: return Type.INT;
-    case gl.INT_VEC2: return Type.INT2;
-    case gl.INT_VEC3: return Type.INT3;
-    case gl.INT_VEC4: return Type.INT4;
-    case gl.UNSIGNED_INT: return Type.UINT;
-    case gl.UNSIGNED_INT_VEC2: return Type.UINT2;
-    case gl.UNSIGNED_INT_VEC3: return Type.UINT3;
-    case gl.UNSIGNED_INT_VEC4: return Type.UINT4;
-    case gl.FLOAT: return Type.FLOAT;
-    case gl.FLOAT_VEC2: return Type.FLOAT2;
-    case gl.FLOAT_VEC3: return Type.FLOAT3;
-    case gl.FLOAT_VEC4: return Type.FLOAT4;
-    case gl.FLOAT_MAT2: return Type.MAT2;
-    case gl.FLOAT_MAT2x3: return Type.MAT2X3;
-    case gl.FLOAT_MAT2x4: return Type.MAT2X4;
-    case gl.FLOAT_MAT3x2: return Type.MAT3X2;
-    case gl.FLOAT_MAT3: return Type.MAT3;
-    case gl.FLOAT_MAT3x4: return Type.MAT3X4;
-    case gl.FLOAT_MAT4x2: return Type.MAT4X2;
-    case gl.FLOAT_MAT4x3: return Type.MAT4X3;
-    case gl.FLOAT_MAT4: return Type.MAT4;
-    case gl.SAMPLER_2D: return Type.SAMPLER2D;
-    case gl.SAMPLER_2D_ARRAY: return Type.SAMPLER2D_ARRAY;
-    case gl.SAMPLER_3D: return Type.SAMPLER3D;
-    case gl.SAMPLER_CUBE: return Type.SAMPLER_CUBE;
+    case WebGLConstants.BOOL: return Type.BOOL;
+    case WebGLConstants.BOOL_VEC2: return Type.BOOL2;
+    case WebGLConstants.BOOL_VEC3: return Type.BOOL3;
+    case WebGLConstants.BOOL_VEC4: return Type.BOOL4;
+    case WebGLConstants.INT: return Type.INT;
+    case WebGLConstants.INT_VEC2: return Type.INT2;
+    case WebGLConstants.INT_VEC3: return Type.INT3;
+    case WebGLConstants.INT_VEC4: return Type.INT4;
+    case WebGLConstants.UNSIGNED_INT: return Type.UINT;
+    case WebGLConstants.UNSIGNED_INT_VEC2: return Type.UINT2;
+    case WebGLConstants.UNSIGNED_INT_VEC3: return Type.UINT3;
+    case WebGLConstants.UNSIGNED_INT_VEC4: return Type.UINT4;
+    case WebGLConstants.FLOAT: return Type.FLOAT;
+    case WebGLConstants.FLOAT_VEC2: return Type.FLOAT2;
+    case WebGLConstants.FLOAT_VEC3: return Type.FLOAT3;
+    case WebGLConstants.FLOAT_VEC4: return Type.FLOAT4;
+    case WebGLConstants.FLOAT_MAT2: return Type.MAT2;
+    case WebGLConstants.FLOAT_MAT2x3: return Type.MAT2X3;
+    case WebGLConstants.FLOAT_MAT2x4: return Type.MAT2X4;
+    case WebGLConstants.FLOAT_MAT3x2: return Type.MAT3X2;
+    case WebGLConstants.FLOAT_MAT3: return Type.MAT3;
+    case WebGLConstants.FLOAT_MAT3x4: return Type.MAT3X4;
+    case WebGLConstants.FLOAT_MAT4x2: return Type.MAT4X2;
+    case WebGLConstants.FLOAT_MAT4x3: return Type.MAT4X3;
+    case WebGLConstants.FLOAT_MAT4: return Type.MAT4;
+    case WebGLConstants.SAMPLER_2D: return Type.SAMPLER2D;
+    case WebGLConstants.SAMPLER_2D_ARRAY: return Type.SAMPLER2D_ARRAY;
+    case WebGLConstants.SAMPLER_3D: return Type.SAMPLER3D;
+    case WebGLConstants.SAMPLER_CUBE: return Type.SAMPLER_CUBE;
     default: {
         errorID(16313);
         return Type.UNKNOWN;
@@ -504,44 +505,44 @@ function WebGLTypeToGFXType (glType: GLenum, gl: WebGL2RenderingContext): Type {
 
 function WebGLGetTypeSize (glType: GLenum, gl: WebGL2RenderingContext): number {
     switch (glType) {
-    case gl.BOOL: return 4;
-    case gl.BOOL_VEC2: return 8;
-    case gl.BOOL_VEC3: return 12;
-    case gl.BOOL_VEC4: return 16;
-    case gl.INT: return 4;
-    case gl.INT_VEC2: return 8;
-    case gl.INT_VEC3: return 12;
-    case gl.INT_VEC4: return 16;
-    case gl.UNSIGNED_INT: return 4;
-    case gl.UNSIGNED_INT_VEC2: return 8;
-    case gl.UNSIGNED_INT_VEC3: return 12;
-    case gl.UNSIGNED_INT_VEC4: return 16;
-    case gl.FLOAT: return 4;
-    case gl.FLOAT_VEC2: return 8;
-    case gl.FLOAT_VEC3: return 12;
-    case gl.FLOAT_VEC4: return 16;
-    case gl.FLOAT_MAT2: return 16;
-    case gl.FLOAT_MAT2x3: return 24;
-    case gl.FLOAT_MAT2x4: return 32;
-    case gl.FLOAT_MAT3x2: return 24;
-    case gl.FLOAT_MAT3: return 36;
-    case gl.FLOAT_MAT3x4: return 48;
-    case gl.FLOAT_MAT4x2: return 32;
-    case gl.FLOAT_MAT4x3: return 48;
-    case gl.FLOAT_MAT4: return 64;
-    case gl.SAMPLER_2D: return 4;
-    case gl.SAMPLER_2D_ARRAY: return 4;
-    case gl.SAMPLER_2D_ARRAY_SHADOW: return 4;
-    case gl.SAMPLER_3D: return 4;
-    case gl.SAMPLER_CUBE: return 4;
-    case gl.INT_SAMPLER_2D: return 4;
-    case gl.INT_SAMPLER_2D_ARRAY: return 4;
-    case gl.INT_SAMPLER_3D: return 4;
-    case gl.INT_SAMPLER_CUBE: return 4;
-    case gl.UNSIGNED_INT_SAMPLER_2D: return 4;
-    case gl.UNSIGNED_INT_SAMPLER_2D_ARRAY: return 4;
-    case gl.UNSIGNED_INT_SAMPLER_3D: return 4;
-    case gl.UNSIGNED_INT_SAMPLER_CUBE: return 4;
+    case WebGLConstants.BOOL: return 4;
+    case WebGLConstants.BOOL_VEC2: return 8;
+    case WebGLConstants.BOOL_VEC3: return 12;
+    case WebGLConstants.BOOL_VEC4: return 16;
+    case WebGLConstants.INT: return 4;
+    case WebGLConstants.INT_VEC2: return 8;
+    case WebGLConstants.INT_VEC3: return 12;
+    case WebGLConstants.INT_VEC4: return 16;
+    case WebGLConstants.UNSIGNED_INT: return 4;
+    case WebGLConstants.UNSIGNED_INT_VEC2: return 8;
+    case WebGLConstants.UNSIGNED_INT_VEC3: return 12;
+    case WebGLConstants.UNSIGNED_INT_VEC4: return 16;
+    case WebGLConstants.FLOAT: return 4;
+    case WebGLConstants.FLOAT_VEC2: return 8;
+    case WebGLConstants.FLOAT_VEC3: return 12;
+    case WebGLConstants.FLOAT_VEC4: return 16;
+    case WebGLConstants.FLOAT_MAT2: return 16;
+    case WebGLConstants.FLOAT_MAT2x3: return 24;
+    case WebGLConstants.FLOAT_MAT2x4: return 32;
+    case WebGLConstants.FLOAT_MAT3x2: return 24;
+    case WebGLConstants.FLOAT_MAT3: return 36;
+    case WebGLConstants.FLOAT_MAT3x4: return 48;
+    case WebGLConstants.FLOAT_MAT4x2: return 32;
+    case WebGLConstants.FLOAT_MAT4x3: return 48;
+    case WebGLConstants.FLOAT_MAT4: return 64;
+    case WebGLConstants.SAMPLER_2D: return 4;
+    case WebGLConstants.SAMPLER_2D_ARRAY: return 4;
+    case WebGLConstants.SAMPLER_2D_ARRAY_SHADOW: return 4;
+    case WebGLConstants.SAMPLER_3D: return 4;
+    case WebGLConstants.SAMPLER_CUBE: return 4;
+    case WebGLConstants.INT_SAMPLER_2D: return 4;
+    case WebGLConstants.INT_SAMPLER_2D_ARRAY: return 4;
+    case WebGLConstants.INT_SAMPLER_3D: return 4;
+    case WebGLConstants.INT_SAMPLER_CUBE: return 4;
+    case WebGLConstants.UNSIGNED_INT_SAMPLER_2D: return 4;
+    case WebGLConstants.UNSIGNED_INT_SAMPLER_2D_ARRAY: return 4;
+    case WebGLConstants.UNSIGNED_INT_SAMPLER_3D: return 4;
+    case WebGLConstants.UNSIGNED_INT_SAMPLER_CUBE: return 4;
     default: {
         errorID(16314);
         return 0;
@@ -551,15 +552,15 @@ function WebGLGetTypeSize (glType: GLenum, gl: WebGL2RenderingContext): number {
 
 function WebGLGetComponentCount (glType: GLenum, gl: WebGL2RenderingContext): Type {
     switch (glType) {
-    case gl.FLOAT_MAT2: return 2;
-    case gl.FLOAT_MAT2x3: return 2;
-    case gl.FLOAT_MAT2x4: return 2;
-    case gl.FLOAT_MAT3x2: return 3;
-    case gl.FLOAT_MAT3: return 3;
-    case gl.FLOAT_MAT3x4: return 3;
-    case gl.FLOAT_MAT4x2: return 4;
-    case gl.FLOAT_MAT4x3: return 4;
-    case gl.FLOAT_MAT4: return 4;
+    case WebGLConstants.FLOAT_MAT2: return 2;
+    case WebGLConstants.FLOAT_MAT2x3: return 2;
+    case WebGLConstants.FLOAT_MAT2x4: return 2;
+    case WebGLConstants.FLOAT_MAT3x2: return 3;
+    case WebGLConstants.FLOAT_MAT3: return 3;
+    case WebGLConstants.FLOAT_MAT3x4: return 3;
+    case WebGLConstants.FLOAT_MAT4x2: return 4;
+    case WebGLConstants.FLOAT_MAT4x3: return 4;
+    case WebGLConstants.FLOAT_MAT4: return 4;
     default: {
         return 1;
     }
@@ -567,51 +568,51 @@ function WebGLGetComponentCount (glType: GLenum, gl: WebGL2RenderingContext): Ty
 }
 
 const WebGLCmpFuncs: GLenum[] = [
-    0x0200, // WebGLRenderingContext.NEVER,
-    0x0201, // WebGLRenderingContext.LESS,
-    0x0202, // WebGLRenderingContext.EQUAL,
-    0x0203, // WebGLRenderingContext.LEQUAL,
-    0x0204, // WebGLRenderingContext.GREATER,
-    0x0205, // WebGLRenderingContext.NOTEQUAL,
-    0x0206, // WebGLRenderingContext.GEQUAL,
-    0x0207, // WebGLRenderingContext.ALWAYS,
+    WebGLConstants.NEVER,
+    WebGLConstants.LESS,
+    WebGLConstants.EQUAL,
+    WebGLConstants.LEQUAL,
+    WebGLConstants.GREATER,
+    WebGLConstants.NOTEQUAL,
+    WebGLConstants.GEQUAL,
+    WebGLConstants.ALWAYS,
 ];
 
 const WebGLStencilOps: GLenum[] = [
-    0x0000, // WebGLRenderingContext.ZERO,
-    0x1E00, // WebGLRenderingContext.KEEP,
-    0x1E01, // WebGLRenderingContext.REPLACE,
-    0x1E02, // WebGLRenderingContext.INCR,
-    0x1E03, // WebGLRenderingContext.DECR,
-    0x150A, // WebGLRenderingContext.INVERT,
-    0x8507, // WebGLRenderingContext.INCR_WRAP,
-    0x8508, // WebGLRenderingContext.DECR_WRAP,
+    WebGLConstants.ZERO,
+    WebGLConstants.KEEP,
+    WebGLConstants.REPLACE,
+    WebGLConstants.INCR,
+    WebGLConstants.DECR,
+    WebGLConstants.INVERT,
+    WebGLConstants.INCR_WRAP,
+    WebGLConstants.DECR_WRAP,
 ];
 
 const WebGLBlendOps: GLenum[] = [
-    0x8006, // WebGLRenderingContext.FUNC_ADD,
-    0x800A, // WebGLRenderingContext.FUNC_SUBTRACT,
-    0x800B, // WebGLRenderingContext.FUNC_REVERSE_SUBTRACT,
-    0x8007, // WebGL2RenderingContext.MIN,
-    0x8008, // WebGL2RenderingContext.MAX,
+    WebGLConstants.FUNC_ADD,
+    WebGLConstants.FUNC_SUBTRACT,
+    WebGLConstants.FUNC_REVERSE_SUBTRACT,
+    WebGLConstants.MIN,
+    WebGLConstants.MAX,
 ];
 
 const WebGLBlendFactors: GLenum[] = [
-    0x0000, // WebGLRenderingContext.ZERO,
-    0x0001, // WebGLRenderingContext.ONE,
-    0x0302, // WebGLRenderingContext.SRC_ALPHA,
-    0x0304, // WebGLRenderingContext.DST_ALPHA,
-    0x0303, // WebGLRenderingContext.ONE_MINUS_SRC_ALPHA,
-    0x0305, // WebGLRenderingContext.ONE_MINUS_DST_ALPHA,
-    0x0300, // WebGLRenderingContext.SRC_COLOR,
-    0x0306, // WebGLRenderingContext.DST_COLOR,
-    0x0301, // WebGLRenderingContext.ONE_MINUS_SRC_COLOR,
-    0x0307, // WebGLRenderingContext.ONE_MINUS_DST_COLOR,
-    0x0308, // WebGLRenderingContext.SRC_ALPHA_SATURATE,
-    0x8001, // WebGLRenderingContext.CONSTANT_COLOR,
-    0x8002, // WebGLRenderingContext.ONE_MINUS_CONSTANT_COLOR,
-    0x8003, // WebGLRenderingContext.CONSTANT_ALPHA,
-    0x8004, // WebGLRenderingContext.ONE_MINUS_CONSTANT_ALPHA,
+    WebGLConstants.ZERO,
+    WebGLConstants.ONE,
+    WebGLConstants.SRC_ALPHA,
+    WebGLConstants.DST_ALPHA,
+    WebGLConstants.ONE_MINUS_SRC_ALPHA,
+    WebGLConstants.ONE_MINUS_DST_ALPHA,
+    WebGLConstants.SRC_COLOR,
+    WebGLConstants.DST_COLOR,
+    WebGLConstants.ONE_MINUS_SRC_COLOR,
+    WebGLConstants.ONE_MINUS_DST_COLOR,
+    WebGLConstants.SRC_ALPHA_SATURATE,
+    WebGLConstants.CONSTANT_COLOR,
+    WebGLConstants.ONE_MINUS_CONSTANT_COLOR,
+    WebGLConstants.CONSTANT_ALPHA,
+    WebGLConstants.ONE_MINUS_CONSTANT_ALPHA,
 ];
 
 export enum WebGL2Cmd {
@@ -781,10 +782,10 @@ export class WebGL2CmdPackage {
 export function WebGL2CmdFuncCreateBuffer (device: WebGL2Device, gpuBuffer: IWebGL2GPUBuffer): void {
     const { gl } = device;
     const cache = device.stateCache;
-    const glUsage: GLenum = gpuBuffer.memUsage & MemoryUsageBit.HOST ? gl.DYNAMIC_DRAW : gl.STATIC_DRAW;
+    const glUsage: GLenum = gpuBuffer.memUsage & MemoryUsageBit.HOST ? WebGLConstants.DYNAMIC_DRAW : WebGLConstants.STATIC_DRAW;
 
     if (gpuBuffer.usage & BufferUsageBit.VERTEX) {
-        gpuBuffer.glTarget = gl.ARRAY_BUFFER;
+        gpuBuffer.glTarget = WebGLConstants.ARRAY_BUFFER;
         const glBuffer = gl.createBuffer();
 
         if (glBuffer) {
@@ -799,18 +800,18 @@ export function WebGL2CmdFuncCreateBuffer (device: WebGL2Device, gpuBuffer: IWeb
                 gfxStateCache.gpuInputAssembler = null;
 
                 if (device.stateCache.glArrayBuffer !== gpuBuffer.glBuffer) {
-                    gl.bindBuffer(gl.ARRAY_BUFFER, gpuBuffer.glBuffer);
+                    gl.bindBuffer(WebGLConstants.ARRAY_BUFFER, gpuBuffer.glBuffer);
                     device.stateCache.glArrayBuffer = gpuBuffer.glBuffer;
                 }
 
-                gl.bufferData(gl.ARRAY_BUFFER, gpuBuffer.size, glUsage);
+                gl.bufferData(WebGLConstants.ARRAY_BUFFER, gpuBuffer.size, glUsage);
 
-                gl.bindBuffer(gl.ARRAY_BUFFER, null);
+                gl.bindBuffer(WebGLConstants.ARRAY_BUFFER, null);
                 device.stateCache.glArrayBuffer = null;
             }
         }
     } else if (gpuBuffer.usage & BufferUsageBit.INDEX) {
-        gpuBuffer.glTarget = gl.ELEMENT_ARRAY_BUFFER;
+        gpuBuffer.glTarget = WebGLConstants.ELEMENT_ARRAY_BUFFER;
         const glBuffer = gl.createBuffer();
         if (glBuffer) {
             gpuBuffer.glBuffer = glBuffer;
@@ -824,40 +825,40 @@ export function WebGL2CmdFuncCreateBuffer (device: WebGL2Device, gpuBuffer: IWeb
                 gfxStateCache.gpuInputAssembler = null;
 
                 if (device.stateCache.glElementArrayBuffer !== gpuBuffer.glBuffer) {
-                    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gpuBuffer.glBuffer);
+                    gl.bindBuffer(WebGLConstants.ELEMENT_ARRAY_BUFFER, gpuBuffer.glBuffer);
                     device.stateCache.glElementArrayBuffer = gpuBuffer.glBuffer;
                 }
 
-                gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, gpuBuffer.size, glUsage);
+                gl.bufferData(WebGLConstants.ELEMENT_ARRAY_BUFFER, gpuBuffer.size, glUsage);
 
-                gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
+                gl.bindBuffer(WebGLConstants.ELEMENT_ARRAY_BUFFER, null);
                 device.stateCache.glElementArrayBuffer = null;
             }
         }
     } else if (gpuBuffer.usage & BufferUsageBit.UNIFORM) {
-        gpuBuffer.glTarget = gl.UNIFORM_BUFFER;
+        gpuBuffer.glTarget = WebGLConstants.UNIFORM_BUFFER;
         const glBuffer = gl.createBuffer();
         if (glBuffer && gpuBuffer.size > 0) {
             gpuBuffer.glBuffer = glBuffer;
             if (device.stateCache.glUniformBuffer !== gpuBuffer.glBuffer) {
-                gl.bindBuffer(gl.UNIFORM_BUFFER, gpuBuffer.glBuffer);
+                gl.bindBuffer(WebGLConstants.UNIFORM_BUFFER, gpuBuffer.glBuffer);
                 device.stateCache.glUniformBuffer = gpuBuffer.glBuffer;
             }
 
-            gl.bufferData(gl.UNIFORM_BUFFER, gpuBuffer.size, glUsage);
+            gl.bufferData(WebGLConstants.UNIFORM_BUFFER, gpuBuffer.size, glUsage);
 
-            gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+            gl.bindBuffer(WebGLConstants.UNIFORM_BUFFER, null);
             device.stateCache.glUniformBuffer = null;
         }
     } else if (gpuBuffer.usage & BufferUsageBit.INDIRECT) {
-        gpuBuffer.glTarget = gl.NONE;
+        gpuBuffer.glTarget = WebGLConstants.NONE;
     } else if (gpuBuffer.usage & BufferUsageBit.TRANSFER_DST) {
-        gpuBuffer.glTarget = gl.NONE;
+        gpuBuffer.glTarget = WebGLConstants.NONE;
     } else if (gpuBuffer.usage & BufferUsageBit.TRANSFER_SRC) {
-        gpuBuffer.glTarget = gl.NONE;
+        gpuBuffer.glTarget = WebGLConstants.NONE;
     } else {
         errorID(16315);
-        gpuBuffer.glTarget = gl.NONE;
+        gpuBuffer.glTarget = WebGLConstants.NONE;
     }
 }
 
@@ -869,7 +870,7 @@ export function WebGL2CmdFuncDestroyBuffer (device: WebGL2Device, gpuBuffer: IWe
         // Firefox 75+ implicitly unbind whatever buffer there was on the slot sometimes
         // can be reproduced in the static batching scene at https://github.com/cocos-creator/test-cases-3d
         switch (gpuBuffer.glTarget) {
-        case gl.ARRAY_BUFFER:
+        case WebGLConstants.ARRAY_BUFFER:
             if (device.extensions.useVAO) {
                 if (cache.glVAO) {
                     gl.bindVertexArray(null);
@@ -878,10 +879,10 @@ export function WebGL2CmdFuncDestroyBuffer (device: WebGL2Device, gpuBuffer: IWe
             }
             gfxStateCache.gpuInputAssembler = null;
 
-            gl.bindBuffer(gl.ARRAY_BUFFER, null);
+            gl.bindBuffer(WebGLConstants.ARRAY_BUFFER, null);
             device.stateCache.glArrayBuffer = null;
             break;
-        case gl.ELEMENT_ARRAY_BUFFER:
+        case WebGLConstants.ELEMENT_ARRAY_BUFFER:
             if (device.extensions.useVAO) {
                 if (cache.glVAO) {
                     gl.bindVertexArray(null);
@@ -890,11 +891,11 @@ export function WebGL2CmdFuncDestroyBuffer (device: WebGL2Device, gpuBuffer: IWe
             }
             gfxStateCache.gpuInputAssembler = null;
 
-            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
+            gl.bindBuffer(WebGLConstants.ELEMENT_ARRAY_BUFFER, null);
             device.stateCache.glElementArrayBuffer = null;
             break;
-        case gl.UNIFORM_BUFFER:
-            gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+        case WebGLConstants.UNIFORM_BUFFER:
+            gl.bindBuffer(WebGLConstants.UNIFORM_BUFFER, null);
             device.stateCache.glUniformBuffer = null;
             break;
         default:
@@ -908,7 +909,7 @@ export function WebGL2CmdFuncDestroyBuffer (device: WebGL2Device, gpuBuffer: IWe
 export function WebGL2CmdFuncResizeBuffer (device: WebGL2Device, gpuBuffer: IWebGL2GPUBuffer): void {
     const { gl } = device;
     const cache = device.stateCache;
-    const glUsage: GLenum = gpuBuffer.memUsage & MemoryUsageBit.HOST ? gl.DYNAMIC_DRAW : gl.STATIC_DRAW;
+    const glUsage: GLenum = gpuBuffer.memUsage & MemoryUsageBit.HOST ? WebGLConstants.DYNAMIC_DRAW : WebGLConstants.STATIC_DRAW;
 
     if (gpuBuffer.usage & BufferUsageBit.VERTEX) {
         if (device.extensions.useVAO) {
@@ -920,15 +921,15 @@ export function WebGL2CmdFuncResizeBuffer (device: WebGL2Device, gpuBuffer: IWeb
         gfxStateCache.gpuInputAssembler = null;
 
         if (cache.glArrayBuffer !== gpuBuffer.glBuffer) {
-            gl.bindBuffer(gl.ARRAY_BUFFER, gpuBuffer.glBuffer);
+            gl.bindBuffer(WebGLConstants.ARRAY_BUFFER, gpuBuffer.glBuffer);
         }
 
         if (gpuBuffer.buffer) {
-            gl.bufferData(gl.ARRAY_BUFFER, gpuBuffer.buffer, glUsage);
+            gl.bufferData(WebGLConstants.ARRAY_BUFFER, gpuBuffer.buffer, glUsage);
         } else {
-            gl.bufferData(gl.ARRAY_BUFFER, gpuBuffer.size, glUsage);
+            gl.bufferData(WebGLConstants.ARRAY_BUFFER, gpuBuffer.size, glUsage);
         }
-        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        gl.bindBuffer(WebGLConstants.ARRAY_BUFFER, null);
         cache.glArrayBuffer = null;
     } else if (gpuBuffer.usage & BufferUsageBit.INDEX) {
         if (device.extensions.useVAO) {
@@ -940,31 +941,31 @@ export function WebGL2CmdFuncResizeBuffer (device: WebGL2Device, gpuBuffer: IWeb
         gfxStateCache.gpuInputAssembler = null;
 
         if (device.stateCache.glElementArrayBuffer !== gpuBuffer.glBuffer) {
-            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gpuBuffer.glBuffer);
+            gl.bindBuffer(WebGLConstants.ELEMENT_ARRAY_BUFFER, gpuBuffer.glBuffer);
         }
 
         if (gpuBuffer.buffer) {
-            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, gpuBuffer.buffer, glUsage);
+            gl.bufferData(WebGLConstants.ELEMENT_ARRAY_BUFFER, gpuBuffer.buffer, glUsage);
         } else {
-            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, gpuBuffer.size, glUsage);
+            gl.bufferData(WebGLConstants.ELEMENT_ARRAY_BUFFER, gpuBuffer.size, glUsage);
         }
-        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
+        gl.bindBuffer(WebGLConstants.ELEMENT_ARRAY_BUFFER, null);
         device.stateCache.glElementArrayBuffer = null;
     } else if (gpuBuffer.usage & BufferUsageBit.UNIFORM) {
         if (device.stateCache.glUniformBuffer !== gpuBuffer.glBuffer) {
-            gl.bindBuffer(gl.UNIFORM_BUFFER, gpuBuffer.glBuffer);
+            gl.bindBuffer(WebGLConstants.UNIFORM_BUFFER, gpuBuffer.glBuffer);
         }
 
-        gl.bufferData(gl.UNIFORM_BUFFER, gpuBuffer.size, glUsage);
-        gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+        gl.bufferData(WebGLConstants.UNIFORM_BUFFER, gpuBuffer.size, glUsage);
+        gl.bindBuffer(WebGLConstants.UNIFORM_BUFFER, null);
         device.stateCache.glUniformBuffer = null;
     } else if ((gpuBuffer.usage & BufferUsageBit.INDIRECT)
             || (gpuBuffer.usage & BufferUsageBit.TRANSFER_DST)
             || (gpuBuffer.usage & BufferUsageBit.TRANSFER_SRC)) {
-        gpuBuffer.glTarget = gl.NONE;
+        gpuBuffer.glTarget = WebGLConstants.NONE;
     } else {
         errorID(16315);
-        gpuBuffer.glTarget = gl.NONE;
+        gpuBuffer.glTarget = WebGLConstants.NONE;
     }
 }
 
@@ -987,7 +988,7 @@ export function WebGL2CmdFuncUpdateBuffer (
         const cache = device.stateCache;
 
         switch (gpuBuffer.glTarget) {
-        case gl.ARRAY_BUFFER: {
+        case WebGLConstants.ARRAY_BUFFER: {
             if (device.extensions.useVAO) {
                 if (cache.glVAO) {
                     gl.bindVertexArray(null);
@@ -997,7 +998,7 @@ export function WebGL2CmdFuncUpdateBuffer (
             gfxStateCache.gpuInputAssembler = null;
 
             if (cache.glArrayBuffer !== gpuBuffer.glBuffer) {
-                gl.bindBuffer(gl.ARRAY_BUFFER, gpuBuffer.glBuffer);
+                gl.bindBuffer(WebGLConstants.ARRAY_BUFFER, gpuBuffer.glBuffer);
                 cache.glArrayBuffer = gpuBuffer.glBuffer;
             }
 
@@ -1008,7 +1009,7 @@ export function WebGL2CmdFuncUpdateBuffer (
             }
             break;
         }
-        case gl.ELEMENT_ARRAY_BUFFER: {
+        case WebGLConstants.ELEMENT_ARRAY_BUFFER: {
             if (device.extensions.useVAO) {
                 if (cache.glVAO) {
                     gl.bindVertexArray(null);
@@ -1018,7 +1019,7 @@ export function WebGL2CmdFuncUpdateBuffer (
             gfxStateCache.gpuInputAssembler = null;
 
             if (cache.glElementArrayBuffer !== gpuBuffer.glBuffer) {
-                gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gpuBuffer.glBuffer);
+                gl.bindBuffer(WebGLConstants.ELEMENT_ARRAY_BUFFER, gpuBuffer.glBuffer);
                 cache.glElementArrayBuffer = gpuBuffer.glBuffer;
             }
 
@@ -1029,9 +1030,9 @@ export function WebGL2CmdFuncUpdateBuffer (
             }
             break;
         }
-        case gl.UNIFORM_BUFFER: {
+        case WebGLConstants.UNIFORM_BUFFER: {
             if (cache.glUniformBuffer !== gpuBuffer.glBuffer) {
-                gl.bindBuffer(gl.UNIFORM_BUFFER, gpuBuffer.glBuffer);
+                gl.bindBuffer(WebGLConstants.UNIFORM_BUFFER, gpuBuffer.glBuffer);
                 cache.glUniformBuffer = gpuBuffer.glBuffer;
             }
 
@@ -1063,7 +1064,7 @@ export function WebGL2CmdFuncCreateTexture (device: WebGL2Device, gpuTexture: IW
 
     switch (gpuTexture.type) {
     case TextureType.TEX2D: {
-        gpuTexture.glTarget = gl.TEXTURE_2D;
+        gpuTexture.glTarget = WebGLConstants.TEXTURE_2D;
 
         const maxSize = Math.max(w, h);
         if (maxSize > device.capabilities.maxTextureSize) {
@@ -1076,7 +1077,7 @@ export function WebGL2CmdFuncCreateTexture (device: WebGL2Device, gpuTexture: IW
                 const glTexUnit = device.stateCache.glTexUnits[device.stateCache.texUnit];
 
                 if (glTexUnit.glTexture !== gpuTexture.glTexture) {
-                    gl.bindTexture(gl.TEXTURE_2D, gpuTexture.glTexture);
+                    gl.bindTexture(WebGLConstants.TEXTURE_2D, gpuTexture.glTexture);
                     glTexUnit.glTexture = gpuTexture.glTexture;
                 }
 
@@ -1084,26 +1085,26 @@ export function WebGL2CmdFuncCreateTexture (device: WebGL2Device, gpuTexture: IW
                     for (let i = 0; i < gpuTexture.mipLevel; ++i) {
                         const imgSize = FormatSize(gpuTexture.format, w, h, 1);
                         const view: Uint8Array = new Uint8Array(imgSize);
-                        gl.compressedTexImage2D(gl.TEXTURE_2D, i, gpuTexture.glInternalFmt, w, h, 0, view);
+                        gl.compressedTexImage2D(WebGLConstants.TEXTURE_2D, i, gpuTexture.glInternalFmt, w, h, 0, view);
                         w = Math.max(1, w >> 1);
                         h = Math.max(1, h >> 1);
                     }
                 } else if (gpuTexture.flags & TextureFlagBit.MUTABLE_STORAGE) {
-                    gl.texImage2D(gl.TEXTURE_2D, 0, gpuTexture.glInternalFmt, w, h, 0, gpuTexture.glFormat, gpuTexture.glType, null);
+                    gl.texImage2D(WebGLConstants.TEXTURE_2D, 0, gpuTexture.glInternalFmt, w, h, 0, gpuTexture.glFormat, gpuTexture.glType, null);
                 } else {
-                    gl.texStorage2D(gl.TEXTURE_2D, gpuTexture.mipLevel, gpuTexture.glInternalFmt, w, h);
+                    gl.texStorage2D(WebGLConstants.TEXTURE_2D, gpuTexture.mipLevel, gpuTexture.glInternalFmt, w, h);
                 }
             }
         } else {
             gpuTexture.glRenderbuffer = gl.createRenderbuffer();
             if (gpuTexture.size > 0) {
                 if (device.stateCache.glRenderbuffer !== gpuTexture.glRenderbuffer) {
-                    gl.bindRenderbuffer(gl.RENDERBUFFER, gpuTexture.glRenderbuffer);
+                    gl.bindRenderbuffer(WebGLConstants.RENDERBUFFER, gpuTexture.glRenderbuffer);
                     device.stateCache.glRenderbuffer = gpuTexture.glRenderbuffer;
                 }
 
                 gl.renderbufferStorageMultisample(
-                    gl.RENDERBUFFER,
+                    WebGLConstants.RENDERBUFFER,
                     gpuTexture.samples,
                     gpuTexture.glInternalFmt,
                     gpuTexture.width,
@@ -1114,7 +1115,7 @@ export function WebGL2CmdFuncCreateTexture (device: WebGL2Device, gpuTexture: IW
         break;
     }
     case TextureType.TEX2D_ARRAY: {
-        gpuTexture.glTarget = gl.TEXTURE_2D_ARRAY;
+        gpuTexture.glTarget = WebGLConstants.TEXTURE_2D_ARRAY;
 
         const maxSize = Math.max(w, h);
         if (maxSize > device.capabilities.maxTextureSize) {
@@ -1129,7 +1130,7 @@ export function WebGL2CmdFuncCreateTexture (device: WebGL2Device, gpuTexture: IW
             const glTexUnit = device.stateCache.glTexUnits[device.stateCache.texUnit];
 
             if (glTexUnit.glTexture !== gpuTexture.glTexture) {
-                gl.bindTexture(gl.TEXTURE_2D_ARRAY, gpuTexture.glTexture);
+                gl.bindTexture(WebGLConstants.TEXTURE_2D_ARRAY, gpuTexture.glTexture);
                 glTexUnit.glTexture = gpuTexture.glTexture;
             }
 
@@ -1137,18 +1138,18 @@ export function WebGL2CmdFuncCreateTexture (device: WebGL2Device, gpuTexture: IW
                 for (let i = 0; i < gpuTexture.mipLevel; ++i) {
                     const imgSize = FormatSize(gpuTexture.format, w, h, l);
                     const view: Uint8Array = new Uint8Array(imgSize);
-                    gl.compressedTexImage3D(gl.TEXTURE_2D_ARRAY, i, gpuTexture.glInternalFmt, w, h, l, 0, view);
+                    gl.compressedTexImage3D(WebGLConstants.TEXTURE_2D_ARRAY, i, gpuTexture.glInternalFmt, w, h, l, 0, view);
                     w = Math.max(1, w >> 1);
                     h = Math.max(1, h >> 1);
                 }
             } else {
-                gl.texStorage3D(gl.TEXTURE_2D_ARRAY, gpuTexture.mipLevel, gpuTexture.glInternalFmt, w, h, l);
+                gl.texStorage3D(WebGLConstants.TEXTURE_2D_ARRAY, gpuTexture.mipLevel, gpuTexture.glInternalFmt, w, h, l);
             }
         }
         break;
     }
     case TextureType.TEX3D: {
-        gpuTexture.glTarget = gl.TEXTURE_3D;
+        gpuTexture.glTarget = WebGLConstants.TEXTURE_3D;
 
         const maxSize = Math.max(Math.max(w, h), d);
         if (maxSize > device.capabilities.max3DTextureSize) {
@@ -1160,7 +1161,7 @@ export function WebGL2CmdFuncCreateTexture (device: WebGL2Device, gpuTexture: IW
             const glTexUnit = device.stateCache.glTexUnits[device.stateCache.texUnit];
 
             if (glTexUnit.glTexture !== gpuTexture.glTexture) {
-                gl.bindTexture(gl.TEXTURE_3D, gpuTexture.glTexture);
+                gl.bindTexture(WebGLConstants.TEXTURE_3D, gpuTexture.glTexture);
                 glTexUnit.glTexture = gpuTexture.glTexture;
             }
 
@@ -1168,18 +1169,18 @@ export function WebGL2CmdFuncCreateTexture (device: WebGL2Device, gpuTexture: IW
                 for (let i = 0; i < gpuTexture.mipLevel; ++i) {
                     const imgSize = FormatSize(gpuTexture.format, w, h, d);
                     const view: Uint8Array = new Uint8Array(imgSize);
-                    gl.compressedTexImage3D(gl.TEXTURE_3D, i, gpuTexture.glInternalFmt, w, h, d, 0, view);
+                    gl.compressedTexImage3D(WebGLConstants.TEXTURE_3D, i, gpuTexture.glInternalFmt, w, h, d, 0, view);
                     w = Math.max(1, w >> 1);
                     h = Math.max(1, h >> 1);
                 }
             } else {
-                gl.texStorage3D(gl.TEXTURE_3D, gpuTexture.mipLevel, gpuTexture.glInternalFmt, w, h, d);
+                gl.texStorage3D(WebGLConstants.TEXTURE_3D, gpuTexture.mipLevel, gpuTexture.glInternalFmt, w, h, d);
             }
         }
         break;
     }
     case TextureType.CUBE: {
-        gpuTexture.glTarget = gl.TEXTURE_CUBE_MAP;
+        gpuTexture.glTarget = WebGLConstants.TEXTURE_CUBE_MAP;
 
         const maxSize = Math.max(w, h);
         if (maxSize > device.capabilities.maxCubeMapTextureSize) {
@@ -1191,7 +1192,7 @@ export function WebGL2CmdFuncCreateTexture (device: WebGL2Device, gpuTexture: IW
             const glTexUnit = device.stateCache.glTexUnits[device.stateCache.texUnit];
 
             if (glTexUnit.glTexture !== gpuTexture.glTexture) {
-                gl.bindTexture(gl.TEXTURE_CUBE_MAP, gpuTexture.glTexture);
+                gl.bindTexture(WebGLConstants.TEXTURE_CUBE_MAP, gpuTexture.glTexture);
                 glTexUnit.glTexture = gpuTexture.glTexture;
             }
 
@@ -1200,13 +1201,13 @@ export function WebGL2CmdFuncCreateTexture (device: WebGL2Device, gpuTexture: IW
                     const imgSize = FormatSize(gpuTexture.format, w, h, 1);
                     const view: Uint8Array = new Uint8Array(imgSize);
                     for (let f = 0; f < 6; ++f) {
-                        gl.compressedTexImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + f, i, gpuTexture.glInternalFmt, w, h, 0, view);
+                        gl.compressedTexImage2D(WebGLConstants.TEXTURE_CUBE_MAP_POSITIVE_X + f, i, gpuTexture.glInternalFmt, w, h, 0, view);
                     }
                     w = Math.max(1, w >> 1);
                     h = Math.max(1, h >> 1);
                 }
             } else {
-                gl.texStorage2D(gl.TEXTURE_CUBE_MAP, gpuTexture.mipLevel, gpuTexture.glInternalFmt, w, h);
+                gl.texStorage2D(WebGLConstants.TEXTURE_CUBE_MAP, gpuTexture.mipLevel, gpuTexture.glInternalFmt, w, h);
             }
         }
         break;
@@ -1214,7 +1215,7 @@ export function WebGL2CmdFuncCreateTexture (device: WebGL2Device, gpuTexture: IW
     default: {
         errorID(16317);
         gpuTexture.type = TextureType.TEX2D;
-        gpuTexture.glTarget = gl.TEXTURE_2D;
+        gpuTexture.glTarget = WebGLConstants.TEXTURE_2D;
     }
     }
 }
@@ -1227,7 +1228,7 @@ export function WebGL2CmdFuncDestroyTexture (device: WebGL2Device, gpuTexture: I
         gl.deleteTexture(gpuTexture.glTexture);
         for (let i = 0; i < glTexUnits.length; ++i) {
             if (glTexUnits[i].glTexture === gpuTexture.glTexture) {
-                gl.activeTexture(gl.TEXTURE0 + i);
+                gl.activeTexture(WebGLConstants.TEXTURE0 + i);
                 texUnit = i;
                 gl.bindTexture(gpuTexture.glTarget, null);
                 glTexUnits[i].glTexture = null;
@@ -1241,7 +1242,7 @@ export function WebGL2CmdFuncDestroyTexture (device: WebGL2Device, gpuTexture: I
         let glRenderbuffer = device.stateCache.glRenderbuffer;
         gl.deleteRenderbuffer(gpuTexture.glRenderbuffer);
         if (glRenderbuffer === gpuTexture.glRenderbuffer) {
-            gl.bindRenderbuffer(gl.RENDERBUFFER, null);
+            gl.bindRenderbuffer(WebGLConstants.RENDERBUFFER, null);
             glRenderbuffer = null;
         }
         gpuTexture.glRenderbuffer = null;
@@ -1260,7 +1261,7 @@ export function WebGL2CmdFuncResizeTexture (device: WebGL2Device, gpuTexture: IW
 
     switch (gpuTexture.type) {
     case TextureType.TEX2D: {
-        gpuTexture.glTarget = gl.TEXTURE_2D;
+        gpuTexture.glTarget = WebGLConstants.TEXTURE_2D;
 
         const maxSize = Math.max(w, h);
         if (maxSize > device.capabilities.maxTextureSize) {
@@ -1271,7 +1272,7 @@ export function WebGL2CmdFuncResizeTexture (device: WebGL2Device, gpuTexture: IW
             const glTexUnit = device.stateCache.glTexUnits[device.stateCache.texUnit];
 
             if (glTexUnit.glTexture !== gpuTexture.glTexture) {
-                gl.bindTexture(gl.TEXTURE_2D, gpuTexture.glTexture);
+                gl.bindTexture(WebGLConstants.TEXTURE_2D, gpuTexture.glTexture);
                 glTexUnit.glTexture = gpuTexture.glTexture;
             }
 
@@ -1279,7 +1280,7 @@ export function WebGL2CmdFuncResizeTexture (device: WebGL2Device, gpuTexture: IW
                 for (let i = 0; i < gpuTexture.mipLevel; ++i) {
                     const imgSize = FormatSize(gpuTexture.format, w, h, 1);
                     const view: Uint8Array = new Uint8Array(imgSize);
-                    gl.compressedTexImage2D(gl.TEXTURE_2D, i, gpuTexture.glInternalFmt, w, h, 0, view);
+                    gl.compressedTexImage2D(WebGLConstants.TEXTURE_2D, i, gpuTexture.glInternalFmt, w, h, 0, view);
                     w = Math.max(1, w >> 1);
                     h = Math.max(1, h >> 1);
                 }
@@ -1290,12 +1291,12 @@ export function WebGL2CmdFuncResizeTexture (device: WebGL2Device, gpuTexture: IW
             }
         } else if (gpuTexture.glRenderbuffer) {
             if (device.stateCache.glRenderbuffer !== gpuTexture.glRenderbuffer) {
-                gl.bindRenderbuffer(gl.RENDERBUFFER, gpuTexture.glRenderbuffer);
+                gl.bindRenderbuffer(WebGLConstants.RENDERBUFFER, gpuTexture.glRenderbuffer);
                 device.stateCache.glRenderbuffer = gpuTexture.glRenderbuffer;
             }
 
             gl.renderbufferStorageMultisample(
-                gl.RENDERBUFFER,
+                WebGLConstants.RENDERBUFFER,
                 gpuTexture.samples,
                 gpuTexture.glInternalFmt,
                 gpuTexture.width,
@@ -1305,7 +1306,7 @@ export function WebGL2CmdFuncResizeTexture (device: WebGL2Device, gpuTexture: IW
         break;
     }
     case TextureType.TEX2D_ARRAY: {
-        gpuTexture.glTarget = gl.TEXTURE_2D_ARRAY;
+        gpuTexture.glTarget = WebGLConstants.TEXTURE_2D_ARRAY;
 
         const maxSize = Math.max(w, h);
         if (maxSize > device.capabilities.maxTextureSize) {
@@ -1320,7 +1321,7 @@ export function WebGL2CmdFuncResizeTexture (device: WebGL2Device, gpuTexture: IW
             const glTexUnit = device.stateCache.glTexUnits[device.stateCache.texUnit];
 
             if (glTexUnit.glTexture !== gpuTexture.glTexture) {
-                gl.bindTexture(gl.TEXTURE_2D_ARRAY, gpuTexture.glTexture);
+                gl.bindTexture(WebGLConstants.TEXTURE_2D_ARRAY, gpuTexture.glTexture);
                 glTexUnit.glTexture = gpuTexture.glTexture;
             }
 
@@ -1328,18 +1329,18 @@ export function WebGL2CmdFuncResizeTexture (device: WebGL2Device, gpuTexture: IW
                 for (let i = 0; i < gpuTexture.mipLevel; ++i) {
                     const imgSize = FormatSize(gpuTexture.format, w, h, l);
                     const view: Uint8Array = new Uint8Array(imgSize);
-                    gl.compressedTexImage3D(gl.TEXTURE_2D_ARRAY, i, gpuTexture.glInternalFmt, w, h, l, 0, view);
+                    gl.compressedTexImage3D(WebGLConstants.TEXTURE_2D_ARRAY, i, gpuTexture.glInternalFmt, w, h, l, 0, view);
                     w = Math.max(1, w >> 1);
                     h = Math.max(1, h >> 1);
                 }
             } else {
-                gl.texStorage3D(gl.TEXTURE_2D_ARRAY, gpuTexture.mipLevel, gpuTexture.glInternalFmt, w, h, l);
+                gl.texStorage3D(WebGLConstants.TEXTURE_2D_ARRAY, gpuTexture.mipLevel, gpuTexture.glInternalFmt, w, h, l);
             }
         }
         break;
     }
     case TextureType.TEX3D: {
-        gpuTexture.glTarget = gl.TEXTURE_3D;
+        gpuTexture.glTarget = WebGLConstants.TEXTURE_3D;
 
         const maxSize = Math.max(Math.max(w, h), d);
         if (maxSize > device.capabilities.max3DTextureSize) {
@@ -1351,7 +1352,7 @@ export function WebGL2CmdFuncResizeTexture (device: WebGL2Device, gpuTexture: IW
             const glTexUnit = device.stateCache.glTexUnits[device.stateCache.texUnit];
 
             if (glTexUnit.glTexture !== gpuTexture.glTexture) {
-                gl.bindTexture(gl.TEXTURE_3D, gpuTexture.glTexture);
+                gl.bindTexture(WebGLConstants.TEXTURE_3D, gpuTexture.glTexture);
                 glTexUnit.glTexture = gpuTexture.glTexture;
             }
 
@@ -1359,19 +1360,19 @@ export function WebGL2CmdFuncResizeTexture (device: WebGL2Device, gpuTexture: IW
                 for (let i = 0; i < gpuTexture.mipLevel; ++i) {
                     const imgSize = FormatSize(gpuTexture.format, w, h, d);
                     const view: Uint8Array = new Uint8Array(imgSize);
-                    gl.compressedTexImage3D(gl.TEXTURE_3D, i, gpuTexture.glInternalFmt, w, h, d, 0, view);
+                    gl.compressedTexImage3D(WebGLConstants.TEXTURE_3D, i, gpuTexture.glInternalFmt, w, h, d, 0, view);
                     w = Math.max(1, w >> 1);
                     h = Math.max(1, h >> 1);
                 }
             } else {
-                gl.texStorage3D(gl.TEXTURE_3D, gpuTexture.mipLevel, gpuTexture.glInternalFmt, w, h, d);
+                gl.texStorage3D(WebGLConstants.TEXTURE_3D, gpuTexture.mipLevel, gpuTexture.glInternalFmt, w, h, d);
             }
         }
         break;
     }
     case TextureType.CUBE: {
         gpuTexture.type = TextureType.CUBE;
-        gpuTexture.glTarget = gl.TEXTURE_CUBE_MAP;
+        gpuTexture.glTarget = WebGLConstants.TEXTURE_CUBE_MAP;
 
         const maxSize = Math.max(w, h);
         if (maxSize > device.capabilities.maxCubeMapTextureSize) {
@@ -1381,7 +1382,7 @@ export function WebGL2CmdFuncResizeTexture (device: WebGL2Device, gpuTexture: IW
         const glTexUnit = device.stateCache.glTexUnits[device.stateCache.texUnit];
 
         if (glTexUnit.glTexture !== gpuTexture.glTexture) {
-            gl.bindTexture(gl.TEXTURE_CUBE_MAP, gpuTexture.glTexture);
+            gl.bindTexture(WebGLConstants.TEXTURE_CUBE_MAP, gpuTexture.glTexture);
             glTexUnit.glTexture = gpuTexture.glTexture;
         }
 
@@ -1392,7 +1393,7 @@ export function WebGL2CmdFuncResizeTexture (device: WebGL2Device, gpuTexture: IW
                 for (let i = 0; i < gpuTexture.mipLevel; ++i) {
                     const imgSize = FormatSize(gpuTexture.format, w, h, 1);
                     const view: Uint8Array = new Uint8Array(imgSize);
-                    gl.compressedTexImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + f, i, gpuTexture.glInternalFmt, w, h, 0, view);
+                    gl.compressedTexImage2D(WebGLConstants.TEXTURE_CUBE_MAP_POSITIVE_X + f, i, gpuTexture.glInternalFmt, w, h, 0, view);
                     w = Math.max(1, w >> 1);
                     h = Math.max(1, h >> 1);
                 }
@@ -1407,7 +1408,7 @@ export function WebGL2CmdFuncResizeTexture (device: WebGL2Device, gpuTexture: IW
     default: {
         errorID(16317);
         gpuTexture.type = TextureType.TEX2D;
-        gpuTexture.glTarget = gl.TEXTURE_2D;
+        gpuTexture.glTarget = WebGLConstants.TEXTURE_2D;
     }
     }
 }
@@ -1417,24 +1418,24 @@ export function WebGL2CmdFuncPrepareSamplerInfo (device: WebGL2Device, gpuSample
 
     if (gpuSampler.minFilter === Filter.LINEAR || gpuSampler.minFilter === Filter.ANISOTROPIC) {
         if (gpuSampler.mipFilter === Filter.LINEAR || gpuSampler.mipFilter === Filter.ANISOTROPIC) {
-            gpuSampler.glMinFilter = gl.LINEAR_MIPMAP_LINEAR;
+            gpuSampler.glMinFilter = WebGLConstants.LINEAR_MIPMAP_LINEAR;
         } else if (gpuSampler.mipFilter === Filter.POINT) {
-            gpuSampler.glMinFilter = gl.LINEAR_MIPMAP_NEAREST;
+            gpuSampler.glMinFilter = WebGLConstants.LINEAR_MIPMAP_NEAREST;
         } else {
-            gpuSampler.glMinFilter = gl.LINEAR;
+            gpuSampler.glMinFilter = WebGLConstants.LINEAR;
         }
     } else if (gpuSampler.mipFilter === Filter.LINEAR || gpuSampler.mipFilter === Filter.ANISOTROPIC) {
-        gpuSampler.glMinFilter = gl.NEAREST_MIPMAP_LINEAR;
+        gpuSampler.glMinFilter = WebGLConstants.NEAREST_MIPMAP_LINEAR;
     } else if (gpuSampler.mipFilter === Filter.POINT) {
-        gpuSampler.glMinFilter = gl.NEAREST_MIPMAP_NEAREST;
+        gpuSampler.glMinFilter = WebGLConstants.NEAREST_MIPMAP_NEAREST;
     } else {
-        gpuSampler.glMinFilter = gl.NEAREST;
+        gpuSampler.glMinFilter = WebGLConstants.NEAREST;
     }
 
     if (gpuSampler.magFilter === Filter.LINEAR || gpuSampler.magFilter === Filter.ANISOTROPIC) {
-        gpuSampler.glMagFilter = gl.LINEAR;
+        gpuSampler.glMagFilter = WebGLConstants.LINEAR;
     } else {
-        gpuSampler.glMagFilter = gl.NEAREST;
+        gpuSampler.glMagFilter = WebGLConstants.NEAREST;
     }
 
     gpuSampler.glWrapS = WebGLWraps[gpuSampler.addressU];
@@ -1479,7 +1480,7 @@ export function WebGL2CmdFuncCreateFramebuffer (device: WebGL2Device, gpuFramebu
         gpuFramebuffer.glFramebuffer = glFramebuffer;
 
         if (device.stateCache.glFramebuffer !== gpuFramebuffer.glFramebuffer) {
-            gl.bindFramebuffer(gl.FRAMEBUFFER, gpuFramebuffer.glFramebuffer);
+            gl.bindFramebuffer(WebGLConstants.FRAMEBUFFER, gpuFramebuffer.glFramebuffer);
         }
 
         for (let i = 0; i < gpuFramebuffer.gpuColorViews.length; ++i) {
@@ -1488,22 +1489,22 @@ export function WebGL2CmdFuncCreateFramebuffer (device: WebGL2Device, gpuFramebu
             if (colorTexture) {
                 if (colorTexture.glTexture) {
                     gl.framebufferTexture2D(
-                        gl.FRAMEBUFFER,
-                        gl.COLOR_ATTACHMENT0 + i,
+                        WebGLConstants.FRAMEBUFFER,
+                        WebGLConstants.COLOR_ATTACHMENT0 + i,
                         colorTexture.glTarget,
                         colorTexture.glTexture,
                         colorTextureView.baseLevel,
                     );
                 } else {
                     gl.framebufferRenderbuffer(
-                        gl.FRAMEBUFFER,
-                        gl.COLOR_ATTACHMENT0 + i,
-                        gl.RENDERBUFFER,
+                        WebGLConstants.FRAMEBUFFER,
+                        WebGLConstants.COLOR_ATTACHMENT0 + i,
+                        WebGLConstants.RENDERBUFFER,
                         colorTexture.glRenderbuffer,
                     );
                 }
 
-                attachments.push(gl.COLOR_ATTACHMENT0 + i);
+                attachments.push(WebGLConstants.COLOR_ATTACHMENT0 + i);
                 gpuFramebuffer.width = Math.min(gpuFramebuffer.width, colorTexture.width >> colorTextureView.baseLevel);
                 gpuFramebuffer.height = Math.min(gpuFramebuffer.height, colorTexture.height >> colorTextureView.baseLevel);
             }
@@ -1512,10 +1513,10 @@ export function WebGL2CmdFuncCreateFramebuffer (device: WebGL2Device, gpuFramebu
         const dstView = gpuFramebuffer.gpuDepthStencilView;
         if (dstView) {
             const dst = dstView.gpuTexture;
-            const glAttachment = FormatInfos[dst.format].hasStencil ? gl.DEPTH_STENCIL_ATTACHMENT : gl.DEPTH_ATTACHMENT;
+            const glAttachment = FormatInfos[dst.format].hasStencil ? WebGLConstants.DEPTH_STENCIL_ATTACHMENT : WebGLConstants.DEPTH_ATTACHMENT;
             if (dst.glTexture) {
                 gl.framebufferTexture2D(
-                    gl.FRAMEBUFFER,
+                    WebGLConstants.FRAMEBUFFER,
                     glAttachment,
                     dst.glTarget,
                     dst.glTexture,
@@ -1523,9 +1524,9 @@ export function WebGL2CmdFuncCreateFramebuffer (device: WebGL2Device, gpuFramebu
                 );
             } else {
                 gl.framebufferRenderbuffer(
-                    gl.FRAMEBUFFER,
+                    WebGLConstants.FRAMEBUFFER,
                     glAttachment,
-                    gl.RENDERBUFFER,
+                    WebGLConstants.RENDERBUFFER,
                     dst.glRenderbuffer,
                 );
             }
@@ -1535,22 +1536,22 @@ export function WebGL2CmdFuncCreateFramebuffer (device: WebGL2Device, gpuFramebu
 
         gl.drawBuffers(attachments);
 
-        const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
-        if (status !== gl.FRAMEBUFFER_COMPLETE) {
+        const status = gl.checkFramebufferStatus(WebGLConstants.FRAMEBUFFER);
+        if (status !== WebGLConstants.FRAMEBUFFER_COMPLETE) {
             switch (status) {
-            case gl.FRAMEBUFFER_INCOMPLETE_ATTACHMENT: {
+            case WebGLConstants.FRAMEBUFFER_INCOMPLETE_ATTACHMENT: {
                 errorID(16318);
                 break;
             }
-            case gl.FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT: {
+            case WebGLConstants.FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT: {
                 errorID(16319);
                 break;
             }
-            case gl.FRAMEBUFFER_INCOMPLETE_DIMENSIONS: {
+            case WebGLConstants.FRAMEBUFFER_INCOMPLETE_DIMENSIONS: {
                 errorID(16320);
                 break;
             }
-            case gl.FRAMEBUFFER_UNSUPPORTED: {
+            case WebGLConstants.FRAMEBUFFER_UNSUPPORTED: {
                 errorID(16321);
                 break;
             }
@@ -1559,7 +1560,7 @@ export function WebGL2CmdFuncCreateFramebuffer (device: WebGL2Device, gpuFramebu
         }
 
         if (device.stateCache.glFramebuffer !== gpuFramebuffer.glFramebuffer) {
-            gl.bindFramebuffer(gl.FRAMEBUFFER, device.stateCache.glFramebuffer);
+            gl.bindFramebuffer(WebGLConstants.FRAMEBUFFER, device.stateCache.glFramebuffer);
         }
     }
 }
@@ -1568,7 +1569,7 @@ export function WebGL2CmdFuncDestroyFramebuffer (device: WebGL2Device, gpuFrameb
     if (gpuFramebuffer.glFramebuffer) {
         device.gl.deleteFramebuffer(gpuFramebuffer.glFramebuffer);
         if (device.stateCache.glFramebuffer === gpuFramebuffer.glFramebuffer) {
-            device.gl.bindFramebuffer(device.gl.FRAMEBUFFER, null);
+            device.gl.bindFramebuffer(WebGLConstants.FRAMEBUFFER, null);
             device.stateCache.glFramebuffer = null;
         }
         gpuFramebuffer.glFramebuffer = null;
@@ -1588,12 +1589,12 @@ export function WebGL2CmdFuncCreateShader (device: WebGL2Device, gpuShader: IWeb
         switch (gpuStage.type) {
         case ShaderStageFlagBit.VERTEX: {
             shaderTypeStr = 'VertexShader';
-            glShaderType = gl.VERTEX_SHADER;
+            glShaderType = WebGLConstants.VERTEX_SHADER;
             break;
         }
         case ShaderStageFlagBit.FRAGMENT: {
             shaderTypeStr = 'FragmentShader';
-            glShaderType = gl.FRAGMENT_SHADER;
+            glShaderType = WebGLConstants.FRAGMENT_SHADER;
             break;
         }
         default: {
@@ -1608,7 +1609,7 @@ export function WebGL2CmdFuncCreateShader (device: WebGL2Device, gpuShader: IWeb
             gl.shaderSource(gpuStage.glShader, `#version 300 es\n${gpuStage.source}`);
             gl.compileShader(gpuStage.glShader);
 
-            if (!gl.getShaderParameter(gpuStage.glShader, gl.COMPILE_STATUS)) {
+            if (!gl.getShaderParameter(gpuStage.glShader, WebGLConstants.COMPILE_STATUS)) {
                 errorID(16323, shaderTypeStr, gpuShader.name);
                 errorID(16324, gpuStage.source.replace(/^|\n/g, (): string => `\n${lineNumber++} `));
                 error(gl.getShaderInfoLog(gpuStage.glShader));
@@ -1652,7 +1653,7 @@ export function WebGL2CmdFuncCreateShader (device: WebGL2Device, gpuShader: IWeb
         }
     }
 
-    if (gl.getProgramParameter(gpuShader.glProgram, gl.LINK_STATUS)) {
+    if (gl.getProgramParameter(gpuShader.glProgram, WebGLConstants.LINK_STATUS)) {
         debugID(16325, gpuShader.name);
     } else {
         errorID(16326, gpuShader.name);
@@ -1661,7 +1662,7 @@ export function WebGL2CmdFuncCreateShader (device: WebGL2Device, gpuShader: IWeb
     }
 
     // parse inputs
-    const activeAttribCount: number = gl.getProgramParameter(gpuShader.glProgram, gl.ACTIVE_ATTRIBUTES);
+    const activeAttribCount: number = gl.getProgramParameter(gpuShader.glProgram, WebGLConstants.ACTIVE_ATTRIBUTES);
     gpuShader.glInputs = new Array<IWebGL2GPUInput>(activeAttribCount);
 
     for (let i = 0; i < activeAttribCount; ++i) {
@@ -1693,7 +1694,7 @@ export function WebGL2CmdFuncCreateShader (device: WebGL2Device, gpuShader: IWeb
     }
 
     // create uniform blocks
-    const activeBlockCount: number = gl.getProgramParameter(gpuShader.glProgram, gl.ACTIVE_UNIFORM_BLOCKS);
+    const activeBlockCount: number = gl.getProgramParameter(gpuShader.glProgram, WebGLConstants.ACTIVE_UNIFORM_BLOCKS);
     let blockName: string;
     let blockIdx: number;
     let blockSize: number;
@@ -1723,7 +1724,7 @@ export function WebGL2CmdFuncCreateShader (device: WebGL2Device, gpuShader: IWeb
             } else {
                 // blockIdx = gl.getUniformBlockIndex(gpuShader.glProgram, blockName);
                 blockIdx = b;
-                blockSize = gl.getActiveUniformBlockParameter(gpuShader.glProgram, blockIdx, gl.UNIFORM_BLOCK_DATA_SIZE);
+                blockSize = gl.getActiveUniformBlockParameter(gpuShader.glProgram, blockIdx, WebGLConstants.UNIFORM_BLOCK_DATA_SIZE);
 
                 const glBinding = enableEffectImport
                     ? block.flattened
@@ -1964,7 +1965,7 @@ export function WebGL2CmdFuncBeginRenderPass (
 
     if (gpuFramebuffer && gpuRenderPass) {
         if (cache.glFramebuffer !== gpuFramebuffer.glFramebuffer) {
-            gl.bindFramebuffer(gl.FRAMEBUFFER, gpuFramebuffer.glFramebuffer);
+            gl.bindFramebuffer(WebGLConstants.FRAMEBUFFER, gpuFramebuffer.glFramebuffer);
             cache.glFramebuffer = gpuFramebuffer.glFramebuffer;
         }
 
@@ -2009,19 +2010,19 @@ export function WebGL2CmdFuncBeginRenderPass (
                     if (gpuRenderPass.colorAttachments.length === 1) {
                         const clearColor = clearColors[0];
                         gl.clearColor(clearColor.x, clearColor.y, clearColor.z, clearColor.w);
-                        clears |= gl.COLOR_BUFFER_BIT;
+                        clears |= WebGLConstants.COLOR_BUFFER_BIT;
                     } else {
                         _f32v4[0] = clearColors[j].x;
                         _f32v4[1] = clearColors[j].y;
                         _f32v4[2] = clearColors[j].z;
                         _f32v4[3] = clearColors[j].w;
-                        gl.clearBufferfv(gl.COLOR, j, _f32v4);
+                        gl.clearBufferfv(WebGLConstants.COLOR, j, _f32v4);
                     }
                     break;
                 }
                 case LoadOp.DISCARD: {
                     // invalidate the framebuffer
-                    gfxStateCache.invalidateAttachments.push(gl.COLOR_ATTACHMENT0 + j);
+                    gfxStateCache.invalidateAttachments.push(WebGLConstants.COLOR_ATTACHMENT0 + j);
                     break;
                 }
                 default:
@@ -2040,12 +2041,12 @@ export function WebGL2CmdFuncBeginRenderPass (
 
                     gl.clearDepth(clearDepth);
 
-                    clears |= gl.DEPTH_BUFFER_BIT;
+                    clears |= WebGLConstants.DEPTH_BUFFER_BIT;
                     break;
                 }
                 case LoadOp.DISCARD: {
                     // invalidate the framebuffer
-                    gfxStateCache.invalidateAttachments.push(gl.DEPTH_ATTACHMENT);
+                    gfxStateCache.invalidateAttachments.push(WebGLConstants.DEPTH_ATTACHMENT);
                     break;
                 }
                 default:
@@ -2056,20 +2057,20 @@ export function WebGL2CmdFuncBeginRenderPass (
                     case LoadOp.LOAD: break; // GL default behavior
                     case LoadOp.CLEAR: {
                         if (!cache.dss.stencilWriteMaskFront) {
-                            gl.stencilMaskSeparate(gl.FRONT, 0xffff);
+                            gl.stencilMaskSeparate(WebGLConstants.FRONT, 0xffff);
                         }
 
                         if (!cache.dss.stencilWriteMaskBack) {
-                            gl.stencilMaskSeparate(gl.BACK, 0xffff);
+                            gl.stencilMaskSeparate(WebGLConstants.BACK, 0xffff);
                         }
 
                         gl.clearStencil(clearStencil);
-                        clears |= gl.STENCIL_BUFFER_BIT;
+                        clears |= WebGLConstants.STENCIL_BUFFER_BIT;
                         break;
                     }
                     case LoadOp.DISCARD: {
                         // invalidate the framebuffer
-                        gfxStateCache.invalidateAttachments.push(gl.STENCIL_ATTACHMENT);
+                        gfxStateCache.invalidateAttachments.push(WebGLConstants.STENCIL_ATTACHMENT);
                         break;
                     }
                     default:
@@ -2079,7 +2080,7 @@ export function WebGL2CmdFuncBeginRenderPass (
         } // if (curGPURenderPass.depthStencilAttachment)
 
         if (gpuFramebuffer.glFramebuffer && gfxStateCache.invalidateAttachments.length) {
-            gl.invalidateFramebuffer(gl.FRAMEBUFFER, gfxStateCache.invalidateAttachments);
+            gl.invalidateFramebuffer(WebGLConstants.FRAMEBUFFER, gfxStateCache.invalidateAttachments);
         }
 
         if (clears) {
@@ -2087,7 +2088,7 @@ export function WebGL2CmdFuncBeginRenderPass (
         }
 
         // restore states
-        if (clears & gl.COLOR_BUFFER_BIT) {
+        if (clears & WebGLConstants.COLOR_BUFFER_BIT) {
             const colorMask = cache.bs.targets[0].blendColorMask;
             if (colorMask !== ColorMask.ALL) {
                 const r = (colorMask & ColorMask.R) !== ColorMask.NONE;
@@ -2098,18 +2099,18 @@ export function WebGL2CmdFuncBeginRenderPass (
             }
         }
 
-        if ((clears & gl.DEPTH_BUFFER_BIT)
+        if ((clears & WebGLConstants.DEPTH_BUFFER_BIT)
             && !cache.dss.depthWrite) {
             gl.depthMask(false);
         }
 
-        if (clears & gl.STENCIL_BUFFER_BIT) {
+        if (clears & WebGLConstants.STENCIL_BUFFER_BIT) {
             if (!cache.dss.stencilWriteMaskFront) {
-                gl.stencilMaskSeparate(gl.FRONT, 0);
+                gl.stencilMaskSeparate(WebGLConstants.FRONT, 0);
             }
 
             if (!cache.dss.stencilWriteMaskBack) {
-                gl.stencilMaskSeparate(gl.BACK, 0);
+                gl.stencilMaskSeparate(WebGLConstants.BACK, 0);
             }
         }
     } // if (gpuFramebuffer)
@@ -2149,17 +2150,17 @@ export function WebGL2CmdFuncBindStates (
             if (cache.rs.cullMode !== rs.cullMode) {
                 switch (rs.cullMode) {
                 case CullMode.NONE: {
-                    gl.disable(gl.CULL_FACE);
+                    gl.disable(WebGLConstants.CULL_FACE);
                     break;
                 }
                 case CullMode.FRONT: {
-                    gl.enable(gl.CULL_FACE);
-                    gl.cullFace(gl.FRONT);
+                    gl.enable(WebGLConstants.CULL_FACE);
+                    gl.cullFace(WebGLConstants.FRONT);
                     break;
                 }
                 case CullMode.BACK: {
-                    gl.enable(gl.CULL_FACE);
-                    gl.cullFace(gl.BACK);
+                    gl.enable(WebGLConstants.CULL_FACE);
+                    gl.cullFace(WebGLConstants.BACK);
                     break;
                 }
                 default:
@@ -2170,7 +2171,7 @@ export function WebGL2CmdFuncBindStates (
 
             const isFrontFaceCCW = rs.isFrontFaceCCW; // boolean XOR
             if (device.stateCache.rs.isFrontFaceCCW !== isFrontFaceCCW) {
-                gl.frontFace(isFrontFaceCCW ? gl.CCW : gl.CW);
+                gl.frontFace(isFrontFaceCCW ? WebGLConstants.CCW : WebGLConstants.CW);
                 device.stateCache.rs.isFrontFaceCCW = isFrontFaceCCW;
             }
 
@@ -2192,9 +2193,9 @@ export function WebGL2CmdFuncBindStates (
         if (dss) {
             if (cache.dss.depthTest !== dss.depthTest) {
                 if (dss.depthTest) {
-                    gl.enable(gl.DEPTH_TEST);
+                    gl.enable(WebGLConstants.DEPTH_TEST);
                 } else {
-                    gl.disable(gl.DEPTH_TEST);
+                    gl.disable(WebGLConstants.DEPTH_TEST);
                 }
                 cache.dss.depthTest = dss.depthTest;
             }
@@ -2213,9 +2214,9 @@ export function WebGL2CmdFuncBindStates (
             if ((cache.dss.stencilTestFront !== dss.stencilTestFront)
                 || (cache.dss.stencilTestBack !== dss.stencilTestBack)) {
                 if (dss.stencilTestFront || dss.stencilTestBack) {
-                    gl.enable(gl.STENCIL_TEST);
+                    gl.enable(WebGLConstants.STENCIL_TEST);
                 } else {
-                    gl.disable(gl.STENCIL_TEST);
+                    gl.disable(WebGLConstants.STENCIL_TEST);
                 }
                 cache.dss.stencilTestFront = dss.stencilTestFront;
                 cache.dss.stencilTestBack = dss.stencilTestBack;
@@ -2225,7 +2226,7 @@ export function WebGL2CmdFuncBindStates (
                 || (cache.dss.stencilRefFront !== dss.stencilRefFront)
                 || (cache.dss.stencilReadMaskFront !== dss.stencilReadMaskFront)) {
                 gl.stencilFuncSeparate(
-                    gl.FRONT,
+                    WebGLConstants.FRONT,
                     WebGLCmpFuncs[dss.stencilFuncFront],
                     dss.stencilRefFront,
                     dss.stencilReadMaskFront,
@@ -2240,7 +2241,7 @@ export function WebGL2CmdFuncBindStates (
                 || (cache.dss.stencilZFailOpFront !== dss.stencilZFailOpFront)
                 || (cache.dss.stencilPassOpFront !== dss.stencilPassOpFront)) {
                 gl.stencilOpSeparate(
-                    gl.FRONT,
+                    WebGLConstants.FRONT,
                     WebGLStencilOps[dss.stencilFailOpFront],
                     WebGLStencilOps[dss.stencilZFailOpFront],
                     WebGLStencilOps[dss.stencilPassOpFront],
@@ -2252,7 +2253,7 @@ export function WebGL2CmdFuncBindStates (
             }
 
             if (cache.dss.stencilWriteMaskFront !== dss.stencilWriteMaskFront) {
-                gl.stencilMaskSeparate(gl.FRONT, dss.stencilWriteMaskFront);
+                gl.stencilMaskSeparate(WebGLConstants.FRONT, dss.stencilWriteMaskFront);
                 cache.dss.stencilWriteMaskFront = dss.stencilWriteMaskFront;
             }
 
@@ -2261,7 +2262,7 @@ export function WebGL2CmdFuncBindStates (
                 || (cache.dss.stencilRefBack !== dss.stencilRefBack)
                 || (cache.dss.stencilReadMaskBack !== dss.stencilReadMaskBack)) {
                 gl.stencilFuncSeparate(
-                    gl.BACK,
+                    WebGLConstants.BACK,
                     WebGLCmpFuncs[dss.stencilFuncBack],
                     dss.stencilRefBack,
                     dss.stencilReadMaskBack,
@@ -2276,7 +2277,7 @@ export function WebGL2CmdFuncBindStates (
                 || (cache.dss.stencilZFailOpBack !== dss.stencilZFailOpBack)
                 || (cache.dss.stencilPassOpBack !== dss.stencilPassOpBack)) {
                 gl.stencilOpSeparate(
-                    gl.BACK,
+                    WebGLConstants.BACK,
                     WebGLStencilOps[dss.stencilFailOpBack],
                     WebGLStencilOps[dss.stencilZFailOpBack],
                     WebGLStencilOps[dss.stencilPassOpBack],
@@ -2288,7 +2289,7 @@ export function WebGL2CmdFuncBindStates (
             }
 
             if (cache.dss.stencilWriteMaskBack !== dss.stencilWriteMaskBack) {
-                gl.stencilMaskSeparate(gl.BACK, dss.stencilWriteMaskBack);
+                gl.stencilMaskSeparate(WebGLConstants.BACK, dss.stencilWriteMaskBack);
                 cache.dss.stencilWriteMaskBack = dss.stencilWriteMaskBack;
             }
         } // depth-stencil state
@@ -2298,9 +2299,9 @@ export function WebGL2CmdFuncBindStates (
         if (bs) {
             if (cache.bs.isA2C !== bs.isA2C) {
                 if (bs.isA2C) {
-                    gl.enable(gl.SAMPLE_ALPHA_TO_COVERAGE);
+                    gl.enable(WebGLConstants.SAMPLE_ALPHA_TO_COVERAGE);
                 } else {
-                    gl.disable(gl.SAMPLE_ALPHA_TO_COVERAGE);
+                    gl.disable(WebGLConstants.SAMPLE_ALPHA_TO_COVERAGE);
                 }
                 cache.bs.isA2C = bs.isA2C;
             }
@@ -2322,9 +2323,9 @@ export function WebGL2CmdFuncBindStates (
 
             if (target0Cache.blend !== target0.blend) {
                 if (target0.blend) {
-                    gl.enable(gl.BLEND);
+                    gl.enable(WebGLConstants.BLEND);
                 } else {
-                    gl.disable(gl.BLEND);
+                    gl.disable(WebGLConstants.BLEND);
                 }
                 target0Cache.blend = target0.blend;
             }
@@ -2391,14 +2392,14 @@ export function WebGL2CmdFuncBindStates (
                 || cache.glBindUBOOffsets[glBlock.glBinding] !== offset) {
                 if (offset) {
                     gl.bindBufferRange(
-                        gl.UNIFORM_BUFFER,
+                        WebGLConstants.UNIFORM_BUFFER,
                         glBlock.glBinding,
                         gpuDescriptor.gpuBuffer.glBuffer,
                         offset,
                         gpuDescriptor.gpuBuffer.size,
                     );
                 } else {
-                    gl.bindBufferBase(gl.UNIFORM_BUFFER, glBlock.glBinding, gpuDescriptor.gpuBuffer.glBuffer);
+                    gl.bindBufferBase(WebGLConstants.UNIFORM_BUFFER, glBlock.glBinding, gpuDescriptor.gpuBuffer.glBuffer);
                 }
                 cache.glUniformBuffer = cache.glBindUBOs[glBlock.glBinding] = gpuDescriptor.gpuBuffer.glBuffer;
                 cache.glBindUBOOffsets[glBlock.glBinding] = offset;
@@ -2430,7 +2431,7 @@ export function WebGL2CmdFuncBindStates (
                 if (gpuTexture.size > 0) {
                     if (glTexUnit.glTexture !== gpuTexture.glTexture) {
                         if (cache.texUnit !== texUnit) {
-                            gl.activeTexture(gl.TEXTURE0 + texUnit);
+                            gl.activeTexture(WebGLConstants.TEXTURE0 + texUnit);
                             cache.texUnit = texUnit;
                         }
                         if (gpuTexture.glTexture) {
@@ -2467,8 +2468,8 @@ export function WebGL2CmdFuncBindStates (
                 gpuInputAssembler.glVAOs.set(gpuShader.glProgram!, glVAO);
 
                 gl.bindVertexArray(glVAO);
-                gl.bindBuffer(gl.ARRAY_BUFFER, null);
-                gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
+                gl.bindBuffer(WebGLConstants.ARRAY_BUFFER, null);
+                gl.bindBuffer(WebGLConstants.ELEMENT_ARRAY_BUFFER, null);
                 cache.glArrayBuffer = null;
                 cache.glElementArrayBuffer = null;
 
@@ -2487,7 +2488,7 @@ export function WebGL2CmdFuncBindStates (
 
                     if (glAttrib) {
                         if (cache.glArrayBuffer !== glAttrib.glBuffer) {
-                            gl.bindBuffer(gl.ARRAY_BUFFER, glAttrib.glBuffer);
+                            gl.bindBuffer(WebGLConstants.ARRAY_BUFFER, glAttrib.glBuffer);
                             cache.glArrayBuffer = glAttrib.glBuffer;
                         }
 
@@ -2506,12 +2507,12 @@ export function WebGL2CmdFuncBindStates (
 
                 const gpuBuffer = gpuInputAssembler.gpuIndexBuffer;
                 if (gpuBuffer) {
-                    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gpuBuffer.glBuffer);
+                    gl.bindBuffer(WebGLConstants.ELEMENT_ARRAY_BUFFER, gpuBuffer.glBuffer);
                 }
 
                 gl.bindVertexArray(null);
-                gl.bindBuffer(gl.ARRAY_BUFFER, null);
-                gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
+                gl.bindBuffer(WebGLConstants.ARRAY_BUFFER, null);
+                gl.bindBuffer(WebGLConstants.ELEMENT_ARRAY_BUFFER, null);
                 cache.glArrayBuffer = null;
                 cache.glElementArrayBuffer = null;
             }
@@ -2539,7 +2540,7 @@ export function WebGL2CmdFuncBindStates (
 
                 if (glAttrib) {
                     if (cache.glArrayBuffer !== glAttrib.glBuffer) {
-                        gl.bindBuffer(gl.ARRAY_BUFFER, glAttrib.glBuffer);
+                        gl.bindBuffer(WebGLConstants.ARRAY_BUFFER, glAttrib.glBuffer);
                         cache.glArrayBuffer = glAttrib.glBuffer;
                     }
 
@@ -2562,7 +2563,7 @@ export function WebGL2CmdFuncBindStates (
             const gpuBuffer = gpuInputAssembler.gpuIndexBuffer;
             if (gpuBuffer) {
                 if (cache.glElementArrayBuffer !== gpuBuffer.glBuffer) {
-                    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gpuBuffer.glBuffer);
+                    gl.bindBuffer(WebGLConstants.ELEMENT_ARRAY_BUFFER, gpuBuffer.glBuffer);
                     cache.glElementArrayBuffer = gpuBuffer.glBuffer;
                 }
             }
@@ -2613,11 +2614,11 @@ export function WebGL2CmdFuncBindStates (
                 const front = dynamicStates.stencilStatesFront;
                 const back = dynamicStates.stencilStatesBack;
                 if (cache.dss.stencilWriteMaskFront !== front.writeMask) {
-                    gl.stencilMaskSeparate(gl.FRONT, front.writeMask);
+                    gl.stencilMaskSeparate(WebGLConstants.FRONT, front.writeMask);
                     cache.dss.stencilWriteMaskFront = front.writeMask;
                 }
                 if (cache.dss.stencilWriteMaskBack !== back.writeMask) {
-                    gl.stencilMaskSeparate(gl.BACK, back.writeMask);
+                    gl.stencilMaskSeparate(WebGLConstants.BACK, back.writeMask);
                     cache.dss.stencilWriteMaskBack = back.writeMask;
                 }
                 break;
@@ -2627,13 +2628,13 @@ export function WebGL2CmdFuncBindStates (
                 const back = dynamicStates.stencilStatesBack;
                 if (cache.dss.stencilRefFront !== front.reference
                     || cache.dss.stencilReadMaskFront !== front.compareMask) {
-                    gl.stencilFuncSeparate(gl.FRONT, WebGLCmpFuncs[cache.dss.stencilFuncFront], front.reference, front.compareMask);
+                    gl.stencilFuncSeparate(WebGLConstants.FRONT, WebGLCmpFuncs[cache.dss.stencilFuncFront], front.reference, front.compareMask);
                     cache.dss.stencilRefFront = front.reference;
                     cache.dss.stencilReadMaskFront = front.compareMask;
                 }
                 if (cache.dss.stencilRefBack !== back.reference
                     || cache.dss.stencilReadMaskBack !== back.compareMask) {
-                    gl.stencilFuncSeparate(gl.BACK, WebGLCmpFuncs[cache.dss.stencilFuncBack], back.reference, back.compareMask);
+                    gl.stencilFuncSeparate(WebGLConstants.BACK, WebGLCmpFuncs[cache.dss.stencilFuncBack], back.reference, back.compareMask);
                     cache.dss.stencilRefBack = back.reference;
                     cache.dss.stencilReadMaskBack = back.compareMask;
                 }
@@ -2851,10 +2852,10 @@ export function WebGL2CmdFuncCopyTexImagesToTexture (
     let f = 0;
 
     switch (gpuTexture.glTarget) {
-    case gl.TEXTURE_2D: {
+    case WebGLConstants.TEXTURE_2D: {
         if ((gpuTexture.flags & TextureFlagBit.MUTABLE_STORAGE) || toUseTexImage2D(texImages, regions)) {
             gl.texImage2D(
-                gl.TEXTURE_2D,
+                WebGLConstants.TEXTURE_2D,
                 regions[0].texSubres.mipLevel,
                 gpuTexture.glInternalFmt,
                 regions[0].texExtent.width,
@@ -2868,7 +2869,7 @@ export function WebGL2CmdFuncCopyTexImagesToTexture (
             for (let k = 0; k < regions.length; k++) {
                 const region = regions[k];
                 gl.texSubImage2D(
-                    gl.TEXTURE_2D,
+                    WebGLConstants.TEXTURE_2D,
                     region.texSubres.mipLevel,
                     region.texOffset.x,
                     region.texOffset.y,
@@ -2880,13 +2881,13 @@ export function WebGL2CmdFuncCopyTexImagesToTexture (
         }
         break;
     }
-    case gl.TEXTURE_CUBE_MAP: {
+    case WebGLConstants.TEXTURE_CUBE_MAP: {
         for (let k = 0; k < regions.length; k++) {
             const region = regions[k];
             const fcount = region.texSubres.baseArrayLayer + region.texSubres.layerCount;
             for (f = region.texSubres.baseArrayLayer; f < fcount; ++f) {
                 gl.texSubImage2D(
-                    gl.TEXTURE_CUBE_MAP_POSITIVE_X + f,
+                    WebGLConstants.TEXTURE_CUBE_MAP_POSITIVE_X + f,
                     region.texSubres.mipLevel,
                     region.texOffset.x,
                     region.texOffset.y,
@@ -2973,7 +2974,7 @@ export function WebGL2CmdFuncCopyBuffersToTexture (
     const stride: Extent = new Extent();
 
     switch (gpuTexture.glTarget) {
-    case gl.TEXTURE_2D: {
+    case WebGLConstants.TEXTURE_2D: {
         for (let k = 0; k < regions.length; k++) {
             const region = regions[k];
             const mipLevel = region.texSubres.mipLevel;
@@ -3001,7 +3002,7 @@ export function WebGL2CmdFuncCopyBuffersToTexture (
 
             if (!isCompressed) {
                 gl.texSubImage2D(
-                    gl.TEXTURE_2D,
+                    WebGLConstants.TEXTURE_2D,
                     mipLevel,
                     offset.x,
                     offset.y,
@@ -3013,7 +3014,7 @@ export function WebGL2CmdFuncCopyBuffersToTexture (
                 );
             } else if (gpuTexture.glInternalFmt !== WebGL2EXT.COMPRESSED_RGB_ETC1_WEBGL as number) {
                 gl.compressedTexSubImage2D(
-                    gl.TEXTURE_2D,
+                    WebGLConstants.TEXTURE_2D,
                     mipLevel,
                     offset.x,
                     offset.y,
@@ -3024,7 +3025,7 @@ export function WebGL2CmdFuncCopyBuffersToTexture (
                 );
             } else { // WEBGL_compressed_texture_etc1
                 gl.compressedTexImage2D(
-                    gl.TEXTURE_2D,
+                    WebGLConstants.TEXTURE_2D,
                     mipLevel,
                     gpuTexture.glInternalFmt,
                     destWidth,
@@ -3036,7 +3037,7 @@ export function WebGL2CmdFuncCopyBuffersToTexture (
         }
         break;
     }
-    case gl.TEXTURE_2D_ARRAY: {
+    case WebGLConstants.TEXTURE_2D_ARRAY: {
         for (let k = 0; k < regions.length; k++) {
             const region = regions[k];
             const mipLevel = region.texSubres.mipLevel;
@@ -3069,7 +3070,7 @@ export function WebGL2CmdFuncCopyBuffersToTexture (
 
                 if (!isCompressed) {
                     gl.texSubImage3D(
-                        gl.TEXTURE_2D_ARRAY,
+                        WebGLConstants.TEXTURE_2D_ARRAY,
                         mipLevel,
                         offset.x,
                         offset.y,
@@ -3083,7 +3084,7 @@ export function WebGL2CmdFuncCopyBuffersToTexture (
                     );
                 } else if (gpuTexture.glInternalFmt !== WebGL2EXT.COMPRESSED_RGB_ETC1_WEBGL as number) {
                     gl.compressedTexSubImage3D(
-                        gl.TEXTURE_2D_ARRAY,
+                        WebGLConstants.TEXTURE_2D_ARRAY,
                         mipLevel,
                         offset.x,
                         offset.y,
@@ -3096,7 +3097,7 @@ export function WebGL2CmdFuncCopyBuffersToTexture (
                     );
                 } else { // WEBGL_compressed_texture_etc1
                     gl.compressedTexImage3D(
-                        gl.TEXTURE_2D_ARRAY,
+                        WebGLConstants.TEXTURE_2D_ARRAY,
                         mipLevel,
                         gpuTexture.glInternalFmt,
                         destWidth,
@@ -3110,7 +3111,7 @@ export function WebGL2CmdFuncCopyBuffersToTexture (
         }
         break;
     }
-    case gl.TEXTURE_3D: {
+    case WebGLConstants.TEXTURE_3D: {
         for (let k = 0; k < regions.length; k++) {
             const region = regions[k];
             const mipLevel = region.texSubres.mipLevel;
@@ -3140,7 +3141,7 @@ export function WebGL2CmdFuncCopyBuffersToTexture (
 
             if (!isCompressed) {
                 gl.texSubImage3D(
-                    gl.TEXTURE_2D_ARRAY,
+                    WebGLConstants.TEXTURE_2D_ARRAY,
                     mipLevel,
                     offset.x,
                     offset.y,
@@ -3154,7 +3155,7 @@ export function WebGL2CmdFuncCopyBuffersToTexture (
                 );
             } else if (gpuTexture.glInternalFmt !== WebGL2EXT.COMPRESSED_RGB_ETC1_WEBGL as number) {
                 gl.compressedTexSubImage3D(
-                    gl.TEXTURE_2D_ARRAY,
+                    WebGLConstants.TEXTURE_2D_ARRAY,
                     mipLevel,
                     offset.x,
                     offset.y,
@@ -3167,7 +3168,7 @@ export function WebGL2CmdFuncCopyBuffersToTexture (
                 );
             } else { // WEBGL_compressed_texture_etc1
                 gl.compressedTexImage3D(
-                    gl.TEXTURE_2D_ARRAY,
+                    WebGLConstants.TEXTURE_2D_ARRAY,
                     mipLevel,
                     gpuTexture.glInternalFmt,
                     destWidth,
@@ -3180,7 +3181,7 @@ export function WebGL2CmdFuncCopyBuffersToTexture (
         }
         break;
     }
-    case gl.TEXTURE_CUBE_MAP: {
+    case WebGLConstants.TEXTURE_CUBE_MAP: {
         for (let k = 0; k < regions.length; k++) {
             const region = regions[k];
             const mipLevel = region.texSubres.mipLevel;
@@ -3210,7 +3211,7 @@ export function WebGL2CmdFuncCopyBuffersToTexture (
 
                 if (!isCompressed) {
                     gl.texSubImage2D(
-                        gl.TEXTURE_CUBE_MAP_POSITIVE_X + f,
+                        WebGLConstants.TEXTURE_CUBE_MAP_POSITIVE_X + f,
                         mipLevel,
                         offset.x,
                         offset.y,
@@ -3222,7 +3223,7 @@ export function WebGL2CmdFuncCopyBuffersToTexture (
                     );
                 } else if (gpuTexture.glInternalFmt !== WebGL2EXT.COMPRESSED_RGB_ETC1_WEBGL as number) {
                     gl.compressedTexSubImage2D(
-                        gl.TEXTURE_CUBE_MAP_POSITIVE_X + f,
+                        WebGLConstants.TEXTURE_CUBE_MAP_POSITIVE_X + f,
                         mipLevel,
                         offset.x,
                         offset.y,
@@ -3233,7 +3234,7 @@ export function WebGL2CmdFuncCopyBuffersToTexture (
                     );
                 } else { // WEBGL_compressed_texture_etc1
                     gl.compressedTexImage2D(
-                        gl.TEXTURE_CUBE_MAP_POSITIVE_X + f,
+                        WebGLConstants.TEXTURE_CUBE_MAP_POSITIVE_X + f,
                         mipLevel,
                         gpuTexture.glInternalFmt,
                         destWidth,
@@ -3266,17 +3267,17 @@ export function WebGL2CmdFuncCopyTextureToBuffers (
     const cache = device.stateCache;
 
     const framebuffer = gl.createFramebuffer();
-    gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+    gl.bindFramebuffer(WebGLConstants.FRAMEBUFFER, framebuffer);
     let x = 0;
     let y = 0;
     let w = 1;
     let h = 1;
 
     switch (gpuTexture.glTarget) {
-    case gl.TEXTURE_2D: {
+    case WebGLConstants.TEXTURE_2D: {
         for (let k = 0; k < regions.length; k++) {
             const region = regions[k];
-            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gpuTexture.glTarget, gpuTexture.glTexture, region.texSubres.mipLevel);
+            gl.framebufferTexture2D(WebGLConstants.FRAMEBUFFER, WebGLConstants.COLOR_ATTACHMENT0, gpuTexture.glTarget, gpuTexture.glTexture, region.texSubres.mipLevel);
             x = region.texOffset.x;
             y = region.texOffset.y;
             w = region.texExtent.width;
@@ -3286,10 +3287,10 @@ export function WebGL2CmdFuncCopyTextureToBuffers (
         break;
     }
     default: {
-        error('Unsupported GL texture type, copy texture to buffers failed.');
+        errorID(16399);
     }
     }
-    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    gl.bindFramebuffer(WebGLConstants.FRAMEBUFFER, null);
     cache.glFramebuffer = null;
     gl.deleteFramebuffer(framebuffer);
 }
@@ -3305,28 +3306,28 @@ export function WebGL2CmdFuncBlitFramebuffer (
     const { gl } = device;
 
     if (device.stateCache.glReadFramebuffer !== src.glFramebuffer) {
-        gl.bindFramebuffer(gl.READ_FRAMEBUFFER, src.glFramebuffer);
+        gl.bindFramebuffer(WebGLConstants.READ_FRAMEBUFFER, src.glFramebuffer);
         device.stateCache.glReadFramebuffer = src.glFramebuffer;
     }
 
     const rebindFBO = (dst.glFramebuffer !== device.stateCache.glFramebuffer);
     if (rebindFBO) {
-        gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, dst.glFramebuffer);
+        gl.bindFramebuffer(WebGLConstants.DRAW_FRAMEBUFFER, dst.glFramebuffer);
     }
 
     let mask = 0;
     if (src.gpuColorViews.length > 0) {
-        mask |= gl.COLOR_BUFFER_BIT;
+        mask |= WebGLConstants.COLOR_BUFFER_BIT;
     }
 
     if (src.gpuDepthStencilView) {
-        mask |= gl.DEPTH_BUFFER_BIT;
+        mask |= WebGLConstants.DEPTH_BUFFER_BIT;
         if (FormatInfos[src.gpuDepthStencilView.gpuTexture.format].hasStencil) {
-            mask |= gl.STENCIL_BUFFER_BIT;
+            mask |= WebGLConstants.STENCIL_BUFFER_BIT;
         }
     }
 
-    const glFilter = (filter === Filter.LINEAR || filter === Filter.ANISOTROPIC) ? gl.LINEAR : gl.NEAREST;
+    const glFilter = (filter === Filter.LINEAR || filter === Filter.ANISOTROPIC) ? WebGLConstants.LINEAR : WebGLConstants.NEAREST;
 
     gl.blitFramebuffer(
         srcRect.x,
@@ -3342,7 +3343,7 @@ export function WebGL2CmdFuncBlitFramebuffer (
     );
 
     if (rebindFBO) {
-        gl.bindFramebuffer(gl.FRAMEBUFFER, device.stateCache.glFramebuffer);
+        gl.bindFramebuffer(WebGLConstants.FRAMEBUFFER, device.stateCache.glFramebuffer);
     }
 }
 
@@ -3361,7 +3362,7 @@ export function WebGL2CmdFuncBlitTexture (
     }
 
     // logic different from native, because framebuffer-map is not implemented in webgl2
-    const glFilter = (filter === Filter.LINEAR || filter === Filter.ANISOTROPIC) ? gl.LINEAR : gl.NEAREST;
+    const glFilter = (filter === Filter.LINEAR || filter === Filter.ANISOTROPIC) ? WebGLConstants.LINEAR : WebGLConstants.NEAREST;
 
     const srcFramebuffer = blitManager.srcFramebuffer;
     const dstFramebuffer = blitManager.dstFramebuffer;
@@ -3373,23 +3374,23 @@ export function WebGL2CmdFuncBlitTexture (
 
     const blitInfo = (formatInfo: FormatInfo): { mask: number; attachment: number; } => {
         let mask = 0;
-        let attachment: number = gl.COLOR_ATTACHMENT0;
+        let attachment: number = WebGLConstants.COLOR_ATTACHMENT0;
 
         if (formatInfo.hasStencil) {
-            attachment = gl.DEPTH_STENCIL_ATTACHMENT;
+            attachment = WebGLConstants.DEPTH_STENCIL_ATTACHMENT;
         } else if (formatInfo.hasDepth) {
-            attachment = gl.DEPTH_ATTACHMENT;
+            attachment = WebGLConstants.DEPTH_ATTACHMENT;
         }
 
         if (formatInfo.hasDepth || formatInfo.hasStencil) {
             if (formatInfo.hasDepth) {
-                mask |= gl.DEPTH_BUFFER_BIT;
+                mask |= WebGLConstants.DEPTH_BUFFER_BIT;
             }
             if (formatInfo.hasStencil) {
-                mask |= gl.STENCIL_BUFFER_BIT;
+                mask |= WebGLConstants.STENCIL_BUFFER_BIT;
             }
         } else {
-            mask |= gl.COLOR_BUFFER_BIT;
+            mask |= WebGLConstants.COLOR_BUFFER_BIT;
         }
 
         return { mask, attachment };
@@ -3402,25 +3403,25 @@ export function WebGL2CmdFuncBlitTexture (
     const { mask: dstMask, attachment: dstAttachment } = blitInfo(FormatInfos[dst.format]);
 
     if (cache.glReadFramebuffer !== srcFramebuffer) {
-        gl.bindFramebuffer(gl.READ_FRAMEBUFFER, srcFramebuffer);
+        gl.bindFramebuffer(WebGLConstants.READ_FRAMEBUFFER, srcFramebuffer);
         cache.glReadFramebuffer = srcFramebuffer;
     }
 
     if (cache.glFramebuffer !== dstFramebuffer) {
-        gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, dstFramebuffer);
+        gl.bindFramebuffer(WebGLConstants.DRAW_FRAMEBUFFER, dstFramebuffer);
         cache.glFramebuffer = dstFramebuffer;
     }
 
     if (src.glTexture) {
-        gl.framebufferTexture2D(gl.READ_FRAMEBUFFER, srcAttachment, src.glTarget, src.glTexture, srcMip);
+        gl.framebufferTexture2D(WebGLConstants.READ_FRAMEBUFFER, srcAttachment, src.glTarget, src.glTexture, srcMip);
     } else {
-        gl.framebufferRenderbuffer(gl.READ_FRAMEBUFFER, srcAttachment, gl.RENDERBUFFER, src.glRenderbuffer);
+        gl.framebufferRenderbuffer(WebGLConstants.READ_FRAMEBUFFER, srcAttachment, WebGLConstants.RENDERBUFFER, src.glRenderbuffer);
     }
 
     if (dst.glTexture) {
-        gl.framebufferTexture2D(gl.DRAW_FRAMEBUFFER, dstAttachment, dst.glTarget, dst.glTexture, dstMip);
+        gl.framebufferTexture2D(WebGLConstants.DRAW_FRAMEBUFFER, dstAttachment, dst.glTarget, dst.glTexture, dstMip);
     } else {
-        gl.framebufferRenderbuffer(gl.DRAW_FRAMEBUFFER, dstAttachment, gl.RENDERBUFFER, dst.glRenderbuffer);
+        gl.framebufferRenderbuffer(WebGLConstants.DRAW_FRAMEBUFFER, dstAttachment, WebGLConstants.RENDERBUFFER, dst.glRenderbuffer);
     }
 
     for (let i = 0; i < regionIndices.length; i++) {
@@ -3428,12 +3429,12 @@ export function WebGL2CmdFuncBlitTexture (
 
         if (src.glTexture && srcMip !== region.srcSubres.mipLevel) {
             srcMip = region.srcSubres.mipLevel;
-            gl.framebufferTexture2D(gl.READ_FRAMEBUFFER, srcAttachment, src.glTarget, src.glTexture, srcMip);
+            gl.framebufferTexture2D(WebGLConstants.READ_FRAMEBUFFER, srcAttachment, src.glTarget, src.glTexture, srcMip);
         }
 
         if (dst.glTexture && dstMip !== region.dstSubres.mipLevel) {
             dstMip = region.dstSubres.mipLevel;
-            gl.framebufferTexture2D(gl.DRAW_FRAMEBUFFER, dstAttachment, dst.glTarget, dst.glTexture, dstMip);
+            gl.framebufferTexture2D(WebGLConstants.DRAW_FRAMEBUFFER, dstAttachment, dst.glTarget, dst.glTexture, dstMip);
         }
 
         gl.blitFramebuffer(
@@ -3452,11 +3453,11 @@ export function WebGL2CmdFuncBlitTexture (
 
     // restore fbo state
     if (cache.glReadFramebuffer !== origReadFBO) {
-        gl.bindFramebuffer(gl.READ_FRAMEBUFFER, origReadFBO);
+        gl.bindFramebuffer(WebGLConstants.READ_FRAMEBUFFER, origReadFBO);
         cache.glReadFramebuffer = origReadFBO;
     }
     if (cache.glFramebuffer !== origDrawFBO) {
-        gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, origDrawFBO);
+        gl.bindFramebuffer(WebGLConstants.DRAW_FRAMEBUFFER, origDrawFBO);
         cache.glFramebuffer = origDrawFBO;
     }
 }
diff --git a/cocos/gfx/webgl2/webgl2-descriptor-set-layout.ts b/cocos/gfx/webgl2/webgl2-descriptor-set-layout.ts
index b3de7a73d29..a410a64dcad 100644
--- a/cocos/gfx/webgl2/webgl2-descriptor-set-layout.ts
+++ b/cocos/gfx/webgl2/webgl2-descriptor-set-layout.ts
@@ -32,28 +32,28 @@ export class WebGL2DescriptorSetLayout extends DescriptorSetLayout {
     private _gpuDescriptorSetLayout: IWebGL2GPUDescriptorSetLayout | null = null;
 
     public initialize (info: Readonly<DescriptorSetLayoutInfo>): void {
-        Array.prototype.push.apply(this._bindings, info.bindings);
+        Array.prototype.push.apply(this._bindings$, info.bindings);
 
         let descriptorCount = 0; let maxBinding = -1;
         const flattenedIndices: number[] = [];
-        for (let i = 0; i < this._bindings.length; i++) {
-            const binding = this._bindings[i];
+        for (let i = 0; i < this._bindings$.length; i++) {
+            const binding = this._bindings$[i];
             flattenedIndices.push(descriptorCount);
             descriptorCount += binding.count;
             if (binding.binding > maxBinding) maxBinding = binding.binding;
         }
 
-        this._bindingIndices = Array(maxBinding + 1).fill(-1);
-        const descriptorIndices = this._descriptorIndices = Array(maxBinding + 1).fill(-1);
-        for (let i = 0; i < this._bindings.length; i++) {
-            const binding = this._bindings[i];
-            this._bindingIndices[binding.binding] = i;
+        this._bindingIndices$ = Array(maxBinding + 1).fill(-1);
+        const descriptorIndices = this._descriptorIndices$ = Array(maxBinding + 1).fill(-1);
+        for (let i = 0; i < this._bindings$.length; i++) {
+            const binding = this._bindings$[i];
+            this._bindingIndices$[binding.binding] = i;
             descriptorIndices[binding.binding] = flattenedIndices[i];
         }
 
         const dynamicBindings: number[] = [];
-        for (let i = 0; i < this._bindings.length; i++) {
-            const binding = this._bindings[i];
+        for (let i = 0; i < this._bindings$.length; i++) {
+            const binding = this._bindings$[i];
             if (binding.descriptorType & DESCRIPTOR_DYNAMIC_TYPE) {
                 for (let j = 0; j < binding.count; j++) {
                     dynamicBindings.push(binding.binding);
@@ -62,7 +62,7 @@ export class WebGL2DescriptorSetLayout extends DescriptorSetLayout {
         }
 
         this._gpuDescriptorSetLayout = {
-            bindings: this._bindings,
+            bindings: this._bindings$,
             dynamicBindings,
             descriptorIndices,
             descriptorCount,
@@ -70,6 +70,6 @@ export class WebGL2DescriptorSetLayout extends DescriptorSetLayout {
     }
 
     public destroy (): void {
-        this._bindings.length = 0;
+        this._bindings$.length = 0;
     }
 }
diff --git a/cocos/gfx/webgl2/webgl2-descriptor-set.ts b/cocos/gfx/webgl2/webgl2-descriptor-set.ts
index 2fa4a5b3481..2ddf819fafd 100644
--- a/cocos/gfx/webgl2/webgl2-descriptor-set.ts
+++ b/cocos/gfx/webgl2/webgl2-descriptor-set.ts
@@ -38,12 +38,12 @@ export class WebGL2DescriptorSet extends DescriptorSet {
     private _gpuDescriptorSet: IWebGL2GPUDescriptorSet | null = null;
 
     public initialize (info: Readonly<DescriptorSetInfo>): void {
-        this._layout = info.layout;
+        this._layout$ = info.layout;
         const { bindings, descriptorIndices, descriptorCount } = (info.layout as WebGL2DescriptorSetLayout).gpuDescriptorSetLayout;
 
-        this._buffers = Array(descriptorCount).fill(null);
-        this._textures = Array(descriptorCount).fill(null);
-        this._samplers = Array(descriptorCount).fill(null);
+        this._buffers$ = Array(descriptorCount).fill(null);
+        this._textures$ = Array(descriptorCount).fill(null);
+        this._samplers$ = Array(descriptorCount).fill(null);
 
         const gpuDescriptors: IWebGL2GPUDescriptor[] = [];
         this._gpuDescriptorSet = { gpuDescriptors, descriptorIndices };
@@ -62,28 +62,28 @@ export class WebGL2DescriptorSet extends DescriptorSet {
     }
 
     public destroy (): void {
-        this._layout = null;
+        this._layout$ = null;
         this._gpuDescriptorSet = null;
     }
 
     public update (): void {
-        if (this._isDirty && this._gpuDescriptorSet) {
+        if (this._isDirty$ && this._gpuDescriptorSet) {
             const descriptors = this._gpuDescriptorSet.gpuDescriptors;
             for (let i = 0; i < descriptors.length; ++i) {
                 if (descriptors[i].type & DESCRIPTOR_BUFFER_TYPE) {
-                    if (this._buffers[i]) {
-                        descriptors[i].gpuBuffer = (this._buffers[i] as WebGL2Buffer).gpuBuffer;
+                    if (this._buffers$[i]) {
+                        descriptors[i].gpuBuffer = (this._buffers$[i] as WebGL2Buffer).gpuBuffer;
                     }
                 } else if (descriptors[i].type & DESCRIPTOR_SAMPLER_TYPE) {
-                    if (this._textures[i]) {
-                        descriptors[i].gpuTextureView = (this._textures[i] as WebGL2Texture).gpuTextureView;
+                    if (this._textures$[i]) {
+                        descriptors[i].gpuTextureView = (this._textures$[i] as WebGL2Texture).gpuTextureView;
                     }
-                    if (this._samplers[i]) {
-                        descriptors[i].gpuSampler = (this._samplers[i] as WebGL2Sampler).gpuSampler;
+                    if (this._samplers$[i]) {
+                        descriptors[i].gpuSampler = (this._samplers$[i] as WebGL2Sampler).gpuSampler;
                     }
                 }
             }
-            this._isDirty = false;
+            this._isDirty$ = false;
         }
     }
 }
diff --git a/cocos/gfx/webgl2/webgl2-device.ts b/cocos/gfx/webgl2/webgl2-device.ts
index f67d996a604..76bdeb6fbcb 100644
--- a/cocos/gfx/webgl2/webgl2-device.ts
+++ b/cocos/gfx/webgl2/webgl2-device.ts
@@ -68,6 +68,7 @@ import { IWebGL2Extensions, WebGL2DeviceManager } from './webgl2-define';
 import { IWebGL2BindingMapping, IWebGL2BlitManager } from './webgl2-gpu-objects';
 import { BrowserType, OS } from '../../../pal/system-info/enum-type';
 import type { WebGL2StateCache } from './webgl2-state-cache';
+import { WebGLConstants } from '../gl-constants';
 
 export class WebGL2Device extends Device {
     get gl (): WebGL2RenderingContext {
@@ -110,9 +111,9 @@ export class WebGL2Device extends Device {
 
     public initialize (info: Readonly<DeviceInfo>): boolean {
         WebGL2DeviceManager.setInstance(this);
-        this._gfxAPI = API.WEBGL2;
+        this._gfxAPI$ = API.WEBGL2;
 
-        const mapping = this._bindingMappingInfo = info.bindingMappingInfo;
+        const mapping = this._bindingMappingInfo$ = info.bindingMappingInfo;
         const blockOffsets: number[] = [];
         const samplerTextureOffsets: number[] = [];
         const firstSet = mapping.setIndices[0];
@@ -144,33 +145,33 @@ export class WebGL2Device extends Device {
         }
 
         // create queue
-        this._queue = this.createQueue(new QueueInfo(QueueType.GRAPHICS));
-        this._cmdBuff = this.createCommandBuffer(new CommandBufferInfo(this._queue));
+        this._queue$ = this.createQueue(new QueueInfo(QueueType.GRAPHICS));
+        this._cmdBuff$ = this.createCommandBuffer(new CommandBufferInfo(this._queue$));
 
-        this._caps.maxVertexAttributes = gl.getParameter(gl.MAX_VERTEX_ATTRIBS);
-        this._caps.maxVertexUniformVectors = gl.getParameter(gl.MAX_VERTEX_UNIFORM_VECTORS);
+        this._caps$.maxVertexAttributes = gl.getParameter(WebGLConstants.MAX_VERTEX_ATTRIBS);
+        this._caps$.maxVertexUniformVectors = gl.getParameter(WebGLConstants.MAX_VERTEX_UNIFORM_VECTORS);
         // Implementation of WebGL2 in WECHAT browser and Safari in IOS exist bugs.
         // It seems to be related to Safari's experimental features 'WebGL via Metal'.
         // So limit using vertex uniform vectors no more than 256 in wechat browser,
         // and using vertex uniform vectors no more than 512 in safari.
         if (systemInfo.os === OS.IOS) {
-            const maxVertexUniformVectors = this._caps.maxVertexUniformVectors;
+            const maxVertexUniformVectors = this._caps$.maxVertexUniformVectors;
             if (sys.browserType === BrowserType.WECHAT) {
-                this._caps.maxVertexUniformVectors = maxVertexUniformVectors < 256 ? maxVertexUniformVectors : 256;
+                this._caps$.maxVertexUniformVectors = maxVertexUniformVectors < 256 ? maxVertexUniformVectors : 256;
             } else if (sys.browserType === BrowserType.SAFARI) {
-                this._caps.maxVertexUniformVectors = maxVertexUniformVectors < 512 ? maxVertexUniformVectors : 512;
+                this._caps$.maxVertexUniformVectors = maxVertexUniformVectors < 512 ? maxVertexUniformVectors : 512;
             }
         }
-        this._caps.maxFragmentUniformVectors = gl.getParameter(gl.MAX_FRAGMENT_UNIFORM_VECTORS);
-        this._caps.maxTextureUnits = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS);
-        this._caps.maxVertexTextureUnits = gl.getParameter(gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS);
-        this._caps.maxUniformBufferBindings = gl.getParameter(gl.MAX_UNIFORM_BUFFER_BINDINGS);
-        this._caps.maxUniformBlockSize = gl.getParameter(gl.MAX_UNIFORM_BLOCK_SIZE);
-        this._caps.maxTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE);
-        this._caps.maxCubeMapTextureSize = gl.getParameter(gl.MAX_CUBE_MAP_TEXTURE_SIZE);
-        this._caps.maxArrayTextureLayers = gl.getParameter(gl.MAX_ARRAY_TEXTURE_LAYERS);
-        this._caps.max3DTextureSize = gl.getParameter(gl.MAX_3D_TEXTURE_SIZE);
-        this._caps.uboOffsetAlignment = gl.getParameter(gl.UNIFORM_BUFFER_OFFSET_ALIGNMENT);
+        this._caps$.maxFragmentUniformVectors = gl.getParameter(WebGLConstants.MAX_FRAGMENT_UNIFORM_VECTORS);
+        this._caps$.maxTextureUnits = gl.getParameter(WebGLConstants.MAX_TEXTURE_IMAGE_UNITS);
+        this._caps$.maxVertexTextureUnits = gl.getParameter(WebGLConstants.MAX_VERTEX_TEXTURE_IMAGE_UNITS);
+        this._caps$.maxUniformBufferBindings = gl.getParameter(WebGLConstants.MAX_UNIFORM_BUFFER_BINDINGS);
+        this._caps$.maxUniformBlockSize = gl.getParameter(WebGLConstants.MAX_UNIFORM_BLOCK_SIZE);
+        this._caps$.maxTextureSize = gl.getParameter(WebGLConstants.MAX_TEXTURE_SIZE);
+        this._caps$.maxCubeMapTextureSize = gl.getParameter(WebGLConstants.MAX_CUBE_MAP_TEXTURE_SIZE);
+        this._caps$.maxArrayTextureLayers = gl.getParameter(WebGLConstants.MAX_ARRAY_TEXTURE_LAYERS);
+        this._caps$.max3DTextureSize = gl.getParameter(WebGLConstants.MAX_3D_TEXTURE_SIZE);
+        this._caps$.uboOffsetAlignment = gl.getParameter(WebGLConstants.UNIFORM_BUFFER_OFFSET_ALIGNMENT);
 
         const extensions = gl.getSupportedExtensions();
         let extStr = '';
@@ -183,23 +184,23 @@ export class WebGL2Device extends Device {
         const exts = getExtensions(gl);
 
         if (exts.WEBGL_debug_renderer_info) {
-            this._renderer = gl.getParameter(exts.WEBGL_debug_renderer_info.UNMASKED_RENDERER_WEBGL);
-            this._vendor = gl.getParameter(exts.WEBGL_debug_renderer_info.UNMASKED_VENDOR_WEBGL);
+            this._renderer$ = gl.getParameter(exts.WEBGL_debug_renderer_info.UNMASKED_RENDERER_WEBGL);
+            this._vendor$ = gl.getParameter(exts.WEBGL_debug_renderer_info.UNMASKED_VENDOR_WEBGL);
         } else {
-            this._renderer = gl.getParameter(gl.RENDERER);
-            this._vendor = gl.getParameter(gl.VENDOR);
+            this._renderer$ = gl.getParameter(WebGLConstants.RENDERER);
+            this._vendor$ = gl.getParameter(WebGLConstants.VENDOR);
         }
 
-        const version: string = gl.getParameter(gl.VERSION);
+        const version: string = gl.getParameter(WebGLConstants.VERSION);
 
-        this._features.fill(false);
+        this._features$.fill(false);
 
         this.initFormatFeatures(exts);
 
-        this._features[Feature.ELEMENT_INDEX_UINT] = true;
-        this._features[Feature.INSTANCED_ARRAYS] = true;
-        this._features[Feature.MULTIPLE_RENDER_TARGETS] = true;
-        this._features[Feature.BLEND_MINMAX] = true;
+        this._features$[Feature.ELEMENT_INDEX_UINT] = true;
+        this._features$[Feature.INSTANCED_ARRAYS] = true;
+        this._features$[Feature.MULTIPLE_RENDER_TARGETS] = true;
+        this._features$[Feature.BLEND_MINMAX] = true;
 
         let compressedFormat = '';
 
@@ -224,8 +225,8 @@ export class WebGL2Device extends Device {
         }
 
         debug('WebGL2 device initialized.');
-        debug(`RENDERER: ${this._renderer}`);
-        debug(`VENDOR: ${this._vendor}`);
+        debug(`RENDERER: ${this._renderer$}`);
+        debug(`VENDOR: ${this._vendor$}`);
         debug(`VERSION: ${version}`);
         debug(`COMPRESSED_FORMAT: ${compressedFormat}`);
         debug(`EXTENSIONS: ${extStr}`);
@@ -234,17 +235,17 @@ export class WebGL2Device extends Device {
     }
 
     public destroy (): void {
-        if (this._queue) {
-            this._queue.destroy();
-            this._queue = null;
+        if (this._queue$) {
+            this._queue$.destroy();
+            this._queue$ = null;
         }
 
-        if (this._cmdBuff) {
-            this._cmdBuff.destroy();
-            this._cmdBuff = null;
+        if (this._cmdBuff$) {
+            this._cmdBuff$.destroy();
+            this._cmdBuff$ = null;
         }
 
-        const it = this._samplers.values();
+        const it = this._samplers$.values();
         let res = it.next();
         while (!res.done) {
             (res.value as WebGL2Sampler).destroy();
@@ -263,98 +264,98 @@ export class WebGL2Device extends Device {
     }
 
     public present (): void {
-        const queue = (this._queue as WebGL2Queue);
-        this._numDrawCalls = queue.numDrawCalls;
-        this._numInstances = queue.numInstances;
-        this._numTris = queue.numTris;
+        const queue = (this._queue$ as WebGL2Queue);
+        this._numDrawCalls$ = queue.numDrawCalls;
+        this._numInstances$ = queue.numInstances;
+        this._numTris$ = queue.numTris;
         queue.clear();
     }
 
     protected initFormatFeatures (exts: IWebGL2Extensions): void {
-        this._formatFeatures.fill(FormatFeatureBit.NONE);
+        this._formatFeatures$.fill(FormatFeatureBit.NONE);
 
         this._textureExclusive.fill(true);
 
         let tempFeature: FormatFeature = FormatFeatureBit.RENDER_TARGET | FormatFeatureBit.SAMPLED_TEXTURE
             | FormatFeatureBit.STORAGE_TEXTURE | FormatFeatureBit.LINEAR_FILTER | FormatFeatureBit.VERTEX_ATTRIBUTE;
 
-        this._formatFeatures[Format.R8] = tempFeature;
-        this._formatFeatures[Format.RG8] = tempFeature;
-        this._formatFeatures[Format.RGB8] = tempFeature;
-        this._formatFeatures[Format.RGBA8] = tempFeature;
+        this._formatFeatures$[Format.R8] = tempFeature;
+        this._formatFeatures$[Format.RG8] = tempFeature;
+        this._formatFeatures$[Format.RGB8] = tempFeature;
+        this._formatFeatures$[Format.RGBA8] = tempFeature;
 
         tempFeature = FormatFeatureBit.RENDER_TARGET | FormatFeatureBit.SAMPLED_TEXTURE
             | FormatFeatureBit.STORAGE_TEXTURE | FormatFeatureBit.LINEAR_FILTER;
 
-        this._formatFeatures[Format.R8SN] = tempFeature;
-        this._formatFeatures[Format.RG8SN] = tempFeature;
-        this._formatFeatures[Format.RGB8SN] = tempFeature;
-        this._formatFeatures[Format.RGBA8SN] = tempFeature;
-        this._formatFeatures[Format.R5G6B5] = tempFeature;
-        this._formatFeatures[Format.RGBA4] = tempFeature;
-        this._formatFeatures[Format.RGB5A1] = tempFeature;
-        this._formatFeatures[Format.RGB10A2] = tempFeature;
+        this._formatFeatures$[Format.R8SN] = tempFeature;
+        this._formatFeatures$[Format.RG8SN] = tempFeature;
+        this._formatFeatures$[Format.RGB8SN] = tempFeature;
+        this._formatFeatures$[Format.RGBA8SN] = tempFeature;
+        this._formatFeatures$[Format.R5G6B5] = tempFeature;
+        this._formatFeatures$[Format.RGBA4] = tempFeature;
+        this._formatFeatures$[Format.RGB5A1] = tempFeature;
+        this._formatFeatures$[Format.RGB10A2] = tempFeature;
 
-        this._formatFeatures[Format.SRGB8] = tempFeature;
-        this._formatFeatures[Format.SRGB8_A8] = tempFeature;
+        this._formatFeatures$[Format.SRGB8] = tempFeature;
+        this._formatFeatures$[Format.SRGB8_A8] = tempFeature;
 
-        this._formatFeatures[Format.R11G11B10F] = tempFeature;
-        this._formatFeatures[Format.RGB9E5] = tempFeature;
+        this._formatFeatures$[Format.R11G11B10F] = tempFeature;
+        this._formatFeatures$[Format.RGB9E5] = tempFeature;
 
-        this._formatFeatures[Format.DEPTH] = tempFeature;
-        this._formatFeatures[Format.DEPTH_STENCIL] = tempFeature;
+        this._formatFeatures$[Format.DEPTH] = tempFeature;
+        this._formatFeatures$[Format.DEPTH_STENCIL] = tempFeature;
 
-        this._formatFeatures[Format.RGB10A2UI] = FormatFeatureBit.RENDER_TARGET | FormatFeatureBit.STORAGE_TEXTURE
+        this._formatFeatures$[Format.RGB10A2UI] = FormatFeatureBit.RENDER_TARGET | FormatFeatureBit.STORAGE_TEXTURE
             | FormatFeatureBit.SAMPLED_TEXTURE | FormatFeatureBit.LINEAR_FILTER;
 
         tempFeature = FormatFeatureBit.RENDER_TARGET | FormatFeatureBit.SAMPLED_TEXTURE
             | FormatFeatureBit.STORAGE_TEXTURE | FormatFeatureBit.VERTEX_ATTRIBUTE;
 
-        this._formatFeatures[Format.R16F] = tempFeature;
-        this._formatFeatures[Format.RG16F] = tempFeature;
-        this._formatFeatures[Format.RGB16F] = tempFeature;
-        this._formatFeatures[Format.RGBA16F] = tempFeature;
+        this._formatFeatures$[Format.R16F] = tempFeature;
+        this._formatFeatures$[Format.RG16F] = tempFeature;
+        this._formatFeatures$[Format.RGB16F] = tempFeature;
+        this._formatFeatures$[Format.RGBA16F] = tempFeature;
 
         tempFeature = FormatFeatureBit.STORAGE_TEXTURE | FormatFeatureBit.SAMPLED_TEXTURE | FormatFeatureBit.VERTEX_ATTRIBUTE;
 
-        this._formatFeatures[Format.R32F] = tempFeature;
-        this._formatFeatures[Format.RG32F] = tempFeature;
-        this._formatFeatures[Format.RGB32F] = tempFeature;
-        this._formatFeatures[Format.RGBA32F] = tempFeature;
+        this._formatFeatures$[Format.R32F] = tempFeature;
+        this._formatFeatures$[Format.RG32F] = tempFeature;
+        this._formatFeatures$[Format.RGB32F] = tempFeature;
+        this._formatFeatures$[Format.RGBA32F] = tempFeature;
 
-        this._formatFeatures[Format.RGB10A2UI] = FormatFeatureBit.RENDER_TARGET | FormatFeatureBit.STORAGE_TEXTURE
+        this._formatFeatures$[Format.RGB10A2UI] = FormatFeatureBit.RENDER_TARGET | FormatFeatureBit.STORAGE_TEXTURE
             | FormatFeatureBit.SAMPLED_TEXTURE | FormatFeatureBit.LINEAR_FILTER;
 
         tempFeature = FormatFeatureBit.RENDER_TARGET | FormatFeatureBit.STORAGE_TEXTURE
             | FormatFeatureBit.SAMPLED_TEXTURE | FormatFeatureBit.LINEAR_FILTER | FormatFeatureBit.VERTEX_ATTRIBUTE;
 
-        this._formatFeatures[Format.R8I] = tempFeature;
-        this._formatFeatures[Format.R8UI] = tempFeature;
-        this._formatFeatures[Format.R16I] = tempFeature;
-        this._formatFeatures[Format.R16UI] = tempFeature;
-        this._formatFeatures[Format.R32I] = tempFeature;
-        this._formatFeatures[Format.R32UI] = tempFeature;
-
-        this._formatFeatures[Format.RG8I] = tempFeature;
-        this._formatFeatures[Format.RG8UI] = tempFeature;
-        this._formatFeatures[Format.RG16I] = tempFeature;
-        this._formatFeatures[Format.RG16UI] = tempFeature;
-        this._formatFeatures[Format.RG32I] = tempFeature;
-        this._formatFeatures[Format.RG32UI] = tempFeature;
-
-        this._formatFeatures[Format.RGB8I] = tempFeature;
-        this._formatFeatures[Format.RGB8UI] = tempFeature;
-        this._formatFeatures[Format.RGB16I] = tempFeature;
-        this._formatFeatures[Format.RGB16UI] = tempFeature;
-        this._formatFeatures[Format.RGB32I] = tempFeature;
-        this._formatFeatures[Format.RGB32UI] = tempFeature;
-
-        this._formatFeatures[Format.RGBA8I] = tempFeature;
-        this._formatFeatures[Format.RGBA8UI] = tempFeature;
-        this._formatFeatures[Format.RGBA16I] = tempFeature;
-        this._formatFeatures[Format.RGBA16UI] = tempFeature;
-        this._formatFeatures[Format.RGBA32I] = tempFeature;
-        this._formatFeatures[Format.RGBA32UI] = tempFeature;
+        this._formatFeatures$[Format.R8I] = tempFeature;
+        this._formatFeatures$[Format.R8UI] = tempFeature;
+        this._formatFeatures$[Format.R16I] = tempFeature;
+        this._formatFeatures$[Format.R16UI] = tempFeature;
+        this._formatFeatures$[Format.R32I] = tempFeature;
+        this._formatFeatures$[Format.R32UI] = tempFeature;
+
+        this._formatFeatures$[Format.RG8I] = tempFeature;
+        this._formatFeatures$[Format.RG8UI] = tempFeature;
+        this._formatFeatures$[Format.RG16I] = tempFeature;
+        this._formatFeatures$[Format.RG16UI] = tempFeature;
+        this._formatFeatures$[Format.RG32I] = tempFeature;
+        this._formatFeatures$[Format.RG32UI] = tempFeature;
+
+        this._formatFeatures$[Format.RGB8I] = tempFeature;
+        this._formatFeatures$[Format.RGB8UI] = tempFeature;
+        this._formatFeatures$[Format.RGB16I] = tempFeature;
+        this._formatFeatures$[Format.RGB16UI] = tempFeature;
+        this._formatFeatures$[Format.RGB32I] = tempFeature;
+        this._formatFeatures$[Format.RGB32UI] = tempFeature;
+
+        this._formatFeatures$[Format.RGBA8I] = tempFeature;
+        this._formatFeatures$[Format.RGBA8UI] = tempFeature;
+        this._formatFeatures$[Format.RGBA16I] = tempFeature;
+        this._formatFeatures$[Format.RGBA16UI] = tempFeature;
+        this._formatFeatures$[Format.RGBA32I] = tempFeature;
+        this._formatFeatures$[Format.RGBA32UI] = tempFeature;
 
         this._textureExclusive[Format.R8] = false;
         this._textureExclusive[Format.RG8] = false;
@@ -393,9 +394,9 @@ export class WebGL2Device extends Device {
         this._textureExclusive[Format.DEPTH_STENCIL] = false;
 
         if (exts.EXT_color_buffer_float) {
-            this._formatFeatures[Format.R32F] |= FormatFeatureBit.RENDER_TARGET;
-            this._formatFeatures[Format.RG32F] |= FormatFeatureBit.RENDER_TARGET;
-            this._formatFeatures[Format.RGBA32F] |= FormatFeatureBit.RENDER_TARGET;
+            this._formatFeatures$[Format.R32F] |= FormatFeatureBit.RENDER_TARGET;
+            this._formatFeatures$[Format.RG32F] |= FormatFeatureBit.RENDER_TARGET;
+            this._formatFeatures$[Format.RGBA32F] |= FormatFeatureBit.RENDER_TARGET;
 
             this._textureExclusive[Format.R32F] = false;
             this._textureExclusive[Format.RG32F] = false;
@@ -409,82 +410,82 @@ export class WebGL2Device extends Device {
         }
 
         if (exts.OES_texture_float_linear) {
-            this._formatFeatures[Format.RGB32F] |= FormatFeatureBit.LINEAR_FILTER;
-            this._formatFeatures[Format.RGBA32F] |= FormatFeatureBit.LINEAR_FILTER;
-            this._formatFeatures[Format.R32F] |= FormatFeatureBit.LINEAR_FILTER;
-            this._formatFeatures[Format.RG32F] |= FormatFeatureBit.LINEAR_FILTER;
+            this._formatFeatures$[Format.RGB32F] |= FormatFeatureBit.LINEAR_FILTER;
+            this._formatFeatures$[Format.RGBA32F] |= FormatFeatureBit.LINEAR_FILTER;
+            this._formatFeatures$[Format.R32F] |= FormatFeatureBit.LINEAR_FILTER;
+            this._formatFeatures$[Format.RG32F] |= FormatFeatureBit.LINEAR_FILTER;
         }
 
         if (exts.OES_texture_half_float_linear) {
-            this._formatFeatures[Format.RGB16F] |= FormatFeatureBit.LINEAR_FILTER;
-            this._formatFeatures[Format.RGBA16F] |= FormatFeatureBit.LINEAR_FILTER;
-            this._formatFeatures[Format.R16F] |= FormatFeatureBit.LINEAR_FILTER;
-            this._formatFeatures[Format.RG16F] |= FormatFeatureBit.LINEAR_FILTER;
+            this._formatFeatures$[Format.RGB16F] |= FormatFeatureBit.LINEAR_FILTER;
+            this._formatFeatures$[Format.RGBA16F] |= FormatFeatureBit.LINEAR_FILTER;
+            this._formatFeatures$[Format.R16F] |= FormatFeatureBit.LINEAR_FILTER;
+            this._formatFeatures$[Format.RG16F] |= FormatFeatureBit.LINEAR_FILTER;
         }
 
         const compressedFeature: FormatFeature = FormatFeatureBit.SAMPLED_TEXTURE | FormatFeatureBit.LINEAR_FILTER;
 
         if (exts.WEBGL_compressed_texture_etc1) {
-            this._formatFeatures[Format.ETC_RGB8] = compressedFeature;
+            this._formatFeatures$[Format.ETC_RGB8] = compressedFeature;
         }
 
         if (exts.WEBGL_compressed_texture_etc) {
-            this._formatFeatures[Format.ETC2_RGB8] = compressedFeature;
-            this._formatFeatures[Format.ETC2_RGBA8] = compressedFeature;
-            this._formatFeatures[Format.ETC2_SRGB8] = compressedFeature;
-            this._formatFeatures[Format.ETC2_SRGB8_A8] = compressedFeature;
-            this._formatFeatures[Format.ETC2_RGB8_A1] = compressedFeature;
-            this._formatFeatures[Format.ETC2_SRGB8_A1] = compressedFeature;
+            this._formatFeatures$[Format.ETC2_RGB8] = compressedFeature;
+            this._formatFeatures$[Format.ETC2_RGBA8] = compressedFeature;
+            this._formatFeatures$[Format.ETC2_SRGB8] = compressedFeature;
+            this._formatFeatures$[Format.ETC2_SRGB8_A8] = compressedFeature;
+            this._formatFeatures$[Format.ETC2_RGB8_A1] = compressedFeature;
+            this._formatFeatures$[Format.ETC2_SRGB8_A1] = compressedFeature;
         }
 
         if (exts.WEBGL_compressed_texture_s3tc) {
-            this._formatFeatures[Format.BC1] = compressedFeature;
-            this._formatFeatures[Format.BC1_ALPHA] = compressedFeature;
-            this._formatFeatures[Format.BC1_SRGB] = compressedFeature;
-            this._formatFeatures[Format.BC1_SRGB_ALPHA] = compressedFeature;
-            this._formatFeatures[Format.BC2] = compressedFeature;
-            this._formatFeatures[Format.BC2_SRGB] = compressedFeature;
-            this._formatFeatures[Format.BC3] = compressedFeature;
-            this._formatFeatures[Format.BC3_SRGB] = compressedFeature;
+            this._formatFeatures$[Format.BC1] = compressedFeature;
+            this._formatFeatures$[Format.BC1_ALPHA] = compressedFeature;
+            this._formatFeatures$[Format.BC1_SRGB] = compressedFeature;
+            this._formatFeatures$[Format.BC1_SRGB_ALPHA] = compressedFeature;
+            this._formatFeatures$[Format.BC2] = compressedFeature;
+            this._formatFeatures$[Format.BC2_SRGB] = compressedFeature;
+            this._formatFeatures$[Format.BC3] = compressedFeature;
+            this._formatFeatures$[Format.BC3_SRGB] = compressedFeature;
         }
 
         if (exts.WEBGL_compressed_texture_pvrtc) {
-            this._formatFeatures[Format.PVRTC_RGB2] = compressedFeature;
-            this._formatFeatures[Format.PVRTC_RGBA2] = compressedFeature;
-            this._formatFeatures[Format.PVRTC_RGB4] = compressedFeature;
-            this._formatFeatures[Format.PVRTC_RGBA4] = compressedFeature;
+            this._formatFeatures$[Format.PVRTC_RGB2] = compressedFeature;
+            this._formatFeatures$[Format.PVRTC_RGBA2] = compressedFeature;
+            this._formatFeatures$[Format.PVRTC_RGB4] = compressedFeature;
+            this._formatFeatures$[Format.PVRTC_RGBA4] = compressedFeature;
         }
 
         if (exts.WEBGL_compressed_texture_astc) {
-            this._formatFeatures[Format.ASTC_RGBA_4X4] = compressedFeature;
-            this._formatFeatures[Format.ASTC_RGBA_5X4] = compressedFeature;
-            this._formatFeatures[Format.ASTC_RGBA_5X5] = compressedFeature;
-            this._formatFeatures[Format.ASTC_RGBA_6X5] = compressedFeature;
-            this._formatFeatures[Format.ASTC_RGBA_6X6] = compressedFeature;
-            this._formatFeatures[Format.ASTC_RGBA_8X5] = compressedFeature;
-            this._formatFeatures[Format.ASTC_RGBA_8X6] = compressedFeature;
-            this._formatFeatures[Format.ASTC_RGBA_8X8] = compressedFeature;
-            this._formatFeatures[Format.ASTC_RGBA_10X5] = compressedFeature;
-            this._formatFeatures[Format.ASTC_RGBA_10X6] = compressedFeature;
-            this._formatFeatures[Format.ASTC_RGBA_10X8] = compressedFeature;
-            this._formatFeatures[Format.ASTC_RGBA_10X10] = compressedFeature;
-            this._formatFeatures[Format.ASTC_RGBA_12X10] = compressedFeature;
-            this._formatFeatures[Format.ASTC_RGBA_12X12] = compressedFeature;
-
-            this._formatFeatures[Format.ASTC_SRGBA_4X4] = compressedFeature;
-            this._formatFeatures[Format.ASTC_SRGBA_5X4] = compressedFeature;
-            this._formatFeatures[Format.ASTC_SRGBA_5X5] = compressedFeature;
-            this._formatFeatures[Format.ASTC_SRGBA_6X5] = compressedFeature;
-            this._formatFeatures[Format.ASTC_SRGBA_6X6] = compressedFeature;
-            this._formatFeatures[Format.ASTC_SRGBA_8X5] = compressedFeature;
-            this._formatFeatures[Format.ASTC_SRGBA_8X6] = compressedFeature;
-            this._formatFeatures[Format.ASTC_SRGBA_8X8] = compressedFeature;
-            this._formatFeatures[Format.ASTC_SRGBA_10X5] = compressedFeature;
-            this._formatFeatures[Format.ASTC_SRGBA_10X6] = compressedFeature;
-            this._formatFeatures[Format.ASTC_SRGBA_10X8] = compressedFeature;
-            this._formatFeatures[Format.ASTC_SRGBA_10X10] = compressedFeature;
-            this._formatFeatures[Format.ASTC_SRGBA_12X10] = compressedFeature;
-            this._formatFeatures[Format.ASTC_SRGBA_12X12] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_RGBA_4X4] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_RGBA_5X4] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_RGBA_5X5] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_RGBA_6X5] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_RGBA_6X6] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_RGBA_8X5] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_RGBA_8X6] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_RGBA_8X8] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_RGBA_10X5] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_RGBA_10X6] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_RGBA_10X8] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_RGBA_10X10] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_RGBA_12X10] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_RGBA_12X12] = compressedFeature;
+
+            this._formatFeatures$[Format.ASTC_SRGBA_4X4] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_SRGBA_5X4] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_SRGBA_5X5] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_SRGBA_6X5] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_SRGBA_6X6] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_SRGBA_8X5] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_SRGBA_8X6] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_SRGBA_8X8] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_SRGBA_10X5] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_SRGBA_10X6] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_SRGBA_10X8] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_SRGBA_10X10] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_SRGBA_12X10] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_SRGBA_12X12] = compressedFeature;
         }
     }
 
@@ -571,10 +572,10 @@ export class WebGL2Device extends Device {
 
     public getSampler (info: Readonly<SamplerInfo>): Sampler {
         const hash = Sampler.computeHash(info);
-        if (!this._samplers.has(hash)) {
-            this._samplers.set(hash, new WebGL2Sampler(info, hash));
+        if (!this._samplers$.has(hash)) {
+            this._samplers$.set(hash, new WebGL2Sampler(info, hash));
         }
-        return this._samplers.get(hash)!;
+        return this._samplers$.get(hash)!;
     }
 
     public getSwapchains (): Readonly<Swapchain[]> {
@@ -583,26 +584,26 @@ export class WebGL2Device extends Device {
 
     public getGeneralBarrier (info: Readonly<GeneralBarrierInfo>): GeneralBarrier {
         const hash = GeneralBarrier.computeHash(info);
-        if (!this._generalBarrierss.has(hash)) {
-            this._generalBarrierss.set(hash, new GeneralBarrier(info, hash));
+        if (!this._generalBarrierss$.has(hash)) {
+            this._generalBarrierss$.set(hash, new GeneralBarrier(info, hash));
         }
-        return this._generalBarrierss.get(hash)!;
+        return this._generalBarrierss$.get(hash)!;
     }
 
     public getTextureBarrier (info: Readonly<TextureBarrierInfo>): TextureBarrier {
         const hash = TextureBarrier.computeHash(info);
-        if (!this._textureBarriers.has(hash)) {
-            this._textureBarriers.set(hash, new TextureBarrier(info, hash));
+        if (!this._textureBarriers$.has(hash)) {
+            this._textureBarriers$.set(hash, new TextureBarrier(info, hash));
         }
-        return this._textureBarriers.get(hash)!;
+        return this._textureBarriers$.get(hash)!;
     }
 
     public getBufferBarrier (info: Readonly<BufferBarrierInfo>): BufferBarrier {
         const hash = BufferBarrier.computeHash(info);
-        if (!this._bufferBarriers.has(hash)) {
-            this._bufferBarriers.set(hash, new BufferBarrier(info, hash));
+        if (!this._bufferBarriers$.has(hash)) {
+            this._bufferBarriers$.set(hash, new BufferBarrier(info, hash));
         }
-        return this._bufferBarriers.get(hash)!;
+        return this._bufferBarriers$.get(hash)!;
     }
 
     public copyBuffersToTexture (buffers: Readonly<ArrayBufferView[]>, texture: Texture, regions: Readonly<BufferTextureCopy[]>): void {
diff --git a/cocos/gfx/webgl2/webgl2-framebuffer.ts b/cocos/gfx/webgl2/webgl2-framebuffer.ts
index 9741515e2e9..542841d5ef2 100644
--- a/cocos/gfx/webgl2/webgl2-framebuffer.ts
+++ b/cocos/gfx/webgl2/webgl2-framebuffer.ts
@@ -55,9 +55,9 @@ export class WebGL2Framebuffer extends Framebuffer {
     }
 
     public initialize (info: Readonly<FramebufferInfo>): void {
-        this._renderPass = info.renderPass;
-        this._colorTextures = info.colorTextures || [];
-        this._depthStencilTexture = info.depthStencilTexture || null;
+        this._renderPass$ = info.renderPass;
+        this._colorTextures$ = info.colorTextures || [];
+        this._depthStencilTexture$ = info.depthStencilTexture || null;
 
         const gpuColorViews: IWebGL2GPUTextureView[] = [];
         for (let i = 0; i < info.colorTextures.length; i++) {
@@ -107,8 +107,8 @@ export class WebGL2Framebuffer extends Framebuffer {
         WebGL2CmdFuncCreateFramebuffer(WebGL2DeviceManager.instance, this._gpuFramebuffer);
         this.gpuFramebuffer.gpuColorViews.forEach((tex) => this._gpuColorViews.push(tex.gpuTexture.glTexture));
         this._gpuDepthStencilView = this.gpuFramebuffer.gpuDepthStencilView?.gpuTexture.glTexture;
-        this._width = this._gpuFramebuffer.width;
-        this._height = this._gpuFramebuffer.height;
+        this._width$ = this._gpuFramebuffer.width;
+        this._height$ = this._gpuFramebuffer.height;
     }
 
     public destroy (): void {
diff --git a/cocos/gfx/webgl2/webgl2-input-assembler.ts b/cocos/gfx/webgl2/webgl2-input-assembler.ts
index 2fcd72089db..151bae77c00 100644
--- a/cocos/gfx/webgl2/webgl2-input-assembler.ts
+++ b/cocos/gfx/webgl2/webgl2-input-assembler.ts
@@ -43,24 +43,24 @@ export class WebGL2InputAssembler extends InputAssembler {
             return;
         }
 
-        this._attributes = info.attributes;
-        this._attributesHash = this.computeAttributesHash();
-        this._vertexBuffers = info.vertexBuffers;
+        this._attributes$ = info.attributes;
+        this._attributesHash$ = this.computeAttributesHash();
+        this._vertexBuffers$ = info.vertexBuffers;
 
         if (info.indexBuffer) {
-            this._indexBuffer = info.indexBuffer;
-            this._drawInfo.indexCount = this._indexBuffer.size / this._indexBuffer.stride;
-            this._drawInfo.firstIndex = 0;
+            this._indexBuffer$ = info.indexBuffer;
+            this._drawInfo$.indexCount = this._indexBuffer$.size / this._indexBuffer$.stride;
+            this._drawInfo$.firstIndex = 0;
         } else {
-            const vertBuff = this._vertexBuffers[0];
-            this._drawInfo.vertexCount = vertBuff.size / vertBuff.stride;
-            this._drawInfo.firstVertex = 0;
-            this._drawInfo.vertexOffset = 0;
+            const vertBuff = this._vertexBuffers$[0];
+            this._drawInfo$.vertexCount = vertBuff.size / vertBuff.stride;
+            this._drawInfo$.firstVertex = 0;
+            this._drawInfo$.vertexOffset = 0;
         }
-        this._drawInfo.instanceCount = 0;
-        this._drawInfo.firstInstance = 0;
+        this._drawInfo$.instanceCount = 0;
+        this._drawInfo$.firstInstance = 0;
 
-        this._indirectBuffer = info.indirectBuffer || null;
+        this._indirectBuffer$ = info.indirectBuffer || null;
 
         const gpuVertexBuffers: IWebGL2GPUBuffer[] = new Array<IWebGL2GPUBuffer>(info.vertexBuffers.length);
         for (let i = 0; i < info.vertexBuffers.length; ++i) {
diff --git a/cocos/gfx/webgl2/webgl2-pipeline-layout.ts b/cocos/gfx/webgl2/webgl2-pipeline-layout.ts
index 43cbc9c36b3..209be0f2ff0 100644
--- a/cocos/gfx/webgl2/webgl2-pipeline-layout.ts
+++ b/cocos/gfx/webgl2/webgl2-pipeline-layout.ts
@@ -33,15 +33,15 @@ export class WebGL2PipelineLayout extends PipelineLayout {
     private _gpuPipelineLayout: IWebGL2GPUPipelineLayout | null = null;
 
     public initialize (info: Readonly<PipelineLayoutInfo>): void {
-        Array.prototype.push.apply(this._setLayouts, info.setLayouts);
+        Array.prototype.push.apply(this._setLayouts$, info.setLayouts);
 
         const dynamicOffsetIndices: number[][] = [];
 
         const gpuSetLayouts: IWebGL2GPUDescriptorSetLayout[] = [];
         let dynamicOffsetCount = 0;
         const dynamicOffsetOffsets: number[] = [];
-        for (let i = 0; i < this._setLayouts.length; i++) {
-            const setLayout = this._setLayouts[i] as WebGL2DescriptorSetLayout;
+        for (let i = 0; i < this._setLayouts$.length; i++) {
+            const setLayout = this._setLayouts$[i] as WebGL2DescriptorSetLayout;
             const dynamicBindings = setLayout.gpuDescriptorSetLayout.dynamicBindings;
             const indices = Array(setLayout.bindingIndices.length).fill(-1);
             for (let j = 0; j < dynamicBindings.length; j++) {
@@ -64,6 +64,6 @@ export class WebGL2PipelineLayout extends PipelineLayout {
     }
 
     public destroy (): void {
-        this._setLayouts.length = 0;
+        this._setLayouts$.length = 0;
     }
 }
diff --git a/cocos/gfx/webgl2/webgl2-pipeline-state.ts b/cocos/gfx/webgl2/webgl2-pipeline-state.ts
index 94bd74f7162..6a1583a6ce8 100644
--- a/cocos/gfx/webgl2/webgl2-pipeline-state.ts
+++ b/cocos/gfx/webgl2/webgl2-pipeline-state.ts
@@ -54,10 +54,10 @@ export class WebGL2PipelineState extends PipelineState {
     private _gpuPipelineState: IWebGL2GPUPipelineState | null = null;
 
     public initialize (info: Readonly<PipelineStateInfo>): void {
-        this._primitive = info.primitive;
-        this._shader = info.shader;
-        this._pipelineLayout = info.pipelineLayout;
-        const bs = this._bs;
+        this._primitive$ = info.primitive;
+        this._shader$ = info.shader;
+        this._pipelineLayout$ = info.pipelineLayout;
+        const bs = this._bs$;
         if (info.blendState) {
             const bsInfo = info.blendState;
             const { targets } = bsInfo;
@@ -71,15 +71,15 @@ export class WebGL2PipelineState extends PipelineState {
             if (bsInfo.isIndepend !== undefined) { bs.isIndepend = bsInfo.isIndepend; }
             if (bsInfo.blendColor !== undefined) { bs.blendColor = bsInfo.blendColor; }
         }
-        Object.assign(this._rs, info.rasterizerState);
-        Object.assign(this._dss, info.depthStencilState);
-        this._is = info.inputState;
-        this._renderPass = info.renderPass;
-        this._dynamicStates = info.dynamicStates;
+        Object.assign(this._rs$, info.rasterizerState);
+        Object.assign(this._dss$, info.depthStencilState);
+        this._is$ = info.inputState;
+        this._renderPass$ = info.renderPass;
+        this._dynamicStates$ = info.dynamicStates;
 
         const dynamicStates: DynamicStateFlagBit[] = [];
         for (let i = 0; i < 31; i++) {
-            if (this._dynamicStates & (1 << i)) {
+            if (this._dynamicStates$ & (1 << i)) {
                 dynamicStates.push(1 << i);
             }
         }
diff --git a/cocos/gfx/webgl2/webgl2-primary-command-buffer.ts b/cocos/gfx/webgl2/webgl2-primary-command-buffer.ts
index 70a03495f3c..3d42dc36259 100644
--- a/cocos/gfx/webgl2/webgl2-primary-command-buffer.ts
+++ b/cocos/gfx/webgl2/webgl2-primary-command-buffer.ts
@@ -71,19 +71,19 @@ export class WebGL2PrimaryCommandBuffer extends WebGL2CommandBuffer {
 
             WebGL2CmdFuncDraw(WebGL2DeviceManager.instance, info as DrawInfo);
 
-            ++this._numDrawCalls;
-            this._numInstances += info.instanceCount;
+            ++this._numDrawCalls$;
+            this._numInstances$ += info.instanceCount;
             const indexCount = info.indexCount || info.vertexCount;
             if (this._curGPUPipelineState) {
                 const glPrimitive = this._curGPUPipelineState.glPrimitive;
                 switch (glPrimitive) {
                 case 0x0004: { // WebGLRenderingContext.TRIANGLES
-                    this._numTris += indexCount / 3 * Math.max(info.instanceCount, 1);
+                    this._numTris$ += indexCount / 3 * Math.max(info.instanceCount, 1);
                     break;
                 }
                 case 0x0005: // WebGLRenderingContext.TRIANGLE_STRIP
                 case 0x0006: { // WebGLRenderingContext.TRIANGLE_FAN
-                    this._numTris += (indexCount - 2) * Math.max(info.instanceCount, 1);
+                    this._numTris$ += (indexCount - 2) * Math.max(info.instanceCount, 1);
                     break;
                 }
                 default:
@@ -162,9 +162,9 @@ export class WebGL2PrimaryCommandBuffer extends WebGL2CommandBuffer {
             // actually they are secondary buffers, the cast here is only for type checking
             const webGL2CmdBuff = cmdBuffs[i] as WebGL2PrimaryCommandBuffer;
             WebGL2CmdFuncExecuteCmds(WebGL2DeviceManager.instance, webGL2CmdBuff.cmdPackage);
-            this._numDrawCalls += webGL2CmdBuff._numDrawCalls;
-            this._numInstances += webGL2CmdBuff._numInstances;
-            this._numTris += webGL2CmdBuff._numTris;
+            this._numDrawCalls$ += webGL2CmdBuff._numDrawCalls$;
+            this._numInstances$ += webGL2CmdBuff._numInstances$;
+            this._numTris$ += webGL2CmdBuff._numTris$;
         }
     }
 
diff --git a/cocos/gfx/webgl2/webgl2-queue.ts b/cocos/gfx/webgl2/webgl2-queue.ts
index 6f1d95731c4..a61b8692665 100644
--- a/cocos/gfx/webgl2/webgl2-queue.ts
+++ b/cocos/gfx/webgl2/webgl2-queue.ts
@@ -33,7 +33,7 @@ export class WebGL2Queue extends Queue {
     public numTris = 0;
 
     public initialize (info: Readonly<QueueInfo>): void {
-        this._type = info.type;
+        this._type$ = info.type;
     }
 
     public destroy (): void {
diff --git a/cocos/gfx/webgl2/webgl2-render-pass.ts b/cocos/gfx/webgl2/webgl2-render-pass.ts
index b52ea442d78..75be6b48852 100644
--- a/cocos/gfx/webgl2/webgl2-render-pass.ts
+++ b/cocos/gfx/webgl2/webgl2-render-pass.ts
@@ -34,16 +34,16 @@ export class WebGL2RenderPass extends RenderPass {
     private _gpuRenderPass: IWebGL2GPURenderPass | null = null;
 
     public initialize (info: Readonly<RenderPassInfo>): void {
-        this._colorInfos = info.colorAttachments;
-        this._depthStencilInfo = info.depthStencilAttachment;
-        this._subpasses = info.subpasses;
+        this._colorInfos$ = info.colorAttachments;
+        this._depthStencilInfo$ = info.depthStencilAttachment;
+        this._subpasses$ = info.subpasses;
 
         this._gpuRenderPass = {
-            colorAttachments: this._colorInfos,
-            depthStencilAttachment: this._depthStencilInfo,
+            colorAttachments: this._colorInfos$,
+            depthStencilAttachment: this._depthStencilInfo$,
         };
 
-        this._hash = this.computeHash();
+        this._hash$ = this.computeHash();
     }
 
     public destroy (): void {
diff --git a/cocos/gfx/webgl2/webgl2-shader.ts b/cocos/gfx/webgl2/webgl2-shader.ts
index 485384dbe70..a2eaff3d5e6 100644
--- a/cocos/gfx/webgl2/webgl2-shader.ts
+++ b/cocos/gfx/webgl2/webgl2-shader.ts
@@ -39,11 +39,11 @@ export class WebGL2Shader extends Shader {
     private _gpuShader: IWebGL2GPUShader | null = null;
 
     public initialize (info: Readonly<ShaderInfo>): void {
-        this._name = info.name;
-        this._stages = info.stages;
-        this._attributes = info.attributes;
-        this._blocks = info.blocks;
-        this._samplers = info.samplers;
+        this._name$ = info.name;
+        this._stages$ = info.stages;
+        this._attributes$ = info.attributes;
+        this._blocks$ = info.blocks;
+        this._samplers$ = info.samplers;
 
         this._gpuShader = {
             name: info.name,
diff --git a/cocos/gfx/webgl2/webgl2-swapchain.ts b/cocos/gfx/webgl2/webgl2-swapchain.ts
index 3bef1a41160..fd371ee615f 100644
--- a/cocos/gfx/webgl2/webgl2-swapchain.ts
+++ b/cocos/gfx/webgl2/webgl2-swapchain.ts
@@ -33,43 +33,44 @@ import { Swapchain } from '../base/swapchain';
 import { IWebGL2Extensions, WebGL2DeviceManager } from './webgl2-define';
 import { OS } from '../../../pal/system-info/enum-type';
 import { IWebGL2BlitManager } from './webgl2-gpu-objects';
+import { WebGLConstants } from '../gl-constants';
 
 const eventWebGLContextLost = 'webglcontextlost';
 
 function initStates (gl: WebGL2RenderingContext): void {
-    gl.activeTexture(gl.TEXTURE0);
-    gl.pixelStorei(gl.PACK_ALIGNMENT, 1);
-    gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
-    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+    gl.activeTexture(WebGLConstants.TEXTURE0);
+    gl.pixelStorei(WebGLConstants.PACK_ALIGNMENT, 1);
+    gl.pixelStorei(WebGLConstants.UNPACK_ALIGNMENT, 1);
+    gl.pixelStorei(WebGLConstants.UNPACK_FLIP_Y_WEBGL, false);
 
-    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    gl.bindFramebuffer(WebGLConstants.FRAMEBUFFER, null);
 
     // rasterizer state
-    gl.enable(gl.SCISSOR_TEST);
-    gl.enable(gl.CULL_FACE);
-    gl.cullFace(gl.BACK);
-    gl.frontFace(gl.CCW);
+    gl.enable(WebGLConstants.SCISSOR_TEST);
+    gl.enable(WebGLConstants.CULL_FACE);
+    gl.cullFace(WebGLConstants.BACK);
+    gl.frontFace(WebGLConstants.CCW);
     gl.polygonOffset(0.0, 0.0);
 
     // depth stencil state
-    gl.enable(gl.DEPTH_TEST);
+    gl.enable(WebGLConstants.DEPTH_TEST);
     gl.depthMask(true);
-    gl.depthFunc(gl.LESS);
+    gl.depthFunc(WebGLConstants.LESS);
 
-    gl.stencilFuncSeparate(gl.FRONT, gl.ALWAYS, 1, 0xffff);
-    gl.stencilOpSeparate(gl.FRONT, gl.KEEP, gl.KEEP, gl.KEEP);
-    gl.stencilMaskSeparate(gl.FRONT, 0xffff);
-    gl.stencilFuncSeparate(gl.BACK, gl.ALWAYS, 1, 0xffff);
-    gl.stencilOpSeparate(gl.BACK, gl.KEEP, gl.KEEP, gl.KEEP);
-    gl.stencilMaskSeparate(gl.BACK, 0xffff);
+    gl.stencilFuncSeparate(WebGLConstants.FRONT, WebGLConstants.ALWAYS, 1, 0xffff);
+    gl.stencilOpSeparate(WebGLConstants.FRONT, WebGLConstants.KEEP, WebGLConstants.KEEP, WebGLConstants.KEEP);
+    gl.stencilMaskSeparate(WebGLConstants.FRONT, 0xffff);
+    gl.stencilFuncSeparate(WebGLConstants.BACK, WebGLConstants.ALWAYS, 1, 0xffff);
+    gl.stencilOpSeparate(WebGLConstants.BACK, WebGLConstants.KEEP, WebGLConstants.KEEP, WebGLConstants.KEEP);
+    gl.stencilMaskSeparate(WebGLConstants.BACK, 0xffff);
 
-    gl.disable(gl.STENCIL_TEST);
+    gl.disable(WebGLConstants.STENCIL_TEST);
 
     // blend state
-    gl.disable(gl.SAMPLE_ALPHA_TO_COVERAGE);
-    gl.disable(gl.BLEND);
-    gl.blendEquationSeparate(gl.FUNC_ADD, gl.FUNC_ADD);
-    gl.blendFuncSeparate(gl.ONE, gl.ZERO, gl.ONE, gl.ZERO);
+    gl.disable(WebGLConstants.SAMPLE_ALPHA_TO_COVERAGE);
+    gl.disable(WebGLConstants.BLEND);
+    gl.blendEquationSeparate(WebGLConstants.FUNC_ADD, WebGLConstants.FUNC_ADD);
+    gl.blendFuncSeparate(WebGLConstants.ONE, WebGLConstants.ZERO, WebGLConstants.ONE, WebGLConstants.ZERO);
     gl.colorMask(true, true, true, true);
     gl.blendColor(0.0, 0.0, 0.0, 0.0);
 }
@@ -195,22 +196,22 @@ export class WebGL2Swapchain extends Swapchain {
         const colorFmt = Format.RGBA8;
         let depthStencilFmt = Format.DEPTH_STENCIL;
 
-        const depthBits = gl.getParameter(gl.DEPTH_BITS);
-        const stencilBits = gl.getParameter(gl.STENCIL_BITS);
+        const depthBits = gl.getParameter(WebGLConstants.DEPTH_BITS);
+        const stencilBits = gl.getParameter(WebGLConstants.STENCIL_BITS);
 
         if (depthBits && stencilBits) depthStencilFmt = Format.DEPTH_STENCIL;
         else if (depthBits) depthStencilFmt = Format.DEPTH;
 
-        this._colorTexture = new WebGL2Texture();
-        this._colorTexture.initAsSwapchainTexture({
+        this._colorTexture$ = new WebGL2Texture();
+        this._colorTexture$.initAsSwapchainTexture({
             swapchain: this,
             format: colorFmt,
             width: info.width,
             height: info.height,
         });
 
-        this._depthStencilTexture = new WebGL2Texture();
-        this._depthStencilTexture.initAsSwapchainTexture({
+        this._depthStencilTexture$ = new WebGL2Texture();
+        this._depthStencilTexture$.initAsSwapchainTexture({
             swapchain: this,
             format: depthStencilFmt,
             width: info.width,
@@ -281,12 +282,12 @@ export class WebGL2Swapchain extends Swapchain {
     }
 
     public resize (width: number, height: number, surfaceTransform: SurfaceTransform): void {
-        if (this._colorTexture.width !== width || this._colorTexture.height !== height) {
+        if (this._colorTexture$.width !== width || this._colorTexture$.height !== height) {
             debug(`Resizing swapchain: ${width}x${height}`);
             this._canvas!.width = width;
             this._canvas!.height = height;
-            this._colorTexture.resize(width, height);
-            this._depthStencilTexture.resize(width, height);
+            this._colorTexture$.resize(width, height);
+            this._depthStencilTexture$.resize(width, height);
         }
     }
 
diff --git a/cocos/gfx/webgl2/webgl2-texture.ts b/cocos/gfx/webgl2/webgl2-texture.ts
index 3e37f778622..f29d026d3a2 100644
--- a/cocos/gfx/webgl2/webgl2-texture.ts
+++ b/cocos/gfx/webgl2/webgl2-texture.ts
@@ -49,21 +49,21 @@ export class WebGL2Texture extends Texture {
 
         if ('texture' in info) {
             texInfo = viewInfo.texture.info;
-            this._isTextureView = true;
+            this._isTextureView$ = true;
         }
 
-        this._info.copy(texInfo);
+        this._info$.copy(texInfo);
 
-        this._isPowerOf2 = IsPowerOf2(this._info.width) && IsPowerOf2(this._info.height);
-        this._size = FormatSurfaceSize(
-            this._info.format,
+        this._isPowerOf2$ = IsPowerOf2(this._info$.width) && IsPowerOf2(this._info$.height);
+        this._size$ = FormatSurfaceSize(
+            this._info$.format,
             this.width,
             this.height,
             this.depth,
-            this._info.levelCount,
-        ) * this._info.layerCount;
+            this._info$.levelCount,
+        ) * this._info$.layerCount;
 
-        if (!this._isTextureView) {
+        if (!this._isTextureView$) {
             this._gpuTexture = {
                 type: texInfo.type,
                 format: texInfo.format,
@@ -71,12 +71,12 @@ export class WebGL2Texture extends Texture {
                 width: texInfo.width,
                 height: texInfo.height,
                 depth: texInfo.depth,
-                size: this._size,
+                size: this._size$,
                 arrayLayer: texInfo.layerCount,
                 mipLevel: texInfo.levelCount,
                 samples: texInfo.samples,
                 flags: texInfo.flags,
-                isPowerOf2: this._isPowerOf2,
+                isPowerOf2: this._isPowerOf2$,
 
                 glTarget: 0,
                 glInternalFmt: 0,
@@ -95,26 +95,26 @@ export class WebGL2Texture extends Texture {
 
             if (!this._gpuTexture.isSwapchainTexture && this._gpuTexture) {
                 WebGL2CmdFuncCreateTexture(WebGL2DeviceManager.instance, this._gpuTexture);
-                WebGL2DeviceManager.instance.memoryStatus.textureSize += this._size;
+                WebGL2DeviceManager.instance.memoryStatus.textureSize += this._size$;
             }
 
-            this._viewInfo.texture = this;
-            this._viewInfo.type = info.type;
-            this._viewInfo.format = info.format;
-            this._viewInfo.baseLevel = 0;
-            this._viewInfo.levelCount = info.levelCount;
-            this._viewInfo.baseLayer = 0;
-            this._viewInfo.layerCount = info.layerCount;
+            this._viewInfo$.texture = this;
+            this._viewInfo$.type = info.type;
+            this._viewInfo$.format = info.format;
+            this._viewInfo$.baseLevel = 0;
+            this._viewInfo$.levelCount = info.levelCount;
+            this._viewInfo$.baseLayer = 0;
+            this._viewInfo$.layerCount = info.layerCount;
 
             this._gpuTextureView = {
                 gpuTexture: this._gpuTexture,
-                type: this._viewInfo.type,
-                format: this._viewInfo.format,
-                baseLevel: this._viewInfo.baseLevel,
-                levelCount: this._viewInfo.levelCount,
+                type: this._viewInfo$.type,
+                format: this._viewInfo$.format,
+                baseLevel: this._viewInfo$.baseLevel,
+                levelCount: this._viewInfo$.levelCount,
             };
         } else {
-            this._viewInfo.copy(viewInfo);
+            this._viewInfo$.copy(viewInfo);
             this._gpuTexture = (viewInfo.texture as WebGL2Texture)._gpuTexture;
 
             if (this._gpuTexture?.format !== texInfo.format) {
@@ -133,9 +133,9 @@ export class WebGL2Texture extends Texture {
     }
 
     public destroy (): void {
-        if (!this._isTextureView && this._gpuTexture) {
+        if (!this._isTextureView$ && this._gpuTexture) {
             WebGL2CmdFuncDestroyTexture(WebGL2DeviceManager.instance, this._gpuTexture);
-            WebGL2DeviceManager.instance.memoryStatus.textureSize -= this._size;
+            WebGL2DeviceManager.instance.memoryStatus.textureSize -= this._size$;
             this._gpuTexture = null;
         }
     }
@@ -156,35 +156,35 @@ export class WebGL2Texture extends Texture {
     }
 
     public resize (width: number, height: number): void {
-        if (this._info.width === width && this._info.height === height) {
+        if (this._info$.width === width && this._info$.height === height) {
             return;
         }
 
-        if (this._info.levelCount === WebGL2Texture.getLevelCount(this._info.width, this._info.height)) {
-            this._info.levelCount = WebGL2Texture.getLevelCount(width, height);
-        } else if (this._info.levelCount > 1) {
-            this._info.levelCount = Math.min(this._info.levelCount, WebGL2Texture.getLevelCount(width, height));
+        if (this._info$.levelCount === WebGL2Texture.getLevelCount(this._info$.width, this._info$.height)) {
+            this._info$.levelCount = WebGL2Texture.getLevelCount(width, height);
+        } else if (this._info$.levelCount > 1) {
+            this._info$.levelCount = Math.min(this._info$.levelCount, WebGL2Texture.getLevelCount(width, height));
         }
 
-        const oldSize = this._size;
-        this._info.width = width;
-        this._info.height = height;
-        this._size = FormatSurfaceSize(
-            this._info.format,
+        const oldSize = this._size$;
+        this._info$.width = width;
+        this._info$.height = height;
+        this._size$ = FormatSurfaceSize(
+            this._info$.format,
             this.width,
             this.height,
             this.depth,
-            this._info.levelCount,
-        ) * this._info.layerCount;
+            this._info$.levelCount,
+        ) * this._info$.layerCount;
 
-        if (!this._isTextureView && this._gpuTexture) {
+        if (!this._isTextureView$ && this._gpuTexture) {
             this._gpuTexture.width = width;
             this._gpuTexture.height = height;
-            this._gpuTexture.size = this._size;
+            this._gpuTexture.size = this._size$;
             if (!this._gpuTexture.isSwapchainTexture) {
                 WebGL2CmdFuncResizeTexture(WebGL2DeviceManager.instance, this._gpuTexture);
                 WebGL2DeviceManager.instance.memoryStatus.textureSize -= oldSize;
-                WebGL2DeviceManager.instance.memoryStatus.textureSize += this._size;
+                WebGL2DeviceManager.instance.memoryStatus.textureSize += this._size$;
             }
         }
     }
diff --git a/cocos/gfx/webgpu/webgpu-buffer.ts b/cocos/gfx/webgpu/webgpu-buffer.ts
index cd19bc53a11..da54cf3158b 100644
--- a/cocos/gfx/webgpu/webgpu-buffer.ts
+++ b/cocos/gfx/webgpu/webgpu-buffer.ts
@@ -22,7 +22,7 @@
  THE SOFTWARE.
 */
 
-import { warnID } from '../../core';
+import { warnID } from '../../core/platform/debug';
 import { Buffer } from '../base/buffer';
 
 import {
@@ -59,50 +59,50 @@ export class WebGPUBuffer extends Buffer {
         if ('buffer' in info) { // buffer view
             // validate: webGPU buffer offset must be 256 bytes aligned
             // which can be guaranteed by WebGPUDevice::uboOffsetAligned
-            this._isBufferView = true;
+            this._isBufferView$ = true;
 
             const buffer = info.buffer as WebGPUBuffer;
 
-            this._usage = buffer.usage;
-            this._memUsage = buffer.memUsage;
-            this._size = this._stride = Math.ceil(info.range / 4.0) * 4;
-            this._count = 1;
-            this._flags = buffer.flags;
+            this._usage$ = buffer.usage;
+            this._memUsage$ = buffer.memUsage;
+            this._size$ = this._stride$ = Math.ceil(info.range / 4.0) * 4;
+            this._count$ = 1;
+            this._flags$ = buffer.flags;
 
             this._gpuBuffer = {
-                usage: this._usage,
-                memUsage: this._memUsage,
-                size: this._size,
-                stride: this._stride,
+                usage: this._usage$,
+                memUsage: this._memUsage$,
+                size: this._size$,
+                stride: this._stride$,
                 buffer: null,
                 indirects: buffer.gpuBuffer.indirects,
                 gpuTarget: buffer.gpuBuffer.gpuTarget,
                 gpuBuffer: buffer.gpuBuffer.gpuBuffer,
                 gpuOffset: info.offset,
-                flags: this._flags,
+                flags: this._flags$,
                 drawIndirectByIndex: false,
             };
         } else { // native buffer
-            this._usage = info.usage;
-            this._memUsage = info.memUsage;
-            this._size = Math.ceil(info.size / 4.0) * 4;
-            this._stride = Math.max(info.stride || this._size, 1);
-            this._count = this._size / this._stride;
-            this._flags = info.flags;
-
-            if (this._usage & BufferUsageBit.INDIRECT) {
+            this._usage$ = info.usage;
+            this._memUsage$ = info.memUsage;
+            this._size$ = Math.ceil(info.size / 4.0) * 4;
+            this._stride$ = Math.max(info.stride || this._size$, 1);
+            this._count$ = this._size$ / this._stride$;
+            this._flags$ = info.flags;
+
+            if (this._usage$ & BufferUsageBit.INDIRECT) {
                 this._indirectBuffer = new IndirectBuffer();
             }
 
             this._gpuBuffer = {
-                usage: this._usage,
-                memUsage: this._memUsage,
-                size: this._size,
-                stride: this._stride,
+                usage: this._usage$,
+                memUsage: this._memUsage$,
+                size: this._size$,
+                stride: this._stride$,
                 buffer: null,
                 indirects: [],
                 gpuTarget: 0,
-                flags: this._flags,
+                flags: this._flags$,
                 gpuBuffer: null,
                 gpuOffset: 0,
                 drawIndirectByIndex: false,
@@ -114,16 +114,16 @@ export class WebGPUBuffer extends Buffer {
             const device = WebGPUDeviceManager.instance;
             WebGPUCmdFuncCreateBuffer(device, this._gpuBuffer);
 
-            device.memoryStatus.bufferSize += this._size;
+            device.memoryStatus.bufferSize += this._size$;
         }
     }
 
     public destroy (): void {
         if (this._gpuBuffer) {
-            if (!this._isBufferView) {
+            if (!this._isBufferView$) {
                 const device = WebGPUDeviceManager.instance;
                 WebGPUCmdFuncDestroyBuffer(device, this._gpuBuffer);
-                device.memoryStatus.bufferSize -= this._size;
+                device.memoryStatus.bufferSize -= this._size$;
             }
             this._hasChange = true;
             this._gpuBuffer = null;
@@ -131,30 +131,30 @@ export class WebGPUBuffer extends Buffer {
     }
 
     public resize (size: number): void {
-        if (this._isBufferView) {
+        if (this._isBufferView$) {
             warnID(16379);
             return;
         }
 
-        const oldSize = this._size;
+        const oldSize = this._size$;
         if (oldSize === size) { return; }
 
-        this._size = size;
-        this._count = this._size / this._stride;
+        this._size$ = size;
+        this._count$ = this._size$ / this._stride$;
         this._hasChange = true;
         if (this._gpuBuffer) {
-            this._gpuBuffer.size = this._size;
-            if (this._size > 0) {
+            this._gpuBuffer.size = this._size$;
+            if (this._size$ > 0) {
                 const device = WebGPUDeviceManager.instance;
                 WebGPUCmdFuncResizeBuffer(device, this._gpuBuffer);
                 device.memoryStatus.bufferSize -= oldSize;
-                device.memoryStatus.bufferSize += this._size;
+                device.memoryStatus.bufferSize += this._size$;
             }
         }
     }
 
     public update (buffer: BufferSource, size?: number): void {
-        if (this._isBufferView) {
+        if (this._isBufferView$) {
             warnID(16380);
             return;
         }
@@ -162,7 +162,7 @@ export class WebGPUBuffer extends Buffer {
         let buffSize: number;
         if (size !== undefined) {
             buffSize = size;
-        } else if (this._usage & BufferUsageBit.INDIRECT) {
+        } else if (this._usage$ & BufferUsageBit.INDIRECT) {
             buffSize = 0;
         } else {
             buffSize = (buffer as ArrayBuffer).byteLength;
diff --git a/cocos/gfx/webgpu/webgpu-command-buffer.ts b/cocos/gfx/webgpu/webgpu-command-buffer.ts
index 0a9caad7ec8..398be743fdf 100644
--- a/cocos/gfx/webgpu/webgpu-command-buffer.ts
+++ b/cocos/gfx/webgpu/webgpu-command-buffer.ts
@@ -144,8 +144,8 @@ export class WebGPUCommandBuffer extends CommandBuffer {
     private _renderPassFuncQueue: ((renPassEncoder: GPURenderPassEncoder) => void)[] = [];
 
     public initialize (info: CommandBufferInfo): boolean {
-        this._type = info.type;
-        this._queue = info.queue;
+        this._type$ = info.type;
+        this._queue$ = info.queue;
         const device = WebGPUDeviceManager.instance;
         this._webGPUAllocator = device.cmdAllocator;
         this._encoder = {} as CommandEncoder;
@@ -184,9 +184,9 @@ export class WebGPUCommandBuffer extends CommandBuffer {
         this._curDepthBounds = null;
         this._curStencilWriteMask = null;
         this._curStencilCompareMask = null;
-        this._numDrawCalls = 0;
-        this._numInstances = 0;
-        this._numTris = 0;
+        this._numDrawCalls$ = 0;
+        this._numInstances$ = 0;
+        this._numTris$ = 0;
     }
 
     public end (): void {
@@ -440,7 +440,7 @@ export class WebGPUCommandBuffer extends CommandBuffer {
 
     public draw (inputAssembler: InputAssembler): void {
         const device = WebGPUDeviceManager.instance;
-        if (this._type === CommandBufferType.PRIMARY && !this._isInRenderPass) {
+        if (this._type$ === CommandBufferType.PRIMARY && !this._isInRenderPass) {
             errorID(16328);
             return;
         }
@@ -497,17 +497,17 @@ export class WebGPUCommandBuffer extends CommandBuffer {
             }
         }
 
-        ++this._numDrawCalls;
-        this._numInstances += inputAssembler.instanceCount;
+        ++this._numDrawCalls$;
+        this._numInstances$ += inputAssembler.instanceCount;
         const indexCount = inputAssembler.indexCount || inputAssembler.vertexCount;
         if (this._curGPUPipelineState) {
             const gpuPrimitive = this._curGPUPipelineState.gpuPrimitive;
             switch (gpuPrimitive) {
             case 'triangle-strip':
-                this._numTris += (indexCount - 2) * Math.max(inputAssembler.instanceCount, 1);
+                this._numTris$ += (indexCount - 2) * Math.max(inputAssembler.instanceCount, 1);
                 break;
             case 'triangle-list': {
-                this._numTris += indexCount / 3 * Math.max(inputAssembler.instanceCount, 1);
+                this._numTris$ += indexCount / 3 * Math.max(inputAssembler.instanceCount, 1);
                 break;
             }
             default:
@@ -517,7 +517,7 @@ export class WebGPUCommandBuffer extends CommandBuffer {
     }
 
     public updateBuffer (buffer: Buffer, data: BufferSource, offset?: number, size?: number): void {
-        if (this._type === CommandBufferType.PRIMARY && this._isInRenderPass) {
+        if (this._type$ === CommandBufferType.PRIMARY && this._isInRenderPass) {
             errorID(16329);
             return;
         }
@@ -547,7 +547,7 @@ export class WebGPUCommandBuffer extends CommandBuffer {
     }
 
     public copyBuffersToTexture (buffers: ArrayBufferView[], texture: Texture, regions: BufferTextureCopy[]): void {
-        if (this._type === CommandBufferType.PRIMARY && this._isInRenderPass) {
+        if (this._type$ === CommandBufferType.PRIMARY && this._isInRenderPass) {
             errorID(16330);
             return;
         }
@@ -603,9 +603,9 @@ export class WebGPUCommandBuffer extends CommandBuffer {
 
             this.cmdPackage.cmds.concat(cmdPackage.cmds.array);
 
-            this._numDrawCalls += WebGPUCmdBuff._numDrawCalls;
-            this._numInstances += WebGPUCmdBuff._numInstances;
-            this._numTris += WebGPUCmdBuff._numTris;
+            this._numDrawCalls$ += WebGPUCmdBuff._numDrawCalls$;
+            this._numInstances$ += WebGPUCmdBuff._numInstances$;
+            this._numTris$ += WebGPUCmdBuff._numTris$;
         }
     }
 
diff --git a/cocos/gfx/webgpu/webgpu-descriptor-set-layout.ts b/cocos/gfx/webgpu/webgpu-descriptor-set-layout.ts
index 2d1b5d6b88d..b3b4a5efff9 100644
--- a/cocos/gfx/webgpu/webgpu-descriptor-set-layout.ts
+++ b/cocos/gfx/webgpu/webgpu-descriptor-set-layout.ts
@@ -78,28 +78,28 @@ export class WebGPUDescriptorSetLayout extends DescriptorSetLayout {
         this._hasChange = false;
     }
     public initialize (info: Readonly<DescriptorSetLayoutInfo>): void {
-        Array.prototype.push.apply(this._bindings, info.bindings);
+        Array.prototype.push.apply(this._bindings$, info.bindings);
 
         let descriptorCount = 0; let maxBinding = -1;
         const flattenedIndices: number[] = [];
-        const bindingSize = this._bindings.length;
+        const bindingSize = this._bindings$.length;
         for (let i = 0; i < bindingSize; i++) {
-            const binding = this._bindings[i];
+            const binding = this._bindings$[i];
             flattenedIndices.push(descriptorCount);
             descriptorCount += binding.count;
             if (binding.binding > maxBinding) maxBinding = binding.binding;
         }
 
-        this._bindingIndices = Array(maxBinding + 1).fill(-1);
-        const descriptorIndices = this._descriptorIndices = Array(maxBinding + 1).fill(-1);
+        this._bindingIndices$ = Array(maxBinding + 1).fill(-1);
+        const descriptorIndices = this._descriptorIndices$ = Array(maxBinding + 1).fill(-1);
         for (let i = 0; i < bindingSize; i++) {
-            const binding = this._bindings[i];
-            this._bindingIndices[binding.binding] = i;
+            const binding = this._bindings$[i];
+            this._bindingIndices$[binding.binding] = i;
             descriptorIndices[binding.binding] = flattenedIndices[i];
         }
         const dynamicBindings: number[] = [];
         for (let i = 0; i < bindingSize; i++) {
-            const binding = this._bindings[i];
+            const binding = this._bindings$[i];
             if (binding.descriptorType & DESCRIPTOR_DYNAMIC_TYPE) {
                 for (let j = 0; j < binding.count; j++) {
                     dynamicBindings.push(binding.binding);
@@ -107,7 +107,7 @@ export class WebGPUDescriptorSetLayout extends DescriptorSetLayout {
             }
         }
         this._gpuDescriptorSetLayout = {
-            bindings: this._bindings,
+            bindings: this._bindings$,
             dynamicBindings,
             descriptorIndices,
             descriptorCount,
@@ -223,7 +223,7 @@ export class WebGPUDescriptorSetLayout extends DescriptorSetLayout {
     }
 
     public destroy (): void {
-        this._bindings.length = 0;
+        this._bindings$.length = 0;
         this.clear();
         this._gpuDescriptorSetLayout = null;
     }
diff --git a/cocos/gfx/webgpu/webgpu-descriptor-set.ts b/cocos/gfx/webgpu/webgpu-descriptor-set.ts
index c5329c38edb..41bda332942 100644
--- a/cocos/gfx/webgpu/webgpu-descriptor-set.ts
+++ b/cocos/gfx/webgpu/webgpu-descriptor-set.ts
@@ -59,13 +59,13 @@ export class WebGPUDescriptorSet extends DescriptorSet {
     }
 
     public initialize (info: Readonly<DescriptorSetInfo>): void {
-        const layout = this._layout = info.layout as WebGPUDescriptorSetLayout;
+        const layout = this._layout$ = info.layout as WebGPUDescriptorSetLayout;
         layout.addRef(this);
         const { bindings, descriptorIndices, descriptorCount } = layout.gpuDescriptorSetLayout!;
 
-        this._buffers = Array(descriptorCount).fill(null);
-        this._textures = Array(descriptorCount).fill(null);
-        this._samplers = Array(descriptorCount).fill(null);
+        this._buffers$ = Array(descriptorCount).fill(null);
+        this._textures$ = Array(descriptorCount).fill(null);
+        this._samplers$ = Array(descriptorCount).fill(null);
 
         const gpuDescriptors: IWebGPUGPUDescriptor[] = [];
         const bindGroup = null!;
@@ -87,13 +87,13 @@ export class WebGPUDescriptorSet extends DescriptorSet {
     }
 
     public destroy (): void {
-        const layout = (this._layout as WebGPUDescriptorSetLayout);// .removeRef(this);
+        const layout = (this._layout$ as WebGPUDescriptorSetLayout);// .removeRef(this);
         layout.removeRef(this);
-        this._layout = null;
+        this._layout$ = null;
         this._gpuDescriptorSet = null;
-        this._buffers.length = 0;
-        this._textures.length = 0;
-        this._samplers.length = 0;
+        this._buffers$.length = 0;
+        this._textures$.length = 0;
+        this._samplers$.length = 0;
         this._bindGroupEntries.clear();
     }
 
@@ -102,7 +102,7 @@ export class WebGPUDescriptorSet extends DescriptorSet {
         if (destBind) {
             destBind.gpuBuffer = buffer.gpuBuffer;
         }
-        const layout = this._layout as WebGPUDescriptorSetLayout;
+        const layout = this._layout$ as WebGPUDescriptorSetLayout;
         const nativeBuffer = buffer.gpuBuffer.gpuBuffer;
         const bindGrpEntry: GPUBindGroupEntry = {
             binding: bind.binding,
@@ -119,7 +119,7 @@ export class WebGPUDescriptorSet extends DescriptorSet {
 
     private _bindTextureEntry (bind: DescriptorSetLayoutBinding, texture: WebGPUTexture): void {
         this._gpuDescriptorSet!.gpuDescriptors[bind.binding].gpuTexture = texture.gpuTexture;
-        const layout = this._layout as WebGPUDescriptorSetLayout;
+        const layout = this._layout$ as WebGPUDescriptorSetLayout;
         const nativeTexView = texture.getNativeTextureView()!;
         const bindGrpEntry: GPUBindGroupEntry = {
             binding: bind.binding,
@@ -133,8 +133,8 @@ export class WebGPUDescriptorSet extends DescriptorSet {
     private _bindSamplerEntry (bind: DescriptorSetLayoutBinding, sampler: WebGPUSampler): void {
         const samplerIdx = bind.binding + SEPARATE_SAMPLER_BINDING_OFFSET;
         this._gpuDescriptorSet!.gpuDescriptors[bind.binding].gpuSampler = sampler.gpuSampler;
-        const layout = this._layout as WebGPUDescriptorSetLayout;
-        const currTexture = this._textures[bind.binding] as WebGPUTexture;
+        const layout = this._layout$ as WebGPUDescriptorSetLayout;
+        const currTexture = this._textures$[bind.binding] as WebGPUTexture;
         const levelCount = currTexture.levelCount;
         const texFormat = currTexture.format;
         const isUnFilter = FormatToWGPUFormatType(texFormat) === 'unfilterable-float';
@@ -166,8 +166,8 @@ export class WebGPUDescriptorSet extends DescriptorSet {
     }
 
     private _applyBindGroup (): void {
-        if (this._isDirty && this._gpuDescriptorSet) {
-            const layout = this._layout as WebGPUDescriptorSetLayout;
+        if (this._isDirty$ && this._gpuDescriptorSet) {
+            const layout = this._layout$ as WebGPUDescriptorSetLayout;
             this._bindGroupEntries.clear();
             this._dynamicOffsets.length = 0;
             const descriptors = this._gpuDescriptorSet.gpuDescriptors;
@@ -177,7 +177,7 @@ export class WebGPUDescriptorSet extends DescriptorSet {
                 const bindIdx = binding.binding;
                 // const isNeedBind = this._isNeedBindFromLayout(bindIdx);
                 if (descriptors[i].type & DESCRIPTOR_BUFFER_TYPE) {
-                    const buffer = this._buffers[i] as WebGPUBuffer;
+                    const buffer = this._buffers$[i] as WebGPUBuffer;
                     if (buffer) {
                         this._bindBufferEntry(binding, buffer);
                         if (descriptors[i].type & (DescriptorType.DYNAMIC_STORAGE_BUFFER | DescriptorType.DYNAMIC_UNIFORM_BUFFER)) {
@@ -186,18 +186,18 @@ export class WebGPUDescriptorSet extends DescriptorSet {
                     }
                 } else if (descriptors[i].type & DESCRIPTOR_SAMPLER_TYPE) {
                     // texture
-                    const currTex = this._textures[i] as WebGPUTexture;
+                    const currTex = this._textures$[i] as WebGPUTexture;
                     if (currTex) {
                         this._bindTextureEntry(binding, currTex);
                     }
                     // sampler
-                    const currSampler = this._samplers[i] as WebGPUSampler;
+                    const currSampler = this._samplers$[i] as WebGPUSampler;
                     if (currSampler) {
                         this._bindSamplerEntry(binding, currSampler);
                     }
                 }
             }
-            this._isDirty = false;
+            this._isDirty$ = false;
             this._needUpdate = true;
         }
     }
@@ -230,14 +230,14 @@ export class WebGPUDescriptorSet extends DescriptorSet {
 
     private _isResourceChange (binds: number[]): boolean {
         return binds.every((bind) => {
-            const resource = this._buffers[bind] as WebGPUBuffer || this._textures[bind] || this._samplers[bind];
+            const resource = this._buffers$[bind] as WebGPUBuffer || this._textures$[bind] || this._samplers$[bind];
             return !this._hasResourceChange(bind, resource);
         });
     }
 
     public prepare (frequency: DescUpdateFrequency, binds: number[], vertBinds: number[] = [], fragBinds: number[] = []): void {
         // set null
-        const layout = this._layout as WebGPUDescriptorSetLayout;
+        const layout = this._layout$ as WebGPUDescriptorSetLayout;
         if (!binds) {
             const device = WebGPUDeviceManager.instance;
             if (!this._bindGroupEntries.size) {
@@ -277,7 +277,7 @@ export class WebGPUDescriptorSet extends DescriptorSet {
         } else {
             this._bindGroupEntries.forEach((val, currBind) => {
                 if (val.resource instanceof GPUTextureView) {
-                    const currTex = this._textures[currBind] as WebGPUTexture;
+                    const currTex = this._textures$[currBind] as WebGPUTexture;
                     const texFormat = FormatToWGPUFormatType(currTex.format);
                     if (layout.bindGrpLayoutEntries.get(currBind)?.texture?.sampleType !== texFormat) {
                         layout.updateBindGroupLayout(layout.gpuDescriptorSetLayout!.bindings[currBind], null, currTex, null);
@@ -297,7 +297,7 @@ export class WebGPUDescriptorSet extends DescriptorSet {
     private _createBindGroup (): void {
         const device = WebGPUDeviceManager.instance;
         const nativeDevice = device.nativeDevice;
-        const layout = this._layout as WebGPUDescriptorSetLayout;
+        const layout = this._layout$ as WebGPUDescriptorSetLayout;
         const bindGroup = nativeDevice?.createBindGroup({
             layout: layout.gpuDescriptorSetLayout!.bindGroupLayout!,
             entries: this._prepareEntries,
diff --git a/cocos/gfx/webgpu/webgpu-device.ts b/cocos/gfx/webgpu/webgpu-device.ts
index 9c41ec2c124..d19192a588f 100644
--- a/cocos/gfx/webgpu/webgpu-device.ts
+++ b/cocos/gfx/webgpu/webgpu-device.ts
@@ -99,34 +99,34 @@ export class WebGPUDevice extends Device {
     }
     public getSampler (info: Readonly<SamplerInfo>): Sampler {
         const hash = Sampler.computeHash(info);
-        if (!this._samplers.has(hash)) {
-            this._samplers.set(hash, new WebGPUSampler(info, hash));
+        if (!this._samplers$.has(hash)) {
+            this._samplers$.set(hash, new WebGPUSampler(info, hash));
         }
-        return this._samplers.get(hash)!;
+        return this._samplers$.get(hash)!;
     }
     public getSwapchains (): readonly Swapchain[] {
         return [this._swapchain as Swapchain];
     }
     public getGeneralBarrier (info: Readonly<GeneralBarrierInfo>): GeneralBarrier {
         const hash = GeneralBarrier.computeHash(info);
-        if (!this._generalBarrierss.has(hash)) {
-            this._generalBarrierss.set(hash, new GeneralBarrier(info, hash));
+        if (!this._generalBarrierss$.has(hash)) {
+            this._generalBarrierss$.set(hash, new GeneralBarrier(info, hash));
         }
-        return this._generalBarrierss.get(hash)!;
+        return this._generalBarrierss$.get(hash)!;
     }
     public getTextureBarrier (info: Readonly<TextureBarrierInfo>): TextureBarrier {
         const hash = TextureBarrier.computeHash(info);
-        if (!this._textureBarriers.has(hash)) {
-            this._textureBarriers.set(hash, new TextureBarrier(info, hash));
+        if (!this._textureBarriers$.has(hash)) {
+            this._textureBarriers$.set(hash, new TextureBarrier(info, hash));
         }
-        return this._textureBarriers.get(hash)!;
+        return this._textureBarriers$.get(hash)!;
     }
     public getBufferBarrier (info: Readonly<BufferBarrierInfo>): BufferBarrier {
         const hash = BufferBarrier.computeHash(info);
-        if (!this._bufferBarriers.has(hash)) {
-            this._bufferBarriers.set(hash, new BufferBarrier(info, hash));
+        if (!this._bufferBarriers$.has(hash)) {
+            this._bufferBarriers$.set(hash, new BufferBarrier(info, hash));
         }
-        return this._bufferBarriers.get(hash)!;
+        return this._bufferBarriers$.get(hash)!;
     }
     public async copyTextureToBuffers (texture: Readonly<Texture>, buffers: ArrayBufferView[], regions: readonly BufferTextureCopy[]): Promise<void> {
         await WebGPUCmdFuncCopyTextureToBuffer(this, (texture as WebGPUTexture).gpuTexture, buffers, regions);
@@ -185,91 +185,91 @@ export class WebGPUDevice extends Device {
     }
 
     protected initFormatFeatures (exts: GPUSupportedFeatures): void {
-        this._formatFeatures.fill(FormatFeatureBit.NONE);
+        this._formatFeatures$.fill(FormatFeatureBit.NONE);
 
         this._textureExclusive.fill(true);
 
         let tempFeature: FormatFeature = FormatFeatureBit.RENDER_TARGET | FormatFeatureBit.SAMPLED_TEXTURE
             | FormatFeatureBit.STORAGE_TEXTURE | FormatFeatureBit.LINEAR_FILTER | FormatFeatureBit.VERTEX_ATTRIBUTE;
 
-        this._formatFeatures[Format.R8] = tempFeature;
-        this._formatFeatures[Format.RG8] = tempFeature;
-        this._formatFeatures[Format.RGB8] = tempFeature;
-        this._formatFeatures[Format.RGBA8] = tempFeature;
+        this._formatFeatures$[Format.R8] = tempFeature;
+        this._formatFeatures$[Format.RG8] = tempFeature;
+        this._formatFeatures$[Format.RGB8] = tempFeature;
+        this._formatFeatures$[Format.RGBA8] = tempFeature;
 
         tempFeature = FormatFeatureBit.RENDER_TARGET | FormatFeatureBit.SAMPLED_TEXTURE
             | FormatFeatureBit.STORAGE_TEXTURE | FormatFeatureBit.LINEAR_FILTER;
 
-        this._formatFeatures[Format.R8SN] = tempFeature;
-        this._formatFeatures[Format.RG8SN] = tempFeature;
-        this._formatFeatures[Format.RGB8SN] = tempFeature;
-        this._formatFeatures[Format.RGBA8SN] = tempFeature;
-        this._formatFeatures[Format.R5G6B5] = tempFeature;
-        this._formatFeatures[Format.RGBA4] = tempFeature;
-        this._formatFeatures[Format.RGB5A1] = tempFeature;
-        this._formatFeatures[Format.RGB10A2] = tempFeature;
+        this._formatFeatures$[Format.R8SN] = tempFeature;
+        this._formatFeatures$[Format.RG8SN] = tempFeature;
+        this._formatFeatures$[Format.RGB8SN] = tempFeature;
+        this._formatFeatures$[Format.RGBA8SN] = tempFeature;
+        this._formatFeatures$[Format.R5G6B5] = tempFeature;
+        this._formatFeatures$[Format.RGBA4] = tempFeature;
+        this._formatFeatures$[Format.RGB5A1] = tempFeature;
+        this._formatFeatures$[Format.RGB10A2] = tempFeature;
 
-        this._formatFeatures[Format.SRGB8] = tempFeature;
-        this._formatFeatures[Format.SRGB8_A8] = tempFeature;
+        this._formatFeatures$[Format.SRGB8] = tempFeature;
+        this._formatFeatures$[Format.SRGB8_A8] = tempFeature;
 
-        this._formatFeatures[Format.R11G11B10F] = tempFeature;
-        this._formatFeatures[Format.RGB9E5] = tempFeature;
+        this._formatFeatures$[Format.R11G11B10F] = tempFeature;
+        this._formatFeatures$[Format.RGB9E5] = tempFeature;
 
-        this._formatFeatures[Format.DEPTH] = tempFeature;
-        this._formatFeatures[Format.DEPTH_STENCIL] = tempFeature;
+        this._formatFeatures$[Format.DEPTH] = tempFeature;
+        this._formatFeatures$[Format.DEPTH_STENCIL] = tempFeature;
 
-        this._formatFeatures[Format.RGB10A2UI] = FormatFeatureBit.RENDER_TARGET | FormatFeatureBit.STORAGE_TEXTURE
+        this._formatFeatures$[Format.RGB10A2UI] = FormatFeatureBit.RENDER_TARGET | FormatFeatureBit.STORAGE_TEXTURE
             | FormatFeatureBit.SAMPLED_TEXTURE | FormatFeatureBit.LINEAR_FILTER;
 
         tempFeature = FormatFeatureBit.RENDER_TARGET | FormatFeatureBit.SAMPLED_TEXTURE
             | FormatFeatureBit.STORAGE_TEXTURE | FormatFeatureBit.VERTEX_ATTRIBUTE;
 
-        this._formatFeatures[Format.R16F] = tempFeature;
-        this._formatFeatures[Format.RG16F] = tempFeature;
-        this._formatFeatures[Format.RGB16F] = tempFeature;
-        this._formatFeatures[Format.RGBA16F] = tempFeature;
+        this._formatFeatures$[Format.R16F] = tempFeature;
+        this._formatFeatures$[Format.RG16F] = tempFeature;
+        this._formatFeatures$[Format.RGB16F] = tempFeature;
+        this._formatFeatures$[Format.RGBA16F] = tempFeature;
 
         tempFeature = FormatFeatureBit.STORAGE_TEXTURE | FormatFeatureBit.RENDER_TARGET
         | FormatFeatureBit.SAMPLED_TEXTURE | FormatFeatureBit.VERTEX_ATTRIBUTE;
 
-        this._formatFeatures[Format.R32F] = tempFeature;
-        this._formatFeatures[Format.RG32F] = tempFeature;
-        this._formatFeatures[Format.RGB32F] = tempFeature;
-        this._formatFeatures[Format.RGBA32F] = tempFeature;
+        this._formatFeatures$[Format.R32F] = tempFeature;
+        this._formatFeatures$[Format.RG32F] = tempFeature;
+        this._formatFeatures$[Format.RGB32F] = tempFeature;
+        this._formatFeatures$[Format.RGBA32F] = tempFeature;
 
-        this._formatFeatures[Format.RGB10A2UI] = FormatFeatureBit.RENDER_TARGET | FormatFeatureBit.STORAGE_TEXTURE
+        this._formatFeatures$[Format.RGB10A2UI] = FormatFeatureBit.RENDER_TARGET | FormatFeatureBit.STORAGE_TEXTURE
             | FormatFeatureBit.SAMPLED_TEXTURE | FormatFeatureBit.LINEAR_FILTER;
 
         tempFeature = FormatFeatureBit.RENDER_TARGET | FormatFeatureBit.STORAGE_TEXTURE
             | FormatFeatureBit.SAMPLED_TEXTURE | FormatFeatureBit.LINEAR_FILTER | FormatFeatureBit.VERTEX_ATTRIBUTE;
 
-        this._formatFeatures[Format.R8I] = tempFeature;
-        this._formatFeatures[Format.R8UI] = tempFeature;
-        this._formatFeatures[Format.R16I] = tempFeature;
-        this._formatFeatures[Format.R16UI] = tempFeature;
-        this._formatFeatures[Format.R32I] = tempFeature;
-        this._formatFeatures[Format.R32UI] = tempFeature;
-
-        this._formatFeatures[Format.RG8I] = tempFeature;
-        this._formatFeatures[Format.RG8UI] = tempFeature;
-        this._formatFeatures[Format.RG16I] = tempFeature;
-        this._formatFeatures[Format.RG16UI] = tempFeature;
-        this._formatFeatures[Format.RG32I] = tempFeature;
-        this._formatFeatures[Format.RG32UI] = tempFeature;
-
-        this._formatFeatures[Format.RGB8I] = tempFeature;
-        this._formatFeatures[Format.RGB8UI] = tempFeature;
-        this._formatFeatures[Format.RGB16I] = tempFeature;
-        this._formatFeatures[Format.RGB16UI] = tempFeature;
-        this._formatFeatures[Format.RGB32I] = tempFeature;
-        this._formatFeatures[Format.RGB32UI] = tempFeature;
-
-        this._formatFeatures[Format.RGBA8I] = tempFeature;
-        this._formatFeatures[Format.RGBA8UI] = tempFeature;
-        this._formatFeatures[Format.RGBA16I] = tempFeature;
-        this._formatFeatures[Format.RGBA16UI] = tempFeature;
-        this._formatFeatures[Format.RGBA32I] = tempFeature;
-        this._formatFeatures[Format.RGBA32UI] = tempFeature;
+        this._formatFeatures$[Format.R8I] = tempFeature;
+        this._formatFeatures$[Format.R8UI] = tempFeature;
+        this._formatFeatures$[Format.R16I] = tempFeature;
+        this._formatFeatures$[Format.R16UI] = tempFeature;
+        this._formatFeatures$[Format.R32I] = tempFeature;
+        this._formatFeatures$[Format.R32UI] = tempFeature;
+
+        this._formatFeatures$[Format.RG8I] = tempFeature;
+        this._formatFeatures$[Format.RG8UI] = tempFeature;
+        this._formatFeatures$[Format.RG16I] = tempFeature;
+        this._formatFeatures$[Format.RG16UI] = tempFeature;
+        this._formatFeatures$[Format.RG32I] = tempFeature;
+        this._formatFeatures$[Format.RG32UI] = tempFeature;
+
+        this._formatFeatures$[Format.RGB8I] = tempFeature;
+        this._formatFeatures$[Format.RGB8UI] = tempFeature;
+        this._formatFeatures$[Format.RGB16I] = tempFeature;
+        this._formatFeatures$[Format.RGB16UI] = tempFeature;
+        this._formatFeatures$[Format.RGB32I] = tempFeature;
+        this._formatFeatures$[Format.RGB32UI] = tempFeature;
+
+        this._formatFeatures$[Format.RGBA8I] = tempFeature;
+        this._formatFeatures$[Format.RGBA8UI] = tempFeature;
+        this._formatFeatures$[Format.RGBA16I] = tempFeature;
+        this._formatFeatures$[Format.RGBA16UI] = tempFeature;
+        this._formatFeatures$[Format.RGBA32I] = tempFeature;
+        this._formatFeatures$[Format.RGBA32UI] = tempFeature;
 
         this._textureExclusive[Format.R8] = false;
         this._textureExclusive[Format.RG8] = false;
@@ -308,18 +308,18 @@ export class WebGPUDevice extends Device {
         this._textureExclusive[Format.DEPTH_STENCIL] = false;
 
         if (exts.has('float32-filterable')) {
-            this._formatFeatures[Format.R32F] |= FormatFeatureBit.RENDER_TARGET;
-            this._formatFeatures[Format.RG32F] |= FormatFeatureBit.RENDER_TARGET;
-            this._formatFeatures[Format.RGBA32F] |= FormatFeatureBit.RENDER_TARGET;
+            this._formatFeatures$[Format.R32F] |= FormatFeatureBit.RENDER_TARGET;
+            this._formatFeatures$[Format.RG32F] |= FormatFeatureBit.RENDER_TARGET;
+            this._formatFeatures$[Format.RGBA32F] |= FormatFeatureBit.RENDER_TARGET;
 
             this._textureExclusive[Format.R32F] = false;
             this._textureExclusive[Format.RG32F] = false;
             this._textureExclusive[Format.RGBA32F] = false;
 
-            this._formatFeatures[Format.RGB32F] |= FormatFeatureBit.LINEAR_FILTER;
-            this._formatFeatures[Format.RGBA32F] |= FormatFeatureBit.LINEAR_FILTER;
-            this._formatFeatures[Format.R32F] |= FormatFeatureBit.LINEAR_FILTER;
-            this._formatFeatures[Format.RG32F] |= FormatFeatureBit.LINEAR_FILTER;
+            this._formatFeatures$[Format.RGB32F] |= FormatFeatureBit.LINEAR_FILTER;
+            this._formatFeatures$[Format.RGBA32F] |= FormatFeatureBit.LINEAR_FILTER;
+            this._formatFeatures$[Format.R32F] |= FormatFeatureBit.LINEAR_FILTER;
+            this._formatFeatures$[Format.RG32F] |= FormatFeatureBit.LINEAR_FILTER;
         }
 
         if (exts.has('shader-f16')) {
@@ -327,64 +327,64 @@ export class WebGPUDevice extends Device {
             this._textureExclusive[Format.RG16F] = false;
             this._textureExclusive[Format.RGBA16F] = false;
 
-            this._formatFeatures[Format.RGB16F] |= FormatFeatureBit.LINEAR_FILTER;
-            this._formatFeatures[Format.RGBA16F] |= FormatFeatureBit.LINEAR_FILTER;
-            this._formatFeatures[Format.R16F] |= FormatFeatureBit.LINEAR_FILTER;
-            this._formatFeatures[Format.RG16F] |= FormatFeatureBit.LINEAR_FILTER;
+            this._formatFeatures$[Format.RGB16F] |= FormatFeatureBit.LINEAR_FILTER;
+            this._formatFeatures$[Format.RGBA16F] |= FormatFeatureBit.LINEAR_FILTER;
+            this._formatFeatures$[Format.R16F] |= FormatFeatureBit.LINEAR_FILTER;
+            this._formatFeatures$[Format.RG16F] |= FormatFeatureBit.LINEAR_FILTER;
         }
 
         const compressedFeature: FormatFeature = FormatFeatureBit.SAMPLED_TEXTURE | FormatFeatureBit.LINEAR_FILTER;
 
         if (exts.has('texture-compression-etc2')) {
-            this._formatFeatures[Format.ETC2_RGB8] = compressedFeature;
-            this._formatFeatures[Format.ETC2_RGBA8] = compressedFeature;
-            this._formatFeatures[Format.ETC2_SRGB8] = compressedFeature;
-            this._formatFeatures[Format.ETC2_SRGB8_A8] = compressedFeature;
-            this._formatFeatures[Format.ETC2_RGB8_A1] = compressedFeature;
-            this._formatFeatures[Format.ETC2_SRGB8_A1] = compressedFeature;
+            this._formatFeatures$[Format.ETC2_RGB8] = compressedFeature;
+            this._formatFeatures$[Format.ETC2_RGBA8] = compressedFeature;
+            this._formatFeatures$[Format.ETC2_SRGB8] = compressedFeature;
+            this._formatFeatures$[Format.ETC2_SRGB8_A8] = compressedFeature;
+            this._formatFeatures$[Format.ETC2_RGB8_A1] = compressedFeature;
+            this._formatFeatures$[Format.ETC2_SRGB8_A1] = compressedFeature;
         }
 
         if (exts.has('texture-compression-bc')) {
-            this._formatFeatures[Format.BC1] = compressedFeature;
-            this._formatFeatures[Format.BC1_ALPHA] = compressedFeature;
-            this._formatFeatures[Format.BC1_SRGB] = compressedFeature;
-            this._formatFeatures[Format.BC1_SRGB_ALPHA] = compressedFeature;
-            this._formatFeatures[Format.BC2] = compressedFeature;
-            this._formatFeatures[Format.BC2_SRGB] = compressedFeature;
-            this._formatFeatures[Format.BC3] = compressedFeature;
-            this._formatFeatures[Format.BC3_SRGB] = compressedFeature;
+            this._formatFeatures$[Format.BC1] = compressedFeature;
+            this._formatFeatures$[Format.BC1_ALPHA] = compressedFeature;
+            this._formatFeatures$[Format.BC1_SRGB] = compressedFeature;
+            this._formatFeatures$[Format.BC1_SRGB_ALPHA] = compressedFeature;
+            this._formatFeatures$[Format.BC2] = compressedFeature;
+            this._formatFeatures$[Format.BC2_SRGB] = compressedFeature;
+            this._formatFeatures$[Format.BC3] = compressedFeature;
+            this._formatFeatures$[Format.BC3_SRGB] = compressedFeature;
         }
 
         if (exts.has('texture-compression-astc')) {
-            this._formatFeatures[Format.ASTC_RGBA_4X4] = compressedFeature;
-            this._formatFeatures[Format.ASTC_RGBA_5X4] = compressedFeature;
-            this._formatFeatures[Format.ASTC_RGBA_5X5] = compressedFeature;
-            this._formatFeatures[Format.ASTC_RGBA_6X5] = compressedFeature;
-            this._formatFeatures[Format.ASTC_RGBA_6X6] = compressedFeature;
-            this._formatFeatures[Format.ASTC_RGBA_8X5] = compressedFeature;
-            this._formatFeatures[Format.ASTC_RGBA_8X6] = compressedFeature;
-            this._formatFeatures[Format.ASTC_RGBA_8X8] = compressedFeature;
-            this._formatFeatures[Format.ASTC_RGBA_10X5] = compressedFeature;
-            this._formatFeatures[Format.ASTC_RGBA_10X6] = compressedFeature;
-            this._formatFeatures[Format.ASTC_RGBA_10X8] = compressedFeature;
-            this._formatFeatures[Format.ASTC_RGBA_10X10] = compressedFeature;
-            this._formatFeatures[Format.ASTC_RGBA_12X10] = compressedFeature;
-            this._formatFeatures[Format.ASTC_RGBA_12X12] = compressedFeature;
-
-            this._formatFeatures[Format.ASTC_SRGBA_4X4] = compressedFeature;
-            this._formatFeatures[Format.ASTC_SRGBA_5X4] = compressedFeature;
-            this._formatFeatures[Format.ASTC_SRGBA_5X5] = compressedFeature;
-            this._formatFeatures[Format.ASTC_SRGBA_6X5] = compressedFeature;
-            this._formatFeatures[Format.ASTC_SRGBA_6X6] = compressedFeature;
-            this._formatFeatures[Format.ASTC_SRGBA_8X5] = compressedFeature;
-            this._formatFeatures[Format.ASTC_SRGBA_8X6] = compressedFeature;
-            this._formatFeatures[Format.ASTC_SRGBA_8X8] = compressedFeature;
-            this._formatFeatures[Format.ASTC_SRGBA_10X5] = compressedFeature;
-            this._formatFeatures[Format.ASTC_SRGBA_10X6] = compressedFeature;
-            this._formatFeatures[Format.ASTC_SRGBA_10X8] = compressedFeature;
-            this._formatFeatures[Format.ASTC_SRGBA_10X10] = compressedFeature;
-            this._formatFeatures[Format.ASTC_SRGBA_12X10] = compressedFeature;
-            this._formatFeatures[Format.ASTC_SRGBA_12X12] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_RGBA_4X4] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_RGBA_5X4] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_RGBA_5X5] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_RGBA_6X5] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_RGBA_6X6] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_RGBA_8X5] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_RGBA_8X6] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_RGBA_8X8] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_RGBA_10X5] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_RGBA_10X6] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_RGBA_10X8] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_RGBA_10X10] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_RGBA_12X10] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_RGBA_12X12] = compressedFeature;
+
+            this._formatFeatures$[Format.ASTC_SRGBA_4X4] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_SRGBA_5X4] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_SRGBA_5X5] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_SRGBA_6X5] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_SRGBA_6X6] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_SRGBA_8X5] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_SRGBA_8X6] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_SRGBA_8X8] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_SRGBA_10X5] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_SRGBA_10X6] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_SRGBA_10X8] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_SRGBA_10X10] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_SRGBA_12X10] = compressedFeature;
+            this._formatFeatures$[Format.ASTC_SRGBA_12X12] = compressedFeature;
         }
     }
 
@@ -496,9 +496,9 @@ export class WebGPUDevice extends Device {
         this._glslang = await glslangLoader(await fetchUrl(glslangUrl));
         this._twgsl = await twgslLoader(await fetchUrl(twgslUrl));
 
-        this._gfxAPI = API.WEBGPU;
-        this._swapchainFormat = WGPUFormatToGFXFormat(navigator.gpu.getPreferredCanvasFormat());
-        const mapping = this._bindingMappingInfo = info.bindingMappingInfo;
+        this._gfxAPI$ = API.WEBGPU;
+        this._swapchainFormat$ = WGPUFormatToGFXFormat(navigator.gpu.getPreferredCanvasFormat());
+        const mapping = this._bindingMappingInfo$ = info.bindingMappingInfo;
         const blockOffsets: number[] = [];
         const samplerTextureOffsets: number[] = [];
         const firstSet = mapping.setIndices[0];
@@ -528,35 +528,35 @@ export class WebGPUDevice extends Device {
         const device: GPUDevice = this._device as GPUDevice;
 
         const adapterInfo = await this._adapter!.requestAdapterInfo();
-        this._vendor = adapterInfo.vendor;
-        this._renderer = adapterInfo.device;
+        this._vendor$ = adapterInfo.vendor;
+        this._renderer$ = adapterInfo.device;
         const description = adapterInfo.description;
 
         const limits =  this._adapter!.limits;
-        this._caps.clipSpaceMinZ = 0.0;
-        this._caps.screenSpaceSignY = -1.0;
-        this._caps.uboOffsetAlignment = 256;
-        this._caps.maxUniformBufferBindings = 12;
-        this._caps.maxVertexAttributes = limits.maxVertexAttributes;
-        this._caps.maxUniformBufferBindings = limits.maxUniformBufferBindingSize;
-        this._caps.maxTextureSize = limits.maxTextureDimension2D;
-        this._caps.maxArrayTextureLayers = limits.maxTextureArrayLayers;
-        this._caps.max3DTextureSize = limits.maxTextureDimension3D;
-        this._caps.uboOffsetAlignment  = limits.minUniformBufferOffsetAlignment;
+        this._caps$.clipSpaceMinZ = 0.0;
+        this._caps$.screenSpaceSignY = -1.0;
+        this._caps$.uboOffsetAlignment = 256;
+        this._caps$.maxUniformBufferBindings = 12;
+        this._caps$.maxVertexAttributes = limits.maxVertexAttributes;
+        this._caps$.maxUniformBufferBindings = limits.maxUniformBufferBindingSize;
+        this._caps$.maxTextureSize = limits.maxTextureDimension2D;
+        this._caps$.maxArrayTextureLayers = limits.maxTextureArrayLayers;
+        this._caps$.max3DTextureSize = limits.maxTextureDimension3D;
+        this._caps$.uboOffsetAlignment  = limits.minUniformBufferOffsetAlignment;
 
         const features = this._adapter!.features;
         // FIXME: require by query
         this._multiDrawIndirect = false;
 
-        this._features.fill(false);
-        this._features[Feature.ELEMENT_INDEX_UINT] = true;
-        this._features[Feature.INSTANCED_ARRAYS] = true;
-        this._features[Feature.MULTIPLE_RENDER_TARGETS] = true;
-        this._features[Feature.BLEND_MINMAX] = true;
+        this._features$.fill(false);
+        this._features$[Feature.ELEMENT_INDEX_UINT] = true;
+        this._features$[Feature.INSTANCED_ARRAYS] = true;
+        this._features$[Feature.MULTIPLE_RENDER_TARGETS] = true;
+        this._features$[Feature.BLEND_MINMAX] = true;
         this.initFormatFeatures(features);
 
-        this._queue = this.createQueue(new QueueInfo(QueueType.GRAPHICS));
-        this._cmdBuff = this.createCommandBuffer(new CommandBufferInfo(this._queue));
+        this._queue$ = this.createQueue(new QueueInfo(QueueType.GRAPHICS));
+        this._cmdBuff$ = this.createCommandBuffer(new CommandBufferInfo(this._queue$));
 
         const texInfo = new TextureInfo(
             TextureType.TEX2D,
@@ -611,25 +611,25 @@ export class WebGPUDevice extends Device {
             compressedFormat += 'astc ';
         }
         debug('WebGPU device initialized.');
-        debug(`RENDERER: ${this._renderer}`);
-        debug(`VENDOR: ${this._vendor}`);
+        debug(`RENDERER: ${this._renderer$}`);
+        debug(`VENDOR: ${this._vendor$}`);
         debug(`DESCRIPTION: ${description}`);
         debug(`COMPRESSED_FORMAT: ${compressedFormat}`);
         return Promise.resolve(true);
     }
 
     public destroy (): void {
-        if (this._queue) {
-            this._queue.destroy();
-            this._queue = null;
+        if (this._queue$) {
+            this._queue$.destroy();
+            this._queue$ = null;
         }
 
-        if (this._cmdBuff) {
-            this._cmdBuff.destroy();
-            this._cmdBuff = null;
+        if (this._cmdBuff$) {
+            this._cmdBuff$.destroy();
+            this._cmdBuff$ = null;
         }
 
-        const it = this._samplers.values();
+        const it = this._samplers$.values();
         let res = it.next();
         while (!res.done) {
             (res.value as WebGPUSampler).destroy();
@@ -664,10 +664,10 @@ export class WebGPUDevice extends Device {
     }
 
     public present (): void {
-        const queue = (this._queue as unknown as WebGPUQueue);
-        this._numDrawCalls = queue.numDrawCalls;
-        this._numInstances = queue.numInstances;
-        this._numTris = queue.numTris;
+        const queue = (this._queue$ as unknown as WebGPUQueue);
+        this._numDrawCalls$ = queue.numDrawCalls;
+        this._numInstances$ = queue.numInstances;
+        this._numTris$ = queue.numTris;
         queue.clear();
     }
 
diff --git a/cocos/gfx/webgpu/webgpu-framebuffer.ts b/cocos/gfx/webgpu/webgpu-framebuffer.ts
index 3445fbddcb1..2844b946159 100644
--- a/cocos/gfx/webgpu/webgpu-framebuffer.ts
+++ b/cocos/gfx/webgpu/webgpu-framebuffer.ts
@@ -35,9 +35,9 @@ export class WebGPUFramebuffer extends Framebuffer {
 
     private _gpuFramebuffer: IWebGPUGPUFramebuffer | null = null;
     public initialize (info: Readonly<FramebufferInfo>): void {
-        this._renderPass = info.renderPass;
-        this._colorTextures = info.colorTextures || [];
-        this._depthStencilTexture = info.depthStencilTexture || null;
+        this._renderPass$ = info.renderPass;
+        this._colorTextures$ = info.colorTextures || [];
+        this._depthStencilTexture$ = info.depthStencilTexture || null;
 
         const gpuColorTextures: IWebGPUTexture[] = [];
         let isOffscreen = true;
@@ -88,8 +88,8 @@ export class WebGPUFramebuffer extends Framebuffer {
                 height = val;
             },
         };
-        this._width = this._gpuFramebuffer.width;
-        this._height = this._gpuFramebuffer.height;
+        this._width$ = this._gpuFramebuffer.width;
+        this._height$ = this._gpuFramebuffer.height;
     }
 
     public destroy (): void {
diff --git a/cocos/gfx/webgpu/webgpu-input-assembler.ts b/cocos/gfx/webgpu/webgpu-input-assembler.ts
index 14ece6b593b..1dfbd06d7ba 100644
--- a/cocos/gfx/webgpu/webgpu-input-assembler.ts
+++ b/cocos/gfx/webgpu/webgpu-input-assembler.ts
@@ -43,25 +43,25 @@ export class WebGPUInputAssembler extends InputAssembler {
             return;
         }
 
-        this._attributes = info.attributes;
-        this._attributesHash = this.computeAttributesHash();
-        this._vertexBuffers = info.vertexBuffers;
+        this._attributes$ = info.attributes;
+        this._attributesHash$ = this.computeAttributesHash();
+        this._vertexBuffers$ = info.vertexBuffers;
 
         if (info.indexBuffer) {
-            this._indexBuffer = info.indexBuffer;
-            this.drawInfo.indexCount = this._indexBuffer.size / this._indexBuffer.stride;
+            this._indexBuffer$ = info.indexBuffer;
+            this.drawInfo.indexCount = this._indexBuffer$.size / this._indexBuffer$.stride;
             this.drawInfo.firstIndex = 0;
         } else {
-            const vertBuff = this._vertexBuffers[0];
+            const vertBuff = this._vertexBuffers$[0];
             this.drawInfo.vertexCount = vertBuff.size / vertBuff.stride;
             this.drawInfo.firstVertex = 0;
             this.drawInfo.vertexOffset = 0;
         }
 
-        this._drawInfo.instanceCount = 0;
-        this._drawInfo.firstInstance = 0;
+        this._drawInfo$.instanceCount = 0;
+        this._drawInfo$.firstInstance = 0;
 
-        this._indirectBuffer = info.indirectBuffer || null;
+        this._indirectBuffer$ = info.indirectBuffer || null;
         const vertBuffSize = info.vertexBuffers.length;
         const gpuVertexBuffers: IWebGPUGPUBuffer[] = new Array<IWebGPUGPUBuffer>(vertBuffSize);
         for (let i = 0; i < vertBuffSize; ++i) {
diff --git a/cocos/gfx/webgpu/webgpu-pipeline-layout.ts b/cocos/gfx/webgpu/webgpu-pipeline-layout.ts
index 2acd08898ef..9b22102c51d 100644
--- a/cocos/gfx/webgpu/webgpu-pipeline-layout.ts
+++ b/cocos/gfx/webgpu/webgpu-pipeline-layout.ts
@@ -44,9 +44,9 @@ export class WebGPUPipelineLayout extends PipelineLayout {
         const webGPUDevice = WebGPUDeviceManager.instance;
         const nativeDevice = webGPUDevice.nativeDevice;
         this._bindGrpLayouts.length = 0;
-        const setLayoutSize = this._setLayouts.length;
+        const setLayoutSize = this._setLayouts$.length;
         for (let i = 0; i < setLayoutSize; i++) {
-            const setLayout = this._setLayouts[i] as WebGPUDescriptorSetLayout;
+            const setLayout = this._setLayouts$[i] as WebGPUDescriptorSetLayout;
             const bindGroupLayout = setLayout.gpuDescriptorSetLayout!.bindGroupLayout;
             if (bindGroupLayout) {
                 if (resetAll) {
@@ -72,7 +72,7 @@ export class WebGPUPipelineLayout extends PipelineLayout {
     }
 
     public initialize (info: PipelineLayoutInfo): boolean {
-        Array.prototype.push.apply(this._setLayouts, info.setLayouts);
+        Array.prototype.push.apply(this._setLayouts$, info.setLayouts);
 
         const dynamicOffsetIndices: number[][] = [];
 
@@ -83,7 +83,7 @@ export class WebGPUPipelineLayout extends PipelineLayout {
         // eslint-disable-next-line @typescript-eslint/no-this-alias
         const that = this;
         this._gpuPipelineLayout = {
-            setLayouts: this._setLayouts,
+            setLayouts: this._setLayouts$,
             gpuSetLayouts,
             dynamicOffsetIndices,
             dynamicOffsetCount,
@@ -100,10 +100,10 @@ export class WebGPUPipelineLayout extends PipelineLayout {
     }
 
     public changeSetLayout (idx: number, setLayout: WebGPUDescriptorSetLayout): void {
-        this._setLayouts[idx] = setLayout;
+        this._setLayouts$[idx] = setLayout;
     }
 
     public destroy (): void {
-        this._setLayouts.length = 0;
+        this._setLayouts$.length = 0;
     }
 }
diff --git a/cocos/gfx/webgpu/webgpu-pipeline-state.ts b/cocos/gfx/webgpu/webgpu-pipeline-state.ts
index e3600356336..78c62928e1e 100644
--- a/cocos/gfx/webgpu/webgpu-pipeline-state.ts
+++ b/cocos/gfx/webgpu/webgpu-pipeline-state.ts
@@ -64,43 +64,43 @@ export class WebGPUPipelineState extends PipelineState {
     private _gpuPipelineState: IWebGPUGPUPipelineState | null = null;
     private _locations: Map<string, number> = new Map<string, number>();
     public initialize (info: Readonly<PipelineStateInfo>): void {
-        this._primitive = info.primitive;
-        this._shader = info.shader;
-        this._pipelineLayout = info.pipelineLayout;
-        this._rs = info.rasterizerState;
-        this._dss = info.depthStencilState;
-        this._bs = info.blendState;
-        this._is = info.inputState;
-        this._renderPass = info.renderPass;
-        this._dynamicStates = info.dynamicStates;
+        this._primitive$ = info.primitive;
+        this._shader$ = info.shader;
+        this._pipelineLayout$ = info.pipelineLayout;
+        this._rs$ = info.rasterizerState;
+        this._dss$ = info.depthStencilState;
+        this._bs$ = info.blendState;
+        this._is$ = info.inputState;
+        this._renderPass$ = info.renderPass;
+        this._dynamicStates$ = info.dynamicStates;
 
         const dynamicStates: DynamicStateFlagBit[] = [];
         for (let i = 0; i < 31; i++) {
-            if (this._dynamicStates & (1 << i)) {
+            if (this._dynamicStates$ & (1 << i)) {
                 dynamicStates.push(1 << i);
             }
         }
 
         // colorstates
-        const colorAttachments = this._renderPass.colorAttachments;
+        const colorAttachments = this._renderPass$.colorAttachments;
         const colorDescs: GPUColorTargetState[] = [];
         const colAttachmentSize = colorAttachments.length;
         for (let i = 0; i < colAttachmentSize; i++) {
             const colDesc: GPUColorTargetState = {
                 format: GFXFormatToWGPUFormat(colorAttachments[i].format),
-                writeMask: WebGPUBlendMask(this._bs.targets[i].blendColorMask),
+                writeMask: WebGPUBlendMask(this._bs$.targets[i].blendColorMask),
             };
-            if (this._bs.targets[i].blend) {
+            if (this._bs$.targets[i].blend) {
                 colDesc.blend = {
                     color: {
-                        dstFactor: WebGPUBlendFactors[this._bs.targets[i].blendDst],
-                        operation: WebGPUBlendOps[this._bs.targets[i].blendEq === BlendOp.MAX ? BlendOp.ADD : this._bs.targets[i].blendEq],
-                        srcFactor: WebGPUBlendFactors[this._bs.targets[i].blendSrc],
+                        dstFactor: WebGPUBlendFactors[this._bs$.targets[i].blendDst],
+                        operation: WebGPUBlendOps[this._bs$.targets[i].blendEq === BlendOp.MAX ? BlendOp.ADD : this._bs$.targets[i].blendEq],
+                        srcFactor: WebGPUBlendFactors[this._bs$.targets[i].blendSrc],
                     },
                     alpha: {
-                        dstFactor: WebGPUBlendFactors[this._bs.targets[i].blendDstAlpha],
-                        operation: WebGPUBlendOps[this._bs.targets[i].blendAlphaEq === BlendOp.MAX ? BlendOp.ADD : this._bs.targets[i].blendAlphaEq],
-                        srcFactor: WebGPUBlendFactors[this._bs.targets[i].blendSrcAlpha],
+                        dstFactor: WebGPUBlendFactors[this._bs$.targets[i].blendDstAlpha],
+                        operation: WebGPUBlendOps[this._bs$.targets[i].blendAlphaEq === BlendOp.MAX ? BlendOp.ADD : this._bs$.targets[i].blendAlphaEq],
+                        srcFactor: WebGPUBlendFactors[this._bs$.targets[i].blendSrcAlpha],
                     },
                 };
             }
@@ -109,7 +109,7 @@ export class WebGPUPipelineState extends PipelineState {
 
         let vertexStage: GPUProgrammableStage;
         let fragmentStage: GPUProgrammableStage;
-        const shaderStages = (this._shader as WebGPUShader).gpuShader.gpuStages;
+        const shaderStages = (this._shader$ as WebGPUShader).gpuShader.gpuStages;
         const stageSize = shaderStages.length;
         for (let i = 0; i < stageSize; i++) {
             if (shaderStages[i].type === ShaderStageFlagBit.VERTEX) { vertexStage = shaderStages[i].gpuShader!; }
@@ -133,8 +133,8 @@ export class WebGPUPipelineState extends PipelineState {
             },
             primitive: {
                 topology: WebPUPrimitives[info.primitive],
-                frontFace: this._rs.isFrontFaceCCW ? 'ccw' : 'cw',
-                cullMode: this._rs.cullMode === CullMode.NONE ? 'none' : (this._rs.cullMode === CullMode.FRONT) ? 'front' : 'back',
+                frontFace: this._rs$.isFrontFaceCCW ? 'ccw' : 'cw',
+                cullMode: this._rs$.cullMode === CullMode.NONE ? 'none' : (this._rs$.cullMode === CullMode.FRONT) ? 'front' : 'back',
             },
 
             fragment: {
@@ -147,41 +147,41 @@ export class WebGPUPipelineState extends PipelineState {
 
         // depthstencil states
         let stencilRef = 0;
-        if (this._renderPass.depthStencilAttachment) {
+        if (this._renderPass$.depthStencilAttachment) {
             const dssDesc = {} as GPUDepthStencilState;
-            dssDesc.format = GFXFormatToWGPUFormat(this._renderPass.depthStencilAttachment.format);
-            dssDesc.depthWriteEnabled = this._dss.depthWrite;
-            dssDesc.depthCompare = this._dss.depthTest ? WebGPUCompereFunc[this._dss.depthFunc] : 'always';
+            dssDesc.format = GFXFormatToWGPUFormat(this._renderPass$.depthStencilAttachment.format);
+            dssDesc.depthWriteEnabled = this._dss$.depthWrite;
+            dssDesc.depthCompare = this._dss$.depthTest ? WebGPUCompereFunc[this._dss$.depthFunc] : 'always';
             let stencilReadMask = 0;
             let stencilWriteMask = 0;
 
-            if (this._dss.stencilTestFront) {
+            if (this._dss$.stencilTestFront) {
                 dssDesc.stencilFront = {
-                    compare: WebGPUCompereFunc[this._dss.stencilFuncFront],
-                    depthFailOp: WebGPUStencilOp[this._dss.stencilZFailOpFront],
-                    passOp: WebGPUStencilOp[this._dss.stencilPassOpFront],
-                    failOp: WebGPUStencilOp[this._dss.stencilFailOpFront],
+                    compare: WebGPUCompereFunc[this._dss$.stencilFuncFront],
+                    depthFailOp: WebGPUStencilOp[this._dss$.stencilZFailOpFront],
+                    passOp: WebGPUStencilOp[this._dss$.stencilPassOpFront],
+                    failOp: WebGPUStencilOp[this._dss$.stencilFailOpFront],
                 };
-                stencilReadMask |= this._dss.stencilReadMaskFront;
-                stencilWriteMask |= this._dss.stencilWriteMaskFront;
-                stencilRef |= this._dss.stencilRefFront;
+                stencilReadMask |= this._dss$.stencilReadMaskFront;
+                stencilWriteMask |= this._dss$.stencilWriteMaskFront;
+                stencilRef |= this._dss$.stencilRefFront;
             }
-            if (this._dss.stencilTestBack) {
+            if (this._dss$.stencilTestBack) {
                 dssDesc.stencilBack = {
-                    compare: WebGPUCompereFunc[this._dss.stencilFuncBack],
-                    depthFailOp: WebGPUStencilOp[this._dss.stencilZFailOpBack],
-                    passOp: WebGPUStencilOp[this._dss.stencilPassOpBack],
-                    failOp: WebGPUStencilOp[this._dss.stencilFailOpBack],
+                    compare: WebGPUCompereFunc[this._dss$.stencilFuncBack],
+                    depthFailOp: WebGPUStencilOp[this._dss$.stencilZFailOpBack],
+                    passOp: WebGPUStencilOp[this._dss$.stencilPassOpBack],
+                    failOp: WebGPUStencilOp[this._dss$.stencilFailOpBack],
                 };
-                stencilReadMask |= this._dss.stencilReadMaskBack;
-                stencilWriteMask |= this._dss.stencilWriteMaskBack;
-                stencilRef |= this._dss.stencilRefBack;
+                stencilReadMask |= this._dss$.stencilReadMaskBack;
+                stencilWriteMask |= this._dss$.stencilWriteMaskBack;
+                stencilRef |= this._dss$.stencilRefBack;
             }
             dssDesc.stencilReadMask = stencilReadMask;
             dssDesc.stencilWriteMask = stencilWriteMask;
-            dssDesc.depthBias = this._rs.depthBias;
-            dssDesc.depthBiasSlopeScale = this._rs.depthBiasSlop;
-            dssDesc.depthBiasClamp = this._rs.depthBiasClamp;
+            dssDesc.depthBias = this._rs$.depthBias;
+            dssDesc.depthBiasSlopeScale = this._rs$.depthBiasSlop;
+            dssDesc.depthBiasClamp = this._rs$.depthBiasClamp;
             renderPplDesc.depthStencil = dssDesc;
         }
 
@@ -206,7 +206,7 @@ export class WebGPUPipelineState extends PipelineState {
 
     public updatePipelineLayout (): void {
         if (this._gpuPipelineState && this._gpuPipelineState.pipelineState) {
-            this._gpuPipelineState.pipelineState.layout = (this._pipelineLayout as WebGPUPipelineLayout).gpuPipelineLayout!.nativePipelineLayout;
+            this._gpuPipelineState.pipelineState.layout = (this._pipelineLayout$ as WebGPUPipelineLayout).gpuPipelineLayout!.nativePipelineLayout;
         }
     }
 
diff --git a/cocos/gfx/webgpu/webgpu-queue.ts b/cocos/gfx/webgpu/webgpu-queue.ts
index 4df451c765c..9a06faa678e 100644
--- a/cocos/gfx/webgpu/webgpu-queue.ts
+++ b/cocos/gfx/webgpu/webgpu-queue.ts
@@ -35,7 +35,7 @@ export class WebGPUQueue extends Queue {
     private _nativeQueue: GPUQueue | null = null;
     private _isAsync = false;
     public initialize (info: QueueInfo): boolean {
-        this._type = info.type;
+        this._type$ = info.type;
 
         return true;
     }
diff --git a/cocos/gfx/webgpu/webgpu-render-pass.ts b/cocos/gfx/webgpu/webgpu-render-pass.ts
index bdf77124745..251da255c85 100644
--- a/cocos/gfx/webgpu/webgpu-render-pass.ts
+++ b/cocos/gfx/webgpu/webgpu-render-pass.ts
@@ -51,9 +51,9 @@ export class WebGPURenderPass extends RenderPass {
         return depthStencilDescriptor;
     }
     public initialize (info: Readonly<RenderPassInfo>): void {
-        this._colorInfos = info.colorAttachments;
-        this._depthStencilInfo = info.depthStencilAttachment;
-        this._subpasses = info.subpasses;
+        this._colorInfos$ = info.colorAttachments;
+        this._depthStencilInfo$ = info.depthStencilAttachment;
+        this._subpasses$ = info.subpasses;
 
         const colorDescriptions: GPURenderPassColorAttachment[] = [];
         const originalColorDesc: GPURenderPassColorAttachment[] = [];
@@ -78,8 +78,8 @@ export class WebGPURenderPass extends RenderPass {
         }
 
         this._gpuRenderPass = {
-            colorAttachments: this._colorInfos,
-            depthStencilAttachment: this._depthStencilInfo,
+            colorAttachments: this._colorInfos$,
+            depthStencilAttachment: this._depthStencilInfo$,
             nativeRenderPass: renderPassDesc,
             originalRP: originalRPDesc,
         };
diff --git a/cocos/gfx/webgpu/webgpu-sampler.ts b/cocos/gfx/webgpu/webgpu-sampler.ts
index c6bcc0afbe9..1767fe6d763 100644
--- a/cocos/gfx/webgpu/webgpu-sampler.ts
+++ b/cocos/gfx/webgpu/webgpu-sampler.ts
@@ -36,7 +36,7 @@ export class WebGPUSampler extends Sampler {
     }
 
     public get samplerInfo (): SamplerInfo {
-        return this._info;
+        return this._info$;
     }
 
     private _gpuSampler: IWebGPUGPUSampler | null = null;
diff --git a/cocos/gfx/webgpu/webgpu-shader.ts b/cocos/gfx/webgpu/webgpu-shader.ts
index 73087c12004..d97108b030e 100644
--- a/cocos/gfx/webgpu/webgpu-shader.ts
+++ b/cocos/gfx/webgpu/webgpu-shader.ts
@@ -36,11 +36,11 @@ export class WebGPUShader extends Shader {
     private _gpuShader: IWebGPUGPUShader | null = null;
 
     public initialize (info: Readonly<ShaderInfo>): void {
-        this._name = info.name;
-        this._stages = info.stages;
-        this._attributes = info.attributes;
-        this._blocks = info.blocks;
-        this._samplers = info.samplers;
+        this._name$ = info.name;
+        this._stages$ = info.stages;
+        this._attributes$ = info.attributes;
+        this._blocks$ = info.blocks;
+        this._samplers$ = info.samplers;
         const stageSize = info.stages.length;
         this._gpuShader = {
             name: info.name,
diff --git a/cocos/gfx/webgpu/webgpu-swapchain.ts b/cocos/gfx/webgpu/webgpu-swapchain.ts
index 7172b671b4f..f037a7d1ed8 100644
--- a/cocos/gfx/webgpu/webgpu-swapchain.ts
+++ b/cocos/gfx/webgpu/webgpu-swapchain.ts
@@ -64,7 +64,7 @@ export class WebGPUSwapchain extends Swapchain {
         );
 
         this._createTexture(width, height);
-        this._depthStencilTexture = this._createDepthStencilTexture(width, height);
+        this._depthStencilTexture$ = this._createDepthStencilTexture(width, height);
         this.nullTex2D = device.createTexture(new TextureInfo(
             TextureType.TEX2D,
             TextureUsageBit.SAMPLED,
@@ -107,12 +107,12 @@ export class WebGPUSwapchain extends Swapchain {
         width = Math.max(1, Math.min(width, device.limits.maxTextureDimension2D));
         height = Math.max(1, Math.min(height, device.limits.maxTextureDimension2D));
 
-        if (this._colorTexture.width !== width || this._colorTexture.height !== height) {
+        if (this._colorTexture$.width !== width || this._colorTexture$.height !== height) {
             debug(`Resizing swapchain: ${width}x${height}`);
             this._canvas!.width = width;
             this._canvas!.height = height;
-            this._colorTexture.resize(width, height);
-            this._depthStencilTexture.resize(width, height);
+            this._colorTexture$.resize(width, height);
+            this._depthStencilTexture$.resize(width, height);
         }
     }
 
@@ -139,37 +139,37 @@ export class WebGPUSwapchain extends Swapchain {
     }
 
     public get colorTexture (): Texture {
-        (this._colorTexture as WebGPUTexture).gpuTexture.gpuTexture = WebGPUDeviceManager.instance.context.getCurrentTexture();
-        return this._colorTexture;
+        (this._colorTexture$ as WebGPUTexture).gpuTexture.gpuTexture = WebGPUDeviceManager.instance.context.getCurrentTexture();
+        return this._colorTexture$;
     }
 
     public get colorGPUTexture (): GPUTexture {
-        (this._colorTexture as WebGPUTexture).gpuTexture.gpuTexture = WebGPUDeviceManager.instance.context.getCurrentTexture();
-        return (this._colorTexture as WebGPUTexture).gpuTexture.gpuTexture!;
+        (this._colorTexture$ as WebGPUTexture).gpuTexture.gpuTexture = WebGPUDeviceManager.instance.context.getCurrentTexture();
+        return (this._colorTexture$ as WebGPUTexture).gpuTexture.gpuTexture!;
     }
 
     public get colorGPUTextureView (): GPUTextureView {
-        (this._colorTexture as WebGPUTexture).gpuTexture.gpuTexture = WebGPUDeviceManager.instance.context.getCurrentTexture();
-        return (this._colorTexture as WebGPUTexture).gpuTexture.gpuTexture!.createView();
+        (this._colorTexture$ as WebGPUTexture).gpuTexture.gpuTexture = WebGPUDeviceManager.instance.context.getCurrentTexture();
+        return (this._colorTexture$ as WebGPUTexture).gpuTexture.gpuTexture!.createView();
     }
 
     public get depthStencilTexture (): Texture {
-        return this._depthStencilTexture;
+        return this._depthStencilTexture$;
     }
 
     public get gpuDepthStencilTexture (): GPUTexture {
-        return (this._depthStencilTexture  as WebGPUTexture).gpuTexture.gpuTexture!;
+        return (this._depthStencilTexture$  as WebGPUTexture).gpuTexture.gpuTexture!;
     }
 
     public get gpuDepthStencilTextureView (): GPUTextureView {
-        return (this._depthStencilTexture  as WebGPUTexture).gpuTexture.gpuTexture!.createView();
+        return (this._depthStencilTexture$  as WebGPUTexture).gpuTexture.gpuTexture!.createView();
     }
 
     private _createTexture (width: number, height: number): WebGPUTexture {
         const device = WebGPUDeviceManager.instance;
         const gfxSwapchainFormat = device.swapchainFormat;
         const swapchainFormat = GFXFormatToWGPUFormat(gfxSwapchainFormat);// navigator.gpu.getPreferredCanvasFormat();
-        if (!this._colorTexture) {
+        if (!this._colorTexture$) {
             const nativeDevice = device.nativeDevice as GPUDevice;
             const gpuConfig: GPUCanvasConfiguration = {
                 device: nativeDevice,
@@ -179,15 +179,15 @@ export class WebGPUSwapchain extends Swapchain {
             device.gpuConfig = gpuConfig;
             device.context.configure(gpuConfig);
         }
-        this._colorTexture = new WebGPUTexture();
-        this._colorTexture.initAsSwapchainTexture({
+        this._colorTexture$ = new WebGPUTexture();
+        this._colorTexture$.initAsSwapchainTexture({
             swapchain: this,
             format: gfxSwapchainFormat,
             width,
             height,
         });
-        (this._colorTexture as WebGPUTexture).gpuTexture.gpuTexture = device.context.getCurrentTexture();
-        return (this._colorTexture as WebGPUTexture);
+        (this._colorTexture$ as WebGPUTexture).gpuTexture.gpuTexture = device.context.getCurrentTexture();
+        return (this._colorTexture$ as WebGPUTexture);
     }
 
     private _createDepthStencilTexture (width: number, height: number): WebGPUTexture {
diff --git a/cocos/gfx/webgpu/webgpu-texture.ts b/cocos/gfx/webgpu/webgpu-texture.ts
index 2cc4bd2d8b3..bf26864da0e 100644
--- a/cocos/gfx/webgpu/webgpu-texture.ts
+++ b/cocos/gfx/webgpu/webgpu-texture.ts
@@ -84,19 +84,19 @@ export class WebGPUTexture extends Texture {
         const viewInfo = info as Readonly<TextureViewInfo>;
         if ('texture' in info) {
             texInfo = viewInfo.texture.info;
-            this._isTextureView = true;
+            this._isTextureView$ = true;
         }
 
-        this._info.copy(texInfo);
-        this._isPowerOf2 = IsPowerOf2(this._info.width) && IsPowerOf2(this._info.height);
-        this._size = FormatSurfaceSize(
-            this._info.format,
+        this._info$.copy(texInfo);
+        this._isPowerOf2$ = IsPowerOf2(this._info$.width) && IsPowerOf2(this._info$.height);
+        this._size$ = FormatSurfaceSize(
+            this._info$.format,
             this.width,
             this.height,
             this.depth,
-            this._info.levelCount,
-        ) * this._info.layerCount;
-        if (!this._isTextureView) {
+            this._info$.levelCount,
+        ) * this._info$.layerCount;
+        if (!this._isTextureView$) {
             this._gpuTexture = {
                 type: texInfo.type,
                 format: texInfo.format,
@@ -104,12 +104,12 @@ export class WebGPUTexture extends Texture {
                 width: texInfo.width,
                 height: texInfo.height,
                 depth: texInfo.depth,
-                size: this._size,
+                size: this._size$,
                 arrayLayer: texInfo.layerCount,
                 mipLevel: texInfo.levelCount,
                 samples: texInfo.samples,
                 flags: texInfo.flags,
-                isPowerOf2: this._isPowerOf2,
+                isPowerOf2: this._isPowerOf2$,
 
                 // default value, filled in when texture is created.
                 gpuTarget: '2d',
@@ -130,27 +130,27 @@ export class WebGPUTexture extends Texture {
             if (!isSwapchainTexture) {
                 const device = WebGPUDeviceManager.instance;
                 WebGPUCmdFuncCreateTexture(device, this._gpuTexture);
-                device.memoryStatus.textureSize += this._size;
+                device.memoryStatus.textureSize += this._size$;
             } else {
                 this._gpuTexture.gpuInternalFmt = GFXFormatToWGPUFormat(this._gpuTexture.format);
                 this._gpuTexture.gpuFormat = this._gpuTexture.gpuInternalFmt;
             }
-            this._viewInfo.texture = this;
-            this._viewInfo.type = info.type;
-            this._viewInfo.format = info.format;
-            this._viewInfo.baseLevel = 0;
-            this._viewInfo.levelCount = info.levelCount;
-            this._viewInfo.baseLayer = 0;
-            this._viewInfo.layerCount = info.layerCount;
+            this._viewInfo$.texture = this;
+            this._viewInfo$.type = info.type;
+            this._viewInfo$.format = info.format;
+            this._viewInfo$.baseLevel = 0;
+            this._viewInfo$.levelCount = info.levelCount;
+            this._viewInfo$.baseLayer = 0;
+            this._viewInfo$.layerCount = info.layerCount;
         } else {
-            this._viewInfo.copy(viewInfo);
+            this._viewInfo$.copy(viewInfo);
             this._lodLevel = viewInfo.baseLevel;
             this._gpuTexture = (viewInfo.texture as WebGPUTexture)._gpuTexture;
         }
     }
 
     set gpuFormat (val: GPUTextureFormat) {
-        if (!this._isTextureView && this._gpuTexture && !this._gpuTexture.isSwapchainTexture) {
+        if (!this._isTextureView$ && this._gpuTexture && !this._gpuTexture.isSwapchainTexture) {
             WebGPUCmdFuncDestroyTexture(this._gpuTexture);
             const device = WebGPUDeviceManager.instance;
             this._gpuTexture.format =  WGPUFormatToGFXFormat(val);
@@ -174,30 +174,30 @@ export class WebGPUTexture extends Texture {
     }
 
     public destroy (): void {
-        if (this._isTextureView || (!this._isTextureView && !this._gpuTexture)) {
+        if (this._isTextureView$ || (!this._isTextureView$ && !this._gpuTexture)) {
             return;
         }
         WebGPUCmdFuncDestroyTexture(this._gpuTexture!);
         const device = WebGPUDeviceManager.instance;
-        device.memoryStatus.textureSize -= this._size;
+        device.memoryStatus.textureSize -= this._size$;
         this._gpuTexture = null;
         this._hasChange = true;
     }
 
     public resize (width: number, height: number): void {
-        if (this._info.width === width && this._info.height === height) {
+        if (this._info$.width === width && this._info$.height === height) {
             return;
         }
-        if (this._info.levelCount === WebGPUTexture.getLevelCount(this._info.width, this._info.height)) {
-            this._info.levelCount = WebGPUTexture.getLevelCount(width, height);
-        } else if (this._info.levelCount > 1) {
-            this._info.levelCount = Math.min(this._info.levelCount, WebGPUTexture.getLevelCount(width, height));
+        if (this._info$.levelCount === WebGPUTexture.getLevelCount(this._info$.width, this._info$.height)) {
+            this._info$.levelCount = WebGPUTexture.getLevelCount(width, height);
+        } else if (this._info$.levelCount > 1) {
+            this._info$.levelCount = Math.min(this._info$.levelCount, WebGPUTexture.getLevelCount(width, height));
         }
         this._hasChange = true;
-        const oldSize = this._size;
-        this._info.width = width;
-        this._info.height = height;
-        this._size = FormatSurfaceSize(
+        const oldSize = this._size$;
+        this._info$.width = width;
+        this._info$.height = height;
+        this._size$ = FormatSurfaceSize(
             this.info.format,
             this.width,
             this.height,
@@ -205,15 +205,15 @@ export class WebGPUTexture extends Texture {
             this.info.levelCount,
         ) * this.info.layerCount;
 
-        if (!this._isTextureView && this._gpuTexture) {
+        if (!this._isTextureView$ && this._gpuTexture) {
             this._gpuTexture.width = width;
             this._gpuTexture.height = height;
-            this._gpuTexture.size = this._size;
+            this._gpuTexture.size = this._size$;
             if (!this._gpuTexture.isSwapchainTexture) {
                 const device = WebGPUDeviceManager.instance;
                 WebGPUCmdFuncResizeTexture(device, this._gpuTexture);
                 device.memoryStatus.textureSize -= oldSize;
-                device.memoryStatus.textureSize += this._size;
+                device.memoryStatus.textureSize += this._size$;
             }
         }
     }