@zephyr3d/device 0.1.0

package/dist/builder/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/device.js

@@ -0,0 +1,515 @@
+import { CPUTimer } from './timer.js';
+import { getVertexAttribFormat, getVertexFormatSize, makeVertexBufferType, GPUResourceUsageFlags } from './gpuobject.js';
+import './builder/ast.js';
+import './builder/types.js';
+import { ProgramBuilder } from './builder/programbuilder.js';
+import { DeviceGPUObjectAddedEvent, DeviceGPUObjectRemovedEvent, DeviceResizeEvent } from './base_types.js';
+import '@zephyr3d/base';
+import { DrawText } from './helpers/drawtext.js';
+
+/**
+ * Base class for rendering device
+ * @public
+ */ class BaseDevice {
+    _canvas;
+    _canvasClientWidth;
+    _canvasClientHeight;
+    _gpuObjectList;
+    _gpuMemCost;
+    _disposeObjectList;
+    _beginFrameTime;
+    _endFrameTime;
+    _frameInfo;
+    _cpuTimer;
+    _gpuTimer;
+    _runningLoop;
+    _fpsCounter;
+    _runLoopFunc;
+    _backend;
+    _beginFrameCounter;
+    _programBuilder;
+    _stateStack;
+    constructor(cvs, backend){
+        this._backend = backend;
+        this._gpuObjectList = {
+            textures: [],
+            samplers: [],
+            buffers: [],
+            programs: [],
+            framebuffers: [],
+            vertexArrayObjects: [],
+            bindGroups: []
+        };
+        this._canvas = cvs;
+        this._canvas.setAttribute('tabindex', '1');
+        this._canvasClientWidth = cvs.clientWidth;
+        this._canvasClientHeight = cvs.clientHeight;
+        this._gpuMemCost = 0;
+        this._disposeObjectList = [];
+        this._beginFrameTime = 0;
+        this._endFrameTime = 0;
+        this._runLoopFunc = null;
+        this._frameInfo = {
+            frameCounter: 0,
+            frameTimestamp: 0,
+            elapsedTimeCPU: 0,
+            elapsedTimeGPU: 0,
+            elapsedFrame: 0,
+            elapsedOverall: 0,
+            FPS: 0,
+            drawCalls: 0,
+            computeCalls: 0,
+            nextFrameCall: []
+        };
+        this._programBuilder = new ProgramBuilder(this);
+        this._cpuTimer = new CPUTimer();
+        this._gpuTimer = null;
+        this._runningLoop = null;
+        this._fpsCounter = {
+            time: 0,
+            frame: 0
+        };
+        this._stateStack = [];
+        this._beginFrameCounter = 0;
+        this._registerEventHandlers();
+    }
+    get backend() {
+        return this._backend;
+    }
+    get videoMemoryUsage() {
+        return this._gpuMemCost;
+    }
+    get frameInfo() {
+        return this._frameInfo;
+    }
+    get isRendering() {
+        return this._runningLoop !== null;
+    }
+    get canvas() {
+        return this._canvas;
+    }
+    get type() {
+        return this._backend.typeName();
+    }
+    get runLoopFunction() {
+        return this._runLoopFunc;
+    }
+    get programBuilder() {
+        return this._programBuilder;
+    }
+    setFont(fontName) {
+        DrawText.setFont(this, fontName);
+    }
+    drawText(text, x, y, color) {
+        DrawText.drawText(this, text, color, x, y);
+    }
+    disposeObject(obj, remove = true) {
+        if (obj) {
+            if (remove) {
+                this.removeGPUObject(obj);
+            }
+            if (!obj.disposed) {
+                if (this.isContextLost()) {
+                    obj.destroy();
+                } else {
+                    this._disposeObjectList.push(obj);
+                }
+            }
+            obj.dispatchEvent(null, 'disposed');
+        }
+    }
+    async restoreObject(obj) {
+        if (obj && obj.disposed && !this.isContextLost()) {
+            await obj.restore();
+            if (obj.restoreHandler) {
+                await obj.restoreHandler(obj);
+            }
+        }
+    }
+    enableGPUTimeRecording(enable) {
+        if (enable && !this._gpuTimer) {
+            this._gpuTimer = this.createGPUTimer();
+        } else if (!enable) {
+            this._gpuTimer?.end();
+            this._gpuTimer = null;
+        }
+    }
+    beginFrame() {
+        if (this._beginFrameCounter === 0) {
+            for (const obj of this._disposeObjectList){
+                obj.destroy();
+            }
+            this._disposeObjectList = [];
+        }
+        this._beginFrameCounter++;
+        this._beginFrameTime = this._cpuTimer.now();
+        this.updateFrameInfo();
+        return this.onBeginFrame();
+    }
+    endFrame() {
+        if (this._beginFrameCounter > 0) {
+            this._beginFrameCounter--;
+            if (this._beginFrameCounter === 0) {
+                this._endFrameTime = this._cpuTimer.now();
+                this.onEndFrame();
+            }
+        }
+    }
+    getVertexAttribFormat(semantic, dataType, componentCount) {
+        return getVertexAttribFormat(semantic, dataType, componentCount);
+    }
+    createInterleavedVertexBuffer(attribFormats, data, options) {
+        if (options && options.usage && options.usage !== 'vertex') {
+            console.error(`createVertexBuffer() failed: options.usage must be 'vertex' or not set`);
+            return null;
+        }
+        let size = 0;
+        for (const format of attribFormats){
+            size += getVertexFormatSize(format);
+        }
+        const vertexBufferType = makeVertexBufferType(data.byteLength / size >> 0, ...attribFormats);
+        const opt = Object.assign({
+            usage: 'vertex',
+            dynamic: false,
+            managed: true,
+            storage: false
+        }, options || {});
+        if (opt.storage) {
+            opt.dynamic = false;
+            opt.managed = false;
+        }
+        if (opt.dynamic) {
+            opt.managed = false;
+        }
+        return this.createStructuredBuffer(vertexBufferType, opt, data);
+    }
+    createVertexBuffer(attribFormat, data, options) {
+        if (options && options.usage && options.usage !== 'vertex') {
+            console.error(`createVertexBuffer() failed: options.usage must be 'vertex' or not set`);
+            return null;
+        }
+        const count = getVertexFormatSize(attribFormat);
+        const vertexBufferType = makeVertexBufferType(data.byteLength / count >> 0, attribFormat);
+        const opt = Object.assign({
+            usage: 'vertex',
+            dynamic: false,
+            managed: true,
+            storage: false
+        }, options || {});
+        if (opt.storage) {
+            opt.dynamic = false;
+            opt.managed = false;
+        }
+        if (opt.dynamic) {
+            opt.managed = false;
+        }
+        return this.createStructuredBuffer(vertexBufferType, opt, data);
+    }
+    draw(primitiveType, first, count) {
+        this._frameInfo.drawCalls++;
+        this._draw(primitiveType, first, count);
+    }
+    drawInstanced(primitiveType, first, count, numInstances) {
+        this._frameInfo.drawCalls++;
+        this._drawInstanced(primitiveType, first, count, numInstances);
+    }
+    compute(workgroupCountX, workgroupCountY, workgroupCountZ) {
+        this._frameInfo.computeCalls++;
+        this._compute(workgroupCountX, workgroupCountY, workgroupCountZ);
+    }
+    runNextFrame(f) {
+        if (f) {
+            this._frameInfo.nextFrameCall.push(f);
+        }
+    }
+    cancelNextFrameCall(f) {
+        const index = this._frameInfo.nextFrameCall.indexOf(f);
+        if (index >= 0) {
+            this._frameInfo.nextFrameCall.splice(index, 1);
+        }
+    }
+    exitLoop() {
+        if (this._runningLoop) {
+            cancelAnimationFrame(this._runningLoop);
+            this._runningLoop = null;
+        }
+    }
+    runLoop(func) {
+        if (this._runningLoop !== null) {
+            console.error('Device.runLoop() can not be nested');
+            return;
+        }
+        if (!func) {
+            console.error('Device.runLoop() argment error');
+            return;
+        }
+        const that = this;
+        that._runLoopFunc = func;
+        (function entry() {
+            that._runningLoop = requestAnimationFrame(entry);
+            if (that.beginFrame()) {
+                that._runLoopFunc(that);
+                that.endFrame();
+            }
+        })();
+    }
+    pushDeviceStates() {
+        this._stateStack.push({
+            windowOrderReversed: this.isWindingOrderReversed(),
+            framebuffer: this.getFramebuffer(),
+            viewport: this.getViewport(),
+            scissor: this.getScissor(),
+            program: this.getProgram(),
+            renderStateSet: this.getRenderStates(),
+            vertexLayout: this.getVertexLayout(),
+            bindGroups: [
+                this.getBindGroup(0),
+                this.getBindGroup(1),
+                this.getBindGroup(2),
+                this.getBindGroup(3)
+            ]
+        });
+    }
+    popDeviceStates() {
+        if (this._stateStack.length === 0) {
+            console.error('Device.popDeviceStates(): stack is empty');
+        } else {
+            const top = this._stateStack.pop();
+            this.setFramebuffer(top.framebuffer);
+            this.setViewport(top.viewport);
+            this.setScissor(top.scissor);
+            this.setProgram(top.program);
+            this.setRenderStates(top.renderStateSet);
+            this.setVertexLayout(top.vertexLayout);
+            this.setBindGroup(0, ...top.bindGroups[0]);
+            this.setBindGroup(1, ...top.bindGroups[1]);
+            this.setBindGroup(2, ...top.bindGroups[2]);
+            this.setBindGroup(3, ...top.bindGroups[3]);
+            this.reverseVertexWindingOrder(top.windowOrderReversed);
+        }
+    }
+    getGPUObjects() {
+        return this._gpuObjectList;
+    }
+    getGPUObjectById(uid) {
+        for (const list of [
+            this._gpuObjectList.textures,
+            this._gpuObjectList.samplers,
+            this._gpuObjectList.buffers,
+            this._gpuObjectList.framebuffers,
+            this._gpuObjectList.programs,
+            this._gpuObjectList.vertexArrayObjects
+        ]){
+            for (const obj of list){
+                if (obj.uid === uid) {
+                    return obj;
+                }
+            }
+        }
+        return null;
+    }
+    screenToDevice(val) {
+        return this.getFramebuffer() ? val : Math.round(val * this.getScale());
+    }
+    deviceToScreen(val) {
+        return this.getFramebuffer() ? val : Math.round(val / this.getScale());
+    }
+    buildRenderProgram(options) {
+        return this._programBuilder.buildRenderProgram(options);
+    }
+    buildComputeProgram(options) {
+        return this._programBuilder.buildComputeProgram(options);
+    }
+    addGPUObject(obj) {
+        const list = this.getGPUObjectList(obj);
+        if (list && list.indexOf(obj) < 0) {
+            list.push(obj);
+            this.dispatchEvent(new DeviceGPUObjectAddedEvent(obj));
+        }
+    }
+    removeGPUObject(obj) {
+        const list = this.getGPUObjectList(obj);
+        if (list) {
+            const index = list.indexOf(obj);
+            if (index >= 0) {
+                list.splice(index, 1);
+                this.dispatchEvent(new DeviceGPUObjectRemovedEvent(obj));
+            }
+        }
+    }
+    updateVideoMemoryCost(delta) {
+        this._gpuMemCost += delta;
+    }
+    _onresize() {
+        if (this._canvasClientWidth !== this._canvas.clientWidth || this._canvasClientHeight !== this._canvas.clientHeight) {
+            this._canvasClientWidth = this._canvas.clientWidth;
+            this._canvasClientHeight = this._canvas.clientHeight;
+            this.dispatchEvent(new DeviceResizeEvent(this._canvasClientWidth, this._canvasClientHeight));
+        }
+    }
+    _registerEventHandlers() {
+        const canvas = this._canvas;
+        const that = this;
+        if (window.ResizeObserver) {
+            new window.ResizeObserver((entries)=>{
+                that._onresize();
+            }).observe(canvas, {});
+        } else {
+            if (window.MutationObserver) {
+                new MutationObserver(function(mutations) {
+                    if (mutations.length > 0) {
+                        that._onresize();
+                    }
+                }).observe(canvas, {
+                    attributes: true,
+                    attributeFilter: [
+                        'style'
+                    ]
+                });
+            }
+            window.addEventListener('resize', ()=>{
+                this._onresize();
+            });
+        }
+    }
+    updateFrameInfo() {
+        this._frameInfo.frameCounter++;
+        this._frameInfo.drawCalls = 0;
+        this._frameInfo.computeCalls = 0;
+        const now = this._beginFrameTime;
+        if (this._frameInfo.frameTimestamp === 0) {
+            this._frameInfo.frameTimestamp = now;
+            this._frameInfo.elapsedTimeCPU = 0;
+            this._frameInfo.elapsedTimeGPU = 0;
+            this._frameInfo.elapsedFrame = 0;
+            this._frameInfo.elapsedOverall = 0;
+            this._frameInfo.FPS = 0;
+            this._fpsCounter.time = now;
+            this._fpsCounter.frame = this._frameInfo.frameCounter;
+            if (this._gpuTimer) {
+                this._gpuTimer.begin();
+            }
+        } else {
+            this._frameInfo.elapsedFrame = now - this._frameInfo.frameTimestamp;
+            this._frameInfo.elapsedOverall += this._frameInfo.elapsedFrame;
+            let gpuTime = 0;
+            let cpuTime = 0;
+            if (this._endFrameTime !== 0) {
+                gpuTime = now - this._endFrameTime;
+                cpuTime = this._endFrameTime - this._frameInfo.frameTimestamp;
+            }
+            this._frameInfo.frameTimestamp = now;
+            if (now >= this._fpsCounter.time + 1000) {
+                this._frameInfo.FPS = (this._frameInfo.frameCounter - this._fpsCounter.frame) * 1000 / (now - this._fpsCounter.time);
+                this._fpsCounter.time = now;
+                this._fpsCounter.frame = this._frameInfo.frameCounter;
+                this._frameInfo.elapsedTimeGPU = gpuTime;
+                this._frameInfo.elapsedTimeCPU = cpuTime;
+            }
+        }
+        for (const f of this._frameInfo.nextFrameCall){
+            f();
+        }
+        this._frameInfo.nextFrameCall.length = 0;
+    }
+    getGPUObjectList(obj) {
+        let list = null;
+        if (obj.isTexture()) {
+            list = this._gpuObjectList.textures;
+        } else if (obj.isSampler()) {
+            list = this._gpuObjectList.samplers;
+        } else if (obj.isBuffer()) {
+            list = this._gpuObjectList.buffers;
+        } else if (obj.isFramebuffer()) {
+            list = this._gpuObjectList.framebuffers;
+        } else if (obj.isProgram()) {
+            list = this._gpuObjectList.programs;
+        } else if (obj.isVertexLayout()) {
+            list = this._gpuObjectList.vertexArrayObjects;
+        } else if (obj.isBindGroup()) {
+            list = this._gpuObjectList.bindGroups;
+        }
+        return list;
+    }
+    invalidateAll() {
+        for (const list of [
+            this._gpuObjectList.buffers,
+            this._gpuObjectList.textures,
+            this._gpuObjectList.samplers,
+            this._gpuObjectList.programs,
+            this._gpuObjectList.framebuffers,
+            this._gpuObjectList.vertexArrayObjects,
+            this._gpuObjectList.bindGroups
+        ]){
+            for (const obj of list){
+                this.disposeObject(obj, false);
+            }
+        }
+        if (this.isContextLost()) {
+            for (const obj of this._disposeObjectList){
+                obj.destroy();
+            }
+            this._disposeObjectList = [];
+        }
+    }
+    async reloadAll() {
+        const promises = [];
+        for (const list of [
+            this._gpuObjectList.buffers,
+            this._gpuObjectList.textures,
+            this._gpuObjectList.samplers,
+            this._gpuObjectList.programs,
+            this._gpuObjectList.framebuffers,
+            this._gpuObjectList.vertexArrayObjects,
+            this._gpuObjectList.bindGroups
+        ]){
+            // obj.reload() may change the list, so make a copy first
+            for (const obj of list.slice()){
+                promises.push(obj.reload());
+            }
+        }
+        Promise.all(promises);
+        return;
+    }
+    parseTextureOptions(options) {
+        const noMipmapFlag = options?.samplerOptions?.mipFilter === 'none' ? GPUResourceUsageFlags.TF_NO_MIPMAP : 0;
+        const writableFlag = options?.writable ? GPUResourceUsageFlags.TF_WRITABLE : 0;
+        const dynamicFlag = options?.dynamic ? GPUResourceUsageFlags.DYNAMIC : 0;
+        return noMipmapFlag | writableFlag | dynamicFlag;
+    }
+    parseBufferOptions(options, defaultUsage) {
+        const usage = options?.usage || defaultUsage;
+        let usageFlag;
+        switch(usage){
+            case 'uniform':
+                usageFlag = GPUResourceUsageFlags.BF_UNIFORM;
+                options.managed = false;
+                options.dynamic = options.dynamic ?? true;
+                break;
+            case 'vertex':
+                usageFlag = GPUResourceUsageFlags.BF_VERTEX;
+                break;
+            case 'index':
+                usageFlag = GPUResourceUsageFlags.BF_INDEX;
+                break;
+            case 'read':
+                usageFlag = GPUResourceUsageFlags.BF_READ;
+                options.managed = false;
+                break;
+            case 'write':
+                usageFlag = GPUResourceUsageFlags.BF_WRITE;
+                options.managed = false;
+                break;
+            default:
+                usageFlag = 0;
+                break;
+        }
+        const storageFlag = options?.storage ?? false ? GPUResourceUsageFlags.BF_STORAGE : 0;
+        const dynamicFlag = options?.dynamic ?? false ? GPUResourceUsageFlags.DYNAMIC : 0;
+        const managedFlag = dynamicFlag === 0 && (options?.managed ?? true) ? GPUResourceUsageFlags.MANAGED : 0;
+        return usageFlag | storageFlag | dynamicFlag | managedFlag;
+    }
+}
+
+export { BaseDevice };
+//# sourceMappingURL=device.js.map

package/dist/device.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"device.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}