Realtime Reflection in Niantic Studio

🧑‍💻 Technical Support
1

Hi, I am trying to import a .glb model with reflective material in Niantic Studio but it looks dark where the reflection is supposed to happen. I know it takes the reflections module to overcome this but I am struggling to add that to my project. Is there a proper way to run the script there? thanks

2 Likes
2

Hi there, having the same problem. Is this going to get answered?

3

The realtime reflections module is for the legacy Cloud Editor, we’re working on porting it over to Studio.

1 Like
4

Is there any way for us to do it manually? I feel like this is the only thing holding me back honestly. Everything looks cartoony without it. All my metal materials are just super dark and it ruins the scene.

5

Since our rendering engine is based on THREE.js, you can use this method to force reflections:

However, for AR projects, the camera feed’s pixel array won’t be considered, so you’ll need to handle that separately in a similar way.

6

Here’s a custom component I created to add realtime reflections to your objects. It should work with any primitive and any custom GLB / GLTF, however it won’t reflect AR environments.

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

const {THREE} = window as any

let reflectionRenderTarget = null
let reflectionCamera = null

ecs.registerComponent({
  name: 'Reflections',
  schema: {
    near: ecs.i32,
    far: ecs.i32,
    resolution: ecs.i32,
  },
  schemaDefaults: {
    near: 1,
    far: 128,
    resolution: 128,
  },
  data: {
  },
  add: (world, component) => {
    const {near, far, resolution} = component.schema

    reflectionRenderTarget = new THREE.WebGLCubeRenderTarget(resolution, {generateMipmaps: true, minFilter: THREE.LinearMipmapLinearFilter})
    reflectionCamera = new THREE.CubeCamera(near, far, reflectionRenderTarget)

    world.three.scene.add(reflectionCamera)
  },
  tick: (world, component) => {
    reflectionCamera.update(world.three.renderer, world.three.scene)

    const object3D = world.three.entityToObject.get(component.eid)
    object3D.material.envMap = reflectionCamera.renderTarget.texture

    object3D.traverse((node: any) => {
      if (node.isMesh) {
        node.material.envMap = reflectionCamera.renderTarget.texture
      }
    })

    reflectionCamera.position.copy(object3D.position)
  },
  remove: (world, component) => {
  },
})
7

thanks for this script. It does change the object’s material properties such as metalness and roughness, but it does not seem to apply the reflection texture and it still displays a black object where the reflection should be.

8

Strange, could you post a video? These are the results I get:

Realtime Reflections with a Sphere and Monkey:

You probably need to change the near and far values on the entity to match your scene scale.

9

I cannot upload a video, but when I add the script as a custom component to a sphere with metalness 1 and roughness 0 I only get a black sphere. I tried putting Near and Far to 0.1 and 2000 but it does not change

10

Yeah, im getting the same. not sure what im doing wrong.

11

No worries, would you mind posting a picture of your editor window?

12

yep, just started with niantic so its probably something I missed.

image
image1920×955 238 KB

13

I see the issue now.

First, copy the code provided above into a new component file under “Files.” It looks like you tried adding it as a module instead. After that, apply the custom component to your object by selecting the object in the viewport, clicking “Add Component,” and navigating to “Custom Components.” Once you’ve done that, the reflections should work, and you’ll see the properties on the object itself.

14

Thank you for your help! I dont know if im missing something else. Here it is with a default cone. The BG is added under skybox in space settings.

image
image1867×1097 148 KB

15

Well I got it to work on build. Perhaps I had messed with the defaults too much but really happy its working. Thanks George!

1 Like
16

I’d love if you would share a picture or demo of your experience, using realtime reflections, over at:

17

Great, can I ask you what values you have on the component, please?

18

I got the script to reflect AR objects and scene components, but how did you also have the background reflected? That is what I am trying to achieve now, thanks

19

Would you mind sharing a screenshot of your scene? You might also need to adjust the far value in the properties to reach the skybox.

20

image
image1920×997 131 KB

this is my scene now. The sphere reflects 3d objects if I add them, but not the skybox. I tried increasing the far value but it does not seem to change anything. Thanks again for your time.