Skip to content

Commit 3f07018

Browse files
authored
docs: update & polish documentation for clarity & consistency (#19)
1 parent f27403a commit 3f07018

File tree

2 files changed

+60
-41
lines changed

2 files changed

+60
-41
lines changed

README.dev.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -101,8 +101,8 @@ Here's a more detailed explanation of how everything works:
101101
and `.js` code. For example, in declaration files, the use of `async function` is not allowed.
102102
2. The `children` partial is recursive and constructs the tree of child indices, using a helper function to
103103
build the index array.
104-
3. The `imports` partial builds a list of imports and takes into account type-only imports. Currently, this is
105-
not required and is a remnant of a previous iteration. I decided to keep it in, as it might be useful in the future.
104+
3. The `imports` partial builds a list of imports and takes into account type-only imports. Currently, this is not
105+
required and is a remnant of a previous iteration. I decided to keep it in, as it might be useful in the future.
106106
4. The main templates, `declaration` and `runtime`, are now simply wrappers around these partials.
107107

108108
See [PR #16](https://github.com/toddeTV/gltf-type-toolkit/pull/16), which introduces this logic for the first time.

README.md

Lines changed: 58 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -18,30 +18,37 @@ With this plugin you get:
1818

1919
- ✅ Type safe glTF file representations with correct inner [three.js](https://github.com/mrdoob/three.js/) types
2020
like `Object3D`, `Mesh`, etc..
21+
- ❗ Currently, we primarily support and generate the [three.js](https://github.com/mrdoob/three.js/) types
22+
`Object3D`, `Group`, and `Mesh`. Support for generating types for lights, cameras, materials, and other
23+
components is not yet implemented. See and subscribe to
24+
[Issue #22](https://github.com/toddeTV/gltf-type-toolkit/issues/22) to stay updated on this development and
25+
be notified when these features are added.
2126
- ✅ Building will fail if a model is missing due to type-safe workflow.
2227
- ✅ Only the used models are bundled in the final product, not all included in your dev project.
2328
- ⚠️ Detects and handles [Draco Compression](https://github.com/google/draco) during type generation automatically,
2429
see [Draco Compression handling](#draco-compression-handling) below for more information.
2530
- ✅ Works with glTF Seperate (`.gltf` + `.bin` + textures) and glTF Embedded (only `.gltf`) files,
26-
see [glTF versions and representations](#gltf-versions-and-representations) below for more information.
31+
see [glTF Versions and Representations](#gltf-versions-and-representations) below for more information.
2732
- ✅ ESM ready.
28-
- ✅ Bundler agnostic thanks to [Unplugin](https://github.com/unjs/unplugin), so use it with your favorite one, but
29-
see chapter [Bundler and Framework Compatibility](#bundler-and-framework-compatibility) below for more details:
30-
- [Vite](https://vitejs.dev/)
31-
- [Rollup](https://rollupjs.org/)
32-
- [Webpack](https://webpack.js.org/)
33+
- ⚠️ Build tool & bundler agnostic thanks to [Unplugin](https://github.com/unjs/unplugin), so use it with your
34+
favorite one, but see chapter
35+
[Build Tool, Bundler and Framework Compatibility](#build-tool-bundler-and-framework-compatibility)
36+
below for more details like compatibility or known problems:
37+
- [Astro](https://astro.build/)
3338
- [esbuild](https://esbuild.github.io/)
34-
- [Rspack](https://www.rspack.dev/)
35-
- [Rolldown](https://rolldown.rs/)
3639
- [Farm](https://www.farmfe.org/)
37-
- And every framework build on top of them.
38-
- ✅ Use with your loved framework like:
39-
- [Vue3](https://vuejs.org/)
4040
- [Nuxt3](https://nuxt.com/)
41-
- [Svelte](https://svelte.dev/)
41+
- [Rolldown](https://rolldown.rs/)
42+
- [Rollup](https://rollupjs.org/)
43+
- [Rspack](https://www.rspack.dev/)
44+
- [Vite](https://vitejs.dev/)
45+
- [Webpack](https://webpack.js.org/)
46+
- And every framework build on top of them.
47+
- ✅ Use it with your favorite framework built on top of the listed build tools above, such as:
4248
- [React](https://react.dev/)
43-
- [Astro](https://astro.build/)
44-
- And oll frameworks build on top of the listed bundlers above.
49+
- [Svelte](https://svelte.dev/)
50+
- [Vue3](https://vuejs.org/)
51+
- ...
4552

4653
It will run when your dev server starts and also when you build your project.
4754

@@ -75,7 +82,7 @@ For development-related information, including setup instructions for contributo
7582
*.gltf.d.ts
7683
*.gltf.js
7784
```
78-
3. Add the plugin to your bundler, for example with [Vite](https://vitejs.dev/):
85+
3. Add the plugin to your build tool, for example with [Vite](https://vitejs.dev/):
7986

8087
```ts
8188
// vite.config.ts
@@ -137,29 +144,35 @@ to different folders, changing paths, or adjusting how the model is handled afte
137144
innerModel.castShadow = true
138145
```
139146

140-
## Bundler and Framework Compatibility
147+
## Build Tool, Bundler and Framework Compatibility
141148

142-
Thanks to [Unplugin](https://github.com/unjs/unplugin), we support a wide variety of bundlers and frameworks,
149+
Thanks to [Unplugin](https://github.com/unjs/unplugin), we support a wide variety of build tools and bundlers,
143150
resulting in the following compatibility in our project:
144151

145-
(Legend: 🟢 Tested & Supported | 🟡 not yet tested | 🔴 Not Supported)
152+
(Legend: 🟢 Tested & Supported | 🟡 Not Yet Tested | 🔴 Not Supported)
146153

147-
| Bundler | Status | Note |
148-
| -------- | ------ | ------------------------------------------------------------------------- |
149-
| vite | 🟢 | |
150-
| esbuild | 🟢 | |
151-
| rollup | 🟢 | |
152-
| webpack | 🟢 | |
153-
| rspack | 🟢 | |
154-
| astro | 🟡 | |
155-
| nuxt | 🟡 | |
156-
| rolldown | 🟡 | ⚠️ currently experimental in [Unplugin](https://github.com/unjs/unplugin) |
157-
| farm | 🔴 | Tested & not working, help is welcome |
154+
| Build Tool | Status | Note |
155+
| ------------------------------------- | ------ | ------------------------------------------------------------------------- |
156+
| [esbuild](https://esbuild.github.io/) | 🟢 | |
157+
| [Rollup](https://rollupjs.org/) | 🟢 | |
158+
| [Rspack](https://www.rspack.dev/) | 🟢 | |
159+
| [Vite](https://vitejs.dev/) | 🟢 | |
160+
| [Webpack](https://webpack.js.org/) | 🟢 | |
161+
| [Astro](https://astro.build/) | 🟡 | |
162+
| [Nuxt3](https://nuxt.com/) | 🟡 | |
163+
| [Rolldown](https://rolldown.rs/) | 🟡 | ⚠️ currently experimental in [Unplugin](https://github.com/unjs/unplugin) |
164+
| [Farm](https://www.farmfe.org/) | 🔴 | Tested & not working. Contributions welcome! ❤️ |
158165

159-
## glTF versions and representations
166+
## glTF Versions and Representations
160167

161-
We only support glTF 2.0, so use glTF Seperate (`.gltf` + `.bin` + textures) or glTF Embedded (only `.gltf`) files.<br>
162-
We do not support glTF 1 nor glTF Binary (`.glb`) files.
168+
(Legend: 🟢 Tested & Supported | 🟡 Not Yet Tested | 🔴 Not Supported)
169+
170+
| glTF Version | File Representation | Status | Note |
171+
| ------------ | -------------------------------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
172+
| glTF 1.0 | Any | 🔴 | glTF 2.0 was introduced in 2017 with major improvements. Avoid using the outdated glTF 1.0 standard in your projects. |
173+
| glTF 2.0 | Separate (`.gltf` + `.bin` + textures) | 🟢 | Recommended! Offers better performance, version control, caching, transferability, and debugging. |
174+
| glTF 2.0 | Embedded (only `.gltf`) | 🟢 | Assets are embedded directly into the `.gltf` file as base64 encoded `data:` sources within the `uri` fields, making single-file management simpler. |
175+
| glTF 2.0 | Binary (`.glb`) | 🔴 | Currently not supported because we scan JSON-encoded `.gltf` files for type generation and cannot yet process binary representations. Contributions welcome! ❤️ |
163176

164177
## Draco Compression handling
165178

@@ -211,16 +224,17 @@ scene/ model graph, we store the paths in the graph by caching the child indices
211224
object. With this, we can O(1) look up what the user requests without the need of traversing - neither depth first
212225
(default approach from [three.js](https://github.com/mrdoob/three.js/)), nor breath first.
213226

214-
One of the biggest challenges was making the plugin bundler agnostic bc not every bundler handles inner path references
215-
the same. Therefore, we have to reconstruct the buffers that link the glTF file with the binary and textures by text
216-
string & replace - kinda hacky, but reliable and the additional runtime is only performed in dev and build, not in the
217-
production runtime.
227+
One of the biggest challenges was making the plugin build tool agnostic bc not every build tool handles inner path
228+
references the same. Therefore, we have to reconstruct the buffers that link the glTF file with the binary and
229+
textures by text string & replace - kinda hacky, but reliable and the additional runtime is only performed in dev
230+
and build, not in the production runtime.
218231

219-
## Troubleshooting
232+
## Troubleshooting with Known Problems and Limitations
220233

221234
If you have problems, maybe one of the following will help:
222235

223236
- Delete your build output folder (maybe some old builds copied model files in there and our plugin is now scanning them).
237+
- We currently do not provide a watcher. Restart your dev environment when changing model files.
224238

225239
## Attribution/ Contribution
226240

@@ -230,11 +244,16 @@ Project founder & head of project:
230244

231245
Honorable mentions to people that helped this project:
232246

233-
- [Andreas Fehn](https://github.com/fehnomenal) as contributor who helped incredible with the project and the magic behind the core. Thank you <3
247+
- [Andreas Fehn](https://github.com/fehnomenal) as contributor who helped incredible with the project and the magic
248+
behind the core. Thank you <3
234249

235250
Respectable mentions to projects that helped this project:
236251

237-
- \[currently none\]
252+
- [zlig (zen-landscape-idle-game)](https://github.com/toddeTV/zlig): A Japanese zen-inspired idle browser game that
253+
showcases lightweight web technologies like `Vue` and `Three.js` to create fully browser-based games. The idea and
254+
initial implementation of this plugin [@todde.tv/gltf-type-toolkit](https://github.com/toddeTV/gltf-type-toolkit)
255+
originated during the development of zlig, where we required type-safe glTF representations to enable faster and
256+
more reliable development.
238257

239258
Used programs/ softwares, services and dependencies - besides the ones in `./package.json`:
240259

0 commit comments

Comments
 (0)