npm - reze-engine - Versions diffs - 0.1.9 → 0.1.11 - Mend

reze-engine 0.1.9 → 0.1.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md CHANGED Viewed

@@ -2,6 +2,19 @@
 A lightweight engine built with WebGPU and TypeScript for real-time 3D anime character MMD model rendering.
+## Features
+- Physics
+- Alpha blending
+- Post alpha eye rendering
+- Rim lighting
+- Bloom
+- Outlines
+- Toon shading with directional lights
+- MSAA 4x anti-aliasing
+- GPU-accelerated skinning
+- Bone rotation api
 ## Usage
 ```typescript
@@ -13,14 +26,6 @@ export default function Home() {
   const [stats, setStats] = useState<EngineStats>({
     fps: 0,
     frameTime: 0,
-    memoryUsed: 0,
-    drawCalls: 0,
-    vertices: 0,
-    triangles: 0,
-    materials: 0,
-    textures: 0,
-    textureMemory: 0,
-    bufferMemory: 0,
     gpuMemory: 0,
   })
   const [progress, setProgress] = useState(0)

package/dist/engine.d.ts CHANGED Viewed

@@ -17,7 +17,6 @@ export declare class Engine {
     private lightData;
     private lightCount;
     private vertexBuffer;
-    private vertexCount;
     private indexBuffer?;
     private resizeObserver;
     private depthTexture;
@@ -55,6 +54,9 @@ export declare class Engine {
     private linearSampler;
     bloomThreshold: number;
     bloomIntensity: number;
+    private rimLightIntensity;
+    private rimLightPower;
+    private rimLightColor;
     private currentModel;
     private modelDir;
     private physics;
@@ -91,7 +93,8 @@ export declare class Engine {
     private setupModelBuffers;
     private opaqueNonEyeNonHairDraws;
     private eyeDraws;
-    private hairDraws;
+    private hairDrawsOverEyes;
+    private hairDrawsOverNonEyes;
     private transparentNonEyeNonHairDraws;
     private opaqueNonEyeNonHairOutlineDraws;
     private eyeOutlineDraws;

package/dist/engine.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"engine.d.ts","sourceRoot":"","sources":["../src/engine.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAKnC,MAAM,WAAW,WAAW;IAC1B,GAAG,EAAE,MAAM,CAAA;IACX,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,qBAAa,MAAM;IACjB,OAAO,CAAC,MAAM,CAAmB;IACjC,OAAO,CAAC,MAAM,CAAY;IAC1B,OAAO,CAAC,OAAO,CAAmB;IAClC,OAAO,CAAC,kBAAkB,CAAmB;IACtC,MAAM,EAAG,MAAM,CAAA;IACtB,OAAO,CAAC,mBAAmB,CAAY;IACvC,OAAO,CAAC,gBAAgB,CAAuB;IAC/C,OAAO,CAAC,kBAAkB,CAAY;IACtC,OAAO,CAAC,SAAS,CAAuB;IACxC,OAAO,CAAC,UAAU,CAAI;IACtB,OAAO,CAAC,YAAY,CAAY;IAChC,OAAO,CAAC,WAAW,~~CAAY;IAC/B,OAAO,~~CAAC,~~WAAW,CAAC,~~CAAW;IAC/B,OAAO,CAAC,cAAc,CAA8B;IACpD,OAAO,CAAC,YAAY,CAAa;IACjC,OAAO,CAAC,QAAQ,CAAoB;IACpC,OAAO,CAAC,eAAe,CAAoB;IAC3C,OAAO,CAAC,mBAAmB,CAAoB;IAC/C,OAAO,CAAC,2BAA2B,CAAoB;IACvD,OAAO,CAAC,oBAAoB,CAAoB;IAChD,OAAO,CAAC,kBAAkB,CAAoB;IAC9C,OAAO,CAAC,WAAW,CAAoB;IACvC,OAAO,CAAC,mBAAmB,CAAqB;IAChD,OAAO,CAAC,sBAAsB,CAAqB;IACnD,OAAO,CAAC,YAAY,CAAY;IAChC,OAAO,CAAC,aAAa,CAAY;IACjC,OAAO,CAAC,gBAAgB,CAAC,CAAW;IACpC,OAAO,CAAC,iBAAiB,CAAC,CAAW;IACrC,OAAO,CAAC,uBAAuB,CAAC,CAAW;IAC3C,OAAO,CAAC,yBAAyB,CAAC,CAAoB;IACtD,OAAO,CAAC,eAAe,CAAC,CAAW;IACnC,OAAO,CAAC,kBAAkB,CAAa;IACvC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAI;IAChC,OAAO,CAAC,oBAAoB,CAA0B;IAEtD,OAAO,CAAC,kBAAkB,CAAa;IACvC,OAAO,CAAC,sBAAsB,CAAiB;IAC/C,OAAO,CAAC,mBAAmB,CAAa;IACxC,OAAO,CAAC,iBAAiB,CAAa;IACtC,OAAO,CAAC,iBAAiB,CAAa;IAEtC,OAAO,CAAC,oBAAoB,CAAoB;IAChD,OAAO,CAAC,iBAAiB,CAAoB;IAC7C,OAAO,CAAC,oBAAoB,CAAoB;IAEhD,OAAO,CAAC,oBAAoB,CAAY;IACxC,OAAO,CAAC,mBAAmB,CAAY;IACvC,OAAO,CAAC,oBAAoB,CAAY;IACxC,OAAO,CAAC,oBAAoB,CAAY;IACxC,OAAO,CAAC,aAAa,CAAa;IAE3B,cAAc,EAAE,MAAM,CAAM;IAC5B,cAAc,EAAE,MAAM,CAAO;~~IACpC~~,OAAO,CAAC,YAAY,CAAqB;IACzC,OAAO,CAAC,QAAQ,CAAa;IAC7B,OAAO,CAAC,OAAO,CAAuB;IACtC,OAAO,CAAC,cAAc,CAAa;IACnC,OAAO,CAAC,YAAY,CAAgC;IACpD,OAAO,CAAC,YAAY,CAAuD;IAE3E,OAAO,CAAC,aAAa,CAAoB;IACzC,OAAO,CAAC,qBAAqB,CAAI;IACjC,OAAO,CAAC,gBAAgB,CAAe;IACvC,OAAO,CAAC,YAAY,CAAY;IAChC,OAAO,CAAC,aAAa,CAAY;IACjC,OAAO,CAAC,aAAa,CAAoB;IACzC,OAAO,CAAC,KAAK,CAIZ;IACD,OAAO,CAAC,gBAAgB,CAAsB;IAC9C,OAAO,CAAC,kBAAkB,CAA4B;gBAE1C,MAAM,EAAE,iBAAiB;IAKxB,IAAI;IA+BjB,OAAO,CAAC,eAAe;~~IAk0BvB~~,OAAO,CAAC,+BAA+B;IAyCvC,OAAO,CAAC,oBAAoB;IAwC5B,OAAO,CAAC,oBAAoB;IAgP5B,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,YAAY;IAiGpB,OAAO,CAAC,WAAW;IAcnB,OAAO,CAAC,aAAa;IAgBd,QAAQ,CAAC,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,GAAE,MAAY,GAAG,OAAO;IAmBxE,UAAU,CAAC,SAAS,EAAE,MAAM;IAI5B,QAAQ,IAAI,WAAW;IAIvB,aAAa,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI;IAgBnC,cAAc;IAQd,OAAO;IAUD,SAAS,CAAC,IAAI,EAAE,MAAM;IAW5B,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,UAAU,CAAC,EAAE,MAAM;YAK5D,iBAAiB;~~IAgG~~/B,OAAO,CAAC,wBAAwB,CAKxB;IACR,OAAO,CAAC,QAAQ,CAA+F;IAC/G,OAAO,CAAC,~~SAAS~~,~~CAA+F~~;~~IAChH~~,OAAO,CAAC,6BAA6B,CAK7B;IACR,OAAO,CAAC,+BAA+B,CAK/B;IACR,OAAO,CAAC,eAAe,CAA+F;IACtH,OAAO,CAAC,gBAAgB,CACpB;IACJ,OAAO,CAAC,oCAAoC,CAKpC;YAGM,cAAc;~~YA2Md~~,qBAAqB;IAkD5B,MAAM;~~IA+Gb~~,OAAO,CAAC,UAAU;IA8IlB,OAAO,CAAC,oBAAoB;IAa5B,OAAO,CAAC,kBAAkB;IAY1B,OAAO,CAAC,eAAe;IA8BvB,OAAO,CAAC,mBAAmB;IAgC3B,OAAO,CAAC,YAAY;IAqBpB,OAAO,CAAC,WAAW;~~CAsEpB~~"}
1	+ {"version":3,"file":"engine.d.ts","sourceRoot":"","sources":["../src/engine.ts"],"names":[],"mappings":"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"}

package/dist/engine.js CHANGED Viewed

@@ -7,12 +7,15 @@ export class Engine {
         this.cameraMatrixData = new Float32Array(36);
         this.lightData = new Float32Array(64);
         this.lightCount = 0;
-        this.vertexCount = 0;
         this.resizeObserver = null;
         this.sampleCount = 4; // MSAA 4x
         // Bloom settings
         this.bloomThreshold = 0.3;
         this.bloomIntensity = 0.13;
+        // Rim light settings
+        this.rimLightIntensity = 0.35;
+        this.rimLightPower = 2.0;
+        this.rimLightColor = [1.0, 1.0, 1.0];
         this.currentModel = null;
         this.modelDir = "";
         this.physics = null;
@@ -33,7 +36,8 @@ export class Engine {
         this.renderLoopCallback = null;
         this.opaqueNonEyeNonHairDraws = [];
         this.eyeDraws = [];
-        this.hairDraws = [];
+        this.hairDrawsOverEyes = [];
+        this.hairDrawsOverNonEyes = [];
         this.transparentNonEyeNonHairDraws = [];
         this.opaqueNonEyeNonHairOutlineDraws = [];
         this.eyeOutlineDraws = [];
@@ -102,9 +106,11 @@ export class Engine {
         struct MaterialUniforms {
           alpha: f32,
+          rimIntensity: f32,
+          rimPower: f32,
           _padding1: f32,
+          rimColor: vec3f,
           _padding2: f32,
-          _padding3: f32,
         };
         struct VertexOutput {
@@ -175,7 +181,13 @@ export class Engine {
             lightAccum += toonFactor * radiance * nDotL;
           }
-          let color = albedo * lightAccum;
+          // Rim light calculation
+          let viewDir = normalize(camera.viewPos - input.worldPos);
+          var rimFactor = 1.0 - max(dot(n, viewDir), 0.0);
+          rimFactor = pow(rimFactor, material.rimPower);
+          let rimLight = material.rimColor * material.rimIntensity * rimFactor;
+          let color = albedo * lightAccum + rimLight;
           let finalAlpha = material.alpha;
           if (finalAlpha < 0.001) {
             discard;
@@ -185,9 +197,10 @@ export class Engine {
         }
       `,
         });
