@zephyr3d/scene 0.1.0

package/dist/utility/shprojection.js

@@ -0,0 +1,448 @@
+import { Vector3, halfToFloat, unpackFloat3, SH, nextPowerOf2 } from '@zephyr3d/base';
+import { Application } from '../app.js';
+import { Blitter } from '../blitter/blitter.js';
+import '../shaders/framework.js';
+import '@zephyr3d/device';
+import { CopyBlitter } from '../blitter/copy.js';
+
+class ReduceBlitter extends Blitter {
+    _width;
+    constructor(width){
+        super();
+        this._width = width ?? 0;
+    }
+    get width() {
+        return this._width;
+    }
+    set width(val) {
+        this._width = val;
+    }
+    setup(scope, type) {
+        const pb = scope.$builder;
+        if (pb.shaderKind === 'fragment') {
+            scope.width = pb.float().uniform(0);
+        }
+    }
+    setUniforms(bindGroup) {
+        bindGroup.setValue('width', this._width);
+    }
+    filter(scope, type, srcTex, srcUV, srcLayer) {
+        const pb = scope.$builder;
+        pb.func('reduce', [
+            pb.vec2('uv')
+        ], function() {
+            this.$l.h = pb.div(0.5, this.width);
+            //this.$l.uv1 = pb.add(this.uv, pb.vec2(this.h));
+            this.$l.uv1 = this.uv;
+            this.$l.tl = pb.textureSampleLevel(srcTex, pb.vec2(pb.sub(this.uv1.x, this.h), pb.sub(this.uv1.y, this.h)), 0);
+            this.$l.tr = pb.textureSampleLevel(srcTex, pb.vec2(pb.add(this.uv1.x, this.h), pb.sub(this.uv1.y, this.h)), 0);
+            this.$l.bl = pb.textureSampleLevel(srcTex, pb.vec2(pb.sub(this.uv1.x, this.h), pb.add(this.uv1.y, this.h)), 0);
+            this.$l.br = pb.textureSampleLevel(srcTex, pb.vec2(pb.add(this.uv1.x, this.h), pb.add(this.uv1.y, this.h)), 0);
+            this.$return(pb.vec4(pb.add(this.tl, this.tr, this.bl, this.br).rgb, 1));
+        });
+        return scope.reduce(srcUV);
+    }
+    calcHash() {
+        return '';
+    }
+}
+let vertexLayout = null;
+let renderStates = null;
+let projectionProgram = null;
+let projectionBindgroup = null;
+const faceDirections = [
+    [
+        new Vector3(0, 0, -1),
+        new Vector3(0, -1, 0),
+        new Vector3(1, 0, 0)
+    ],
+    [
+        new Vector3(0, 0, 1),
+        new Vector3(0, -1, 0),
+        new Vector3(-1, 0, 0)
+    ],
+    [
+        new Vector3(1, 0, 0),
+        new Vector3(0, 0, 1),
+        new Vector3(0, 1, 0)
+    ],
+    [
+        new Vector3(1, 0, 0),
+        new Vector3(0, 0, -1),
+        new Vector3(0, -1, 0)
+    ],
+    [
+        new Vector3(1, 0, 0),
+        new Vector3(0, -1, 0),
+        new Vector3(0, 0, 1)
+    ],
+    [
+        new Vector3(-1, 0, 0),
+        new Vector3(0, -1, 0),
+        new Vector3(0, 0, -1)
+    ]
+];
+function init() {
+    const device = Application.instance.device;
+    const vertices = new Float32Array([
+        1,
+        1,
+        -1,
+        1,
+        -1,
+        -1,
+        1,
+        -1
+    ]);
+    const indices = new Uint16Array([
+        0,
+        1,
+        2,
+        0,
+        2,
+        3
+    ]);
+    vertexLayout = device.createVertexLayout({
+        vertexBuffers: [
+            {
+                buffer: device.createVertexBuffer('position_f32x2', vertices)
+            }
+        ],
+        indexBuffer: device.createIndexBuffer(indices)
+    });
+    renderStates = device.createRenderStateSet();
+    renderStates.useRasterizerState().setCullMode('none');
+    renderStates.useDepthState().enableTest(false).enableWrite(false);
+    projectionProgram = createProjectionProgram();
+    //console.log(projectionProgram.getShaderSource('fragment'));
+    projectionBindgroup = device.createBindGroup(projectionProgram.bindGroupLayouts[0]);
+}
+function createProjectionProgram() {
+    const device = Application.instance.device;
+    const pb = device;
+    return pb.buildRenderProgram({
+        vertex (pb) {
+            this.$inputs.pos = pb.vec2().attrib('position');
+            this.up = pb.vec3().uniform(0);
+            this.right = pb.vec3().uniform(0);
+            this.front = pb.vec3().uniform(0);
+            pb.main(function() {
+                this.$builtins.position = pb.vec4(this.$inputs.pos, 0, 1);
+                this.$outputs.direction = pb.mul(pb.mat3(this.up, this.right, this.front), pb.vec3(this.$inputs.pos, 1));
+                if (device.type === 'webgpu') {
+                    this.$builtins.position.y = pb.neg(this.$builtins.position.y);
+                }
+            });
+        },
+        fragment (pb) {
+            this.u_cubeMap = pb.texCube().uniform(0);
+            this.u_width = pb.int().uniform(0);
+            this.u_coeff = pb.int().uniform(0);
+            this.$outputs.outcolor = pb.vec4();
+            pb.func('dirToUV', [
+                pb.vec3('dir')
+            ], function() {
+                this.$return(pb.vec2(pb.add(0.5, pb.div(pb.mul(0.5, pb.atan2(this.dir.z, this.dir.x)), Math.PI)), pb.sub(1, pb.div(pb.acos(this.dir.y), Math.PI))));
+            });
+            pb.func('areaElement', [
+                pb.float('x'),
+                pb.float('y')
+            ], function() {
+                this.$return(pb.atan2(pb.mul(this.x, this.y), pb.sqrt(pb.add(pb.mul(this.x, this.x), pb.mul(this.y, this.y), 1))));
+            });
+            pb.func('solidAngle', [
+                pb.vec2('uv')
+            ], function() {
+                this.$l.inv = pb.div(1, pb.float(this.u_width));
+                this.$l.uv2 = pb.sub(pb.mul(pb.add(this.uv, pb.mul(this.inv, 0.5)), 2), pb.vec2(1));
+                this.$l.xy0 = pb.sub(this.uv2, pb.vec2(this.inv));
+                this.$l.xy1 = pb.add(this.uv2, pb.vec2(this.inv));
+                this.$return(pb.sub(pb.add(this.areaElement(this.xy0.x, this.xy0.y), this.areaElement(this.xy1.x, this.xy1.y)), pb.add(this.areaElement(this.xy0.x, this.xy1.y), this.areaElement(this.xy1.x, this.xy0.y))));
+            });
+            pb.func('Y0', [
+                pb.vec3('v')
+            ], function() {
+                this.$return(0.2820947917);
+            });
+            pb.func('Y1', [
+                pb.vec3('v')
+            ], function() {
+                this.$return(pb.mul(this.v.y, -0.4886025119));
+            });
+            pb.func('Y2', [
+                pb.vec3('v')
+            ], function() {
+                this.$return(pb.mul(this.v.z, 0.4886025119));
+            });
+            pb.func('Y3', [
+                pb.vec3('v')
+            ], function() {
+                this.$return(pb.mul(this.v.x, -0.4886025119));
+            });
+            pb.func('Y4', [
+                pb.vec3('v')
+            ], function() {
+                this.$return(pb.mul(this.v.x, this.v.y, 1.0925484306));
+            });
+            pb.func('Y5', [
+                pb.vec3('v')
+            ], function() {
+                this.$return(pb.mul(this.v.y, this.v.z, -1.0925484306));
+            });
+            pb.func('Y6', [
+                pb.vec3('v')
+            ], function() {
+                this.$return(pb.mul(pb.sub(pb.mul(this.v.z, this.v.z, 3), 1), 0.3153915652));
+            });
+            pb.func('Y7', [
+                pb.vec3('v')
+            ], function() {
+                this.$return(pb.mul(this.v.x, this.v.z, -1.0925484306));
+            });
+            pb.func('Y8', [
+                pb.vec3('v')
+            ], function() {
+                this.$return(pb.mul(pb.sub(pb.mul(this.v.x, this.v.x), pb.mul(this.v.y, this.v.y)), 0.5462742153));
+            });
+            pb.func('evalBasis', [
+                pb.vec3('dir'),
+                pb.int('c')
+            ], function() {
+                this.$if(pb.equal(this.c, 0), function() {
+                    this.$return(this.Y0(this.dir));
+                }).$elseif(pb.equal(this.c, 1), function() {
+                    this.$return(this.Y1(this.dir));
+                }).$elseif(pb.equal(this.c, 2), function() {
+                    this.$return(this.Y2(this.dir));
+                }).$elseif(pb.equal(this.c, 3), function() {
+                    this.$return(this.Y3(this.dir));
+                }).$elseif(pb.equal(this.c, 4), function() {
+                    this.$return(this.Y4(this.dir));
+                }).$elseif(pb.equal(this.c, 5), function() {
+                    this.$return(this.Y5(this.dir));
+                }).$elseif(pb.equal(this.c, 6), function() {
+                    this.$return(this.Y6(this.dir));
+                }).$elseif(pb.equal(this.c, 7), function() {
+                    this.$return(this.Y7(this.dir));
+                }).$elseif(pb.equal(this.c, 8), function() {
+                    this.$return(this.Y8(this.dir));
+                }).$else(function() {
+                    this.$return(0);
+                });
+            });
+            pb.main(function() {
+                this.$l.dir = pb.normalize(this.$inputs.direction);
+                this.$l.radiance = pb.textureSampleLevel(this.u_cubeMap, this.dir, 0).rgb;
+                this.$l.uv = this.dirToUV(this.dir);
+                this.$l.omega = this.solidAngle(this.uv);
+                this.$l.sh = this.evalBasis(this.dir, this.u_coeff);
+                this.$outputs.outcolor = pb.vec4(pb.mul(this.radiance, this.sh, this.omega), 1);
+            });
+        }
+    });
+}
+async function doProjectCubemap(srcTexture, coeff) {
+    const device = Application.instance.device;
+    const result = Vector3.zero();
+    let w = nextPowerOf2(srcTexture.width);
+    if (w > srcTexture.width) {
+        w = w >> 1;
+    }
+    const tmpTextures = [];
+    while(w > 0){
+        tmpTextures.push(device.createTexture2D('rgba32f', w, w, {
+            samplerOptions: {
+                mipFilter: 'none'
+            }
+        }));
+        w = w >> 1;
+    }
+    for(let i = 0; i < 6; i++){
+        const dstTex = tmpTextures[0]; //device.createTexture2D('rgba32f', srcTexture.width, w);
+        const framebuffer = device.createFrameBuffer([
+            dstTex
+        ], null);
+        framebuffer.setColorAttachmentGenerateMipmaps(0, false);
+        device.setVertexLayout(vertexLayout);
+        device.setRenderStates(renderStates);
+        device.setProgram(projectionProgram);
+        device.setBindGroup(0, projectionBindgroup);
+        device.setFramebuffer(framebuffer);
+        projectionBindgroup.setValue('up', faceDirections[i][0]);
+        projectionBindgroup.setValue('right', faceDirections[i][1]);
+        projectionBindgroup.setValue('front', faceDirections[i][2]);
+        projectionBindgroup.setValue('u_width', srcTexture.width);
+        projectionBindgroup.setValue('u_coeff', coeff);
+        projectionBindgroup.setTexture('u_cubeMap', srcTexture);
+        device.draw('triangle-list', 0, 6);
+        device.setFramebuffer(null);
+        framebuffer.dispose();
+        const blitter = new ReduceBlitter();
+        const sampler = device.createSampler({
+            addressU: 'clamp',
+            addressV: 'clamp',
+            magFilter: 'nearest',
+            minFilter: 'nearest',
+            mipFilter: 'none'
+        });
+        for(let i = 1; i < tmpTextures.length; i++){
+            blitter.width = tmpTextures[i - 1].width;
+            blitter.blit(tmpTextures[i - 1], tmpTextures[i], sampler);
+        }
+        const buffer = new Float32Array(4);
+        await tmpTextures[tmpTextures.length - 1].readPixels(0, 0, 1, 1, 0, 0, buffer);
+        result.x += buffer[0];
+        result.y += buffer[1];
+        result.z += buffer[2];
+    }
+    for (const tmpTex of tmpTextures){
+        tmpTex.dispose();
+    }
+    return result;
+}
+/**
+ * Projects a function represented in a cubemap into spherical harmonics using GPU
+ *
+ * @param input - The input cubemap
+ * @returns The evaluated SH data
+ *
+ * @public
+ */ async function projectCubemap(tex) {
+    const device = Application.instance.device;
+    const srcTex = tex;
+    if (!device.getDeviceCaps().textureCaps.supportFloatColorBuffer) {
+        throw new Error(`projectCubemap(): device does not support rendering to float color buffer`);
+    }
+    if (!vertexLayout) {
+        init();
+    }
+    device.pushDeviceStates();
+    const result = [];
+    for(let i = 0; i < 9; i++){
+        const v = await doProjectCubemap(srcTex, i);
+        result.push(v);
+    }
+    device.popDeviceStates();
+    if (srcTex !== tex) {
+        srcTex.dispose();
+    }
+    return result;
+}
+function directionFromCubemapTexel(face, x, y, invSize) {
+    const dir = Vector3.zero();
+    switch(face){
+        case 0:
+            dir.x = 1;
+            dir.y = 1 - (2 * y + 1) * invSize;
+            dir.z = 1 - (2 * x + 1) * invSize;
+            break;
+        case 1:
+            dir.x = -1;
+            dir.y = 1 - (2 * y + 1) * invSize;
+            dir.z = 1 - (2 * x + 1) * invSize;
+            break;
+        case 2:
+            dir.x = -1 + (2 * x + 1) * invSize;
+            dir.y = 1;
+            dir.z = -1 + (2 * y + 1) * invSize;
+            break;
+        case 3:
+            dir.x = -1 + (2 * x + 1) * invSize;
+            dir.y = -1;
+            dir.z = 1 - (2 * y + 1) * invSize;
+            break;
+        case 4:
+            dir.x = -1 + (2 * x + 1) * invSize;
+            dir.y = 1 - (2 * y + 1) * invSize;
+            dir.z = 1;
+            break;
+        case 5:
+            dir.x = 1 - (2 * x + 1) * invSize;
+            dir.y = 1 - (2 * y + 1) * invSize;
+            dir.z = -1;
+            break;
+    }
+    return dir.inplaceNormalize();
+}
+/**
+ * Projects a function represented in a cubemap into spherical harmonics using CPU
+ *
+ * @param input - The input cubemap
+ * @returns The evaluated SH data
+ *
+ * @public
+ */ async function projectCubemapCPU(input) {
+    let srcTex = input;
+    const device = Application.instance.device;
+    if (device.getDeviceCaps().textureCaps.supportFloatColorBuffer && input.format === 'rgba16f' && device.type === 'webgl') {
+        const dstTex = device.createCubeTexture('rgba32f', input.width, {
+            samplerOptions: {
+                mipFilter: 'none'
+            }
+        });
+        const blitter = new CopyBlitter();
+        blitter.blit(input, dstTex);
+        srcTex = dstTex;
+    }
+    const size = srcTex.width;
+    const output = Array.from({
+        length: 9
+    }).map(()=>Vector3.zero());
+    const radiance = new Vector3();
+    const input_face = srcTex.format === 'rgba8unorm' || srcTex.format === 'rgba8unorm-srgb' ? new Uint8Array(size * size * 4) : srcTex.format === 'rgba32f' ? new Float32Array(size * size * 4) : srcTex.format === 'rgba16f' ? new Uint16Array(size * size * 4) : srcTex.format === 'rg11b10uf' ? new Uint32Array(size * size) : null;
+    if (!input_face) {
+        throw new Error(`invalid input texture format: ${input.format}`);
+    }
+    const fB = -1 + 1 / size;
+    const fS = size > 1 ? 2 * (1 - 1 / size) / (size - 1) : 0;
+    let fWt = 0;
+    for(let face = 0; face < 6; face++){
+        await srcTex.readPixels(0, 0, size, size, face, 0, input_face);
+        for(let texel = 0; texel < size * size; texel++){
+            const x = texel % size;
+            const y = Math.floor(texel / size);
+            const u = x * fS + fB;
+            const v = y * fS + fB;
+            const dir = directionFromCubemapTexel(face, x, y, 1 / size);
+            const solidAngle = 4 / ((1 + u * u + v * v) * Math.sqrt(1 + u * u + v * v));
+            fWt += solidAngle;
+            if (srcTex.format === 'rgba8unorm' || srcTex.format === 'rgba8unorm-srgb') {
+                radiance.x = input_face[texel * 4 + 0] / 255;
+                radiance.y = input_face[texel * 4 + 1] / 255;
+                radiance.z = input_face[texel * 4 + 2] / 255;
+                if (srcTex.format === 'rgba8unorm-srgb') {
+                    radiance.x = Math.pow(radiance.x, 2.2);
+                    radiance.y = Math.pow(radiance.y, 2.2);
+                    radiance.z = Math.pow(radiance.z, 2.2);
+                }
+            } else if (srcTex.format === 'rgba32f') {
+                radiance.x = input_face[texel * 4 + 0];
+                radiance.y = input_face[texel * 4 + 1];
+                radiance.z = input_face[texel * 4 + 2];
+            } else if (srcTex.format === 'rgba16f') {
+                radiance.x = halfToFloat(input_face[texel * 4 + 0]);
+                radiance.y = halfToFloat(input_face[texel * 4 + 1]);
+                radiance.z = halfToFloat(input_face[texel * 4 + 2]);
+            } else if (srcTex.format === 'rg11b10uf') {
+                unpackFloat3(input_face[texel], radiance);
+            }
+            const shBasis = SH.evalBasis(dir, 3);
+            for(let c = 0; c < 9; ++c){
+                const sh = shBasis[c];
+                output[c].x += radiance.x * sh * solidAngle;
+                output[c].y += radiance.y * sh * solidAngle;
+                output[c].z += radiance.z * sh * solidAngle;
+            }
+        }
+    }
+    for (const v of output){
+        v.scaleBy(4 * Math.PI / fWt);
+    }
+    if (srcTex !== input) {
+        srcTex.dispose();
+    }
+    return output;
+}
+
+export { projectCubemap, projectCubemapCPU };
+//# sourceMappingURL=shprojection.js.map

