facebookarchive / react-360

Create amazing 360 and VR content using React
https://facebook.github.io/react-360
Other
8.73k stars 1.23k forks source link

<CylindricalLayer> renders all black in headset #82

Closed spikebrehm closed 7 years ago

spikebrehm commented 7 years ago

Description

I'm using the undocumented <CylindricalLayer> component. Viewing in Chrome, it renders as one would expect, but when "View in VR" is enabled, the layer renders completely black.

Expected behavior

<CylindricalLayer> properly renders in "View in VR" mode.

Actual behavior

<CylindricalLayer> renders all black "View in VR" mode.

"View in VR" == false

reactvr-cylindricallayer-vr-false

"View in VR" == true

reactvr-cylindricallayer-vr-true

Logs

--

Reproduction

const WIDTH = 1200;
const HEIGHT = 720;
const DENSITY = 6080;

class CylinderScene extends Component {
  render() {
    return (
      <View>
        <Pano source={asset('beach.jpg')} />
        <CylindricalLayer
          layer={{
            height: HEIGHT,
            width: WIDTH,
            density: DENSITY,
          }}
        >
          <View
            style={{
              backgroundColor: 'rgba(255, 0, 0, 0.4)',
              width: WIDTH,
              height: HEIGHT,
              flex: 1,
              alignItems: 'center',
            }}
          >
            <Image
              source={{ uri: 'https://pbs.twimg.com/profile_images/1101644270/600full-christopher-walken.jpg' }}
              style={{
                width: 400,
                height: 400,
              }}
            />
            <Text style={{ fontSize: 24 }}>
              Walken
            </Text>
          </View>
        </CylindricalLayer>
      </View>
    );
  }
}

Solution

?

Additional Information

├── react-vr@0.1.6
├── react-vr-web@0.1.6
mikearmstrong001 commented 7 years ago

resolved and fix will follow in next release