-        // Create a separate shader for hair-over-eyes that outputs pre-multiplied color for darkening effect
-        const hairMultiplyShaderModule = this.device.createShaderModule({
-            label: "hair multiply shaders",
+        // Unified hair shader that can handle both over-eyes and over-non-eyes cases
+        // Uses material.alpha multiplier to control opacity (0.5 for over-eyes, 1.0 for over-non-eyes)
+        const hairShaderModule = this.device.createShaderModule({
+            label: "unified hair shaders",
             code: /* wgsl */ `
         struct CameraUniforms {
           view: mat4x4f,
@@ -213,9 +226,11 @@ export class Engine {
         struct MaterialUniforms {
           alpha: f32,
+          alphaMultiplier: f32, // New: multiplier for alpha (0.5 for over-eyes, 1.0 for over-non-eyes)
+          rimIntensity: f32,
+          rimPower: f32,
+          rimColor: vec3f,
           _padding1: f32,
-          _padding2: f32,
-          _padding3: f32,
         };
         struct VertexOutput {
@@ -285,16 +300,19 @@ export class Engine {
             lightAccum += toonFactor * radiance * nDotL;
           }
-          let color = albedo * lightAccum;
-          let finalAlpha = material.alpha;
+          // Rim light calculation
+          let viewDir = normalize(camera.viewPos - input.worldPos);
+          var rimFactor = 1.0 - max(dot(n, viewDir), 0.0);
+          rimFactor = pow(rimFactor, material.rimPower);
+          let rimLight = material.rimColor * material.rimIntensity * rimFactor;
+          let color = albedo * lightAccum + rimLight;
+          let finalAlpha = material.alpha * material.alphaMultiplier;
           if (finalAlpha < 0.001) {
             discard;
           }
-          // For hair-over-eyes effect: simple half-transparent overlay - Use 50% opacity to create a semi-transparent hair color overlay
-          let overlayAlpha = finalAlpha * 0.5;
-          return vec4f(clamp(color, vec3f(0.0), vec3f(1.0)), overlayAlpha);
+          return vec4f(clamp(color, vec3f(0.0), vec3f(1.0)), finalAlpha);
         }
       `,
         });
@@ -688,12 +706,13 @@ export class Engine {
                 count: this.sampleCount,
             },
         });
