Virtual Background with Image asset

    <div class="flex w-full h-auto my-auto">
      <canvas id="app"></canvas>
  </div>

  <script type="module">

  	 

    const canvas = document.getElementById('app');

    const gfxOptions = {
        deviceTypes: ['webgl2'],
        glslangUrl: '/plugins/playcanvas/js/glslang/glslang.js',
        twgslUrl: '/plugins/playcanvas/js/twgsl/twgsl.js'
    };

    const device = await pc.createGraphicsDevice(canvas, gfxOptions);
    const createOptions = new pc.AppOptions();
    createOptions.graphicsDevice = device;

    createOptions.componentSystems = [
    pc.RenderComponentSystem,
    pc.CameraComponentSystem,
    pc.LightComponentSystem
];
    createOptions.resourceHandlers = [pc.TextureHandler, pc.ContainerHandler, pc.ScriptHandler];

    const app = new pc.AppBase(canvas);
    app.init(createOptions);

    const assets = {
    "image-texture": new pc.Asset('image-texture', 'texture', { 'url': '../../textures/texture.png' }),
    "playcanvas-virtual-background": new pc.Asset('playcanvas-virtual-background', 'script', { 'url': '../../js/playcanvas-virtual-background-1.70.js' }),
    "tv": new pc.Asset('tv', 'container', { 'url': '/plugins/playcanvas/assets/models/tv.glb' })
};


    const assetListLoader = new pc.AssetListLoader(Object.values(assets), app.assets);
    assetListLoader.load(async() => {
      app.start();

      // Set the canvas to fill the window and automatically change resolution to be the same as the canvas size
      app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
      app.setCanvasResolution(pc.RESOLUTION_AUTO);

      // Ensure canvas is resized when window changes size
      const resize = () => app.resizeCanvas();
      window.addEventListener('resize', resize);
      app.on('destroy', () => {
          window.removeEventListener('resize', resize);
      });

      app.scene.ambientLight = new pc.Color(0.2, 0.2, 0.2);

      // Create an Entity with a camera component
      const camera = new pc.Entity();
      camera.addComponent('camera', {
          clearColor: new pc.Color(0.4, 0.45, 0.5)
      });
      camera.translate(0, 0, 15);

      // Create an Entity with a omni light
      const light = new pc.Entity();
      light.addComponent('light', {
          type: 'omni',
          color: new pc.Color(1, 1, 1),
          range: 30
      });
      light.translate(5, 5, 10);

      app.root.addChild(camera);
      app.root.addChild(light);

 

        //get the image asset texture
        const imageTexture = app.assets.find("image-texture", "texture").resource;
 

      // create an entity to render the tv mesh
const entity = assets.tv.resource.instantiateRenderEntity();
entity.setLocalEulerAngles(90, 0, -90);
app.root.addChild(entity);
const virtual = new pc.Entity();
virtual.addComponent("virtual-background", {
meshInstance: entity.render.meshInstances[1],
texture: imageTexture,
bgImage: "../../textures/virtualbg.jpg"
});
app.root.addChild(virtual);

 

 


 
      });

  </script>