simulationjsv2 0.10.6 → 0.11.1

package/dist/{shaders.js → shaders/webgpu.js}

@@ -1,32 +1,44 @@
-import { MemoBuffer } from './buffers.js';
-import { mat4ByteLength } from './constants.js';
-import { globalInfo } from './globals.js';
-import { createBindGroup, writeUniformWorldMatrix } from './utils.js';
-export const uniformBufferSize = mat4ByteLength * 2 + 4 * 2 + 8; // 4x4 matrix * 2 + vec2<f32> + 8 bc 144 is cool
+import { WebGPUMemoBuffer } from '../buffers/webgpu.js';
+import { mat4ByteLength, modelProjMatOffset } from '../constants.js';
+import { globalInfo, logger } from '../globals.js';
+import { createBindGroup } from '../utils.js';
+import { orthogonalMatrix, worldProjectionMatrix } from '../simulation.js';
+import { worldProjMatOffset } from '../constants.js';
+import { defaultVertexColorBufferWriter, SimJSShader } from './shader.js';
+export const WEBGPU_DEFAULT_SHADER_UNIFORM_BUFFER_SIZE = mat4ByteLength * 2 + 4 * 2 + 8; // 4x4 matrix * 2 + vec2<f32> + 8 bc 144 is cool
 const defaultInfos = [
     {
-        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-        owned: false
-    },
-    {
-        usage: GPUBufferUsage.STORAGE,
+        usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
         defaultSize: 10 * 4 * 16 // not sure where this came from, made it up a while ago
     }
 ];
