@lightningjs/renderer 3.0.0-beta22 → 3.0.0-beta24

package/src/core/renderers/webgl/WebGlShaderProgram.ts

@@ -16,7 +16,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import type { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
+import type { GlContextWrapper } from '../../platforms/GlContextWrapper.js';
 import { Default } from '../../shaders/webgl/Default.js';
 import type { CoreShaderProgram } from '../CoreShaderProgram.js';
 import type { WebGlCtxTexture } from './WebGlCtxTexture.js';
@@ -44,7 +44,7 @@ export class WebGlShaderProgram implements CoreShaderProgram {
    */
   protected vao: WebGLVertexArrayObject | undefined;
   protected renderer: WebGlRenderer;
-  protected glw: WebGlContextWrapper;
+  protected glw: GlContextWrapper;
   protected attributeLocations: string[];
   protected uniformLocations: Record<string, WebGLUniformLocation> | null;
   protected lifecycle: Pick<WebGlShaderType, 'update' | 'canBatch'>;
@@ -112,10 +112,6 @@ export class WebGlShaderProgram implements CoreShaderProgram {
     }
 
     const program = createProgram(glw, vertexShader, fragmentShader);
-    if (!program) {
-      throw new Error();
-    }
-
     this.program = program;
     this.attributeLocations = glw.getAttributeLocations(program);
 

package/src/core/renderers/webgl/internal/RendererUtils.ts

@@ -17,7 +17,7 @@
  * limitations under the License.
  */
 
-import type { WebGlContextWrapper } from '../../../lib/WebGlContextWrapper.js';
+import type { GlContextWrapper } from '../../../platforms/GlContextWrapper.js';
 
 export interface CoreWebGlParameters {
   MAX_RENDERBUFFER_SIZE: number;
@@ -36,9 +36,7 @@ export interface CoreWebGlParameters {
  * Get device specific webgl parameters
  * @param glw
  */
-export function getWebGlParameters(
-  glw: WebGlContextWrapper,
-): CoreWebGlParameters {
+export function getWebGlParameters(glw: GlContextWrapper): CoreWebGlParameters {
   const params: CoreWebGlParameters = {
     MAX_RENDERBUFFER_SIZE: 0,
     MAX_TEXTURE_SIZE: 0,
@@ -81,9 +79,7 @@ export interface CoreWebGlExtensions {
  * Get device webgl extensions
  * @param glw
  */
-export function getWebGlExtensions(
-  glw: WebGlContextWrapper,
-): CoreWebGlExtensions {
+export function getWebGlExtensions(glw: GlContextWrapper): CoreWebGlExtensions {
   const extensions: CoreWebGlExtensions = {
     ANGLE_instanced_arrays: null,
     WEBGL_compressed_texture_s3tc: null,
@@ -113,7 +109,7 @@ export function getWebGlExtensions(
  * @param glw
  * @param size
  */
-export function createIndexBuffer(glw: WebGlContextWrapper, size: number) {
+export function createIndexBuffer(glw: GlContextWrapper, size: number) {
   const maxQuads = ~~(size / 80);
   const indices = new Uint16Array(maxQuads * 6);
 

package/src/core/renderers/webgl/internal/ShaderUtils.ts

@@ -17,7 +17,7 @@
  * limitations under the License.
  */
 
-import type { WebGlContextWrapper } from '../../../lib/WebGlContextWrapper.js';
+import type { GlContextWrapper } from '../../../platforms/GlContextWrapper.js';
 
 //#region Types
 export interface AttributeInfo {
@@ -178,7 +178,7 @@ export interface ShaderProgramSources {
 //#endregion Types
 
 export function createShader(
-  glw: WebGlContextWrapper,
+  glw: GlContextWrapper,
   type: number,
   source: string,
 ) {
@@ -204,7 +204,7 @@ export function createShader(
 }
 
 export function createProgram(
-  glw: WebGlContextWrapper,
+  glw: GlContextWrapper,
   vertexShader: WebGLShader,
   fragmentShader: WebGLShader,
 ) {
@@ -221,9 +221,11 @@ export function createProgram(
     return program;
   }
 
-  console.warn(glw.getProgramInfoLog(program));
+  const infoLog =
+    glw.getProgramInfoLog(program) || 'Unknown program link error';
+  console.warn(infoLog);
   glw.deleteProgram(program);
-  return undefined;
+  throw new Error(`Unable to link shader program: ${infoLog}`);
 }
 
 export const DefaultVertexSource = `

package/src/core/shaders/webgl/Border.ts

@@ -66,10 +66,12 @@ export const Border: WebGlShaderType<BorderProps> = {
       vec2 edge = clamp(a_nodeCoords * 2.0 - vec2(1.0), -1.0, 1.0);
       v_edgeWidth = 1.0 / u_pixelRatio;
 
-      float borderTop = u_borderWidth.x;
-      float borderRight = u_borderWidth.y;
-      float borderBottom = u_borderWidth.z;
-      float borderLeft = u_borderWidth.w;
+      vec4 adjustedBorderWidth = u_borderWidth - 1.0 + clamp(u_borderWidth, -1.0, 1.0);
+
+      float borderTop = adjustedBorderWidth.x;
+      float borderRight = adjustedBorderWidth.y;
+      float borderBottom = adjustedBorderWidth.z;
+      float borderLeft = adjustedBorderWidth.w;
 
       v_outerBorderUv = vec2(0.0);
       v_innerBorderUv = vec2(0.0);

package/src/core/shaders/webgl/RoundedWithBorder.ts

@@ -69,24 +69,24 @@ export const RoundedWithBorder: WebGlShaderType<RoundedWithBorderProps> = {
     varying vec4 v_innerBorderRadius;
     varying vec4 v_outerBorderRadius;
     varying vec2 v_halfDimensions;
-    varying float v_edgeWidth;
-    varying float v_borderZero;
 
     void main() {
       vec2 vertexPos = a_position * u_pixelRatio;
       vec2 screenSpace = vec2(2.0 / u_resolution.x, -2.0 / u_resolution.y);
       vec2 edge = clamp(a_nodeCoords * 2.0 - vec2(1.0), -1.0, 1.0);
       vec2 edgeOffset = vec2(0.0);
+      float borderZero = 1.0 - step(0.001, dot(abs(u_borderWidth), vec4(1.0)));
 
-      v_borderZero = u_borderWidth == vec4(0.0) ? 1.0 : 0.0;
       v_innerSize = vec2(0.0);
       v_outerSize = vec2(0.0);
 
-      if(v_borderZero == 0.0) {
-        float borderTop = u_borderWidth.x;
-        float borderRight = u_borderWidth.y;
-        float borderBottom = u_borderWidth.z;
-        float borderLeft = u_borderWidth.w;
+      if(borderZero == 0.0) {
+        vec4 adjustedBorderWidth = u_borderWidth - 1.0 + clamp(u_borderWidth, -1.0, 1.0);
+
+        float borderTop = adjustedBorderWidth.x;
+        float borderRight = adjustedBorderWidth.y;
+        float borderBottom = adjustedBorderWidth.z;
+        float borderLeft = adjustedBorderWidth.w;
 
         v_outerBorderUv = vec2(0.0);
         v_innerBorderUv = vec2(0.0);
@@ -141,7 +141,6 @@ export const RoundedWithBorder: WebGlShaderType<RoundedWithBorderProps> = {
       v_textureCoords = a_textureCoords + (screenSpace + edgeOffset) / (u_dimensions);
 
       v_halfDimensions = u_dimensions * 0.5;
-      v_edgeWidth = 1.0 / u_pixelRatio;
     }
   `,
   fragment: `
@@ -174,8 +173,6 @@ export const RoundedWithBorder: WebGlShaderType<RoundedWithBorderProps> = {
     varying vec4 v_innerBorderRadius;
     varying vec4 v_outerBorderRadius;
     varying vec2 v_halfDimensions;
-    varying float v_edgeWidth;
-    varying float v_borderZero;
 
     float roundedBox(vec2 p, vec2 s, vec4 r) {
       r.xy = (p.x > 0.0) ? r.yz : r.xw;
@@ -188,21 +185,23 @@ export const RoundedWithBorder: WebGlShaderType<RoundedWithBorderProps> = {
       vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
       vec4 resultColor = vec4(0.0);
       vec2 boxUv = v_nodeCoords.xy * u_dimensions - v_halfDimensions;
+      float borderZero = 1.0 - step(0.001, dot(abs(u_borderWidth), vec4(1.0)));
+      float edgeWidth = 1.0 / u_pixelRatio;
 
-      float nodeDist = roundedBox(boxUv, v_halfDimensions - v_edgeWidth, u_radius);
-      float nodeAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, nodeDist);
+      float nodeDist = roundedBox(boxUv, v_halfDimensions - edgeWidth, u_radius);
+      float nodeAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, nodeDist);
       resultColor = mix(resultColor, color, nodeAlpha);
 
-      if(v_borderZero == 1.0) {
+      if(borderZero == 1.0) {
         gl_FragColor = resultColor * u_alpha;
         return;
       }
 
-      float outerDist = roundedBox(boxUv + v_outerBorderUv, v_outerSize - v_edgeWidth, v_outerBorderRadius);
-      float innerDist = roundedBox(boxUv + v_innerBorderUv, v_innerSize - v_edgeWidth, v_innerBorderRadius);
+      float outerDist = roundedBox(boxUv + v_outerBorderUv, v_outerSize - edgeWidth, v_outerBorderRadius);
+      float innerDist = roundedBox(boxUv + v_innerBorderUv, v_innerSize - edgeWidth, v_innerBorderRadius);
 
       float borderDist = max(-innerDist, outerDist);
-      float borderAlpha = (1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, borderDist)) * u_borderColor.a;
+      float borderAlpha = (1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, borderDist)) * u_borderColor.a;
 
       resultColor = mix(resultColor, vec4(u_borderColor.rgb, 1.0), borderAlpha);
       gl_FragColor = resultColor * u_alpha;

package/src/core/shaders/webgl/RoundedWithBorderAndShadow.ts

@@ -76,26 +76,25 @@ export const RoundedWithBorderAndShadow: WebGlShaderType<RoundedWithBorderAndSha
     varying vec4 v_innerBorderRadius;
     varying vec4 v_outerBorderRadius;
     varying vec2 v_halfDimensions;
-    varying float v_edgeWidth;
-    varying float v_borderZero;
 
     void main() {
       vec2 screenSpace = vec2(2.0 / u_resolution.x,  -2.0 / u_resolution.y);
       vec2 edge = clamp(a_nodeCoords * 2.0 - vec2(1.0), -1.0, 1.0);
+      float borderZero = 1.0 - step(0.001, dot(abs(u_borderWidth), vec4(1.0)));
 
       vec2 edgeOffset = edge * ((u_shadow.w * 2.0)+ u_shadow.z) + u_shadow.xy;
       vec2 vertexPos = (a_position + edge + edgeOffset) * u_pixelRatio;
 
-      v_borderZero = u_borderWidth == vec4(0.0) ? 1.0 : 0.0;
-
       v_innerSize = vec2(0.0);
       v_outerSize = vec2(0.0);
 
-      if(v_borderZero == 0.0) {
-        float borderTop = u_borderWidth.x;
-        float borderRight = u_borderWidth.y;
-        float borderBottom = u_borderWidth.z;
-        float borderLeft = u_borderWidth.w;
+      if(borderZero == 0.0) {
+        vec4 adjustedBorderWidth = u_borderWidth - 1.0 + clamp(u_borderWidth, -1.0, 1.0);
+
+        float borderTop = adjustedBorderWidth.x;
+        float borderRight = adjustedBorderWidth.y;
+        float borderBottom = adjustedBorderWidth.z;
+        float borderLeft = adjustedBorderWidth.w;
 
         v_outerBorderUv = vec2(0.0);
         v_innerBorderUv = vec2(0.0);
@@ -146,7 +145,6 @@ export const RoundedWithBorderAndShadow: WebGlShaderType<RoundedWithBorderAndSha
       gl_Position = vec4(vertexPos.x * screenSpace.x - 1.0, -sign(screenSpace.y) * (vertexPos.y * -abs(screenSpace.y)) + 1.0, 0.0, 1.0);
 
       v_halfDimensions = u_dimensions * 0.5;
-      v_edgeWidth = 1.0 / u_pixelRatio;
       v_color = a_color;
       v_nodeCoords = a_nodeCoords + (screenSpace + edgeOffset) / (u_dimensions);
       v_textureCoords = a_textureCoords + (screenSpace + edgeOffset) / (u_dimensions);
@@ -183,8 +181,6 @@ export const RoundedWithBorderAndShadow: WebGlShaderType<RoundedWithBorderAndSha
     varying vec4 v_innerBorderRadius;
     varying vec4 v_outerBorderRadius;
     varying vec2 v_halfDimensions;
-    varying float v_edgeWidth;
-    varying float v_borderZero;
 
     float roundedBox(vec2 p, vec2 s, vec4 r) {
       r.xy = (p.x > 0.0) ? r.yz : r.xw;
@@ -205,28 +201,30 @@ export const RoundedWithBorderAndShadow: WebGlShaderType<RoundedWithBorderAndSha
       vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
       vec4 resultColor = vec4(0.0);
       vec2 boxUv = v_nodeCoords.xy * u_dimensions - v_halfDimensions;
-      float nodeDist = roundedBox(boxUv, v_halfDimensions - v_edgeWidth, u_radius);
-      float nodeAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, nodeDist);
+      float borderZero = 1.0 - step(0.001, dot(abs(u_borderWidth), vec4(1.0)));
+      float edgeWidth = 1.0 / u_pixelRatio;
+      float nodeDist = roundedBox(boxUv, v_halfDimensions - edgeWidth, u_radius);
+      float nodeAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, nodeDist);
       float shadowAlpha;
 
-      if(v_borderZero == 1.0) {
-        shadowAlpha = shadowBox(boxUv - u_shadow.xy, v_halfDimensions + u_shadow.w - v_edgeWidth, u_radius + u_shadow.z);
+      if(borderZero == 1.0) {
+        shadowAlpha = shadowBox(boxUv - u_shadow.xy, v_halfDimensions + u_shadow.w - edgeWidth, u_radius + u_shadow.z);
         resultColor = mix(resultColor, u_shadowColor, shadowAlpha);
         gl_FragColor = mix(resultColor, color, nodeAlpha) * u_alpha;
         return;
       }
 
       if(v_outerSize.x > v_halfDimensions.x || v_outerSize.y > v_halfDimensions.y) {
-        shadowAlpha = shadowBox(boxUv + v_outerBorderUv - u_shadow.xy, v_outerSize + u_shadow.w - v_edgeWidth, v_outerBorderRadius + u_shadow.z);
+        shadowAlpha = shadowBox(boxUv + v_outerBorderUv - u_shadow.xy, v_outerSize + u_shadow.w - edgeWidth, v_outerBorderRadius + u_shadow.z);
       }
       else {
-        shadowAlpha = shadowBox(boxUv - u_shadow.xy, v_halfDimensions + u_shadow.w - v_edgeWidth, u_radius + u_shadow.z);
+        shadowAlpha = shadowBox(boxUv - u_shadow.xy, v_halfDimensions + u_shadow.w - edgeWidth, u_radius + u_shadow.z);
       }
 
-      float outerDist = roundedBox(boxUv + v_outerBorderUv, v_outerSize - v_edgeWidth, v_outerBorderRadius);
-      float innerDist = roundedBox(boxUv + v_innerBorderUv, v_innerSize - v_edgeWidth, v_innerBorderRadius);
+      float outerDist = roundedBox(boxUv + v_outerBorderUv, v_outerSize - edgeWidth, v_outerBorderRadius);
+      float innerDist = roundedBox(boxUv + v_innerBorderUv, v_innerSize - edgeWidth, v_innerBorderRadius);
       float borderDist = max(-innerDist, outerDist);
-      float borderAlpha = (1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, borderDist)) * u_borderColor.a;
+      float borderAlpha = (1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, borderDist)) * u_borderColor.a;
       resultColor = mix(resultColor, u_shadowColor, shadowAlpha);
       resultColor = mix(resultColor, color, nodeAlpha);
       resultColor = mix(resultColor, vec4(u_borderColor.rgb, 1.0), borderAlpha);

package/src/core/text-rendering/SdfFontHandler.ts

@@ -550,22 +550,15 @@ export const measureText = (
   fontFamily: string,
   letterSpacing: number,
 ): number => {
-  if (text.length === 1) {
-    const char = text.charAt(0);
-    const codepoint = text.codePointAt(0);
-    if (codepoint === undefined) return 0;
-    if (hasZeroWidthSpace(char) === true) return 0;
+  if (text.length === 0) return 0;
 
-    const glyph = getGlyph(fontFamily, codepoint);
-    if (glyph === null) return 0;
-    return glyph.xadvance + letterSpacing;
-  }
   let width = 0;
-  let prevCodepoint = 0;
-  for (let i = 0; i < text.length; i++) {
-    const char = text.charAt(i);
-    const codepoint = text.codePointAt(i);
-    if (codepoint === undefined) continue;
+  let prevGlyphId = 0;
+  for (const char of text) {
+    const codepoint = char.codePointAt(0);
+    if (codepoint === undefined) {
+      continue;
+    }
 
     // Skip zero-width spaces in width calculations
     if (hasZeroWidthSpace(char)) {
@@ -578,13 +571,13 @@ export const measureText = (
     let advance = glyph.xadvance;
 
     // Add kerning if there's a previous character
-    if (prevCodepoint !== 0) {
-      const kerning = getKerning(fontFamily, prevCodepoint, codepoint);
+    if (prevGlyphId !== 0) {
+      const kerning = getKerning(fontFamily, prevGlyphId, glyph.id);
       advance += kerning;
     }
 
     width += advance + letterSpacing;
-    prevCodepoint = codepoint;
+    prevGlyphId = glyph.id;
   }
 
   return width;

package/src/core/text-rendering/SdfTextRenderer.ts

@@ -277,7 +277,6 @@ const generateTextLayout = (
   const fontFamily = props.fontFamily;
   const lineHeight = props.lineHeight;
   const metrics = SdfFontHandler.getFontMetrics(fontFamily, fontSize);
-  const verticalAlign = props.verticalAlign;
 
   const fontData = fontCache.data;
   const commonFontData = fontData.common;
@@ -323,14 +322,12 @@ const generateTextLayout = (
   for (let i = 0; i < lineAmount; i++) {
     const line = lines[i] as TextLineStruct;
     const textLine = line[0];
-    const textLineLength = textLine.length;
-    let prevCodepoint = 0;
+    let prevGlyphId = 0;
     currentX = line[3];
     //convert Y coord to vertex value
     currentY = line[4] / fontScale;
 
-    for (let j = 0; j < textLineLength; j++) {
-      const char = textLine.charAt(j);
+    for (const char of textLine) {
       if (hasZeroWidthSpace(char) === true) {
         continue;
       }
@@ -343,19 +340,17 @@ const generateTextLayout = (
       if (glyph === null) {
         continue;
       }
-      // Calculate advance with kerning (in design units)
-      let advance = glyph.xadvance;
+      // Kerning offsets the current glyph relative to the previous glyph.
+      let kerning = 0;
 
       // Add kerning if there's a previous character
-      if (prevCodepoint !== 0) {
-        const kerning = SdfFontHandler.getKerning(
-          fontFamily,
-          prevCodepoint,
-          codepoint,
-        );
-        advance += kerning;
+      if (prevGlyphId !== 0) {
+        kerning = SdfFontHandler.getKerning(fontFamily, prevGlyphId, glyph.id);
       }
 
+      // Apply pair kerning before placing this glyph.
+      currentX += kerning;
+
       // Calculate glyph position and atlas coordinates (in design units)
       const glyphLayout: GlyphLayout = {
         codepoint,
@@ -375,8 +370,8 @@ const generateTextLayout = (
       glyphs.push(glyphLayout);
 
       // Advance position with letter spacing (in design units)
-      currentX += advance + letterSpacing;
-      prevCodepoint = codepoint;
+      currentX += glyph.xadvance + letterSpacing;
+      prevGlyphId = glyph.id;
     }
     currentY += lineHeightPx;
   }

package/src/core/textures/ImageTexture.ts

@@ -19,19 +19,8 @@
 
 import type { CoreTextureManager } from '../CoreTextureManager.js';
 import { Texture, TextureType, type TextureData } from './Texture.js';
-import {
-  isCompressedTextureContainer,
-  loadCompressedTexture,
-} from '../lib/textureCompression.js';
-import {
-  convertUrlToAbsolute,
-  dataURIToBlob,
-  isBase64Image,
-} from '../lib/utils.js';
-import { isSvgImage, loadSvg } from '../lib/textureSvg.js';
-import { fetchJson } from '../lib/utils.js';
 import type { Platform } from '../platforms/Platform.js';
-import { isProductionEnvironment } from '../../utils.js';
+import type { CompressedImageData } from '../platforms/web/lib/textureCompression.js';
 
 /**
  * Properties of the {@link ImageTexture}
@@ -117,6 +106,11 @@ export interface ImageTextureProps {
   maxRetryCount?: number;
 }
 
+export interface ImageResponse {
+  data: ImageBitmap | ImageData | CompressedImageData | HTMLImageElement | null;
+  premultiplyAlpha: boolean | null;
+}
+
 /**
  * Texture consisting of an image loaded from a URL
  *
@@ -148,125 +142,6 @@ export class ImageTexture extends Texture {
     this.maxRetryCount = props.maxRetryCount as number;
   }
 
-  hasAlphaChannel(mimeType: string) {
-    return mimeType.indexOf('image/png') !== -1;
-  }
-
-  async loadImageFallback(src: string | Blob, hasAlpha: boolean) {
-    const img = new Image();
-
-    if (typeof src === 'string' && isBase64Image(src) === false) {
-      img.crossOrigin = 'anonymous';
-    }
-
-    return new Promise<{
-      data: HTMLImageElement | null;
-      premultiplyAlpha: boolean;
-    }>((resolve, reject) => {
-      img.onload = () => {
-        resolve({ data: img, premultiplyAlpha: hasAlpha });
-      };
-
-      img.onerror = (err) => {
-        const errorMessage =
-          err instanceof Error
-            ? err.message
-            : err instanceof Event
-            ? `Image loading failed for ${img.src}`
-            : 'Unknown image loading error';
-        reject(new Error(`Image loading failed: ${errorMessage}`));
-      };
-
-      if (src instanceof Blob) {
-        img.src = URL.createObjectURL(src);
-      } else {
-        img.src = src;
-      }
-    });
-  }
-
-  async createImageBitmap(
-    blob: Blob,
-    premultiplyAlpha: boolean | null,
-    sx: number | null,
-    sy: number | null,
-    sw: number | null,
-    sh: number | null,
-  ): Promise<{
-    data: ImageBitmap | HTMLImageElement;
-    premultiplyAlpha: boolean;
-  }> {
-    const hasAlphaChannel = premultiplyAlpha ?? blob.type.includes('image/png');
-    const imageBitmapSupported = this.txManager.imageBitmapSupported;
-
-    if (imageBitmapSupported.full === true && sw !== null && sh !== null) {
-      // createImageBitmap with crop
-      const bitmap = await this.platform.createImageBitmap(
-        blob,
-        sx || 0,
-        sy || 0,
-        sw,
-        sh,
-        {
-          premultiplyAlpha: hasAlphaChannel ? 'premultiply' : 'none',
-          colorSpaceConversion: 'none',
-          imageOrientation: 'none',
-        },
-      );
-      return { data: bitmap, premultiplyAlpha: hasAlphaChannel };
-    } else if (imageBitmapSupported.basic === true) {
-      // basic createImageBitmap without options or crop
-      // this is supported for Chrome v50 to v52/54 that doesn't support options
-      return {
-        data: await this.platform.createImageBitmap(blob),
-        premultiplyAlpha: hasAlphaChannel,
-      };
-    }
-
-    // default createImageBitmap without crop but with options
-    const bitmap = await this.platform.createImageBitmap(blob, {
-      premultiplyAlpha: hasAlphaChannel ? 'premultiply' : 'none',
-      colorSpaceConversion: 'none',
-      imageOrientation: 'none',
-    });
-    return { data: bitmap, premultiplyAlpha: hasAlphaChannel };
-  }
-
-  async loadImage(src: string) {
-    const { premultiplyAlpha, sx, sy, sw, sh } = this.props;
-
-    if (this.txManager.hasCreateImageBitmap === true) {
-      if (
-        isBase64Image(src) === false &&
-        this.txManager.hasWorker === true &&
-        this.txManager.imageWorkerManager !== null
-      ) {
-        return this.txManager.imageWorkerManager.getImage(
-          src,
-          premultiplyAlpha,
-          sx,
-          sy,
-          sw,
-          sh,
-        );
-      }
-
-      let blob;
-
-      if (isBase64Image(src) === true) {
-        blob = dataURIToBlob(src);
-      } else {
-        blob = await fetchJson(src, 'blob').then(
-          (response) => response as Blob,
-        );
-      }
-
-      return this.createImageBitmap(blob, premultiplyAlpha, sx, sy, sw, sh);
-    }
-
-    return this.loadImageFallback(src, premultiplyAlpha ?? true);
-  }
-
   override async getTextureSource(): Promise<TextureData> {
     let resp: TextureData;
     try {
@@ -293,7 +168,10 @@ export class ImageTexture extends Texture {
   }
 
   determineImageTypeAndLoadImage() {
-    const { src, premultiplyAlpha, type } = this.props;
+    const { src, premultiplyAlpha, type, w, h, sx, sy, sw, sh } = this.props;
+    const platform = this.platform;
+    const premultiply = premultiplyAlpha ?? true;
+
     if (src === null) {
       return {
         data: null,
@@ -302,13 +180,9 @@ export class ImageTexture extends Texture {
 
     if (typeof src !== 'string') {
       if (src instanceof Blob) {
-        if (this.txManager.hasCreateImageBitmap === true) {
-          const { sx, sy, sw, sh } = this.props;
-          return this.createImageBitmap(src, premultiplyAlpha, sx, sy, sw, sh);
-        } else {
-          return this.loadImageFallback(src, premultiplyAlpha ?? true);
-        }
+        return platform.createImage(src, premultiply, sx, sy, sw, sh);
       }
+
       if (src instanceof ImageData) {
         return {
           data: src,
@@ -321,45 +195,28 @@ export class ImageTexture extends Texture {
       };
     }
 
-    const absoluteSrc = convertUrlToAbsolute(src);
     if (type === 'regular') {
-      return this.loadImage(absoluteSrc);
+      return platform.loadImage(src, premultiply, sx, sy, sw, sh);
     }
 
     if (type === 'svg') {
-      return loadSvg(
-        absoluteSrc,
-        this.props.w,
-        this.props.h,
-        this.props.sx,
-        this.props.sy,
-        this.props.sw,
-        this.props.sh,
-      );
+      return platform.loadSvg(src, w, h, sx, sy, sw, sh);
     }
 
     if (isSvgImage(src) === true) {
-      return loadSvg(
-        absoluteSrc,
-        this.props.w,
-        this.props.h,
-        this.props.sx,
-        this.props.sy,
-        this.props.sw,
-        this.props.sh,
-      );
+      return platform.loadSvg(src, w, h, sx, sy, sw, sh);
     }
 
     if (type === 'compressed') {
-      return loadCompressedTexture(absoluteSrc);
+      return platform.loadCompressedTexture(src);
     }
 
     if (isCompressedTextureContainer(src) === true) {
-      return loadCompressedTexture(absoluteSrc);
+      return platform.loadCompressedTexture(src);
     }
 
     // default
-    return this.loadImage(absoluteSrc);
+    return platform.loadImage(src, premultiply, sx, sy, sw, sh);
   }
 
   /**
@@ -409,3 +266,27 @@ export class ImageTexture extends Texture {
 
   static z$__type__Props: ImageTextureProps;
 }
+
+/**
+ * Tests if the given location is a SVG
+ * @param url
+ * @remarks
+ * This function is used to determine if the given image url is a SVG
+ * image
+ * @returns
+ */
+export function isSvgImage(url: string): boolean {
+  return /\.(svg)(\?.*)?$/.test(url);
+}
+
+/**
+ * Tests if the given location is a compressed texture container
+ * @param url
+ * @remarks
+ * This function is used to determine if the given image url is a compressed
+ * and only supports the following extensions: .ktx and .pvr
+ * @returns
+ */
+export function isCompressedTextureContainer(src: string): boolean {
+  return /\.(ktx|pvr)$/.test(src);
+}