-        // Hair pipeline with multiplicative blending (for hair over eyes)
+        // Unified hair pipeline - can be used for both over-eyes and over-non-eyes
+        // The difference is controlled by stencil state and alpha multiplier in material uniform
         this.hairMultiplyPipeline = this.device.createRenderPipeline({
-            label: "hair multiply pipeline",
+            label: "hair pipeline (over eyes)",
             layout: sharedPipelineLayout,
             vertex: {
-                module: hairMultiplyShaderModule,
+                module: hairShaderModule,
                 buffers: [
                     {
                         arrayStride: 8 * 4,
@@ -714,13 +733,12 @@ export class Engine {
                 ],
             },
             fragment: {
-                module: hairMultiplyShaderModule,
+                module: hairShaderModule,
                 targets: [
                     {
                         format: this.presentationFormat,
                         blend: {
                             color: {
-                                // Simple half-transparent overlay effect - Blend: hairColor * overlayAlpha + eyeColor * (1 - overlayAlpha)
                                 srcFactor: "src-alpha",
                                 dstFactor: "one-minus-src-alpha",
                                 operation: "add",
@@ -754,12 +772,12 @@ export class Engine {
             },
             multisample: { count: this.sampleCount },
         });
-        // Hair pipeline for opaque rendering (hair over non-eyes)
+        // Hair pipeline for opaque rendering (hair over non-eyes) - uses same shader, different stencil state
         this.hairOpaquePipeline = this.device.createRenderPipeline({
-            label: "hair opaque pipeline",
+            label: "hair pipeline (over non-eyes)",
             layout: sharedPipelineLayout,
             vertex: {
-                module: shaderModule,
+                module: hairShaderModule,
                 buffers: [
                     {
                         arrayStride: 8 * 4,
@@ -780,7 +798,7 @@ export class Engine {
                 ],
             },
             fragment: {
-                module: shaderModule,
+                module: hairShaderModule,
                 targets: [
                     {
                         format: this.presentationFormat,
@@ -1379,7 +1397,6 @@ export class Engine {
             usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
         });
         this.device.queue.writeBuffer(this.vertexBuffer, 0, vertices);
-        this.vertexCount = model.getVertexCount();
         this.jointsBuffer = this.device.createBuffer({
             label: "joints buffer",
             size: skinning.joints.byteLength,
@@ -1484,7 +1501,8 @@ export class Engine {
         };
         this.opaqueNonEyeNonHairDraws = [];
         this.eyeDraws = [];
-        this.hairDraws = [];
+        this.hairDrawsOverEyes = [];
+        this.hairDrawsOverNonEyes = [];
         this.transparentNonEyeNonHairDraws = [];
         this.opaqueNonEyeNonHairOutlineDraws = [];
         this.eyeOutlineDraws = [];
@@ -1502,11 +1520,17 @@ export class Engine {
             const materialAlpha = mat.diffuse[3];
             const EPSILON = 0.001;
             const isTransparent = materialAlpha < 1.0 - EPSILON;
-            const materialUniformData = new Float32Array(4);
+            // Create material uniform data - for hair materials, we'll create two versions
+            // MaterialUniforms struct: alpha, rimIntensity, rimPower, _padding1, rimColor (vec3), _padding2
+            const materialUniformData = new Float32Array(8);
             materialUniformData[0] = materialAlpha;
-            materialUniformData[1] = 0.0;
-            materialUniformData[2] = 0.0;
-            materialUniformData[3] = 0.0;
+            materialUniformData[1] = this.rimLightIntensity;
+            materialUniformData[2] = this.rimLightPower;
+            materialUniformData[3] = 0.0; // _padding1
+            materialUniformData[4] = this.rimLightColor[0]; // rimColor.r
+            materialUniformData[5] = this.rimLightColor[1]; // rimColor.g
+            materialUniformData[6] = this.rimLightColor[2]; // rimColor.b
+            materialUniformData[7] = 0.0; // _padding2
             const materialUniformBuffer = this.device.createBuffer({
                 label: `material uniform: ${mat.name}`,
                 size: materialUniformData.byteLength,
@@ -1538,10 +1562,77 @@ export class Engine {
                 });
             }
             else if (mat.isHair) {
-                this.hairDraws.push({
+                // For hair materials, create two bind groups: one for over-eyes (alphaMultiplier = 0.5) and one for over-non-eyes (alphaMultiplier = 1.0)
+                // Hair MaterialUniforms struct: alpha, alphaMultiplier, rimIntensity, rimPower, rimColor (vec3), _padding1
+                const materialUniformDataOverEyes = new Float32Array(8);
+                materialUniformDataOverEyes[0] = materialAlpha;
+                materialUniformDataOverEyes[1] = 0.5; // alphaMultiplier: 0.5 for over-eyes
+                materialUniformDataOverEyes[2] = this.rimLightIntensity;
+                materialUniformDataOverEyes[3] = this.rimLightPower;
+                materialUniformDataOverEyes[4] = this.rimLightColor[0]; // rimColor.r
+                materialUniformDataOverEyes[5] = this.rimLightColor[1]; // rimColor.g
+                materialUniformDataOverEyes[6] = this.rimLightColor[2]; // rimColor.b
+                materialUniformDataOverEyes[7] = 0.0; // _padding1
+                const materialUniformBufferOverEyes = this.device.createBuffer({
+                    label: `material uniform (over eyes): ${mat.name}`,
+                    size: materialUniformDataOverEyes.byteLength,
+                    usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+                });
+                this.device.queue.writeBuffer(materialUniformBufferOverEyes, 0, materialUniformDataOverEyes);
+                const bindGroupOverEyes = this.device.createBindGroup({
+                    label: `material bind group (over eyes): ${mat.name}`,
+                    layout: this.hairBindGroupLayout,
+                    entries: [
+                        { binding: 0, resource: { buffer: this.cameraUniformBuffer } },
+                        { binding: 1, resource: { buffer: this.lightUniformBuffer } },
+                        { binding: 2, resource: diffuseTexture.createView() },
+                        { binding: 3, resource: this.textureSampler },
+                        { binding: 4, resource: { buffer: this.skinMatrixBuffer } },
+                        { binding: 5, resource: toonTexture.createView() },
+                        { binding: 6, resource: this.textureSampler },
+                        { binding: 7, resource: { buffer: materialUniformBufferOverEyes } },
+                    ],
+                });
+                this.hairDrawsOverEyes.push({
                     count: matCount,
                     firstIndex: runningFirstIndex,
-                    bindGroup,
+                    bindGroup: bindGroupOverEyes,
+                    isTransparent,
+                });
+                // Create material uniform for hair over non-eyes (alphaMultiplier = 1.0)
+                const materialUniformDataOverNonEyes = new Float32Array(8);
+                materialUniformDataOverNonEyes[0] = materialAlpha;
+                materialUniformDataOverNonEyes[1] = 1.0; // alphaMultiplier: 1.0 for over-non-eyes
+                materialUniformDataOverNonEyes[2] = this.rimLightIntensity;
+                materialUniformDataOverNonEyes[3] = this.rimLightPower;
+                materialUniformDataOverNonEyes[4] = this.rimLightColor[0]; // rimColor.r
+                materialUniformDataOverNonEyes[5] = this.rimLightColor[1]; // rimColor.g
+                materialUniformDataOverNonEyes[6] = this.rimLightColor[2]; // rimColor.b
+                materialUniformDataOverNonEyes[7] = 0.0; // _padding1
+                const materialUniformBufferOverNonEyes = this.device.createBuffer({
+                    label: `material uniform (over non-eyes): ${mat.name}`,
+                    size: materialUniformDataOverNonEyes.byteLength,
+                    usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+                });
+                this.device.queue.writeBuffer(materialUniformBufferOverNonEyes, 0, materialUniformDataOverNonEyes);
+                const bindGroupOverNonEyes = this.device.createBindGroup({
+                    label: `material bind group (over non-eyes): ${mat.name}`,
+                    layout: this.hairBindGroupLayout,
+                    entries: [
+                        { binding: 0, resource: { buffer: this.cameraUniformBuffer } },
+                        { binding: 1, resource: { buffer: this.lightUniformBuffer } },
+                        { binding: 2, resource: diffuseTexture.createView() },
+                        { binding: 3, resource: this.textureSampler },
+                        { binding: 4, resource: { buffer: this.skinMatrixBuffer } },
+                        { binding: 5, resource: toonTexture.createView() },
+                        { binding: 6, resource: this.textureSampler },
+                        { binding: 7, resource: { buffer: materialUniformBufferOverNonEyes } },
+                    ],
+                });
+                this.hairDrawsOverNonEyes.push({
+                    count: matCount,
+                    firstIndex: runningFirstIndex,
+                    bindGroup: bindGroupOverNonEyes,
                     isTransparent,
                 });
             }
@@ -1702,45 +1793,55 @@ export class Engine {
                     this.drawCallCount++;
                 }
             }
-            // PASS 3a: Hair over eyes (stencil == 1, multiply blend) - Draw hair geometry first to establish depth
-            pass.setPipeline(this.hairMultiplyPipeline);
-            pass.setStencilReference(1); // Check against stencil value 1
-            for (const draw of this.hairDraws) {
-                if (draw.count > 0) {
-                    pass.setBindGroup(0, draw.bindGroup);
-                    pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
-                    this.drawCallCount++;
+            // PASS 3: Hair rendering - optimized single pass approach
+            // Since both hair passes use the same shader, we batch them together
+            // but still need separate passes due to stencil requirements (equal vs not-equal)
+            this.drawOutlines(pass, false); // Opaque outlines
+            // 3a: Hair over eyes (stencil == 1, alphaMultiplier = 0.5)
+            if (this.hairDrawsOverEyes.length > 0) {
+                pass.setPipeline(this.hairMultiplyPipeline);
+                pass.setStencilReference(1);
+                for (const draw of this.hairDrawsOverEyes) {
+                    if (draw.count > 0) {
+                        pass.setBindGroup(0, draw.bindGroup);
+                        pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
+                        this.drawCallCount++;
+                    }
                 }
             }
-            // PASS 3a.5: Hair outlines over eyes (stencil == 1, depth test to only draw near hair)
-            pass.setPipeline(this.hairOutlineOverEyesPipeline);
-            pass.setStencilReference(1); // Check against stencil value 1 (with equal test)
-            for (const draw of this.hairOutlineDraws) {
-                if (draw.count > 0) {
-                    pass.setBindGroup(0, draw.bindGroup);
-                    pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
+            // 3b: Hair over non-eyes (stencil != 1, alphaMultiplier = 1.0)
+            if (this.hairDrawsOverNonEyes.length > 0) {
+                pass.setPipeline(this.hairOpaquePipeline);
+                pass.setStencilReference(1);
+                for (const draw of this.hairDrawsOverNonEyes) {
+                    if (draw.count > 0) {
+                        pass.setBindGroup(0, draw.bindGroup);
+                        pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
+                        this.drawCallCount++;
+                    }
                 }
             }
-            // PASS 3b: Hair over non-eyes (stencil != 1, opaque)
-            pass.setPipeline(this.hairOpaquePipeline);
-            pass.setStencilReference(1); // Check against stencil value 1 (with not-equal test)
-            for (const draw of this.hairDraws) {
-                if (draw.count > 0) {
-                    pass.setBindGroup(0, draw.bindGroup);
-                    pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
-                    this.drawCallCount++;
+            // 3c: Hair outlines - batched together, only draw if outlines exist
+            if (this.hairOutlineDraws.length > 0) {
+                // Over eyes
+                pass.setPipeline(this.hairOutlineOverEyesPipeline);
+                pass.setStencilReference(1);
+                for (const draw of this.hairOutlineDraws) {
+                    if (draw.count > 0) {
+                        pass.setBindGroup(0, draw.bindGroup);
+                        pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
+                    }
                 }
-            }
-            // PASS 3b.5: Hair outlines over non-eyes (stencil != 1) - Draw hair outlines after hair geometry, so they only appear where hair exists
-            pass.setPipeline(this.hairOutlinePipeline);
-            pass.setStencilReference(1); // Check against stencil value 1 (with not-equal test)
-            for (const draw of this.hairOutlineDraws) {
-                if (draw.count > 0) {
-                    pass.setBindGroup(0, draw.bindGroup);
-                    pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
+                // Over non-eyes
+                pass.setPipeline(this.hairOutlinePipeline);
+                pass.setStencilReference(1);
+                for (const draw of this.hairOutlineDraws) {
+                    if (draw.count > 0) {
+                        pass.setBindGroup(0, draw.bindGroup);
+                        pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
+                    }
                 }
             }
-            this.drawOutlines(pass, false); // Opaque outlines
             // PASS 4: Transparent non-eye, non-hair
             pass.setPipeline(this.pipeline);
             for (const draw of this.transparentNonEyeNonHairDraws) {
@@ -2026,7 +2127,8 @@ export class Engine {
         bufferMemoryBytes += 64 * 4; // lightUniformBuffer
         const totalMaterialDraws = this.opaqueNonEyeNonHairDraws.length +
             this.eyeDraws.length +
-            this.hairDraws.length +
+            this.hairDrawsOverEyes.length +
+            this.hairDrawsOverNonEyes.length +
             this.transparentNonEyeNonHairDraws.length;
         bufferMemoryBytes += totalMaterialDraws * 4; // Material uniform buffers
         let renderTargetMemoryBytes = 0;

package/package.json CHANGED Viewed

@@ -1,10 +1,14 @@
 {
     "name": "reze-engine",
-    "version": "0.1.9",
+    "version": "0.1.11",
     "description": "A WebGPU-based MMD model renderer",
     "main": "./dist/index.js",
     "types": "./dist/index.d.ts",
     "type": "module",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/AmyangXYZ/reze-engine"
+    },
     "exports": {
         ".": {
             "types": "./dist/index.d.ts",

package/src/engine.ts CHANGED Viewed

@@ -22,7 +22,6 @@ export class Engine {
   private lightData = new Float32Array(64)
   private lightCount = 0
   private vertexBuffer!: GPUBuffer
-  private vertexCount: number = 0
   private indexBuffer?: GPUBuffer
   private resizeObserver: ResizeObserver | null = null
   private depthTexture!: GPUTexture
@@ -64,6 +63,10 @@ export class Engine {
   // Bloom settings
   public bloomThreshold: number = 0.3
   public bloomIntensity: number = 0.13
+  // Rim light settings
+  private rimLightIntensity: number = 0.35
+  private rimLightPower: number = 2.0
+  private rimLightColor: [number, number, number] = [1.0, 1.0, 1.0]
   private currentModel: Model | null = null
   private modelDir: string = ""
   private physics: Physics | null = null
@@ -156,9 +159,11 @@ export class Engine {
         struct MaterialUniforms {
           alpha: f32,
+          rimIntensity: f32,
+          rimPower: f32,
           _padding1: f32,
+          rimColor: vec3f,
           _padding2: f32,
-          _padding3: f32,
         };
         struct VertexOutput {
@@ -229,7 +234,13 @@ export class Engine {
             lightAccum += toonFactor * radiance * nDotL;
           }
-          let color = albedo * lightAccum;
+          // Rim light calculation
+          let viewDir = normalize(camera.viewPos - input.worldPos);
+          var rimFactor = 1.0 - max(dot(n, viewDir), 0.0);
+          rimFactor = pow(rimFactor, material.rimPower);
+          let rimLight = material.rimColor * material.rimIntensity * rimFactor;
+          let color = albedo * lightAccum + rimLight;
           let finalAlpha = material.alpha;
           if (finalAlpha < 0.001) {
             discard;
@@ -240,9 +251,10 @@ export class Engine {
       `,
     })
-    // Create a separate shader for hair-over-eyes that outputs pre-multiplied color for darkening effect
-    const hairMultiplyShaderModule = this.device.createShaderModule({
-      label: "hair multiply shaders",
+    // Unified hair shader that can handle both over-eyes and over-non-eyes cases
+    // Uses material.alpha multiplier to control opacity (0.5 for over-eyes, 1.0 for over-non-eyes)
+    const hairShaderModule = this.device.createShaderModule({
+      label: "unified hair shaders",
       code: /* wgsl */ `
         struct CameraUniforms {
           view: mat4x4f,
@@ -268,9 +280,11 @@ export class Engine {
         struct MaterialUniforms {
           alpha: f32,
+          alphaMultiplier: f32, // New: multiplier for alpha (0.5 for over-eyes, 1.0 for over-non-eyes)
+          rimIntensity: f32,
+          rimPower: f32,
+          rimColor: vec3f,
           _padding1: f32,
-          _padding2: f32,
-          _padding3: f32,
         };
         struct VertexOutput {
@@ -340,16 +354,19 @@ export class Engine {
             lightAccum += toonFactor * radiance * nDotL;
           }
-          let color = albedo * lightAccum;
-          let finalAlpha = material.alpha;
+          // Rim light calculation
+          let viewDir = normalize(camera.viewPos - input.worldPos);
+          var rimFactor = 1.0 - max(dot(n, viewDir), 0.0);
+          rimFactor = pow(rimFactor, material.rimPower);
+          let rimLight = material.rimColor * material.rimIntensity * rimFactor;
+          let color = albedo * lightAccum + rimLight;
+          let finalAlpha = material.alpha * material.alphaMultiplier;
           if (finalAlpha < 0.001) {
             discard;
           }
-          // For hair-over-eyes effect: simple half-transparent overlay - Use 50% opacity to create a semi-transparent hair color overlay
-          let overlayAlpha = finalAlpha * 0.5;
-          return vec4f(clamp(color, vec3f(0.0), vec3f(1.0)), overlayAlpha);
+          return vec4f(clamp(color, vec3f(0.0), vec3f(1.0)), finalAlpha);
         }
       `,
     })
@@ -754,12 +771,13 @@ export class Engine {
       },
     })
-    // Hair pipeline with multiplicative blending (for hair over eyes)
+    // Unified hair pipeline - can be used for both over-eyes and over-non-eyes
+    // The difference is controlled by stencil state and alpha multiplier in material uniform
     this.hairMultiplyPipeline = this.device.createRenderPipeline({
-      label: "hair multiply pipeline",
+      label: "hair pipeline (over eyes)",
       layout: sharedPipelineLayout,
       vertex: {
-        module: hairMultiplyShaderModule,
+        module: hairShaderModule,
         buffers: [
           {
             arrayStride: 8 * 4,
@@ -780,13 +798,12 @@ export class Engine {
         ],
       },
       fragment: {
-        module: hairMultiplyShaderModule,
+        module: hairShaderModule,
         targets: [
           {
             format: this.presentationFormat,
             blend: {
               color: {
-                // Simple half-transparent overlay effect - Blend: hairColor * overlayAlpha + eyeColor * (1 - overlayAlpha)
                 srcFactor: "src-alpha",
                 dstFactor: "one-minus-src-alpha",
                 operation: "add",
@@ -821,12 +838,12 @@ export class Engine {
       multisample: { count: this.sampleCount },
     })
-    // Hair pipeline for opaque rendering (hair over non-eyes)
+    // Hair pipeline for opaque rendering (hair over non-eyes) - uses same shader, different stencil state
     this.hairOpaquePipeline = this.device.createRenderPipeline({
-      label: "hair opaque pipeline",
+      label: "hair pipeline (over non-eyes)",
       layout: sharedPipelineLayout,
       vertex: {
-        module: shaderModule,
+        module: hairShaderModule,
         buffers: [
           {
             arrayStride: 8 * 4,
@@ -847,7 +864,7 @@ export class Engine {
         ],
       },
       fragment: {
-        module: shaderModule,
+        module: hairShaderModule,
         targets: [
           {
             format: this.presentationFormat,
@@ -1498,7 +1515,6 @@ export class Engine {
       usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
     })
     this.device.queue.writeBuffer(this.vertexBuffer, 0, vertices)
-    this.vertexCount = model.getVertexCount()
     this.jointsBuffer = this.device.createBuffer({
       label: "joints buffer",
@@ -1589,7 +1605,14 @@ export class Engine {
     isTransparent: boolean
   }[] = []
   private eyeDraws: { count: number; firstIndex: number; bindGroup: GPUBindGroup; isTransparent: boolean }[] = []
-  private hairDraws: { count: number; firstIndex: number; bindGroup: GPUBindGroup; isTransparent: boolean }[] = []
+  private hairDrawsOverEyes: { count: number; firstIndex: number; bindGroup: GPUBindGroup; isTransparent: boolean }[] =
+    []
+  private hairDrawsOverNonEyes: {
+    count: number
+    firstIndex: number
+    bindGroup: GPUBindGroup
+    isTransparent: boolean
+  }[] = []
   private transparentNonEyeNonHairDraws: {
     count: number
     firstIndex: number
@@ -1672,7 +1695,8 @@ export class Engine {
     this.opaqueNonEyeNonHairDraws = []
     this.eyeDraws = []
-    this.hairDraws = []
+    this.hairDrawsOverEyes = []
+    this.hairDrawsOverNonEyes = []
     this.transparentNonEyeNonHairDraws = []
     this.opaqueNonEyeNonHairOutlineDraws = []
     this.eyeOutlineDraws = []
@@ -1693,11 +1717,17 @@ export class Engine {
       const EPSILON = 0.001
       const isTransparent = materialAlpha < 1.0 - EPSILON
-      const materialUniformData = new Float32Array(4)
+      // Create material uniform data - for hair materials, we'll create two versions
+      // MaterialUniforms struct: alpha, rimIntensity, rimPower, _padding1, rimColor (vec3), _padding2
+      const materialUniformData = new Float32Array(8)
       materialUniformData[0] = materialAlpha
-      materialUniformData[1] = 0.0
-      materialUniformData[2] = 0.0
-      materialUniformData[3] = 0.0
+      materialUniformData[1] = this.rimLightIntensity
+      materialUniformData[2] = this.rimLightPower
+      materialUniformData[3] = 0.0 // _padding1
+      materialUniformData[4] = this.rimLightColor[0] // rimColor.r
+      materialUniformData[5] = this.rimLightColor[1] // rimColor.g
+      materialUniformData[6] = this.rimLightColor[2] // rimColor.b
+      materialUniformData[7] = 0.0 // _padding2
       const materialUniformBuffer = this.device.createBuffer({
         label: `material uniform: ${mat.name}`,
@@ -1731,10 +1761,84 @@ export class Engine {
           isTransparent,
         })
       } else if (mat.isHair) {
-        this.hairDraws.push({
+        // For hair materials, create two bind groups: one for over-eyes (alphaMultiplier = 0.5) and one for over-non-eyes (alphaMultiplier = 1.0)
+        // Hair MaterialUniforms struct: alpha, alphaMultiplier, rimIntensity, rimPower, rimColor (vec3), _padding1
+        const materialUniformDataOverEyes = new Float32Array(8)
+        materialUniformDataOverEyes[0] = materialAlpha
+        materialUniformDataOverEyes[1] = 0.5 // alphaMultiplier: 0.5 for over-eyes
+        materialUniformDataOverEyes[2] = this.rimLightIntensity
+        materialUniformDataOverEyes[3] = this.rimLightPower
+        materialUniformDataOverEyes[4] = this.rimLightColor[0] // rimColor.r
+        materialUniformDataOverEyes[5] = this.rimLightColor[1] // rimColor.g
+        materialUniformDataOverEyes[6] = this.rimLightColor[2] // rimColor.b
+        materialUniformDataOverEyes[7] = 0.0 // _padding1
+        const materialUniformBufferOverEyes = this.device.createBuffer({
+          label: `material uniform (over eyes): ${mat.name}`,
+          size: materialUniformDataOverEyes.byteLength,
+          usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        })
+        this.device.queue.writeBuffer(materialUniformBufferOverEyes, 0, materialUniformDataOverEyes)
+        const bindGroupOverEyes = this.device.createBindGroup({
+          label: `material bind group (over eyes): ${mat.name}`,
+          layout: this.hairBindGroupLayout,
+          entries: [
+            { binding: 0, resource: { buffer: this.cameraUniformBuffer } },
+            { binding: 1, resource: { buffer: this.lightUniformBuffer } },
+            { binding: 2, resource: diffuseTexture.createView() },
+            { binding: 3, resource: this.textureSampler },
+            { binding: 4, resource: { buffer: this.skinMatrixBuffer! } },
+            { binding: 5, resource: toonTexture.createView() },
+            { binding: 6, resource: this.textureSampler },
+            { binding: 7, resource: { buffer: materialUniformBufferOverEyes } },
+          ],
+        })
+        this.hairDrawsOverEyes.push({
           count: matCount,
           firstIndex: runningFirstIndex,
-          bindGroup,
+          bindGroup: bindGroupOverEyes,
+          isTransparent,
+        })
+        // Create material uniform for hair over non-eyes (alphaMultiplier = 1.0)
+        const materialUniformDataOverNonEyes = new Float32Array(8)
+        materialUniformDataOverNonEyes[0] = materialAlpha
+        materialUniformDataOverNonEyes[1] = 1.0 // alphaMultiplier: 1.0 for over-non-eyes
+        materialUniformDataOverNonEyes[2] = this.rimLightIntensity
+        materialUniformDataOverNonEyes[3] = this.rimLightPower
+        materialUniformDataOverNonEyes[4] = this.rimLightColor[0] // rimColor.r
+        materialUniformDataOverNonEyes[5] = this.rimLightColor[1] // rimColor.g
+        materialUniformDataOverNonEyes[6] = this.rimLightColor[2] // rimColor.b
+        materialUniformDataOverNonEyes[7] = 0.0 // _padding1
+        const materialUniformBufferOverNonEyes = this.device.createBuffer({
+          label: `material uniform (over non-eyes): ${mat.name}`,
+          size: materialUniformDataOverNonEyes.byteLength,
+          usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        })
+        this.device.queue.writeBuffer(materialUniformBufferOverNonEyes, 0, materialUniformDataOverNonEyes)
+        const bindGroupOverNonEyes = this.device.createBindGroup({
+          label: `material bind group (over non-eyes): ${mat.name}`,
+          layout: this.hairBindGroupLayout,
+          entries: [
+            { binding: 0, resource: { buffer: this.cameraUniformBuffer } },
+            { binding: 1, resource: { buffer: this.lightUniformBuffer } },
+            { binding: 2, resource: diffuseTexture.createView() },
+            { binding: 3, resource: this.textureSampler },
+            { binding: 4, resource: { buffer: this.skinMatrixBuffer! } },
+            { binding: 5, resource: toonTexture.createView() },
+            { binding: 6, resource: this.textureSampler },
+            { binding: 7, resource: { buffer: materialUniformBufferOverNonEyes } },
+          ],
+        })
+        this.hairDrawsOverNonEyes.push({
+          count: matCount,
+          firstIndex: runningFirstIndex,
+          bindGroup: bindGroupOverNonEyes,
           isTransparent,
         })
       } else if (isTransparent) {
@@ -1910,50 +2014,61 @@ export class Engine {
         }
       }
-      // PASS 3a: Hair over eyes (stencil == 1, multiply blend) - Draw hair geometry first to establish depth
-      pass.setPipeline(this.hairMultiplyPipeline)
-      pass.setStencilReference(1) // Check against stencil value 1
-      for (const draw of this.hairDraws) {
-        if (draw.count > 0) {
-          pass.setBindGroup(0, draw.bindGroup)
-          pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0)
-          this.drawCallCount++
+      // PASS 3: Hair rendering - optimized single pass approach
+      // Since both hair passes use the same shader, we batch them together
+      // but still need separate passes due to stencil requirements (equal vs not-equal)
+      this.drawOutlines(pass, false) // Opaque outlines
+      // 3a: Hair over eyes (stencil == 1, alphaMultiplier = 0.5)
+      if (this.hairDrawsOverEyes.length > 0) {
+        pass.setPipeline(this.hairMultiplyPipeline)
+        pass.setStencilReference(1)
+        for (const draw of this.hairDrawsOverEyes) {
+          if (draw.count > 0) {
+            pass.setBindGroup(0, draw.bindGroup)
+            pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0)
+            this.drawCallCount++
+          }
         }
       }
-      // PASS 3a.5: Hair outlines over eyes (stencil == 1, depth test to only draw near hair)
-      pass.setPipeline(this.hairOutlineOverEyesPipeline)
-      pass.setStencilReference(1) // Check against stencil value 1 (with equal test)
-      for (const draw of this.hairOutlineDraws) {
-        if (draw.count > 0) {
-          pass.setBindGroup(0, draw.bindGroup)
-          pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0)
+      // 3b: Hair over non-eyes (stencil != 1, alphaMultiplier = 1.0)
+      if (this.hairDrawsOverNonEyes.length > 0) {
+        pass.setPipeline(this.hairOpaquePipeline)
+        pass.setStencilReference(1)
+        for (const draw of this.hairDrawsOverNonEyes) {
+          if (draw.count > 0) {
+            pass.setBindGroup(0, draw.bindGroup)
+            pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0)
+            this.drawCallCount++
+          }
         }
       }
-      // PASS 3b: Hair over non-eyes (stencil != 1, opaque)
-      pass.setPipeline(this.hairOpaquePipeline)
-      pass.setStencilReference(1) // Check against stencil value 1 (with not-equal test)
-      for (const draw of this.hairDraws) {
-        if (draw.count > 0) {
-          pass.setBindGroup(0, draw.bindGroup)
-          pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0)
-          this.drawCallCount++
+      // 3c: Hair outlines - batched together, only draw if outlines exist
+      if (this.hairOutlineDraws.length > 0) {
+        // Over eyes
+        pass.setPipeline(this.hairOutlineOverEyesPipeline)
+        pass.setStencilReference(1)
+        for (const draw of this.hairOutlineDraws) {
+          if (draw.count > 0) {
+            pass.setBindGroup(0, draw.bindGroup)
+            pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0)
+          }
         }
-      }
-      // PASS 3b.5: Hair outlines over non-eyes (stencil != 1) - Draw hair outlines after hair geometry, so they only appear where hair exists
-      pass.setPipeline(this.hairOutlinePipeline)
-      pass.setStencilReference(1) // Check against stencil value 1 (with not-equal test)
-      for (const draw of this.hairOutlineDraws) {
-        if (draw.count > 0) {
-          pass.setBindGroup(0, draw.bindGroup)
-          pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0)
+        // Over non-eyes
+        pass.setPipeline(this.hairOutlinePipeline)
+        pass.setStencilReference(1)
+        for (const draw of this.hairOutlineDraws) {
+          if (draw.count > 0) {
+            pass.setBindGroup(0, draw.bindGroup)
+            pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0)
+          }
         }
       }
-      this.drawOutlines(pass, false) // Opaque outlines
       // PASS 4: Transparent non-eye, non-hair
       pass.setPipeline(this.pipeline)
       for (const draw of this.transparentNonEyeNonHairDraws) {
@@ -2282,7 +2397,8 @@ export class Engine {
     const totalMaterialDraws =
       this.opaqueNonEyeNonHairDraws.length +
       this.eyeDraws.length +
-      this.hairDraws.length +
+      this.hairDrawsOverEyes.length +
+      this.hairDrawsOverNonEyes.length +
       this.transparentNonEyeNonHairDraws.length
     bufferMemoryBytes += totalMaterialDraws * 4 // Material uniform buffers