-const defaultBufferWriter = (el) => {
-    writeUniformWorldMatrix(el);
-    // not writing to buffer[0] because the buffer exists
-    // on the element
+const defaultWebGPUUniformBufferWriter = (device, el, buffers) => {
+    const projBuf = el.is3d ? worldProjectionMatrix : orthogonalMatrix;
+    let buffer = el.getUniformBuffer();
+    if (!buffer) {
+        buffer = new WebGPUMemoBuffer(device, GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST, WEBGPU_DEFAULT_SHADER_UNIFORM_BUFFER_SIZE);
+        el.setUniformBuffer(buffer);
+    }
+    device.queue.writeBuffer(buffer.getBuffer(), worldProjMatOffset, projBuf.buffer, projBuf.byteOffset, projBuf.byteLength);
+    const modelMatrix = el.getModelMatrix();
+    device.queue.writeBuffer(buffer.getBuffer(), modelProjMatOffset, modelMatrix.buffer, modelMatrix.byteOffset, modelMatrix.byteLength);
+    if (el.isInstance) {
+        buffers[0].write(el.getInstanceBuffer());
+    }
 };
-const defaultBindGroupGenerator = (el, buffers) => {
+const defaultBindGroupGenerator = (_device, el, buffers) => {
+    // TODO - why is this here?
     const shader = el.getShader();
+    if (!shader.compatableWith('webgpu'))
+        throw logger.error('Wrong shader type for backend or something idk');
     const gpuBuffers = [
-        el.getUniformBuffer(),
-        el.isInstance ? el.getInstanceBuffer() : buffers[0].getBuffer()
+        el.getUniformBuffer().getBuffer(),
+        buffers[0].getBuffer()
     ];
     return [createBindGroup(shader, 0, gpuBuffers)];
 };
-export class Shader {
+export class SimJSWebGPUShader extends SimJSShader {
+    buffers;
     bindGroupLayoutDescriptors;
     bindGroupLayouts;
     module;
@@ -34,29 +46,23 @@ export class Shader {
     fragmentMain;
     vertexMain;
     vertexBuffers;
-    bufferLength;
-    bufferWriter;
-    vertexBufferWriter;
+    uniformBufferWriter;
     bindGroupGenerator;
-    buffers;
-    bufferInfos;
-    constructor(code, descriptors, vertexParams, bufferInfos, bufferWriter, bindGroupGenerator, vertexBufferWriter, vertexMain = 'vertex_main', fragmentMain = 'fragment_main') {
+    bufferDeclerations;
+    device;
+    constructor(code, descriptors, vertexParams, bufferDeclerations, uniformBufferWriter, bindGroupGenerator, vertexBufferWriter, vertexMain = 'vertex_main', fragmentMain = 'fragment_main') {
+        super('webgpu', vertexBufferWriter);
+        this.buffers = [];
+        this.device = null;
         this.code = code;
         this.bindGroupLayoutDescriptors = descriptors;
         this.bindGroupLayouts = null;
         this.module = null;
-        this.bufferWriter = bufferWriter;
-        this.vertexBufferWriter = vertexBufferWriter;
+        this.uniformBufferWriter = uniformBufferWriter;
         this.bindGroupGenerator = bindGroupGenerator;
         this.vertexMain = vertexMain;
         this.fragmentMain = fragmentMain;
-        this.bufferInfos = bufferInfos;
-        this.buffers = [];
-        for (let i = 0; i < bufferInfos.length; i++) {
-            if (bufferInfos[i].owned === false)
-                continue;
-            this.buffers.push(new MemoBuffer(bufferInfos[i].usage, bufferInfos[i].defaultSize ?? 0));
-        }
+        this.bufferDeclerations = bufferDeclerations;
         let stride = 0;
         const attributes = [];
         for (let i = 0; i < vertexParams.length; i++) {
@@ -72,18 +78,30 @@ export class Shader {
             arrayStride: stride,
             attributes
         };
+        const canvas = globalInfo.getCanvas();
+        if (!canvas) {
+            globalInfo.addToInitShader(this);
+            return;
+        }
+        const backend = canvas.getBackend().as('webgpu');
+        this.init(backend.getDeviceOrError());
+    }
+    init(device) {
+        this.device = device;
+        for (let i = 0; i < this.bufferDeclerations.length; i++) {
+            this.buffers.push(new WebGPUMemoBuffer(device, this.bufferDeclerations[i].usage, this.bufferDeclerations[i].defaultSize ?? 0));
+        }
     }
     getCode() {
         return this.code;
     }
-    getBufferLength() {
-        return this.bufferLength;
-    }
     getVertexBuffers() {
         return this.vertexBuffers;
     }
     getBindGroupLayouts() {
-        const device = globalInfo.errorGetDevice();
+        // TODO - probably change
+        const backend = globalInfo.errorGetCanvas().getBackend();
+        const device = backend.getDeviceOrError();
         if (!this.bindGroupLayouts) {
             this.bindGroupLayouts = this.bindGroupLayoutDescriptors.map((descriptor) => device.createBindGroupLayout(descriptor));
         }
@@ -93,10 +111,10 @@ export class Shader {
         return this.bindGroupLayoutDescriptors;
     }
     getBufferInfo() {
-        return this.bufferInfos;
+        return this.bufferDeclerations;
     }
-    getBufferWriter() {
-        return this.bufferWriter;
+    getUniformBufferWriter() {
+        return this.uniformBufferWriter;
     }
     getVertexBufferWriter() {
         return this.vertexBufferWriter;
@@ -105,7 +123,9 @@ export class Shader {
         return this.bindGroupGenerator;
     }
     getModule() {
-        const device = globalInfo.errorGetDevice();
+        // TODO - probably change
+        const backend = globalInfo.errorGetCanvas().getBackend();
+        const device = backend.getDeviceOrError();
         if (!this.module) {
             this.module = device.createShaderModule({ code: this.code });
         }
@@ -120,19 +140,20 @@ export class Shader {
     setVertexInfo(element, buffer, vertex, vertexIndex, offset) {
         this.vertexBufferWriter(element, buffer, vertex, vertexIndex, offset);
     }
-    writeBuffers(el) {
-        const device = globalInfo.errorGetDevice();
-        this.bufferWriter(el, this.buffers, device);
+    writeUniformBuffers(el) {
+        if (!this.device)
+            throw logger.error('Shader not initialized');
+        this.uniformBufferWriter(this.device, el, this.buffers);
     }
-    getBindGroups(el) {
-        return this.bindGroupGenerator(el, this.buffers);
+    getBindGroups(device, el) {
+        return this.bindGroupGenerator(device, el, this.buffers);
     }
 }
 const positionSize = 4 * 3;
 const colorSize = 4 * 4;
 const uvSize = 4 * 2;
 const drawingInstancesSize = 4;
-export const defaultShader = new Shader(`struct Uniforms {
+const defaultWebGPUShaderSource = `struct Uniforms {
   worldProjectionMatrix: mat4x4<f32>,
   modelProjectionMatrix: mat4x4<f32>,
 }
@@ -178,7 +199,8 @@ fn fragment_main(
 ) -> @location(0) vec4<f32> {
   return fragColor;
 }
-`, [
+`;
+export const defaultWebGPUShader = new SimJSWebGPUShader(defaultWebGPUShaderSource, [
     {
         entries: [
             {
@@ -214,7 +236,7 @@ fn fragment_main(
         size: drawingInstancesSize,
         format: 'float32'
     }
-], defaultInfos, defaultBufferWriter, defaultBindGroupGenerator, (el, buffer, vertex, _, offset) => {
+], defaultInfos, defaultWebGPUUniformBufferWriter, defaultBindGroupGenerator, (el, buffer, vertex, _, offset) => {
     const material = el.getMaterial();
     const vertexColor = material.getColor();
     buffer[offset] = vertex[0];
@@ -229,54 +251,7 @@ fn fragment_main(
     buffer[offset + 8] = 0;
     buffer[offset + 9] = el.isInstanced ? 1 : 0;
 });
-export const vertexColorShader = new Shader(`
-struct Uniforms {
-  worldProjectionMatrix: mat4x4<f32>,
-  modelProjectionMatrix: mat4x4<f32>,
-}
- 
-@group(0) @binding(0) var<uniform> uniforms: Uniforms;
-
-@group(0) @binding(1) var<storage> instanceMatrices: array<mat4x4f>;
-
-struct VertexOutput {
-  @builtin(position) Position: vec4<f32>,
-  @location(0) fragUV: vec2<f32>,
-  @location(1) fragColor: vec4<f32>,
-  @location(2) fragPosition: vec4<f32>,
-}
-
-@vertex
-fn vertex_main(
-  @builtin(instance_index) instanceIdx: u32,
-  @location(0) position: vec3<f32>,
-  @location(1) color: vec4<f32>,
-  @location(2) uv: vec2<f32>,
-  @location(3) drawingInstance: f32
-) -> VertexOutput {
-  var output: VertexOutput;
-
-  if (drawingInstance == 1) {
-    output.Position = uniforms.worldProjectionMatrix * uniforms.modelProjectionMatrix * instanceMatrices[instanceIdx] * vec4(position, 1.0);
-  } else {
-    output.Position = uniforms.worldProjectionMatrix * uniforms.modelProjectionMatrix * vec4(position, 1.0);
-  }
-
-  output.fragUV = uv;
-  output.fragPosition = output.Position;
-  output.fragColor = color;
-  return output;
-}
-
-@fragment
-fn fragment_main(
-  @location(0) fragUV: vec2<f32>,
-  @location(1) fragColor: vec4<f32>,
-  @location(2) fragPosition: vec4<f32>
-) -> @location(0) vec4<f32> {
-  return fragColor;
-}
-`, [
+export const defaultWebGPUVertexColorShader = new SimJSWebGPUShader(defaultWebGPUShaderSource, [
     {
         entries: [
             {
@@ -312,20 +287,4 @@ fn fragment_main(
         size: drawingInstancesSize,
         format: 'float32'
     }
-], defaultInfos, defaultBufferWriter, defaultBindGroupGenerator, (el, buffer, vertex, vertexIndex, offset) => {
-    const material = el.getMaterial();
-    const colors = material.getVertexColors();
-    const vertexColor = colors[vertexIndex] ?? el.getColor();
-    // const vertexColor = color(0, 255, 255);
-    buffer[offset] = vertex[0];
-    buffer[offset + 1] = vertex[1];
-    buffer[offset + 2] = vertex[2];
-    buffer[offset + 3] = vertexColor.r / 255;
-    buffer[offset + 4] = vertexColor.g / 255;
-    buffer[offset + 5] = vertexColor.b / 255;
-    buffer[offset + 6] = vertexColor.a;
-    // TODO possibly change uv for textures
-    buffer[offset + 7] = 0;
-    buffer[offset + 8] = 0;
-    buffer[offset + 9] = el.isInstanced ? 1 : 0;
-});
+], defaultInfos, defaultWebGPUUniformBufferWriter, defaultBindGroupGenerator, defaultVertexColorBufferWriter);

package/dist/simulation.d.ts

@@ -1,7 +1,8 @@
 import { SimulationElement3d } from './graphics.js';
-import type { Vector2, Vector3, LerpFunc } from './types.js';
+import type { Vector2, Vector3, LerpFunc, BackendType } from './types.js';
 import { Color } from './utils.js';
 import { Settings } from './settings.js';
+import { SimJsBackend } from './backends/backend.js';
 export declare const worldProjectionMatrix: import("./types.js").Mat4;
 export declare const orthogonalMatrix: import("./types.js").Mat4;
 export declare class Camera {
@@ -24,9 +25,13 @@ export declare class Camera {
     getAspectRatio(): number;
 }
 export declare let camera: Camera;
+type SimulationOptions = {
+    sceneCamera?: Camera | null;
+    showFrameRate?: boolean;
+    backendMode?: BackendType;
+};
 export declare class Simulation extends Settings {
     canvasRef: HTMLCanvasElement | null;
-    private bgColor;
     private scene;
     private fittingElement;
     private running;
@@ -34,12 +39,12 @@ export declare class Simulation extends Settings {
     private resizeEvents;
     private frameRateView;
     private transparentElements;
-    private vertexBuffer;
-    private indexBuffer;
-    constructor(idOrCanvasRef: string | HTMLCanvasElement, sceneCamera?: Camera | null, showFrameRate?: boolean);
+    private backend;
+    constructor(idOrCanvasRef: string | HTMLCanvasElement, options?: SimulationOptions);
     private handleCanvasResize;
     on<K extends keyof HTMLElementEventMap>(event: K, cb: (this: HTMLCanvasElement, ev: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
     onResize(cb: (width: number, height: number) => void): void;
+    getBackend(): SimJsBackend;
     getWidth(): number;
     getHeight(): number;
     add(el: SimulationElement3d, id?: string): void;
@@ -58,3 +63,4 @@ export declare class Simulation extends Settings {
     private renderScene;
     fitElement(): void;
 }
+export {};

package/dist/simulation.js

@@ -1,9 +1,10 @@
 import { vec3 } from 'wgpu-matrix';
-import { Color, matrix4, transitionValues, vector2, vector3 } from './utils.js';
-import { buildDepthTexture, buildMultisampleTexture, updateProjectionMatrix, getVertexAndIndexSize, updateOrthoProjectionMatrix, updateWorldProjectionMatrix, CachedArray, addToScene, removeSceneObj, removeSceneId } from './internalUtils.js';
+import { matrix4, transitionValues, vector2, vector3, webGLAvailable } from './utils.js';
+import { updateProjectionMatrix, updateOrthoProjectionMatrix, updateWorldProjectionMatrix, CachedArray, addToScene, removeSceneObj, removeSceneId } from './internalUtils.js';
 import { Settings } from './settings.js';
-import { MemoBuffer } from './buffers.js';
 import { globalInfo, logger } from './globals.js';
+import { WebGLBackend } from './backends/webgl.js';
+import { WebGPUBackend } from './backends/webgpu.js';
 const simjsFrameRateCss = `.simjs-frame-rate {
   position: absolute;
   top: 0;
@@ -142,9 +143,13 @@ export class Camera {
     }
 }
 export let camera = new Camera(vector3());
+const defaultSimulationOptions = {
+    sceneCamera: null,
+    showFrameRate: false,
+    backendMode: 'webgpu'
+};
 export class Simulation extends Settings {
     canvasRef = null;
-    bgColor = new Color(255, 255, 255);
     scene = [];
     fittingElement = false;
     running = true;
@@ -152,9 +157,9 @@ export class Simulation extends Settings {
     resizeEvents;
     frameRateView;
     transparentElements;
-    vertexBuffer;
-    indexBuffer;
-    constructor(idOrCanvasRef, sceneCamera = null, showFrameRate = false) {
+    backend;
+    constructor(idOrCanvasRef, options = {}) {
+        const { sceneCamera = defaultSimulationOptions.sceneCamera, showFrameRate = defaultSimulationOptions.showFrameRate, backendMode = defaultSimulationOptions.backendMode } = options;
         super();
         if (typeof idOrCanvasRef === 'string') {
             const ref = document.getElementById(idOrCanvasRef);
@@ -181,8 +186,15 @@ export class Simulation extends Settings {
         this.frameRateView = new FrameRateView(showFrameRate);
         this.frameRateView.updateFrameRate(1);
         this.transparentElements = new CachedArray();
-        this.vertexBuffer = new MemoBuffer(GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST, 0);
-        this.indexBuffer = new MemoBuffer(GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST, 0);
+        if (backendMode === 'webgpu' && 'gpu' in navigator) {
+            this.backend = new WebGPUBackend();
+        }
+        else if (webGLAvailable(this.canvasRef)) {
+            this.backend = new WebGLBackend();
+        }
+        else {
+            throw logger.error('WebGL and WebGPU not available');
+        }
     }
     handleCanvasResize(parent) {
         if (this.fittingElement) {
@@ -199,6 +211,9 @@ export class Simulation extends Settings {
     onResize(cb) {
         this.resizeEvents.push(cb);
     }
+    getBackend() {
+        return this.backend;
+    }
     getWidth() {
         return this.canvasRef?.width || 0;
     }
@@ -242,35 +257,23 @@ export class Simulation extends Settings {
         (async () => {
             if (this.canvasRef === null)
                 return;
-            this.initialized = true;
-            this.running = true;
-            const adapter = await navigator.gpu.requestAdapter();
-            if (!adapter)
-                throw logger.error('Adapter is null');
-            const ctx = this.canvasRef.getContext('webgpu');
-            if (!ctx)
-                throw logger.error('Context is null');
-            const device = await adapter.requestDevice();
-            globalInfo.setDevice(device);
             const screenSize = vector2(this.canvasRef.width, this.canvasRef.height);
             camera.setScreenSize(screenSize);
             const canvas = this.canvasRef;
             canvas.width = canvas.clientWidth * devicePixelRatio;
             canvas.height = canvas.clientHeight * devicePixelRatio;
-            const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
-            ctx.configure({
-                device,
-                format: presentationFormat,
-                alphaMode: 'opaque'
-            });
-            this.render(device, ctx, canvas);
+            this.initialized = true;
+            this.running = true;
+            await this.backend.init(this.canvasRef);
+            this.backend.initShaders(globalInfo.getToInitShaders());
+            this.render(canvas, this.backend);
         })();
     }
     stop() {
         this.running = false;
     }
     setBackground(color) {
-        this.bgColor = color;
+        this.backend.setClearColor(color);
     }
     setDefaultColor(color) {
         globalInfo.setDefaultColor(color);
@@ -281,15 +284,7 @@ export class Simulation extends Settings {
     getScene() {
         return this.scene;
     }
-    render(device, ctx, canvas) {
-        const colorAttachment = {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            view: undefined, // Assigned later
-            clearValue: this.bgColor.toObject(),
-            loadOp: 'clear',
-            storeOp: 'store'
-        };
+    render(canvas, backend) {
         const newAspectRatio = canvas.width / canvas.height;
         if (newAspectRatio !== aspectRatio) {
             updateProjectionMatrix(projMat, newAspectRatio);
@@ -297,23 +292,11 @@ export class Simulation extends Settings {
         }
         updateWorldProjectionMatrix(worldProjectionMatrix, projMat);
         updateOrthoProjectionMatrix(orthogonalMatrix, camera.getScreenSize());
-        let multisampleTexture = buildMultisampleTexture(device, ctx, canvas.width, canvas.height);
-        let depthTexture = buildDepthTexture(device, canvas.width, canvas.height);
-        const renderPassDescriptor = {
-            colorAttachments: [colorAttachment],
-            depthStencilAttachment: {
-                view: depthTexture.createView(),
-                depthClearValue: 1.0,
-                depthLoadOp: 'clear',
-                depthStoreOp: 'store'
-            }
-        };
+        backend.renderStart(canvas);
         // sub 10 to start with a reasonable gap between starting time and next frame time
         let prev = Date.now() - 10;
         let prevFps = 0;
         const frame = async () => {
-            if (!canvas)
-                return;
             requestAnimationFrame(frame);
             if (!this.running)
                 return;
@@ -333,36 +316,23 @@ export class Simulation extends Settings {
                 aspectRatio = camera.getAspectRatio();
                 updateProjectionMatrix(projMat, aspectRatio);
                 updateWorldProjectionMatrix(worldProjectionMatrix, projMat);
-                multisampleTexture = buildMultisampleTexture(device, ctx, screenSize[0], screenSize[1]);
-                depthTexture = buildDepthTexture(device, screenSize[0], screenSize[1]);
-                renderPassDescriptor.depthStencilAttachment.view = depthTexture.createView();
+                backend.updateTextures(screenSize);
             }
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            renderPassDescriptor.colorAttachments[0].view = multisampleTexture.createView();
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            renderPassDescriptor.colorAttachments[0].resolveTarget = ctx.getCurrentTexture().createView();
             if (camera.hasUpdated()) {
                 updateOrthoProjectionMatrix(orthogonalMatrix, camera.getScreenSize());
                 updateWorldProjectionMatrix(worldProjectionMatrix, projMat);
             }
-            const commandEncoder = device.createCommandEncoder();
-            const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
-            const [totalVerticesSize, totalIndexSize] = getVertexAndIndexSize(this.scene);
-            this.vertexBuffer.setSize(totalVerticesSize * 4);
-            this.indexBuffer.setSize(totalIndexSize * 4);
+            backend.preRender(this.scene);
             this.transparentElements.reset();
-            const [opaqueVertexOffset, opaqueIndexOffset] = this.renderScene(device, passEncoder, this.vertexBuffer.getBuffer(), this.indexBuffer.getBuffer(), 0, 0, this.scene, this.scene.length, diff, false);
-            this.renderScene(device, passEncoder, this.vertexBuffer.getBuffer(), this.indexBuffer.getBuffer(), opaqueVertexOffset, opaqueIndexOffset, this.transparentElements.getArray(), this.transparentElements.length, diff, true);
+            const [opaqueVertexOffset, opaqueIndexOffset] = this.renderScene(backend, 0, 0, this.scene, this.scene.length, diff, false);
+            this.renderScene(backend, opaqueVertexOffset, opaqueIndexOffset, this.transparentElements.getArray(), this.transparentElements.length, diff, true);
             camera.updateConsumed();
-            passEncoder.end();
-            device.queue.submit([commandEncoder.finish()]);
+            backend.finishRender();
         };
         requestAnimationFrame(frame);
     }
-    renderScene(device, passEncoder, vertexBuffer, indexBuffer, startVertexOffset, startIndexOffset, scene, numElements, diff, transparent) {
-        let vertexOffset = startVertexOffset;
+    renderScene(backend, startVertexCallOffset, startIndexOffset, scene, numElements, diff, transparent) {
+        let vertexCallOffset = startVertexCallOffset;
         let indexOffset = startIndexOffset;
         for (let i = 0; i < numElements; i++) {
             const obj = scene[i];
@@ -372,30 +342,23 @@ export class Simulation extends Settings {
             }
             if (obj.hasChildren()) {
                 const childObjects = obj.getChildrenInfos();
-                const [vertexDiff, indexDiff] = this.renderScene(device, passEncoder, vertexBuffer, indexBuffer, vertexOffset, indexOffset, childObjects, childObjects.length, diff, transparent);
-                vertexOffset += vertexDiff;
+                const [vertexDiff, indexDiff] = this.renderScene(backend, vertexCallOffset, indexOffset, childObjects, childObjects.length, diff, transparent);
+                vertexCallOffset += vertexDiff;
                 indexOffset += indexDiff;
             }
             if (obj.isEmpty)
                 continue;
-            const vertices = obj.getVertexBuffer();
+            const vertexCallBuffer = obj.getVertexCallBuffer();
             const indices = obj.getIndexBuffer();
-            device.queue.writeBuffer(vertexBuffer, vertexOffset, vertices.buffer, vertices.byteOffset, vertices.byteLength);
-            device.queue.writeBuffer(indexBuffer, indexOffset, indices.buffer, indices.byteOffset, indices.byteLength);
-            passEncoder.setVertexBuffer(0, vertexBuffer, vertexOffset, vertices.byteLength);
-            passEncoder.setIndexBuffer(indexBuffer, 'uint32', indexOffset, indices.byteLength);
-            passEncoder.setPipeline(obj.getPipeline());
-            obj.writeBuffers();
-            const instances = obj.isInstance ? obj.getNumInstances() : 1;
-            const bindGroups = obj.getShader().getBindGroups(obj);
-            for (let i = 0; i < bindGroups.length; i++) {
-                passEncoder.setBindGroup(i, bindGroups[i]);
-            }
-            passEncoder.drawIndexed(indices.length, instances);
-            vertexOffset += vertices.byteLength;
+            backend.draw(obj, 
+            // vertex
+            vertexCallOffset, vertexCallBuffer, 
+            // index
+            indexOffset, indices);
+            vertexCallOffset += vertexCallBuffer.byteLength;
             indexOffset += indices.byteLength;
         }
-        return [vertexOffset - startVertexOffset, indexOffset - startIndexOffset];
+        return [vertexCallOffset - startVertexCallOffset, indexOffset - startIndexOffset];
     }
     fitElement() {
         if (this.canvasRef === null)