# Problem with tsl reflections

**URL:** <https://discourse.threejs.org/t/problem-with-tsl-reflections/77082>\
**Category:** Questions\
**Tags:** textures, materials, geometry, shaders\
**Created:** [January 26, 2025, 9:53am UTC](https://discourse.threejs.org/t/problem-with-tsl-reflections/77082 "2025-01-26T09:53:28Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![marcoscarvalho](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marcoscarvalho/32/54863_2.png) [@marcoscarvalho](https://discourse.threejs.org/u/marcoscarvalho)\
**Post date:** [January 26, 2025, 9:53am UTC](https://discourse.threejs.org/t/problem-with-tsl-reflections/77082/1 "2025-01-26T09:53:28Z")

</div>

I am trying to add reflections to my mesh as in the example from three js [reflection](https://github.com/mrdoob/three.js/blob/79497a2c9b86036cfcc0c7ed448574f2d62de64d/examples/webgpu_reflection.html)

But I am getting an error in my console that I have no idea why it is causing it.

Here is my code, do you see anything wrong with it?

```javascript
import { Mesh } from 'three';
import Structure from '../Structure/Structure';
import * as THREE from 'three';
import { reflector, texture, ShaderNodeObject, uv } from 'three/tsl';
import { MeshPhongNodeMaterial, ReflectorNode } from 'three/webgpu';
import OperatorNode from 'three/src/nodes/math/OperatorNode.js';

export default class Scenery {
  public model;
  public scene;
  public texture;
  public texture_2;
  public camera;
  public renderer: null | THREE.WebGLRenderer;
  public reflector: null | ShaderNodeObject<ReflectorNode>;
  public floorUV;
  public floorNormalOffset: null | ShaderNodeObject<OperatorNode>;

  constructor(structure: Structure) {
    this.renderer = structure.renderer.instance;
    this.scene = structure.scene;
    this.floorUV = uv().mul(15);
    this.texture = structure.loaders.items.scenery_texture;
    this.texture_2 = structure.loaders.items.scenery_bake_floor;
    this.model = structure.loaders.items.scenery_gltf.scene;
    this.camera = structure.camera.instance;
    this.reflector = null;
    this.floorNormalOffset = null;

    this.setModel();
    this.setMaterial();
  }

  setMaterial() {
    this.texture.flipY = false;
    this.texture_2.flipY = false;
    
    this.model.traverse((child) => {
      if (
        child instanceof Mesh &&
        child.material instanceof THREE.MeshStandardMaterial
      ) {

        this.floorNormalOffset = texture(this.texture_2, this.floorUV)
          .xy.mul(2)
          .sub(1)
          .mul(0.02);

        this.reflector = reflector({ resolution: 0.5 });
        this.reflector.target.rotateX(-Math.PI / 2);

        if (this.reflector.uvNode) {
          this.reflector.uvNode = this.reflector.uvNode.add(this.floorNormalOffset);
          this.scene.add(this.reflector.target);
        }

        child.material = new MeshPhongNodeMaterial({
          colorNode: texture(this.texture, this.floorUV).add(this.reflector),
        });
      }
    });
  }

  setModel() {
    this.scene.add(this.model);
  }
  
}

```

And to just make it clear, my textures are loading correctly, also the model, I tested it with MeshStandardMaterial and everything works fine, but when I try the reflection approach, I get this error:

 ![error](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/d/bda62fdb0538aa9b5fb8962c8ca63cda6330884e.png)

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [January 26, 2025, 12:12pm UTC](https://discourse.threejs.org/t/problem-with-tsl-reflections/77082/2 "2025-01-26T12:12:25Z")

</div>

```javascript
public renderer: null | THREE.WebGLRenderer;

```

You seem to be using the `THREE.WebGLRenderer` in your code, but importing `three/tsl`.

TSL uses the `THREE.WebGPURenderer`

See line 129 of the official example code you shared. [three.js/examples/webgpu\_reflection.html at 79497a2c9b86036cfcc0c7ed448574f2d62de64d · mrdoob/three.js · GitHub](https://github.com/mrdoob/three.js/blob/79497a2c9b86036cfcc0c7ed448574f2d62de64d/examples/webgpu_reflection.html#L129)

---

<div class="post-metadata">

**Author:** ![marcoscarvalho](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marcoscarvalho/32/54863_2.png) [@marcoscarvalho](https://discourse.threejs.org/u/marcoscarvalho)\
**Post date:** [January 26, 2025, 12:30pm UTC](https://discourse.threejs.org/t/problem-with-tsl-reflections/77082/3 "2025-01-26T12:30:58Z")

</div>

Thank you so much, it was exact the problem, I didn’t know of this. I will study more about tsl before trying to implement it because I still don’t know if it can work along with WebGLRenderer or if it would be performant using both of them at the same time.