-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
298 lines (291 loc) · 12.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>Silent Hill Museum</title>
<meta name="title" content="Silent Hill Museum">
<meta name="description" content="Silent Hill Museum is a historical archive of Silent Hill assets.">
<meta name="author" content="Laura Ann">
<meta name="keywords"
content="Silent Hill Museum, Silent Hill, Silent Hill 2, Restless Dreams, model files, historical archive, video game, Konami, file formats, 3D models">
<meta property="og:title" content="Silent Hill Museum">
<meta property="og:description" content="Explore the Silent Hill Museum, a historical archive of Silent Hill assets.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://silenthillmuseum.org">
<meta property="og:image" content="https://silenthillmuseum.com/images/screenshot.png">
<meta property="og:image:alt" content="A 3D render of the ominous music box from Silent Hill 2">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="canonical" href="https://silenthillmuseum.org/">
<link rel="stylesheet" href="/style.css?v=<%= appVersion %>">
</head>
<body class="viewing">
<div id="app"></div>
<div id="overlay">
<p>silent hill model museum</p>
<p>
version <%= appVersion %>
</p>
<p><a id="open-about-modal" href="#">about this project</a></p>
<p class="accent"><a href="https://dev.silenthillmuseum.org/">devlog</a> [new!]</p>
</div>
<div id="blur-background"></div>
<div id="about-modal" class="modal">
<div class="about-modal-header">
<img alt="Silent Hill Museum" src="/images/wordart.png" />
<img alt="The mysterious music box from Silent Hill 2" src="/images/org.mdl.png" />
</div>
<h1>what is this project?</h1>
<p>
this is a historical archive of a file format in silent hill.
</p>
<p>
right now, it just contains every model (.mdl) file in silent hill 2 restless dreams (pc).
</p>
<p>
these source files are not easy to read; they are mazes of binary, made specifically for konami.
each model here has been reverse-engineered from scratch.</p>
<p>the goal of this effort is to preserve knowledge of these models and how they work, forever.</p>
<h1>how do i use it?</h1>
<p>
use the "next file" and "previous file" buttons in the data controls to find a file you like.
move the camera around by dragging on the screen.
on a computer, try pressing <kbd>k</kbd> to see the keyboard controls.
</p>
<p>play around with the different options and explore the museum!</p>
<h1>is it finished?</h1>
<p>
it's close, but there is still a lot of mystery. i would absolutely love if you can
contribute on <a href="https://github.com/laura-a-n-n/silent-hill-museum">github</a>.
</p>
<h1>what features are planned?</h1>
<p>
a future goal is to add more file formats, including maps and animations,
and formats for other games in the silent hill series.
</p>
<h1>how does it work?</h1>
<p>
it parses the mdl files directly in your browser and renders them using
the <a href="https://threejs.org/">three.js</a> library.
</p>
<p>
i've documented the vast majority of the mdl file format by representing it in
<a href="https://kaitai.io">kaitai struct</a>, a declarative binary parsing
language.
</p>
<p>
the ksy file is compiled into a javascript parser and typescript definitions,
allowing the kaitai js runtime to bring this theater to you.
</p>
<h1>how can i explore the mdl format further?</h1>
<p>
one way is to use the <a href="https://ide.kaitai.io/">kaitai ide</a>.
upload the
<a href="https://github.com/laura-a-n-n/silent-hill-museum/blob/main/ksy/mdl.ksy">ksy file</a>
to the ide, and also drag & drop your favorite mdl file in.
</p>
<p>
alternatively, if you're ok using typescript, i recommend downloading
the repo and checking out how
<a href="https://github.com/laura-a-n-n/silent-hill-museum/blob/main/src/model.ts">model.ts</a>
works.
</p>
<h1>can i use this for commercial purposes?</h1>
<p>do not.</p>
<p>
please adhere to konami's
<a href="https://eu-support.konami.com/hc/en-gb/articles/9648771731479-Copyrights-Career-Opportunities-Goodies">
policy on copyrighted materials</a>:
</p>
<blockquote>
<p>
Generally, Konami Digital Entertainment B.V. does not object to fans using
copyrighted materials for non-commercial purposes, and in a manner which does
not intentionally spoil the plot of a game for other players.
</p>
<p>
By "non-commercial" we mean that you cannot use our copyrighted material to
promote a product you are selling or making any profit from, like wallpapers,
t-shirts, skins for electronic devices, etc. nor can you use it to monetise a
website or a media channel.
</p>
</blockquote>
<h1>who made this?</h1>
<p>
team silent created all of the amazing art you see here.
<a href="https://github.com/laura-a-n-n">laura ann</a> wrote the code for this website.
but i couldn't have done this without the efforts of some people on the internet,
whose resources have been invaluable:
</p>
<ul>
<li>
<a href="https://github.com/Quaker762">quaker762</a>
and <a href="https://github.com/GirianSeed">girianseed</a>, who published
<a href="https://github.com/Palm-Studios/sh2_source">sh2_source</a>,
a repository containing the dwarf debug symbols of silent hill 2.
</li>
<li>
quaker762 also published an initial
<a
href="https://github.com/Quaker762/SilentHillDatabase/blob/c1e5933a04f7878cc529fce6d02d1157b3516c3d/SH2/Files/mdl.md">
write-up</a> of the mdl file format.
</li>
<li>
<a href="https://github.com/iOrange">iorange</a>, who very recently made
<a href="https://github.com/iOrange/sh2tex">sh2tex</a>,
which is a really excellent texture extractor for silent hill 2.
pretty much all the work done on textures here is directly from them.
</li>
<li>
<a href="https://github.com/Murugo">murugo</a>, who independently built a complete
<a
href="https://github.com/Murugo/Misc-Game-Research/tree/main/PS2/Silent%20Hill%202%2B3/Blender/addons/io_sh2_sh3">blender
addon</a>
for both ps2 and pc models! he helped me fix the normals as of v0.1.10. also, murugo has
reversed the blendshape data in models, as well as the animation and shadow formats!
</li>
<li>
perdedork, who discovered
all this and more, many years ago. perdedork made the
<a href="https://www.silenthillmemories.net/sh2/modding_en.htm">
silent hill level viewer</a>.
i haven't seen the code for this viewer, but it is a really good program.
</li>
<li>
anyone who contributed to
<a href="https://github.com/elishacloud/Silent-Hill-2-Enhancements/issues/357">
this thread</a>
on the <a href="https://github.com/elishacloud/Silent-Hill-2-Enhancements">
silent hill 2: enhanced edition repo</a>.
</li>
<li>
<a href="https://github.com/FrozenFish24">frozenfish24</a>, who published
<a href="https://github.com/FrozenFish24/SH2MapTools/">sh2maptools</a>.
</li>
</ul>
<p>
all models were originally created by the artists of <a
href="https://www.silenthillmemories.net/sh2/credits_en.htm">team silent</a>.
<p>
this website is inspired by
</p>
<ul>
<li>a love for silent hill</li>
<li>
<a href="https://noclip.website">noclip.website</a>
</li>
</ul>
<button class="close-all-modals float-right">exit</button>
</div>
<div id="keybinds-modal" class="modal"></div>
<div id="disclaimer-modal" class="modal">
by clicking "i agree", you hold to <strong>never</strong> misuse these assets,
especially for commercial purposes. please see konami's
<a href="https://eu-support.konami.com/hc/en-gb/articles/9648771731479-Copyrights-Career-Opportunities-Goodies">
statement on copyrighted materials</a>:
<blockquote>
<p>
Generally, Konami Digital Entertainment B.V. does not object to fans using
copyrighted materials for non-commercial purposes, and in a manner which does
not intentionally spoil the plot of a game for other players.
</p>
<p>
By "non-commercial" we mean that you cannot use our copyrighted material to
promote a product you are selling or making any profit from, like wallpapers,
t-shirts, skins for electronic devices, etc. nor can you use it to monetise a
website or a media channel.
</p>
</blockquote>
we do not claim legal responsibility for any misuse of these assets.
<div class="button-holder">
<button class="confirm-button">i agree</button>
<button class="close-all-modals">i do not agree</button>
</div>
</div>
<div id="blender-export-modal" class="modal">
<p>thanks for agreeing to the terms! here are some tips for importing to blender:</p>
<ol class="no-margin-bottom">
<li>
when importing, be sure to select "temperance" for the "bone dir" dropdown.
this gives the most accurate skeletons.
</li>
<li>
in material settings, be sure to set the blend mode for any transparent parts
(including hair) to "alpha hashed". all non-transparent parts should be set to
"alpha clip".
</li>
<li class="no-margin-bottom">
hide the armature if you don't want to see the bones.
</li>
</ol>
<div class="button-holder float-right no-margin-bottom">
<button class="close-all-modals">okay</button>
</div>
</div>
<div id="content-warning-modal" class="modal">
<p>some content may be considered violent or cruel.</p>
<p>are you sure you want to continue? if you accept:</p>
<ol>
<li>your confirmation will be saved, and</li>
<li>
"lock to folder" mode will be disabled, allowing you to visit all files
without changing the folder.
</li>
</ol>
<div class="button-holder">
<button class="confirm-button">that's fine</button>
<button class="close-all-modals">take me back</button>
</div>
</div>
<div id="webgl-not-supported-modal" class="modal"></div>
<div id="quick-modal" class="modal"></div>
<div class="flexbox-container flex pointer-events-none">
<div id="sidebar-wrapper">
<div id="sidebar-container">
<div id="sidebar" class="lil-gui root ui">
<div class="sidebar-header title">
Edit View ✨
</div>
<div class="content">
<p>
welcome to <strong>edit mode</strong>!
here you can make your own models in mdl format and explore the file structure.
</p>
<p>
drag & drop any <a href="https://en.wikipedia.org/wiki/GlTF">gltf/glb model</a> onto the page.
this will edit the mdl file, effectively swapping the model.
</p>
<p>
(alternatively, use the file picker here.)
</p>
<input type="file" id="glb-filepicker" class="filepicker" name="file" accept=".glb,.gltf">
<div class="sidebar-buttons"></div>
</div>
</div>
</div>
</div>
<div class="placeholder flex output-log-wrapper">
<div id="console" class="output-log ui">
<p>import logging goes here...</p>
<p class="info">we don't see the files you send. everything runs locally on the browser.</p>
</div>
</div>
<div id="ui-container">
</div>
</div>
<footer>
<p id="keybinds-note">press <kbd>k</kbd> to see keybinds</p>
<p id="mode-indicator">
<span class="viewing-mode">
<img src="images/fa-eye.svg" alt="Eye" class="accent">
you are in <span class="mode-text accent">viewing mode</span>
</span>
<span class="edit-mode">
<img src="images/fa-atom.svg" alt="Atom" class="accent-complement">
you are in <span class="mode-text accent-complement">edit mode</span>
</span>
</p>
</footer>
<script type="module" src="/src/main.ts"></script>
</body>
</html>