lightNodeClass is not a constructor

[LukeWood]

Description

This is coming from setupLightsNode(). My class is:

import { Color } from 'three';
import {
  add,
  mul,
  positionLocal,
  sin,
  timerLocal,
  vec3,
  vec4,
  uv,
  sub,
  LightsNode,
} from 'three/src/nodes/TSL';
import { MeshStandardNodeMaterial } from 'three/src/materials/nodes/NodeMaterials.js';

/*
Kelp behaviors to implement:
    - swaying more gracefully
    - leaves of help
    - culling
    - ?
*/

function kelpPositionNode() {
  const t = timerLocal();

  const yWithTime = add(t, positionLocal.y);

  const offsetValueX = sin(yWithTime);
  const offsetValueZ = sin(mul(yWithTime, 4.0));

  return vec3(
    add(positionLocal.x, offsetValueX),
    positionLocal.y,
    add(positionLocal.z, offsetValueZ)
  );
}

export interface KelpMaterialOptions {
  dark: Color;
  light: Color;
}

export const KelpMaterial = (params: KelpMaterialOptions) => {
  const material = new MeshStandardNodeMaterial();

  material.positionNode = kelpPositionNode();

  const kelpDiscoloration = add(uv().y, Math.random() * 20);
  const amount = sin(kelpDiscoloration.mul(20));

  let color = mul(
    vec3(params.dark.r, params.dark.g, params.dark.b),
    amount
  ).add(
    mul(vec3(params.light.r, params.light.g, params.light.b), sub(1.0, amount))
  );

  material.colorNode = vec4(color.rgb, 1);
  return material;
};

Reproduction steps

Using three 0.168.0

Code

import { Color } from 'three';
import {
  add,
  mul,
  positionLocal,
  sin,
  timerLocal,
  vec3,
  vec4,
  uv,
  sub,
  LightsNode,
} from 'three/src/nodes/TSL';
import { MeshStandardNodeMaterial } from 'three/src/materials/nodes/NodeMaterials.js';

/*
Kelp behaviors to implement:
    - swaying more gracefully
    - leaves of help
    - culling
    - ?
*/

function kelpPositionNode() {
  const t = timerLocal();

  const yWithTime = add(t, positionLocal.y);

  const offsetValueX = sin(yWithTime);
  const offsetValueZ = sin(mul(yWithTime, 4.0));

  return vec3(
    add(positionLocal.x, offsetValueX),
    positionLocal.y,
    add(positionLocal.z, offsetValueZ)
  );
}

export interface KelpMaterialOptions {
  dark: Color;
  light: Color;
}

export const KelpMaterial = (params: KelpMaterialOptions) => {
  const material = new MeshStandardNodeMaterial();

  material.positionNode = kelpPositionNode();

  const kelpDiscoloration = add(uv().y, Math.random() * 20);
  const amount = sin(kelpDiscoloration.mul(20));

  let color = mul(
    vec3(params.dark.r, params.dark.g, params.dark.b),
    amount
  ).add(
    mul(vec3(params.light.r, params.light.g, params.light.b), sub(1.0, amount))
  );

  material.colorNode = vec4(color.rgb, 1);
  return material;
};

Live example

haven't produced yet

Screenshots

No response

Version

0.168.0

Device

Desktop

Browser

Chrome

OS

MacOS

[Mugen87]

I couldn't reproduce the issue with a live example: https://jsfiddle.net/L684ue3b/

The fiddle uses the current dev build. But even with the latest release r168 there is no runtime error.

Maybe it's a TS related issue?

[LukeWood]

I figured it out - it occurs when you pass a legacy light to the seen, imported from “three” instara of “three/webgpu”. I’ll try adding an error message in a PR

[WestLangley]

@LukeWood No need. three.js does not validate inputs.

[donmccurdy]

Related:

https://discourse.threejs.org/t/load-gltf-in-webgpurender-if-model-has-light-render-will-report-an-error/70595/5

I think this is not invalid user input, but another manifestation of #29156. If we can solve that the issue should go away.

[LukeWood]

Related:

https://discourse.threejs.org/t/load-gltf-in-webgpurender-if-model-has-light-render-will-report-an-error/70595/5

I think this is not invalid user input, but another manifestation of #29156. If we can solve that the issue should go away.

Totally agree that’s the best solution. I was actually considering forking three and doing that in my monorepo, so glad to know you all are looking into it.