Loading a glb file with missing textures

[Jacob-Branch]

Hi gltf-tranform community!

I am trying to use the gltf library embed textures in to glb files when our validator has given an error that textures are missing, but when using IO.readBytes() an error is thrown that there are buffers missing, how would it be possible to go around this error so I could embed those textures?

Here is the function in question:

type EmbedFilesInput = {
  glbBuffer: Buffer;
  missingResources: {
    bufferData: Buffer;
    path: string;
  }[];
};

export const embedFiles = async ({
  glbBuffer,
  missingResources,
}: EmbedFilesInput): Promise<Buffer> => {
  const io = new NodeIO();
  const document = await io.readBinary(new Uint8Array(glbBuffer));
  const root = document.getRoot();
  missingResources.forEach(({ bufferData, path }) => {
    const resourceType = path.split('/')[1];
    const resourceIndex = parseInt(path.split('/')[2], 10);

    if (resourceType === 'buffers') {
      const newBuffer = document
        .createBuffer(`buffer-${resourceIndex}`)
        .setURI(path);

      root.listBuffers()[resourceIndex] = newBuffer;
    } else if (resourceType === 'textures' || resourceType === 'images') {
      const texture = root.listTextures()[resourceIndex];
      if (!texture) {
        console.log('no texture found at the given index');
        throw new Error(
          `Texture at index ${resourceIndex} does not exist in the glTF.`,
        );
      }
      texture.setImage(new Uint8Array(bufferData));
    } else {
      console.log(`Unsupported resource type: ${resourceType}`);
      throw new Error(`Unsupported resource type: ${resourceType}`);
    }
  });

  const updatedGlb = await io.writeBinary(document);

  return Buffer.from(updatedGlb);
};

[donmccurdy]

Because glTF Transform does throw when trying to parse a .glb/.gltf with missing external resources, I think it would be necessary to parse the .glb header manually, copying the implementation here...

glTF-Transform/packages/core/src/io/platform-io.ts

Lines 262 to 291 in 7c9394b

	// Decode JSON chunk.
	const jsonChunkHeader = new Uint32Array(glb.buffer, glb.byteOffset + 12, 2);
	if (jsonChunkHeader[1] !== ChunkType.JSON) {
	throw new Error('Missing required GLB JSON chunk.');
	}
	const jsonByteOffset = 20;
	const jsonByteLength = jsonChunkHeader[0];
	const jsonText = BufferUtils.decodeText(BufferUtils.toView(glb, jsonByteOffset, jsonByteLength));
	const json = JSON.parse(jsonText) as GLTF.IGLTF;
	// Decode BIN chunk.
	const binByteOffset = jsonByteOffset + jsonByteLength;
	if (glb.byteLength <= binByteOffset) {
	return { json, resources: {} };
	}
	const binChunkHeader = new Uint32Array(glb.buffer, glb.byteOffset + binByteOffset, 2);
	if (binChunkHeader[1] !== ChunkType.BIN) {
	// Allow GLB files without BIN chunk, but with unknown chunk
	// Spec: https://registry.khronos.org/glTF/specs/2.0/glTF-2.0.html#chunks-overview
	return { json, resources: {} };
	}
	const binByteLength = binChunkHeader[0];
	const binBuffer = BufferUtils.toView(glb, binByteOffset + 8, binByteLength);
	return { json, resources: { [GLB_BUFFER]: binBuffer } };

... and then to manually embed the missing textures similar to this code...

glTF-Transform/packages/core/src/io/platform-io.ts

Lines 184 to 194 in 7c9394b

	const images = jsonDoc.json.images || [];
	const buffers = jsonDoc.json.buffers || [];
	const pendingResources: Array<Promise<void>> = [...images, ...buffers].map(
	async (resource: GLTF.IBuffer | GLTF.IImage): Promise<void> => {
	const uri = resource.uri;
	if (!uri || uri.match(/data:/)) return Promise.resolve();
	jsonDoc.resources[uri] = await this.readURI(this.resolve(base, uri), 'view');
	this.lastReadBytes += jsonDoc.resources[uri].byteLength;
	},
	);

Once you've added the missing entries to the resources map (as Uint8Arrays), the {json, resources} structure can be passed into io.readJSON and processed or written back to disk normally.

[Jacob-Branch]

Thank you so much for the help, ended up being able to embed the texture the intended way, heres the code that ended up working

export const getJsonDoc = (glbBuffer: Buffer): JSONDocument => {
  const glb = new Uint8Array(glbBuffer);
  const jsonChunkHeader = new Uint32Array(glb.buffer, glb.byteOffset + 12, 2);
  if (jsonChunkHeader[1] !== ChunkType.JSON) {
    throw new Error('Missing required GLB JSON chunk.');
  }

  const jsonByteOffset = 20;
  const jsonByteLength = jsonChunkHeader[0];
  const jsonText = BufferUtils.decodeText(
    BufferUtils.toView(glb, jsonByteOffset, jsonByteLength),
  );
  const json = JSON.parse(jsonText) as GLTF.IGLTF;

  const binByteOffset = jsonByteOffset + jsonByteLength;
  if (glb.byteLength <= binByteOffset) {
    return { json, resources: {} };
  }

  const binChunkHeader = new Uint32Array(
    glb.buffer,
    glb.byteOffset + binByteOffset,
    2,
  );
  if (binChunkHeader[1] !== ChunkType.BIN) {
    return { json, resources: {} };
  }

  const binByteLength = binChunkHeader[0];
  const binBuffer = BufferUtils.toView(glb, binByteOffset + 8, binByteLength);
  return {
    json,
    resources: { [GLB_BUFFER]: binBuffer },
  };
};

export const embedFiles = async ({
  glbBuffer,
  missingResources,
}: EmbedFilesInput): Promise<Buffer> => {
  const io = new NodeIO();
  const document = await io.readJSON(getJsonDoc(glbBuffer));
  const root = document.getRoot();
  missingResources.forEach(({ bufferData, path }) => {
    const resourceType = path.split('/')[1];
    const resourceIndex = parseInt(path.split('/')[2], 10);

    if (resourceType === 'buffers') {
      const newBuffer = document
        .createBuffer(`buffer-${resourceIndex}`)
        .setURI(path);

      root.listBuffers()[resourceIndex] = newBuffer;
    } else if (resourceType === 'textures' || resourceType === 'images') {
      const texture = root.listTextures()[resourceIndex];
      if (!texture) {
        console.log('no texture found at the given index');
        throw new Error(
          `Texture at index ${resourceIndex} does not exist in the glTF.`,
        );
      }
      texture.setImage(new Uint8Array(bufferData));
    } else {
      console.log(`Unsupported resource type: ${resourceType}`);
      throw new Error(`Unsupported resource type: ${resourceType}`);
    }
  });

  const updatedGlb = await io.writeBinary(document);

  return Buffer.from(updatedGlb);
};