reze-engine 0.1.0 → 0.1.2
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 +97 -1
- package/dist/engine.d.ts +2 -1
- package/dist/engine.d.ts.map +1 -1
- package/dist/engine.js +3 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/package.json +1 -1
- package/src/engine.ts +4 -0
- package/src/index.ts +1 -0
package/README.md
CHANGED
|
@@ -1,3 +1,99 @@
|
|
|
1
1
|
# Reze Engine
|
|
2
2
|
|
|
3
|
-
A lightweight engine built with WebGPU and TypeScript for real-time 3D anime character
|
|
3
|
+
A lightweight engine built with WebGPU and TypeScript for real-time 3D anime character MMD model rendering.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```typescript
|
|
8
|
+
export default function Home() {
|
|
9
|
+
const canvasRef = useRef<HTMLCanvasElement>(null)
|
|
10
|
+
const engineRef = useRef<Engine | null>(null)
|
|
11
|
+
const [engineError, setEngineError] = useState<string | null>(null)
|
|
12
|
+
const [loading, setLoading] = useState(true)
|
|
13
|
+
const [stats, setStats] = useState<EngineStats>({
|
|
14
|
+
fps: 0,
|
|
15
|
+
frameTime: 0,
|
|
16
|
+
memoryUsed: 0,
|
|
17
|
+
drawCalls: 0,
|
|
18
|
+
vertices: 0,
|
|
19
|
+
triangles: 0,
|
|
20
|
+
materials: 0,
|
|
21
|
+
textures: 0,
|
|
22
|
+
textureMemory: 0,
|
|
23
|
+
bufferMemory: 0,
|
|
24
|
+
gpuMemory: 0,
|
|
25
|
+
})
|
|
26
|
+
const [progress, setProgress] = useState(0)
|
|
27
|
+
|
|
28
|
+
const initEngine = useCallback(async () => {
|
|
29
|
+
if (canvasRef.current) {
|
|
30
|
+
// Initialize engine
|
|
31
|
+
try {
|
|
32
|
+
const engine = new Engine(canvasRef.current)
|
|
33
|
+
engineRef.current = engine
|
|
34
|
+
await engine.init()
|
|
35
|
+
await engine.loadModel("/models/塞尔凯特/塞尔凯特.pmx")
|
|
36
|
+
setLoading(false)
|
|
37
|
+
|
|
38
|
+
engine.runRenderLoop(() => {
|
|
39
|
+
setStats(engine.getStats())
|
|
40
|
+
})
|
|
41
|
+
} catch (error) {
|
|
42
|
+
setEngineError(error instanceof Error ? error.message : "Unknown error")
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}, [])
|
|
46
|
+
|
|
47
|
+
useEffect(() => {
|
|
48
|
+
void (async () => {
|
|
49
|
+
initEngine()
|
|
50
|
+
})()
|
|
51
|
+
|
|
52
|
+
// Cleanup on unmount
|
|
53
|
+
return () => {
|
|
54
|
+
if (engineRef.current) {
|
|
55
|
+
engineRef.current.dispose()
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}, [initEngine])
|
|
59
|
+
|
|
60
|
+
useEffect(() => {
|
|
61
|
+
if (loading) {
|
|
62
|
+
const interval = setInterval(() => {
|
|
63
|
+
setProgress((prev) => {
|
|
64
|
+
if (prev >= 100) {
|
|
65
|
+
return 0
|
|
66
|
+
}
|
|
67
|
+
return prev + 1
|
|
68
|
+
})
|
|
69
|
+
}, 50)
|
|
70
|
+
|
|
71
|
+
return () => clearInterval(interval)
|
|
72
|
+
}
|
|
73
|
+
}, [loading])
|
|
74
|
+
|
|
75
|
+
return (
|
|
76
|
+
<div
|
|
77
|
+
className="fixed inset-0 w-full h-full overflow-hidden touch-none"
|
|
78
|
+
style={{
|
|
79
|
+
background:
|
|
80
|
+
"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%)",
|
|
81
|
+
}}
|
|
82
|
+
>
|
|
83
|
+
<Header stats={stats} />
|
|
84
|
+
|
|
85
|
+
{engineError && (
|
|
86
|
+
<div className="absolute inset-0 w-full h-full flex items-center justify-center text-white p-6">
|
|
87
|
+
Engine Error: {engineError}
|
|
88
|
+
</div>
|
|
89
|
+
)}
|
|
90
|
+
{loading && !engineError && (
|
|
91
|
+
<div className="absolute inset-0 max-w-xs mx-auto w-full h-full flex items-center justify-center text-white p-6">
|
|
92
|
+
<Progress value={progress} className="rounded-none" />
|
|
93
|
+
</div>
|
|
94
|
+
)}
|
|
95
|
+
<canvas ref={canvasRef} className="absolute inset-0 w-full h-full touch-none z-1" />
|
|
96
|
+
</div>
|
|
97
|
+
)
|
|
98
|
+
}
|
|
99
|
+
```
|
package/dist/engine.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Camera } from "./camera";
|
|
2
|
-
import { Vec3 } from "./math";
|
|
2
|
+
import { Quat, Vec3 } from "./math";
|
|
3
3
|
export interface EngineStats {
|
|
4
4
|
fps: number;
|
|
5
5
|
frameTime: number;
|
|
@@ -71,6 +71,7 @@ export declare class Engine {
|
|
|
71
71
|
stopRenderLoop(): void;
|
|
72
72
|
dispose(): void;
|
|
73
73
|
loadModel(path: string): Promise<void>;
|
|
74
|
+
rotateBones(bones: string[], rotations: Quat[], duration: number): void;
|
|
74
75
|
private setupModelBuffers;
|
|
75
76
|
private materialDraws;
|
|
76
77
|
private outlineDraws;
|
package/dist/engine.d.ts.map
CHANGED
|
@@ -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,
|
|
1
|
+
{"version":3,"file":"engine.d.ts","sourceRoot":"","sources":["../src/engine.ts"],"names":[],"mappings":"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"}
|
package/dist/engine.js
CHANGED
|
@@ -564,6 +564,9 @@ export class Engine {
|
|
|
564
564
|
new Quat(-1.0, -0.3, 0.0, 1),
|
|
565
565
|
], 1000);
|
|
566
566
|
}
|
|
567
|
+
rotateBones(bones, rotations, duration) {
|
|
568
|
+
this.currentModel?.rotateBones(bones, rotations, duration);
|
|
569
|
+
}
|
|
567
570
|
// Step 7: Create vertex, index, and joint buffers
|
|
568
571
|
async setupModelBuffers(model) {
|
|
569
572
|
this.currentModel = model;
|
package/dist/index.d.ts
CHANGED
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AACnD,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA"}
|
package/dist/index.js
CHANGED
package/package.json
CHANGED
package/src/engine.ts
CHANGED
|
@@ -649,6 +649,10 @@ export class Engine {
|
|
|
649
649
|
)
|
|
650
650
|
}
|
|
651
651
|
|
|
652
|
+
public rotateBones(bones: string[], rotations: Quat[], duration: number) {
|
|
653
|
+
this.currentModel?.rotateBones(bones, rotations, duration)
|
|
654
|
+
}
|
|
655
|
+
|
|
652
656
|
// Step 7: Create vertex, index, and joint buffers
|
|
653
657
|
private async setupModelBuffers(model: Model) {
|
|
654
658
|
this.currentModel = model
|
package/src/index.ts
CHANGED