reze-engine 0.2.4 → 0.2.5
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.
- package/README.md +104 -104
- package/dist/engine.d.ts +11 -8
- package/dist/engine.d.ts.map +1 -1
- package/dist/engine.js +530 -589
- package/package.json +1 -1
- package/src/camera.ts +358 -358
- package/src/engine.ts +2414 -2475
- package/src/math.ts +546 -546
- package/src/model.ts +421 -421
- package/src/pmx-loader.ts +1054 -1054
- package/src/vmd-loader.ts +179 -179
package/README.md
CHANGED
|
@@ -1,104 +1,104 @@
|
|
|
1
|
-
# Reze Engine
|
|
2
|
-
|
|
3
|
-
A lightweight engine built with WebGPU and TypeScript for real-time 3D anime character MMD model rendering.
|
|
4
|
-
|
|
5
|
-
## Features
|
|
6
|
-
|
|
7
|
-
- Physics
|
|
8
|
-
- Alpha blending
|
|
9
|
-
- Post alpha eye rendering
|
|
10
|
-
- Rim lighting
|
|
11
|
-
- Bloom
|
|
12
|
-
- Outlines
|
|
13
|
-
- Toon shading with directional lights
|
|
14
|
-
- MSAA 4x anti-aliasing
|
|
15
|
-
- GPU-accelerated skinning
|
|
16
|
-
- Bone rotation api
|
|
17
|
-
|
|
18
|
-
## Usage
|
|
19
|
-
|
|
20
|
-
```typescript
|
|
21
|
-
export default function Home() {
|
|
22
|
-
const canvasRef = useRef<HTMLCanvasElement>(null)
|
|
23
|
-
const engineRef = useRef<Engine | null>(null)
|
|
24
|
-
const [engineError, setEngineError] = useState<string | null>(null)
|
|
25
|
-
const [loading, setLoading] = useState(true)
|
|
26
|
-
const [stats, setStats] = useState<EngineStats>({
|
|
27
|
-
fps: 0,
|
|
28
|
-
frameTime: 0,
|
|
29
|
-
gpuMemory: 0,
|
|
30
|
-
})
|
|
31
|
-
const [progress, setProgress] = useState(0)
|
|
32
|
-
|
|
33
|
-
const initEngine = useCallback(async () => {
|
|
34
|
-
if (canvasRef.current) {
|
|
35
|
-
// Initialize engine
|
|
36
|
-
try {
|
|
37
|
-
const engine = new Engine(canvasRef.current)
|
|
38
|
-
engineRef.current = engine
|
|
39
|
-
await engine.init()
|
|
40
|
-
await engine.loadModel("/models/塞尔凯特/塞尔凯特.pmx")
|
|
41
|
-
setLoading(false)
|
|
42
|
-
|
|
43
|
-
engine.runRenderLoop(() => {
|
|
44
|
-
setStats(engine.getStats())
|
|
45
|
-
})
|
|
46
|
-
} catch (error) {
|
|
47
|
-
setEngineError(error instanceof Error ? error.message : "Unknown error")
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
}, [])
|
|
51
|
-
|
|
52
|
-
useEffect(() => {
|
|
53
|
-
void (async () => {
|
|
54
|
-
initEngine()
|
|
55
|
-
})()
|
|
56
|
-
|
|
57
|
-
// Cleanup on unmount
|
|
58
|
-
return () => {
|
|
59
|
-
if (engineRef.current) {
|
|
60
|
-
engineRef.current.dispose()
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
}, [initEngine])
|
|
64
|
-
|
|
65
|
-
useEffect(() => {
|
|
66
|
-
if (loading) {
|
|
67
|
-
const interval = setInterval(() => {
|
|
68
|
-
setProgress((prev) => {
|
|
69
|
-
if (prev >= 100) {
|
|
70
|
-
return 0
|
|
71
|
-
}
|
|
72
|
-
return prev + 1
|
|
73
|
-
})
|
|
74
|
-
}, 50)
|
|
75
|
-
|
|
76
|
-
return () => clearInterval(interval)
|
|
77
|
-
}
|
|
78
|
-
}, [loading])
|
|
79
|
-
|
|
80
|
-
return (
|
|
81
|
-
<div
|
|
82
|
-
className="fixed inset-0 w-full h-full overflow-hidden touch-none"
|
|
83
|
-
style={{
|
|
84
|
-
background:
|
|
85
|
-
"radial-gradient(ellipse at center, rgba(35, 35, 45, 0.8) 0%, rgba(35, 35, 45, 0.8) 8%, rgba(8, 8, 12, 0.95) 65%, rgba(0, 0, 0, 1) 100%)",
|
|
86
|
-
}}
|
|
87
|
-
>
|
|
88
|
-
<Header stats={stats} />
|
|
89
|
-
|
|
90
|
-
{engineError && (
|
|
91
|
-
<div className="absolute inset-0 w-full h-full flex items-center justify-center text-white p-6">
|
|
92
|
-
Engine Error: {engineError}
|
|
93
|
-
</div>
|
|
94
|
-
)}
|
|
95
|
-
{loading && !engineError && (
|
|
96
|
-
<div className="absolute inset-0 max-w-xs mx-auto w-full h-full flex items-center justify-center text-white p-6">
|
|
97
|
-
<Progress value={progress} className="rounded-none" />
|
|
98
|
-
</div>
|
|
99
|
-
)}
|
|
100
|
-
<canvas ref={canvasRef} className="absolute inset-0 w-full h-full touch-none z-1" />
|
|
101
|
-
</div>
|
|
102
|
-
)
|
|
103
|
-
}
|
|
104
|
-
```
|
|
1
|
+
# Reze Engine
|
|
2
|
+
|
|
3
|
+
A lightweight engine built with WebGPU and TypeScript for real-time 3D anime character MMD model rendering.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- Physics
|
|
8
|
+
- Alpha blending
|
|
9
|
+
- Post alpha eye rendering
|
|
10
|
+
- Rim lighting
|
|
11
|
+
- Bloom
|
|
12
|
+
- Outlines
|
|
13
|
+
- Toon shading with directional lights
|
|
14
|
+
- MSAA 4x anti-aliasing
|
|
15
|
+
- GPU-accelerated skinning
|
|
16
|
+
- Bone rotation api
|
|
17
|
+
|
|
18
|
+
## Usage
|
|
19
|
+
|
|
20
|
+
```typescript
|
|
21
|
+
export default function Home() {
|
|
22
|
+
const canvasRef = useRef<HTMLCanvasElement>(null)
|
|
23
|
+
const engineRef = useRef<Engine | null>(null)
|
|
24
|
+
const [engineError, setEngineError] = useState<string | null>(null)
|
|
25
|
+
const [loading, setLoading] = useState(true)
|
|
26
|
+
const [stats, setStats] = useState<EngineStats>({
|
|
27
|
+
fps: 0,
|
|
28
|
+
frameTime: 0,
|
|
29
|
+
gpuMemory: 0,
|
|
30
|
+
})
|
|
31
|
+
const [progress, setProgress] = useState(0)
|
|
32
|
+
|
|
33
|
+
const initEngine = useCallback(async () => {
|
|
34
|
+
if (canvasRef.current) {
|
|
35
|
+
// Initialize engine
|
|
36
|
+
try {
|
|
37
|
+
const engine = new Engine(canvasRef.current)
|
|
38
|
+
engineRef.current = engine
|
|
39
|
+
await engine.init()
|
|
40
|
+
await engine.loadModel("/models/塞尔凯特/塞尔凯特.pmx")
|
|
41
|
+
setLoading(false)
|
|
42
|
+
|
|
43
|
+
engine.runRenderLoop(() => {
|
|
44
|
+
setStats(engine.getStats())
|
|
45
|
+
})
|
|
46
|
+
} catch (error) {
|
|
47
|
+
setEngineError(error instanceof Error ? error.message : "Unknown error")
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
}, [])
|
|
51
|
+
|
|
52
|
+
useEffect(() => {
|
|
53
|
+
void (async () => {
|
|
54
|
+
initEngine()
|
|
55
|
+
})()
|
|
56
|
+
|
|
57
|
+
// Cleanup on unmount
|
|
58
|
+
return () => {
|
|
59
|
+
if (engineRef.current) {
|
|
60
|
+
engineRef.current.dispose()
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
}, [initEngine])
|
|
64
|
+
|
|
65
|
+
useEffect(() => {
|
|
66
|
+
if (loading) {
|
|
67
|
+
const interval = setInterval(() => {
|
|
68
|
+
setProgress((prev) => {
|
|
69
|
+
if (prev >= 100) {
|
|
70
|
+
return 0
|
|
71
|
+
}
|
|
72
|
+
return prev + 1
|
|
73
|
+
})
|
|
74
|
+
}, 50)
|
|
75
|
+
|
|
76
|
+
return () => clearInterval(interval)
|
|
77
|
+
}
|
|
78
|
+
}, [loading])
|
|
79
|
+
|
|
80
|
+
return (
|
|
81
|
+
<div
|
|
82
|
+
className="fixed inset-0 w-full h-full overflow-hidden touch-none"
|
|
83
|
+
style={{
|
|
84
|
+
background:
|
|
85
|
+
"radial-gradient(ellipse at center, rgba(35, 35, 45, 0.8) 0%, rgba(35, 35, 45, 0.8) 8%, rgba(8, 8, 12, 0.95) 65%, rgba(0, 0, 0, 1) 100%)",
|
|
86
|
+
}}
|
|
87
|
+
>
|
|
88
|
+
<Header stats={stats} />
|
|
89
|
+
|
|
90
|
+
{engineError && (
|
|
91
|
+
<div className="absolute inset-0 w-full h-full flex items-center justify-center text-white p-6">
|
|
92
|
+
Engine Error: {engineError}
|
|
93
|
+
</div>
|
|
94
|
+
)}
|
|
95
|
+
{loading && !engineError && (
|
|
96
|
+
<div className="absolute inset-0 max-w-xs mx-auto w-full h-full flex items-center justify-center text-white p-6">
|
|
97
|
+
<Progress value={progress} className="rounded-none" />
|
|
98
|
+
</div>
|
|
99
|
+
)}
|
|
100
|
+
<canvas ref={canvasRef} className="absolute inset-0 w-full h-full touch-none z-1" />
|
|
101
|
+
</div>
|
|
102
|
+
)
|
|
103
|
+
}
|
|
104
|
+
```
|
package/dist/engine.d.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { Camera } from "./camera";
|
|
2
1
|
import { Quat } from "./math";
|
|
3
2
|
export type EngineOptions = {
|
|
4
3
|
ambient?: number;
|
|
@@ -15,7 +14,7 @@ export declare class Engine {
|
|
|
15
14
|
private device;
|
|
16
15
|
private context;
|
|
17
16
|
private presentationFormat;
|
|
18
|
-
camera
|
|
17
|
+
private camera;
|
|
19
18
|
private cameraUniformBuffer;
|
|
20
19
|
private cameraMatrixData;
|
|
21
20
|
private lightUniformBuffer;
|
|
@@ -25,14 +24,14 @@ export declare class Engine {
|
|
|
25
24
|
private indexBuffer?;
|
|
26
25
|
private resizeObserver;
|
|
27
26
|
private depthTexture;
|
|
28
|
-
private
|
|
27
|
+
private modelPipeline;
|
|
29
28
|
private outlinePipeline;
|
|
30
|
-
private
|
|
31
|
-
private
|
|
32
|
-
private
|
|
29
|
+
private hairOutlinePipeline;
|
|
30
|
+
private hairPipelineOverEyes;
|
|
31
|
+
private hairPipelineOverNonEyes;
|
|
33
32
|
private hairDepthPipeline;
|
|
34
33
|
private eyePipeline;
|
|
35
|
-
private
|
|
34
|
+
private mainBindGroupLayout;
|
|
36
35
|
private outlineBindGroupLayout;
|
|
37
36
|
private jointsBuffer;
|
|
38
37
|
private weightsBuffer;
|
|
@@ -45,6 +44,9 @@ export declare class Engine {
|
|
|
45
44
|
private multisampleTexture;
|
|
46
45
|
private readonly sampleCount;
|
|
47
46
|
private renderPassDescriptor;
|
|
47
|
+
private readonly STENCIL_EYE_VALUE;
|
|
48
|
+
private readonly COMPUTE_WORKGROUP_SIZE;
|
|
49
|
+
private readonly BLOOM_DOWNSCALE_FACTOR;
|
|
48
50
|
private ambient;
|
|
49
51
|
private sceneRenderTexture;
|
|
50
52
|
private sceneRenderTextureView;
|
|
@@ -72,7 +74,6 @@ export declare class Engine {
|
|
|
72
74
|
private physics;
|
|
73
75
|
private textureSampler;
|
|
74
76
|
private textureCache;
|
|
75
|
-
private textureSizes;
|
|
76
77
|
private lastFpsUpdate;
|
|
77
78
|
private framesSinceLastUpdate;
|
|
78
79
|
private frameTimeSamples;
|
|
@@ -84,6 +85,7 @@ export declare class Engine {
|
|
|
84
85
|
private renderLoopCallback;
|
|
85
86
|
private animationFrames;
|
|
86
87
|
private animationTimeouts;
|
|
88
|
+
private gpuMemoryMB;
|
|
87
89
|
constructor(canvas: HTMLCanvasElement, options?: EngineOptions);
|
|
88
90
|
init(): Promise<void>;
|
|
89
91
|
private createPipelines;
|
|
@@ -126,5 +128,6 @@ export declare class Engine {
|
|
|
126
128
|
private computeSkinMatrices;
|
|
127
129
|
private drawOutlines;
|
|
128
130
|
private updateStats;
|
|
131
|
+
private calculateGpuMemory;
|
|
129
132
|
}
|
|
130
133
|
//# sourceMappingURL=engine.d.ts.map
|
package/dist/engine.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"engine.d.ts","sourceRoot":"","sources":["../src/engine.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"engine.d.ts","sourceRoot":"","sources":["../src/engine.ts"],"names":[],"mappings":"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"}
|