Problem with tsl reflections

Questions
, , ,
1

I am trying to add reflections to my mesh as in the example from three js reflection

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?

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
error1215×611 33.8 KB

2 
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

1 Like
3

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.