Feature Request: Skybox Lightning and Reflection

Hey guys.

When can we expect to get a proper PBR workflow in studio.

The models have by default PBR material, but if we put Metallic to 1, it becomes black, because it needs to have Skybox reflections to work.

Without a proper Skybox ligning where we can use a HDRI to “fake light” our models, we are left with the not so performance friendly Default lights.

See ya.

Great suggestion! This is currently in the works. :slight_smile:

Hey @GeorgeButler, is there any follow up to this feature? Is there anywhere to track the progress of this?

And could one just do this by creating a component and adding an environment map using three ?

You totally could. I wrote a custom component for this as a proof of concept.

import * as ecs from '@8thwall/ecs'

ecs.registerComponent({
  name: 'Custom Reflection Sky',
  schema: {
  },
  schemaDefaults: {
  },
  data: {
  },
  stateMachine: ({world, eid, schemaAttribute}) => {
    const {THREE} = window as any
    const textureLoader = new THREE.TextureLoader()

    ecs.defineState('off')
      .initial()
      .onEnter(() => {
        console.log('Viewing: Default')
        world.three.scene.background = null
        world.three.scene.environment = null
        world.three.scene.background = new THREE.Color(0x87ceeb)

        ecs.assets.load({url: 'assets/skybox.png'})
          .then((r) => {
            textureLoader.load(`${r.remoteUrl}`, (tex: any) => {
              tex.mapping = THREE.EquirectangularReflectionMapping
              tex.encoding = THREE.sRGBEncoding
              world.three.scene.environment = tex
            })
          })
      })
  },
})

YES! awesome. Thank you @GeorgeButler. I was battling with loading 6 imgs using the CubeTextureLoader, but it just wouldn’t load them. I didn’t know you could just load one sky env texture like this. Great!

1 Like