glTF viewer HTML: trace the triangle back to its buffer

Moving only a .gltf file can leave its geometry buffer behind. Before changing the camera, trace the resource reference and decode the expected positions so a blank view cannot pass as a valid empty model.

The example creates an original 36-byte triangle and decodes its positions. Its vertices are (0,0,0),(1,0,0),(0,1,0), giving bounds min(0,0,0), max(1,1,0). An embedded-buffer control base64-encodes the actual bytes and decodes them again. A missing-buffer case clears the projection and reports an unresolved resource rather than drawing a successful-looking placeholder.

A triangle is more than a filename.
A triangle is more than a filename.
Open the full example ↗

Keep the accessor and bytes together

The bounded glTF 2 fixture has one VEC3 position accessor with componentType 5126 and count 3. Each float32 component occupies four bytes, so three vertices times three components times four bytes equals 36. Multibyte components use little-endian order. The bufferView begins at offset 0 with length 36; the external-resource example is triangle.bin. No indices, textures, compression extensions or multiple scenes are part of this asset. Keep those limits visible instead of implying support for arbitrary uploaded glTF files.

The browser aid writes the authored coordinates with DataView float32 operations and reads them back using the same declared byte order. The simple orthographic SVG projection is calculated from those decoded coordinates, not a copied model image. It is a bounded geometry inspector, not Three.js GLTFLoader or a general WebGL viewer. Change the third vertex's y to 2 to see a different decoded maximum and projection. The byte extent remains 36 while the geometry and its bounds change, demonstrating why file length alone does not establish content.

Inspect the resource arrangement

For a native external-buffer package, retain the model document, triangle.bin, resource base URL, resolved resource manifest, exact byte hashes and loader revision. Moving the JSON alone leaves its buffer unresolved. The example's missing-resource control represents that dependency failure explicitly; it does not make a network request or invent a vendor loader error. A genuinely empty scene would need a different source fixture and its own acceptance criteria rather than serving as an explanation for a missing required buffer.

The local Embedded variant performs a base64 byte round trip of the actual 36 bytes, decoding the bare encoded string before reading vertices. It constructs neither a data URI nor a glTF resource reference. Compare decoded values and bounds, not merely the presence of a long string; native embedded-resource packaging requires a separate model document. The glTF specification also allows binary assets to refer to external resources, so a .glb extension alone cannot establish dependency closure. Inspect resource URIs before calling a native package self-contained, especially when later adding textures or extensions that introduce more resources.

Test the real loader separately

If using Three.js, pin compatible core and GLTFLoader-addon versions and record model URL, base path, resource responses, parse result and selected scene. Geometry decoding and visible camera framing answer different questions. A rendered canvas cannot alone prove which buffer supplied a vertex, and a correct buffer cannot guarantee the chosen camera shows it. Keep actual browser and loader observations separate from this local inspector's deterministic coordinate checks. No server or external loader is started by the example.

Finish with a vertex-to-buffer explanation: identify its accessor, byte extent, decoded coordinate and current asset revision. Repeat the buffer and loader checks when bytes, references, the resource base, or the library change. Keep native glTF and real loader evidence authoritative; use the bounded view to understand resource and geometry expectations before diagnosing the actual viewer. It supplies concrete sample decoding without claiming universal model support or that a projection proves a native package loaded correctly.

Make your own working example

Build an original bounded glTF triangle buffer inspector, not a general loader. Author positions (0,0,0),(1,0,0),(0,1,0); write three VEC3 float32 vertices as 36 little-endian bytes using DataView. Decode the bytes and compute min/max bounds. Provide an SVG orthographic projection driven by decoded coordinates, with labels identifying it as a local geometry inspection. Fit and translate the projection from decoded minimum and maximum x/y coordinates with viewport padding, including negative y.

Include editable third-vertex y default 1, Build buffer, Embedded variant, Missing buffer and Reset. Embedded variant must base64-encode actual generated bytes and decode them before inspecting positions. Missing buffer clears projection and reports triangle.bin unresolved without fetching. Changing y to 2 updates decoded maximum to (1,2,0), while length stays 36. Reject blank or nonfinite coordinates and clear stale output.

Show accessor type VEC3/component 5126/count 3, bufferView offset 0/length 36, decoded coordinates and bounds near the projection. Keep the external-package manifest and native GLTFLoader/version/base/scene checklist separately. No textures, indices, extensions, uploads, network loader, server, invented base64, arbitrary glTF support or GLB self-containment claim. Reset restores the original triangle.

Use one self-contained HTML file with no remote dependency. Keep the initial sample, output, and labeled controls near the top. Use at least 16px text, strong contrast, visible focus, and a stacked layout at 360px without horizontal overflow. Use explicit type=button click handlers and explicit DOM selectors; do not depend on native form submission. Clear stale feedback when task inputs change. Render entered text safely. Keep practice data local to the current page; do not imply saving, sending, or production integration. Return only the finished HTML.

Explain the missing resource

Keep the model package and native loader observations together. For a separate HTML manifest explanation, NOS supports visual revision of eligible static text without AI regeneration. Clarify the triangle.bin dependency so the next reviewer knows which bytes must accompany the model document.

Keep reading