Texture not loading while converting example to React

Questions
1

https://playground.babylonjs.com/#ARLADE
I am trying to convert this example into a create-react-app

I am able to render the environment with the background and different layers but the textures are not loading. Everything appears red and checker-boxed

This is the error/warning that I receive:
engine.rawTexture.ts:240 WebGL: INVALID_OPERATION: texImage2D: ArrayBufferView not big enough for request

push../node_modules/@babylonjs/core/Engines/Extensions/engine.rawTexture.js._engine__WEBPACK_IMPORTED_MODULE_3__.Engine.updateRawTexture	@	engine.rawTexture.ts:240

push…/node_modules/@babylonjs/core/Engines/Extensions/engine.rawTexture.js.engine__WEBPACK_IMPORTED_MODULE_3_.Engine.createRawTexture @ engine.rawTexture.ts:268
RawTexture @ rawTexture.ts:38
RawTexture.CreateRGBATexture @ rawTexture.ts:126
SpriteMap._createTileBuffer @ spriteMap.ts:441
xhr.onload @ spriteMap.ts:584
load (async)
SpriteMap.loadTileMaps @ spriteMap.ts:579
onSceneReady @ App.js:216
(anonymous) @ babylonjs-hook.tsx:43
commitHookEffectListMount @ react-dom.development.js:19731
commitPassiveHookEffects @ react-dom.development.js:19769
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
flushPassiveEffectsImpl @ react-dom.development.js:22853
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushPassiveEffects @ react-dom.development.js:22820
(anonymous) @ react-dom.development.js:22699
workLoop @ scheduler.development.js:597
flushWork @ scheduler.development.js:552
performWorkUntilDeadline

    this._gl.texImage2D(this._gl.TEXTURE_2D, 0, internalSizedFomat, texture.width, texture.height, 0, internalFormat, textureType, data);

I have tried multiple different paths for the spritesheet and tilemap but nothing has changed.

Thank you for your help

2

Hiya M, welcome to the forum, and sorry for the slow responses.

Were you able to solve your texture-loading problems?

ArrayBufferView is used often in the BabylonJS rawTexture class… Babylon.js/rawTexture.ts at master · BabylonJS/Babylon.js · GitHub

A web search about this error returns many hits, so it MIGHT be a WebGL-level issue.

There’s plenty to read about it… on the web, at least.

If this issue is solved, great (and maybe teach us about the fix). If problem persists, perhaps we will get fresh comments. Be well… sorry about delays.

1 Like
3

It might be cause you do not have access to the textures due to a cors issue ?