@loaders.gl/gltf 4.0.0-alpha.5 → 4.0.0-alpha.6

package/src/lib/api/gltf-scenegraph.ts

@@ -10,7 +10,8 @@ import type {
   GLTFTexture,
   GLTFImage,
   GLTFBuffer,
-  GLTFBufferView
+  GLTFBufferView,
+  GLTFWithBuffers
 } from '../types/gltf-types';
 
 import {getBinaryImageMetadata} from '@loaders.gl/images';
@@ -22,12 +23,6 @@ import {
   getComponentTypeFromArray
 } from '../gltf-utils/gltf-utils';
 
-type GLTFWithBuffers = {
-  json: GLTF;
-  buffers: any[];
-  binary?: ArrayBuffer;
-};
-
 const DEFAULT_GLTF_JSON: GLTF = {
   asset: {
     version: '2.0',
@@ -68,13 +63,13 @@ export default class GLTFScenegraph {
     return this.gltf.json;
   }
 
-  getApplicationData(key: string): {[key: string]: any} {
+  getApplicationData(key: string): unknown {
     // TODO - Data is already unpacked by GLBParser
     const data = this.json[key];
     return data;
   }
 
-  getExtraData(key: string): {[key: string]: any} {
+  getExtraData(key: string): {[key: string]: unknown} {
     // TODO - Data is already unpacked by GLBParser
     const extras = this.json.extras || {};
     return extras[key];
@@ -99,6 +94,10 @@ export default class GLTFScenegraph {
     return this.json.extensionsUsed || [];
   }
 
+  getRemovedExtensions(): string[] {
+    return (this.json.extensionsRemoved || []) as string[];
+  }
+
   getObjectExtension<T = Extension>(object: {[key: string]: any}, extensionName: string): T | null {
     const extensions = object.extensions || {};
     return extensions[extensionName];
@@ -157,7 +156,7 @@ export default class GLTFScenegraph {
     if (typeof index === 'object') {
       return index;
     }
-    const object = this.json[array] && this.json[array][index];
+    const object = this.json[array] && (this.json[array] as {}[])[index];
     if (!object) {
       throw new Error(`glTF file error: Could not find ${array}[${index}]`); // eslint-disable-line
     }
@@ -234,7 +233,7 @@ export default class GLTFScenegraph {
    */
   addExtraData(key: string, data: object): GLTFScenegraph {
     this.json.extras = this.json.extras || {};
-    this.json.extras[key] = data;
+    (this.json.extras as Record<string, unknown>)[key] = data;
     return this;
   }
 
@@ -269,7 +268,7 @@ export default class GLTFScenegraph {
   addExtension(extensionName: string, extensionData: object = {}): object {
     assert(extensionData);
     this.json.extensions = this.json.extensions || {};
-    this.json.extensions[extensionName] = extensionData;
+    (this.json.extensions as Record<string, unknown>)[extensionName] = extensionData;
     this.registerUsedExtension(extensionName);
     return extensionData;
   }
@@ -309,6 +308,9 @@ export default class GLTFScenegraph {
    * Removes an extension from the top-level list
    */
   removeExtension(extensionName: string): void {
+    if (!this.getExtension(extensionName)) {
+      return;
+    }
     if (this.json.extensionsRequired) {
       this._removeStringFromArray(this.json.extensionsRequired, extensionName);
     }
@@ -318,6 +320,13 @@ export default class GLTFScenegraph {
     if (this.json.extensions) {
       delete this.json.extensions[extensionName];
     }
+    if (!Array.isArray(this.json.extensionsRemoved)) {
+      this.json.extensionsRemoved = [];
+    }
+    const extensionsRemoved = this.json.extensionsRemoved as string[];
+    if (!extensionsRemoved.includes(extensionName)) {
+      extensionsRemoved.push(extensionName);
+    }
   }
 
   /**

package/src/lib/api/normalize-gltf-v1.ts

@@ -298,7 +298,8 @@ class GLTFV1Normalizer {
         roughnessFactor: 1
       };
 
-      const textureId = material.values && material.values.tex;
+      const textureId =
+        material.values?.tex || material.values?.texture2d_0 || material.values?.diffuseTex;
       const textureIndex = json.textures.findIndex((texture) => texture.id === textureId);
       if (textureIndex !== -1) {
         material.pbrMetallicRoughness.baseColorTexture = {index: textureIndex};

package/src/lib/encoders/encode-glb.ts

@@ -10,10 +10,17 @@ const MAGIC_BIN = 0x004e4942; // BIN\0 in ASCII
 
 const LE = true; // Binary GLTF is little endian.
 
+export type GLBEncodeOptions = {};
+
 // Encode the full GLB buffer with header etc
 // https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#
 // glb-file-format-specification
-export default function encodeGLBSync(glb, dataView, byteOffset = 0, options = {}) {
+export default function encodeGLBSync(
+  glb,
+  dataView,
+  byteOffset = 0,
+  options: GLBEncodeOptions = {}
+) {
   const {magic = MAGIC_glTF, version = 2, json = {}, binary} = glb;
 
   const byteOffsetStart = byteOffset;

package/src/lib/encoders/encode-gltf.ts

@@ -1,15 +1,24 @@
 import encodeGLBSync from './encode-glb';
 
-// Encode the full glTF file as a binary GLB file
-// Returns an ArrayBuffer that represents the complete GLB image that can be saved to file
-//
-// TODO - Does not support encoding to non-GLB versions of glTF format
-// - Encode as a textual JSON file with binary data in base64 data URLs.
-// - Encode as a JSON with all images (and buffers?) in separate binary files
-//
-// glb-file-format-specification
-// https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#
+export type GLTFEncodeOptions = Record<string, any>;
 
+/**
+ * Encode the full glTF file as a binary GLB file
+ * Returns an ArrayBuffer that represents the complete GLB image that can be saved to file
+ *
+ * @todo - Does not support encoding to non-GLB versions of glTF format. Other formats
+ * - Encode as a textual JSON file with binary data in base64 data URLs.
+ * - Encode as a JSON with all images (and buffers?) in separate binary files
+ *
+ * glb-file-format-specification
+ * @see https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#
+ *
+ * @param gltf
+ * @param arrayBuffer
+ * @param byteOffset
+ * @param options
+ * @returns
+ */
 export function encodeGLTFSync(gltf, arrayBuffer, byteOffset, options) {
   convertBuffersToBase64(gltf);
 

package/src/lib/extensions/EXT_meshopt_compression.ts

@@ -2,7 +2,7 @@
 import type {GLTF, GLTFBufferView, GLTF_EXT_meshopt_compression} from '../types/gltf-types';
 import type {GLTFLoaderOptions} from '../../gltf-loader';
 import GLTFScenegraph from '../api/gltf-scenegraph';
-import {isMeshoptSupported, meshoptDecodeGltfBuffer} from '../../meshopt/meshopt-decoder';
+import {meshoptDecodeGltfBuffer} from '../../meshopt/meshopt-decoder';
 
 // @ts-ignore
 // eslint-disable-next-line
@@ -16,16 +16,6 @@ const EXT_MESHOPT_COMPRESSION = 'EXT_meshopt_compression';
 
 export const name = EXT_MESHOPT_COMPRESSION;
 
-export function preprocess(gltfData: {json: GLTF}) {
-  const scenegraph = new GLTFScenegraph(gltfData);
-  if (
-    scenegraph.getRequiredExtensions().includes(EXT_MESHOPT_COMPRESSION) &&
-    !isMeshoptSupported()
-  ) {
-    throw new Error(`gltf: Required extension ${EXT_MESHOPT_COMPRESSION} not supported by browser`);
-  }
-}
-
 export async function decode(gltfData: {json: GLTF}, options: GLTFLoaderOptions) {
   const scenegraph = new GLTFScenegraph(gltfData);
 
@@ -41,7 +31,7 @@ export async function decode(gltfData: {json: GLTF}, options: GLTFLoaderOptions)
   // Decompress meshes in parallel
   await Promise.all(promises);
 
-  // We have now decompressed all primitives, so remove the top-level extensions
+  // We have now decompressed all primitives, so remove the top-level extension
   scenegraph.removeExtension(EXT_MESHOPT_COMPRESSION);
 }
 
@@ -55,21 +45,24 @@ async function decodeMeshoptBufferView(
     EXT_MESHOPT_COMPRESSION
   );
   if (meshoptExtension) {
-    const buffer = bufferView.buffer;
-
     const {
       byteOffset = 0,
       byteLength = 0,
       byteStride,
       count,
       mode,
-      filter = 'NONE'
+      filter = 'NONE',
+      buffer: bufferIndex
     } = meshoptExtension;
+    const buffer = scenegraph.gltf.buffers[bufferIndex];
 
-    // @ts-expect-error TODO - fix buffer handling
-    const source = new Uint8Array(buffer, byteOffset, byteLength);
-    const result = new ArrayBuffer(count * byteStride);
-    await meshoptDecodeGltfBuffer(new Uint8Array(result), count, byteStride, source, mode, filter);
+    const source = new Uint8Array(buffer.arrayBuffer, buffer.byteOffset + byteOffset, byteLength);
+    const result = new Uint8Array(
+      scenegraph.gltf.buffers[bufferView.buffer].arrayBuffer,
+      bufferView.byteOffset,
+      bufferView.byteLength
+    );
+    await meshoptDecodeGltfBuffer(result, count, byteStride, source, mode, filter);
     return result;
   }
 

package/src/lib/extensions/EXT_texture_webp.ts

@@ -5,7 +5,7 @@
 import type {GLTF, GLTF_EXT_texture_webp} from '../types/gltf-types';
 import type {GLTFLoaderOptions} from '../../gltf-loader';
 
-import {_isImageFormatSupported} from '@loaders.gl/images';
+import {isImageFormatSupported} from '@loaders.gl/images';
 import GLTFScenegraph from '../api/gltf-scenegraph';
 
 const EXT_TEXTURE_WEBP = 'EXT_texture_webp';
@@ -20,7 +20,7 @@ export const name = EXT_TEXTURE_WEBP;
 export function preprocess(gltfData: {json: GLTF}, options: GLTFLoaderOptions): void {
   const scenegraph = new GLTFScenegraph(gltfData);
 
-  if (!_isImageFormatSupported('image/webp')) {
+  if (!isImageFormatSupported('image/webp')) {
     if (scenegraph.getRequiredExtensions().includes(EXT_TEXTURE_WEBP)) {
       throw new Error(`gltf: Required extension ${EXT_TEXTURE_WEBP} not supported by browser`);
     }
@@ -35,6 +35,7 @@ export function preprocess(gltfData: {json: GLTF}, options: GLTFLoaderOptions):
       EXT_TEXTURE_WEBP
     );
     if (extension) {
+      // TODO - if multiple texture extensions are present which one wins?
       texture.source = extension.source;
     }
     scenegraph.removeObjectExtension(texture, EXT_TEXTURE_WEBP);

package/src/lib/extensions/KHR_binary_gltf.ts

@@ -40,7 +40,7 @@ export function preprocess(gltfData: {json: GLTF}): void {
     delete json.buffers[0].uri;
   }
 
-  // Remove the top-level extension as it has now been removed from all nodes
+  // Remove the top-level extension as it has now been processed
   gltfScenegraph.removeExtension(KHR_BINARY_GLTF);
 }
 

package/src/lib/extensions/KHR_draco_mesh_compression.ts

@@ -56,7 +56,7 @@ export async function decode(
   // Decompress meshes in parallel
   await Promise.all(promises);
 
-  // We have now decompressed all primitives, so remove the top-level extensions
+  // We have now decompressed all primitives, so remove the top-level extension
   scenegraph.removeExtension(KHR_DRACO_MESH_COMPRESSION);
 }
 

package/src/lib/extensions/KHR_texture_basisu.ts

@@ -26,6 +26,7 @@ export function preprocess(gltfData: {json: GLTF}, options: GLTFLoaderOptions):
       KHR_TEXTURE_BASISU
     );
     if (extension) {
+      // TODO - if multiple texture extensions are present which one wins?
       texture.source = extension.source;
     }
     scene.removeObjectExtension(texture, KHR_TEXTURE_BASISU);

package/src/lib/extensions/KHR_texture_transform.ts

@@ -0,0 +1,305 @@
+/**
+ * https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Khronos/KHR_texture_transform/README.md
+ */
+
+import {Vector3, Matrix3} from '@math.gl/core';
+import type {GLTFMeshPrimitive, GLTFWithBuffers} from '../types/gltf-types';
+import type {GLTFLoaderOptions} from '../../gltf-loader';
+import {getAccessorArrayTypeAndLength} from '../gltf-utils/gltf-utils';
+import {BYTES, COMPONENTS} from '../gltf-utils/gltf-constants';
+import {
+  Accessor,
+  BufferView,
+  MaterialNormalTextureInfo,
+  MaterialOcclusionTextureInfo,
+  TextureInfo as GLTFTextureInfo
+} from '../types/gltf-json-schema';
+import GLTFScenegraph from '../api/gltf-scenegraph';
+
+/** Extension name */
+const EXT_MESHOPT_TRANSFORM = 'KHR_texture_transform';
+
+export const name = EXT_MESHOPT_TRANSFORM;
+
+const scratchVector = new Vector3();
+const scratchRotationMatrix = new Matrix3();
+const scratchScaleMatrix = new Matrix3();
+
+/** Extension textureInfo https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_texture_transform#gltf-schema-updates */
+type TextureInfo = {
+  /** The offset of the UV coordinate origin as a factor of the texture dimensions. */
+  offset?: [number, number];
+  /** Rotate the UVs by this many radians counter-clockwise around the origin. This is equivalent to a similar rotation of the image clockwise. */
+  rotation?: number;
+  /** The scale factor applied to the components of the UV coordinates. */
+  scale?: [number, number];
+  /** Overrides the textureInfo texCoord value if supplied, and if this extension is supported. */
+  texCoord?: number;
+};
+/** Intersection of all GLTF textures */
+type CompoundGLTFTextureInfo = GLTFTextureInfo &
+  MaterialNormalTextureInfo &
+  MaterialOcclusionTextureInfo;
+/** Parameters for TEXCOORD transformation */
+type TransformParameters = {
+  /** Original texCoord value https://www.khronos.org/registry/glTF/specs/2.0/glTF-2.0.html#_textureinfo_texcoord */
+  originalTexCoord: number;
+  /** New texCoord value from extension https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_texture_transform#gltf-schema-updates */
+  texCoord: number;
+  /** Transformation matrix */
+  matrix: Matrix3;
+};
+
+/**
+ * The extension entry to process the transformation
+ * @param gltfData gltf buffers and json
+ * @param options GLTFLoader options
+ */
+export async function decode(gltfData: GLTFWithBuffers, options: GLTFLoaderOptions) {
+  const gltfScenegraph = new GLTFScenegraph(gltfData);
+  const extension = gltfScenegraph.getExtension(EXT_MESHOPT_TRANSFORM);
+  if (!extension) {
+    return;
+  }
+  const materials = gltfData.json.materials || [];
+  for (let i = 0; i < materials.length; i++) {
+    transformTexCoords(i, gltfData);
+  }
+}
+
+/**
+ * Transform TEXCOORD by material
+ * @param materialIndex processing material index
+ * @param gltfData gltf buffers and json
+ */
+function transformTexCoords(materialIndex: number, gltfData: GLTFWithBuffers): void {
+  // Save processed texCoords in order no to process the same twice
+  const processedTexCoords: [number, number][] = [];
+  const material = gltfData.json.materials?.[materialIndex];
+  const baseColorTexture = material?.pbrMetallicRoughness?.baseColorTexture;
+  if (baseColorTexture) {
+    transformPrimitives(gltfData, materialIndex, baseColorTexture, processedTexCoords);
+  }
+  const emisiveTexture = material?.emissiveTexture;
+  if (emisiveTexture) {
+    transformPrimitives(gltfData, materialIndex, emisiveTexture, processedTexCoords);
+  }
+  const normalTexture = material?.normalTexture;
+  if (normalTexture) {
+    transformPrimitives(gltfData, materialIndex, normalTexture, processedTexCoords);
+  }
+  const occlusionTexture = material?.occlusionTexture;
+  if (occlusionTexture) {
+    transformPrimitives(gltfData, materialIndex, occlusionTexture, processedTexCoords);
+  }
+  const metallicRoughnessTexture = material?.pbrMetallicRoughness?.metallicRoughnessTexture;
+  if (metallicRoughnessTexture) {
+    transformPrimitives(gltfData, materialIndex, metallicRoughnessTexture, processedTexCoords);
+  }
+}
+
+/**
+ * Transform primitives of the particular material
+ * @param gltfData gltf data
+ * @param materialIndex primitives with this material will be transformed
+ * @param texture texture object
+ * @param processedTexCoords storage to save already processed texCoords
+ */
+function transformPrimitives(
+  gltfData: GLTFWithBuffers,
+  materialIndex: number,
+  texture: CompoundGLTFTextureInfo,
+  processedTexCoords: [number, number][]
+) {
+  const transformParameters = getTransformParameters(texture, processedTexCoords);
+  if (!transformParameters) {
+    return;
+  }
+  const meshes = gltfData.json.meshes || [];
+  for (const mesh of meshes) {
+    for (const primitive of mesh.primitives) {
+      const material = primitive.material;
+      if (Number.isFinite(material) && materialIndex === material) {
+        transformPrimitive(gltfData, primitive, transformParameters);
+      }
+    }
+  }
+}
+
+/**
+ * Get parameters for TEXCOORD transformation
+ * @param texture texture object
+ * @param processedTexCoords storage to save already processed texCoords
+ * @returns texCoord couple and transformation matrix
+ */
+function getTransformParameters(
+  texture: CompoundGLTFTextureInfo,
+  processedTexCoords: [number, number][]
+): TransformParameters | null {
+  const textureInfo = texture.extensions?.[EXT_MESHOPT_TRANSFORM];
+  const {texCoord: originalTexCoord = 0} = texture;
+  // If texCoord is not set in the extension, original attribute data will be replaced
+  const {texCoord = originalTexCoord} = textureInfo;
+  // Make sure that couple [originalTexCoord, extensionTexCoord] is not processed twice
+  const isProcessed =
+    processedTexCoords.findIndex(
+      ([original, newTexCoord]) => original === originalTexCoord && newTexCoord === texCoord
+    ) !== -1;
+  if (!isProcessed) {
+    const matrix = makeTransformationMatrix(textureInfo);
+    if (originalTexCoord !== texCoord) {
+      texture.texCoord = texCoord;
+    }
+    processedTexCoords.push([originalTexCoord, texCoord]);
+    return {originalTexCoord, texCoord, matrix};
+  }
+  return null;
+}
+
+/**
+ * Transform `TEXCOORD_0` attribute in the primitive
+ * @param gltfData gltf data
+ * @param primitive primitive object
+ * @param transformParameters texCoord couple and transformation matrix
+ */
+function transformPrimitive(
+  gltfData: GLTFWithBuffers,
+  primitive: GLTFMeshPrimitive,
+  transformParameters: TransformParameters
+) {
+  const {originalTexCoord, texCoord, matrix} = transformParameters;
+  const texCoordAccessor = primitive.attributes[`TEXCOORD_${originalTexCoord}`];
+  if (Number.isFinite(texCoordAccessor)) {
+    // Get accessor of the `TEXCOORD_0` attribute
+    const accessor = gltfData.json.accessors?.[texCoordAccessor];
+    if (accessor && accessor.bufferView) {
+      // Get `bufferView` of the `accessor`
+      const bufferView = gltfData.json.bufferViews?.[accessor.bufferView];
+      if (bufferView) {
+        // Get `arrayBuffer` the `bufferView` look at
+        const {arrayBuffer, byteOffset: bufferByteOffset} = gltfData.buffers[bufferView.buffer];
+        // Resulting byteOffset is sum of the buffer, accessor and bufferView byte offsets
+        const byteOffset =
+          (bufferByteOffset || 0) + (accessor.byteOffset || 0) + (bufferView.byteOffset || 0);
+        // Deduce TypedArray type and its length from `accessor` and `bufferView` data
+        const {ArrayType, length} = getAccessorArrayTypeAndLength(accessor, bufferView);
+        // Number of bytes each component occupies
+        const bytes = BYTES[accessor.componentType];
+        // Number of components. For the `TEXCOORD_0` with `VEC2` type, it must return 2
+        const components = COMPONENTS[accessor.type];
+        // Multiplier to calculate the address of the `TEXCOORD_0` element in the arrayBuffer
+        const elementAddressScale = bufferView.byteStride || bytes * components;
+        // Data transform to Float32Array
+        const result = new Float32Array(length);
+        for (let i = 0; i < accessor.count; i++) {
+          // Take [u, v] couple from the arrayBuffer
+          const uv = new ArrayType(arrayBuffer, byteOffset + i * elementAddressScale, 2);
+          // Set and transform Vector3 per https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_texture_transform#overview
+          scratchVector.set(uv[0], uv[1], 1);
+          scratchVector.transformByMatrix3(matrix);
+          // Save result in Float32Array
+          result.set([scratchVector[0], scratchVector[1]], i * components);
+        }
+        // If texCoord the same, replace gltf structural data
+        if (originalTexCoord === texCoord) {
+          updateGltf(accessor, bufferView, gltfData.buffers, result);
+        } else {
+          // If texCoord change, create new attribute
+          createAttribute(texCoord, accessor, primitive, gltfData, result);
+        }
+      }
+    }
+  }
+}
+
+/**
+ * Update GLTF structural objects with new data as we create new `Float32Array` for `TEXCOORD_0`.
+ * @param accessor accessor to change
+ * @param bufferView bufferView to change
+ * @param buffers binary buffers
+ * @param newTexcoordArray typed array with data after transformation
+ */
+function updateGltf(
+  accessor: Accessor,
+  bufferView: BufferView,
+  buffers: {arrayBuffer: ArrayBuffer; byteOffset: number; byteLength: number}[],
+  newTexCoordArray: Float32Array
+): void {
+  accessor.componentType = 5126;
+  buffers.push({
+    arrayBuffer: newTexCoordArray.buffer,
+    byteOffset: 0,
+    byteLength: newTexCoordArray.buffer.byteLength
+  });
+  bufferView.buffer = buffers.length - 1;
+  bufferView.byteLength = newTexCoordArray.buffer.byteLength;
+  bufferView.byteOffset = 0;
+  delete bufferView.byteStride;
+}
+
+/**
+ *
+ * @param newTexCoord new `texCoord` value
+ * @param originalAccessor original accessor object, that store data before transformation
+ * @param primitive primitive object
+ * @param gltfData gltf data
+ * @param newTexCoordArray typed array with data after transformation
+ * @returns
+ */
+function createAttribute(
+  newTexCoord: number,
+  originalAccessor: Accessor,
+  primitive: GLTFMeshPrimitive,
+  gltfData: GLTFWithBuffers,
+  newTexCoordArray: Float32Array
+) {
+  gltfData.buffers.push({
+    arrayBuffer: newTexCoordArray.buffer,
+    byteOffset: 0,
+    byteLength: newTexCoordArray.buffer.byteLength
+  });
+  const bufferViews = gltfData.json.bufferViews;
+  if (!bufferViews) {
+    return;
+  }
+  bufferViews.push({
+    buffer: gltfData.buffers.length - 1,
+    byteLength: newTexCoordArray.buffer.byteLength,
+    byteOffset: 0
+  });
+  const accessors = gltfData.json.accessors;
+  if (!accessors) {
+    return;
+  }
+  accessors.push({
+    bufferView: bufferViews?.length - 1,
+    byteOffset: 0,
+    componentType: 5126,
+    count: originalAccessor.count,
+    type: 'VEC2'
+  });
+  primitive.attributes[`TEXCOORD_${newTexCoord}`] = accessors.length - 1;
+}
+
+/**
+ * Construct transformation matrix from the extension data (transition, rotation, scale)
+ * @param extensionData extension data
+ * @returns transformation matrix
+ */
+function makeTransformationMatrix(extensionData: TextureInfo): Matrix3 {
+  const {offset = [0, 0], rotation = 0, scale = [1, 1]} = extensionData;
+  const translationMatirx = new Matrix3().set(1, 0, 0, 0, 1, 0, offset[0], offset[1], 1);
+  const rotationMatirx = scratchRotationMatrix.set(
+    Math.cos(rotation),
+    Math.sin(rotation),
+    0,
+    -Math.sin(rotation),
+    Math.cos(rotation),
+    0,
+    0,
+    0,
+    1
+  );
+  const scaleMatrix = scratchScaleMatrix.set(scale[0], 0, 0, 0, scale[1], 0, 0, 0, 1);
+  return translationMatirx.multiplyRight(rotationMatirx).multiplyRight(scaleMatrix);
+}