TextureTools.GetTextureDataAsync Get texture data error

The error message for obtaining the texture in the project created by create-react-app is as follows:


my code:

import { Engine, Scene, SceneLoader, TextureTools } from '@babylonjs/core';
import { useEffect, useRef, useState } from 'react';
import './App.css'
import '@babylonjs/loaders'
import AppCamera from './appCamera';

let engine: null | Engine = new Engine(document.getElementById("renderCanvas") as HTMLCanvasElement, true);;
let scene: null | Scene = null;

scene = new Scene(engine);
let camera = new AppCamera();
engine.runRenderLoop(() => {
  scene?.render();
});

function App() {
  
  const canvas = useRef<any>(null);
  const [file, setFile] = useState<null | File>(null);

  const onDrop = async(fileObjs: FileList | null) => {
    if (!fileObjs ||  fileObjs.length < 1) return;
    const fileObj = fileObjs[0];
    setFile(fileObj);
  
    // @ts-ignore
    const texture: BaseTexture = scene?.textures[0];
    const size = texture.getSize();
    const data =  await TextureTools.GetTextureDataAsync(texture, size.width, size.height, 0, 0);
    return false;
  };


  return (

      <div className="App">
      {!file && (
                
                <div className="next-upload-drag">
                    <p className="next-upload-drag-text">
                        drup file
                    </p>
                    <p className="next-upload-drag-hint"> gltf, glb, obj, .babylon</p>
                    <input type="file" onChange={(e) => onDrop(e.target.files)} />
                </div>
           
        )}
        <div className="canvas-render"><canvas id="renderCanvas" ref={canvas}></canvas></div>
      </div>

Welcome aboard!

You have some html code inside a shader, I don’t know how it is possible… It seems the shader repository is corrupted. Try to display BABYLON.ShaderStore.ShadersStore["lodPixelShader"] and see if it is html or glsl code.

1 Like