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 deck.gl. Here is what I'm trying: (deck.gl version 9.0.38, luma.gl version 9.0.28)

      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]
        })
      }}
    />
  )
}

[ibgreen]

Cube textures need to be sampled differently in the GLSL shader, you'll need to write a custom layer with modified shaders.

[mohadib]

Thanks again, I did not have any sampler config. I add some linear filtering and everything looks great now!

 sampler: device.createSampler({
            minFilter: 'linear',
            magFilter: 'linear',
            mipmapFilter: 'linear'
          }

[mohadib]

@ibgreen one last question.. do you have any ideas on how I could implement a zoom, but without moving? The zoom functionality of FirstPersonController appears to move the camera and has some odd distortion issues with the cube geometry. I would like to maybe just magnify the current view.. Hope this makes sense. Attached screenshots of two zoom levels. Thanks! (everything looks perfect if I dont zoom in)

[mohadib]

got this worked out. for anyone else who might have a similar need... it was as easy as multiplying gl_Position by a x,y scaling vector in the vector shader. Only thing to note about this is when you are really zoomed in and drag the map, its similar to looking through a scope and trying to walk around hah. I need to scale the bearing/pitch delta on drag too.

[ibgreen]

do you have any ideas on how I could implement a zoom, but without moving? The zoom functionality of FirstPersonController appears to move the camera and has some odd distortion issues with the cube geometry. I would like to maybe just magnify the current view.

@mohadib Sounds like the canonical use case for 'OrbitView`

[mohadib]

@ibgreen I did actually spend some time trying to get Orbit view working. I did not have success getting it to orbit around a point inside of a cube.

[ibgreen]

@mohadib Great to see that you got unblocked. Looks amazing. Any chance you'd be interested in contributing your CubemapLayer to open source?

[mohadib]

@ibgreen absolutely! Im trying to get the editable geojson layer working 100%, after that I'll push it up and share a link here. Thanks again for the help!

[ibgreen]

A good place to contribute a new layer could be deck.gl-community repo, e.g.

• https://github.com/visgl/deck.gl-community/tree/master/modules/experimental/src
• https://github.com/visgl/deck.gl-community/tree/master/modules/layers/src

(The review bar for contributions is rather high here in the official deck.gl repo.)