feature request: drag and drop gltf / glb import in index.html

[kfarr]

Is your feature request related to a problem? Please describe. As a user I would like to instantly render my gltf / glb file without needing to clone the repo, edit the index.html file, and then run on my local machine.

Describe the solution you'd like Instead, I would like to go to https://gkjohnson.github.io/three-gpu-pathtracer/example/bundle/index.html and either select the Model drop down and choose "Open file..." which will open the system dialog box, or I can drag and drop a glb or gtlf+associated files and textures file(s) from my local machine.

I would expect it to behave identically to https://gltf-viewer.donmccurdy.com/ or https://gltf.report/

[gkjohnson]

Hello! This is something @donmccurdy had looked into at some point (see #42) but the project was changing fairly frequently at the time. If this is something you'd like to pick back up or contribute a basic drag and drop viewer for I'd be happy to get a PR merged. In the long run, though, I think something like this would be best maintained as a separate project since a more fully featured editor can get fairly complex.

Also if I recall correctly @mrdoob mentioned that this was something he was interested in integrating into the three.js editor at some point. I'm not sure the status of that is, though.

[donmccurdy]

@gkjohnson the dragging-and-dropping part is simple enough. I haven't worked on this further because I don't understand how to set up the path tracing renderer for unknown input scenes — as described in https://github.com/gkjohnson/three-gpu-pathtracer/pull/42#issuecomment-1285733694. E.g. what preprocessing is required, and what limitations to expect? For example, the basic usage suggests that only one UV set is supported, and I'm unsure where 2048px resolution comes from.

It would help considerably if the PathTracingRenderer API could be used as a drop-in replacement for other renderers, at least for static scenes, without reaching into nested APIs like ptRenderer.material.envMapInfo.updateFrom(...). Because I don't understand the basic boilerplate, I haven't felt comfortable integrating path tracing into a separate viewer (much less an editor) that I'd be responsible for maintaining.

The simplest way to get started with GLB file selection would be:

<input type="file" accept=".glb,model/gltf-binary,application/octet-stream">

inputEl.addEventListener('change', onFileChange);

async function onFileChange(event) {
  const file = Array.from(event.target.files)[0];
  const url = URL.createObjectURL(file);

  try {
    const gltf = await loader.loadAsync(url);
    scene.add(gltf.scene);
  } catch(error) {
    console.error(error);
  } finally {
    URL.revokeObjectURL(url);
  }
}

[gkjohnson]

If there are specific features missing or questions about limitations an issue would be helpful so I can understand what might not be clear. It's hard to foresee everything that might be daunting or difficult to understand without feedback. And if a simpler API abstraction is desired it would be nice to have some help defining that. The current API is designed to cleanly enable path tracing while providing a lot of control over everything so users can implement it in their apps as needed.

To the couple things you've mentioned - multiple UV sets have only been recently supported by three.js so those have not been implemented here, yet. And because a texture array is required in order to support multiple textures (since a max of only 16 texture units are available) we need to pick a fixed size that all textures will be scaled to for storage in the texture array.