@lightningjs/renderer 3.0.0-beta21 → 3.0.0-beta23

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

@@ -19,9 +19,8 @@
 
 import type { Dimensions } from '../../../common/CommonTypes.js';
 import type { TextureMemoryManager } from '../../TextureMemoryManager.js';
-import type { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
+import type { GlContextWrapper } from '../../platforms/GlContextWrapper.js';
 import type { Texture } from '../../textures/Texture.js';
-import { uploadCompressedTexture } from '../../lib/textureCompression.js';
 import { CoreContextTexture } from '../CoreContextTexture.js';
 import { isHTMLImageElement } from './internal/RendererUtils.js';
 import type { Bound } from '../../lib/utils.js';
@@ -53,7 +52,7 @@ export class WebGlCtxTexture extends CoreContextTexture {
   };
 
   constructor(
-    protected glw: WebGlContextWrapper,
+    protected glw: GlContextWrapper,
     memManager: TextureMemoryManager,
     textureSource: Texture,
   ) {
@@ -239,7 +238,7 @@ export class WebGlCtxTexture extends CoreContextTexture {
       this.setTextureMemUse(TRANSPARENT_TEXTURE_DATA.byteLength);
     } else if ('mipmaps' in tdata && tdata.mipmaps) {
       const { mipmaps, type, blockInfo } = tdata;
-      uploadCompressedTexture[type]!(glw, this._nativeCtxTexture, tdata);
+      glw['upload' + type]!(this._nativeCtxTexture, tdata);
 
       // Check for errors after compressed texture operations
       if (this.checkGLError() === true) {

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

@@ -17,12 +17,7 @@
  * limitations under the License.
  */
 
-import { createWebGLContext } from '../../../utils.js';
-import {
-  CoreRenderer,
-  type BufferInfo,
-  type CoreRendererOptions,
-} from '../CoreRenderer.js';
+import { CoreRenderer, type BufferInfo } from '../CoreRenderer.js';
 import type { SdfRenderOp } from './SdfRenderOp.js';
 import type { CoreContextTexture } from '../CoreContextTexture.js';
 import {
@@ -44,7 +39,6 @@ import { WebGlCtxSubTexture } from './WebGlCtxSubTexture.js';
 import { BufferCollection } from './internal/BufferCollection.js';
 import { compareRect, getNormalizedRgbaComponents } from '../../lib/utils.js';
 import { WebGlShaderProgram } from './WebGlShaderProgram.js';
-import { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
 import { RenderTexture } from '../../textures/RenderTexture.js';
 import { CoreNodeRenderState, CoreNode } from '../../CoreNode.js';
 import { WebGlCtxRenderTexture } from './WebGlCtxRenderTexture.js';
@@ -52,8 +46,9 @@ import { Default } from '../../shaders/webgl/Default.js';
 import type { WebGlShaderType } from './WebGlShaderNode.js';
 import { WebGlShaderNode } from './WebGlShaderNode.js';
 import type { Dimensions } from '../../../common/CommonTypes.js';
-
-export type WebGlRendererOptions = CoreRendererOptions;
+import type { GlContextWrapper } from '../../platforms/GlContextWrapper.js';
+import type { Platform } from '../../platforms/Platform.js';
+import type { Stage } from '../../Stage.js';
 
 interface CoreWebGlSystem {
   parameters: CoreWebGlParameters;
@@ -64,7 +59,7 @@ export type WebGlRenderOp = CoreNode | SdfRenderOp;
 
 export class WebGlRenderer extends CoreRenderer {
   //// WebGL Native Context and Data
-  glw: WebGlContextWrapper;
+  glw: GlContextWrapper;
   system: CoreWebGlSystem;
 
   //// Persistent data
@@ -106,8 +101,8 @@ export class WebGlRenderer extends CoreRenderer {
    */
   public renderToTextureActive = false;
 
-  constructor(options: WebGlRendererOptions) {
-    super(options);
+  constructor(stage: Stage) {
+    super(stage);
 
     this.quadBuffer = new ArrayBuffer(this.stage.options.quadBufferSize);
     this.fQuadBuffer = new Float32Array(this.quadBuffer);
@@ -115,13 +110,11 @@ export class WebGlRenderer extends CoreRenderer {
 
     this.mode = 'webgl';
 
-    const gl = createWebGLContext(
-      options.canvas,
-      options.forceWebGL2,
-      options.contextSpy,
-    );
-    const glw = (this.glw = new WebGlContextWrapper(gl));
-    glw.viewport(0, 0, options.canvas.width, options.canvas.height);
+    const platform = this.stage.platform;
+    const canvas = platform.canvas!;
+
+    const glw = (this.glw = platform.createContext() as GlContextWrapper);
+    glw.viewport(0, 0, canvas.width, canvas.height);
 
     this.updateClearColor(this.stage.clearColor);
 

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

@@ -1,6 +1,6 @@
 import type { CoreNode } from '../../CoreNode.js';
 import { getNormalizedRgbaComponents } from '../../lib/utils.js';
-import type { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
+import type { GlContextWrapper } from '../../platforms/GlContextWrapper.js';
 import type { Stage } from '../../Stage.js';
 import { CoreShaderNode, type CoreShaderType } from '../CoreShaderNode.js';
 import type {
@@ -40,7 +40,7 @@ export type WebGlShaderType<T extends object = Record<string, unknown>> =
      *
      * @warning don't use this in your shader type
      */
-    onSdfBind?: (this: WebGlContextWrapper, props: T) => void;
+    onSdfBind?: (this: GlContextWrapper, props: T) => void;
     /**
      * This function is used to check if the shader can be reused based on quad info
      * @param props

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'>;

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,
 ) {

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);
@@ -149,23 +151,17 @@ export const Border: WebGlShaderType<BorderProps> = {
       vec4 resultColor = vec4(0.0);
       vec2 boxUv = v_nodeCoords.xy * u_dimensions - v_halfDimensions;
 
-      float outerDist = box(boxUv + v_outerBorderUv, v_outerSize - v_edgeWidth);
-      float innerDist = box(boxUv + v_innerBorderUv, v_innerSize - v_edgeWidth);
-
-      if(u_borderGap == 0.0) {
-        resultColor = mix(resultColor, u_borderColor, 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, outerDist));
-        resultColor = mix(resultColor, color, 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, innerDist));
-        gl_FragColor = resultColor * u_alpha;
-        return;
-      }
-
       float nodeDist = box(boxUv, v_halfDimensions - v_edgeWidth);
       float nodeAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, nodeDist);
+      resultColor = mix(resultColor, color, nodeAlpha);
+
+      float outerDist = box(boxUv + v_outerBorderUv, v_outerSize - v_edgeWidth);
+      float innerDist = box(boxUv + v_innerBorderUv, v_innerSize - v_edgeWidth);
 
       float borderDist = max(-innerDist, outerDist);
-      float borderAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, borderDist);
-      resultColor = mix(resultColor, color, nodeAlpha);
-      resultColor = mix(resultColor, u_borderColor, borderAlpha * u_borderColor.a);
+      float borderAlpha = (1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_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/RoundedWithBorder.ts

@@ -83,10 +83,12 @@ export const RoundedWithBorder: WebGlShaderType<RoundedWithBorderProps> = {
       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;
+        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);
@@ -189,33 +191,22 @@ export const RoundedWithBorder: WebGlShaderType<RoundedWithBorderProps> = {
       vec4 resultColor = vec4(0.0);
       vec2 boxUv = v_nodeCoords.xy * u_dimensions - v_halfDimensions;
 
-      float nodeDist;
-      float nodeAlpha;
+      float nodeDist = roundedBox(boxUv, v_halfDimensions - v_edgeWidth, u_radius);
+      float nodeAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, nodeDist);
+      resultColor = mix(resultColor, color, nodeAlpha);
 
       if(v_borderZero == 1.0) {
-        nodeDist = roundedBox(boxUv, v_halfDimensions - v_edgeWidth, u_radius);
-        nodeAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, nodeDist);
-        gl_FragColor = mix(vec4(0.0), color, nodeAlpha) * u_alpha;
+        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);
 
-      if(u_borderGap == 0.0) {
-        resultColor = mix(resultColor, u_borderColor, 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, outerDist));
-        resultColor = mix(resultColor, color, 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, innerDist));
-        gl_FragColor = resultColor * u_alpha;
-        return;
-      }
-
-      nodeDist = roundedBox(boxUv, v_halfDimensions - v_edgeWidth, u_radius);
-      nodeAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, nodeDist);
       float borderDist = max(-innerDist, outerDist);
-      float borderAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, borderDist);
+      float borderAlpha = (1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, borderDist)) * u_borderColor.a;
 
-      resultColor = mix(vec4(0.0), color, nodeAlpha);
-      resultColor = mix(resultColor, u_borderColor, borderAlpha * 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

@@ -92,10 +92,12 @@ export const RoundedWithBorderAndShadow: WebGlShaderType<RoundedWithBorderAndSha
       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;
+        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);
@@ -205,13 +207,11 @@ 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;
-      float nodeAlpha;
+      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 shadowAlpha;
 
       if(v_borderZero == 1.0) {
-        nodeDist = roundedBox(boxUv, v_halfDimensions - v_edgeWidth, u_radius);
-        nodeAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, nodeDist);
         shadowAlpha = shadowBox(boxUv - u_shadow.xy, v_halfDimensions + u_shadow.w - v_edgeWidth, u_radius + u_shadow.z);
         resultColor = mix(resultColor, u_shadowColor, shadowAlpha);
         gl_FragColor = mix(resultColor, color, nodeAlpha) * u_alpha;
@@ -225,15 +225,13 @@ export const RoundedWithBorderAndShadow: WebGlShaderType<RoundedWithBorderAndSha
         shadowAlpha = shadowBox(boxUv - u_shadow.xy, v_halfDimensions + u_shadow.w - v_edgeWidth, u_radius + u_shadow.z);
       }
 
-      nodeDist = roundedBox(boxUv, v_halfDimensions - v_edgeWidth, u_radius);
-      nodeAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, nodeDist);
       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 borderDist = max(-innerDist, outerDist);
-      float borderAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, borderDist);
+      float borderAlpha = (1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, borderDist)) * u_borderColor.a;
       resultColor = mix(resultColor, u_shadowColor, shadowAlpha);
       resultColor = mix(resultColor, color, nodeAlpha);
-      resultColor = mix(resultColor, u_borderColor, borderAlpha * u_borderColor.a);
+      resultColor = mix(resultColor, vec4(u_borderColor.rgb, 1.0), borderAlpha);
       gl_FragColor = resultColor * u_alpha;
     }
   `,

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);
+}