Confusion creating a cube texture

[mohadib]

Hello!,

I am trying to create a cube texture for rendering a panorama. I put this together after reading through code here and at Luma.gl. Here is what I'm trying: (deck.gl version 9.0.38)

      const text: Texture = device.createTexture({
          width:2048,
          height:2048,
          dimension: 'cube',
          data: {
            '+X': loadImageBitmap('/pano/pano_b.jpg'),
            '-X': loadImageBitmap('/pano/pano_d.jpg'),
            '+Y': loadImageBitmap('/pano/pano_f.jpg'),
            '-Y': loadImageBitmap('/pano/pano_l.jpg'),
            '+Z': loadImageBitmap('/pano/pano_r.jpg'),
            '-Z': loadImageBitmap('/pano/pano_u.jpg')
          },
        })

When I try this I just get a black screen, no errors. Any idea what I'm doing wrong here? Thanks! Rest of the code below:

import React, {useRef} from 'react'
import DeckGL from '@deck.gl/react'
import {COORDINATE_SYSTEM, SimpleMeshLayer, FirstPersonView, FirstPersonViewState} from 'deck.gl'
import {Texture, loadImageBitmap} from '@luma.gl/core'
import {CubeGeometry} from '@luma.gl/engine'

const INITIAL_VIEW_STATE: FirstPersonViewState = {
  latitude: 0,
  longitude: 0,
  position: [0, 0, 0],
  pitch: 0,
  bearing: 90
};

export default function App() {
  const deckRef = useRef()

  return (
    <DeckGL
      ref={deckRef}
      views={new FirstPersonView()}
      initialViewState={INITIAL_VIEW_STATE as any}
      controller={{scrollZoom: false, doubleClickZoom: false}}
      onDeviceInitialized={device => {

        const text: Texture = device.createTexture({
          width:2048,
          height:2048,
          dimension: 'cube',
          data: {
            '+X': loadImageBitmap('/pano/pano_b.jpg'),
            '-X': loadImageBitmap('/pano/pano_d.jpg'),
            '+Y': loadImageBitmap('/pano/pano_f.jpg'),
            '-Y': loadImageBitmap('/pano/pano_l.jpg'),
            '+Z': loadImageBitmap('/pano/pano_r.jpg'),
            '-Z': loadImageBitmap('/pano/pano_u.jpg')
          },
        })

        const layer = new SimpleMeshLayer({
          id: 'img-cube',
          data: [0],
          coordinateSystem: COORDINATE_SYSTEM.METER_OFFSETS,
          texture: text,
          mesh: new CubeGeometry(),
          getPosition: _ => [0, 0, 0],
          getOrientation: [0, 0, -90],
          getScale: [1, 1, -1],
          material: false
        } as any)

        deckRef.current.deck.setProps({
          layers: [layer]
        })
      }}
    />
  )
}