package/dist/utility/shprojection.js.map

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

package/dist/values.js

@@ -0,0 +1,48 @@
+/**
+ * Forward render pass type
+ * @public
+ */ const RENDER_PASS_TYPE_FORWARD = 0;
+/**
+ * Shadow map render pass type
+ * @public
+ */ const RENDER_PASS_TYPE_SHADOWMAP = 1;
+/**
+ * Depth only render pass type
+ * @public
+ */ const RENDER_PASS_TYPE_DEPTH_ONLY = 2;
+/**
+ * Max light count for forward rendering
+ * @internal
+ */ const MAX_FORWARD_LIGHT_COUNT = 8;
+/** @internal */ const DEBUG_CASCADED_SHADOW_MAPS = false;
+/**
+ * Builtin texture name for sheen LUT
+ * @public
+ */ const BUILTIN_ASSET_TEXTURE_SHEEN_LUT = 'LUT_Sheen';
+/**
+ * Builtin cube texture for test
+ * @public
+ */ const BUILTIN_ASSET_TEST_CUBEMAP = 'TEST_Cubemap';
+/**
+ * No light
+ * @public
+ */ const LIGHT_TYPE_NONE = 0;
+/**
+ * Directional light type
+ * @public
+ */ const LIGHT_TYPE_DIRECTIONAL = 1;
+/**
+ * Point light type
+ * @public
+ */ const LIGHT_TYPE_POINT = 2;
+/**
+ * Spot light type
+ * @public
+ */ const LIGHT_TYPE_SPOT = 3;
+/**
+ * Max light size for clustered lighting
+ * @public
+ */ const MAX_CLUSTERED_LIGHTS = 255;
+
+export { BUILTIN_ASSET_TEST_CUBEMAP, BUILTIN_ASSET_TEXTURE_SHEEN_LUT, DEBUG_CASCADED_SHADOW_MAPS, LIGHT_TYPE_DIRECTIONAL, LIGHT_TYPE_NONE, LIGHT_TYPE_POINT, LIGHT_TYPE_SPOT, MAX_CLUSTERED_LIGHTS, MAX_FORWARD_LIGHT_COUNT, RENDER_PASS_TYPE_DEPTH_ONLY, RENDER_PASS_TYPE_FORWARD, RENDER_PASS_TYPE_SHADOWMAP };
+//# sourceMappingURL=values.js.map

