iiif-3d-workshop-leeds-2025/index.html at main · MorphoSource/iiif-3d-workshop-leeds-2025 · GitHub

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

<!DOCTYPE html>
<html>
  <head>
    <title>IIIF 3D Workshop Leeds 2025 Resources</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css" />
    <link rel="icon" href="favicon.ico" />
  </head>

  <body>
    <div class="d-flex flex-column align-items-center p-4">
      <h2>IIIF 3D Workshop Leeds 2025 Resources</h2>

      <div class="section">
        <h3>
          Exercise
        </h3>
        <p>Here we are going to practically show a modification of a 3D IIIF manifest and how it can be viewed in multiple viewers. This will require a GitHub account, so please <a href="https://github.com/signup">make one</a> if you have not already.</p>
        <p>We will use the manifest <a href="https://raw.githubusercontent.com/IIIF/3d/main/manifests/4_transform_and_position/model_transform_translate_scale_position.json">https://raw.githubusercontent.com/IIIF/3d/main/manifests/4_transform_and_position/model_transform_translate_scale_position.json</a> for this exercise.</p>

        <ol>
          <li>Copy the model URL to your clipboard. Go to <a href="https://veholder.org/iiif3d/test.php">IIIF 3D Manifest URL Tester</a> and paste the model into the field there. This will give you links to view the manifest in different viewers. Look at how the manifest is displayed in one or more viewers.</li>
          <li>Now open the manifest JSON directly in your browser and examine its structure.</li>
          <li>Next, we will modify the manifest - not by editing the JSON directly, though! We will load it in a demo IIIF-enabled version of Smithsonian's Voyager scene editor for editing 3D scenes on the web: <a href="https://si-iiif-demo.glitch.me/?document=https://raw.githubusercontent.com/IIIF/3d/main/manifests/4_transform_and_position/model_transform_translate_scale_position.json">Scene Editor</a></li>
          <li>In the Scene Editor, try moving one of the two astronauts relative to the other.</li>
          <li>Once you are happy with your changes, click the download button to save a new IIIF manifest with your changes included.</li>
          <li>To get your new manifest a URL, we are going to create a new GitHub Gist. Go to <a href="https://gist.github.com/">https://gist.github.com/</a> and paste your new manifest JSON into the text area. Give it a name like "My Modified 3D Manifest" and click "Create public gist". Then click the "Raw" button and copy into your clipboard the URL of the page it takes you to. This is a URL for your manifest JSON that you can load into a variety of viewers.</li>
          <li>Now go back to the <a href="https://veholder.org/iiif3d/test.php">IIIF 3D Manifest URL Tester</a> and paste your new manifest URL into the field. This will give you links to view your modified manifest in different viewers. Try out your new manifest in one or more viewers.</li>
          <li>Finally, open the manifest JSON directly and examine its structure. Compare to the original manifest to see what changed!</li>
        </ol>
      </div>

      <div class="section">
        <h3>
          Additional Resources
        </h3>
        <p>We've put together a Google Doc with a wide array of other resources. Below, you'll also find a sub-section of those resources most appropriate to the exercise above.</p>

        <ul>
          <li><a href="https://docs.google.com/document/d/1y2BfTIHnC3c61ymPNY_uVv6pcfILV3drgcAOGqPNe6M/edit?tab=t.0#heading=h.4z43z64czj7h">Additional resources document</a></li>
        </ul>
      </div>

      <div class="section">
        <h3>
          3D Manifests
        </h3>
        <p>All of the 3D TSG manifests can be found <a href="https://github.com/IIIF/3d/tree/main/manifests">here</a>, but we list specific useful manifests and some manifests outside the 3D TSG collection below.</p>

        <ul>
          <li>Single Model in Scene: <a href="https://raw.githubusercontent.com/IIIF/3d/main/manifests/1_basic_model_in_scene/model_origin.json">https://raw.githubusercontent.com/IIIF/3d/main/manifests/1_basic_model_in_scene/model_origin.json</a></li>
          <li>Stanford Handaxe: <a href="https://veholder.org/iiif3d/stanford-axe2.json">https://veholder.org/iiif3d/stanford-axe2.json</a></li>
        </ul>
      </div>


      <div class="section">
        <h3>
          Easily Combine Manifest with Viewer URL
        </h3>
        <p>Paste a manifest URL in this tool and it will give you links to all the viewers loading that manifest.</p>

        <ul>
          <li>IIIF 3D Manifest URL Tester: <a href="https://veholder.org/iiif3d/test.php">https://veholder.org/iiif3d/test.php</a></li>
        </ul>
      </div>

      <div class="section">
        <h3>
          Interactive Web Scene Editor Demo with IIIF Input/Output
        </h3>
        <p>The Smithsonian has put together a demo version of their web scene editor that can take in IIIF manifests as input data and download IIIF manifests of modified scenes. You can use this to import a 3D scene from a IIIF manifest, change things around, and save the modified scene as a new IIIF manifest document.</p>

        <ul>
          <li>New Empty Scene: <a href="https://si-iiif-demo.glitch.me/">https://si-iiif-demo.glitch.me/</a></li>
          <li>To Import Custom Manifest URL: <a href="https://si-iiif-demo.glitch.me/?document=">https://si-iiif-demo.glitch.me/?document=</a></li>
        </ul>
      </div>

      <div class="section">
        <h3>
          Viewers
        </h3>
        <p>These links won't load any content, they need manifests supplied!</p>

        <ul>
          <li>MorphoSource Aleph + UV: <a href="https://www.morphosource.org/uv/uv.html#?manifest=">https://www.morphosource.org/uv/uv.html#?manifest=</a></li>
          <li>Smithsonian Voyager: <a href="https://smithsonian.github.io/dpo-voyager/docs/iiif_demo?document=">https://smithsonian.github.io/dpo-voyager/docs/iiif_demo?document=</a></li>
          <li>UV + Google Model Viewer: <a href="https://uv-v4.netlify.app/#?manifest=">https://uv-v4.netlify.app/#?manifest=a</a></li>
          <li>X3D: <a href="https://spri-open-resources.s3.us-east-2.amazonaws.com/iiif3dtsg/manifest/index.html#?manifest=">https://spri-open-resources.s3.us-east-2.amazonaws.com/iiif3dtsg/manifest/index.html#?manifest=</a></li>
          <li>Kompakkt: <a href="https://blacklodge.hki.uni-koeln.de/viewer/?locale=en&standalone=true&manifest=">https://blacklodge.hki.uni-koeln.de/viewer/?locale=en&standalone=true&manifest=</a></li>
        </ul>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-j1CDi7MgGQ12Z7Qab0qlWQ/Qqz24Gc6BM0thvEMVjHnfYGF0rmFCozFSxQBxwHKO" crossorigin="anonymous"></script>
  </body>
</html>