package/dist/values.js.map

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

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@zephyr3d/scene",
+  "version": "0.1.0",
+  "description": "scene system for zephyr3d",
+  "homepage": "https://github.com/gavinyork/zephyr3d#readme",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "**/*.js",
+    "**/*.d.ts",
+    "**/*.js.map"
+  ],
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gavinyork/zephyr3d.git"
+  },
+  "scripts": {
+    "clean": "shx rm -rf ./dist .tsbuildinfo",
+    "tsc": "tsc -p . --noEmit",
+    "build": "cross-env NODE_OPTIONS=--max_old_space_size=8192 rollup -c --silent"
+  },
+  "keywords": [
+    "javascript",
+    "3d",
+    "rendering",
+    "engine",
+    "webgl",
+    "webgpu",
+    "canvas",
+    "zephyr3d",
+    "device"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/gavinyork/zephyr3d/issues"
+  },
+  "engines": {
+    "node": ">=16.18.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.12",
+    "@babel/preset-env": "^7.20.2",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-strip": "^3.0.2",
+    "@rollup/plugin-terser": "^0.4.0",
+    "@rollup/pluginutils": "^5.0.2",
+    "@swc/core": "^1.3.62",
+    "rollup-plugin-swc3": "^0.8.2",
+    "rollup": "^3.15.0",
+    "rollup-plugin-dts": "^5.2.0",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-typescript2": "^0.34.1",
+    "shx": "^0.3.4",
+    "cross-env": "^7.0.3",
+    "typescript": "^5.1.3",
+    "@zephyr3d/base": "workspace:^0.1.0",
+    "@zephyr3d/device": "workspace:^0.1.0"
+  },
+  "peerDependencies": {
+    "@zephyr3d/base": "workspace:^0.1.0",
+    "@zephyr3d/device": "workspace:^0.1.0"
+  },
+  "dependencies": {
+    "@webgpu/types": "^0.1.31"
+  }
+}