Three.js Examples: WebGPU materialX/noise work with flat plane?

Questions
, ,
1

The most recent three.js examples contain one called materialX/noise which shows several spheres with animated materials created using various mathematical methods for creating noise.

I have tried, but have been unable to get the fractal version (lower rights) to work with a flat plane or a cube - not even with segmented planes or cubes. The result is a flat plane or cube with an animated single color. For reference, here is a stripped down example of the fractal sphere.

Does anyone know how to make these materials work on a flat plane?

2

This example pulls in features from “three/nodes”. Since this is from the official distribution (not examples), is there any plans in the works to document these?

import {
normalWorld,
timerLocal,
mx_noise_vec3,
mx_worley_noise_vec3,
mx_cell_noise_float,
mx_fractal_noise_vec3
} from ‘three/nodes’

3

My understanding is that they do plan to document these nodes/functions (See milestones for r161 “Docs: How to Use Node Materials”). However, they have not had time to do so because they have been working full time to add these features and iron out any kinks. My guess is that we probably won’t have full documentation for another year. And, when they do, it will be amazing!

In the meantime, some of us can’t wait to open our presents and are trying to play with the new toys while they are still building them. I was hoping that that someone might have figured out how to do this. But, I certainly don’t want members of the development team to let these kinds of questions distract them from their efforts. I can wait.

3 Likes
4

The first parameter of mx_fractal_noise_vec3 are uv coordinates. In the case of the examples, normals were used as coordinates, but this is incompatible with plane, where the value is the same throughout the entire geometry, try instead of normalWorld use uv():

// let customUV = normalWorld.mul(10).add(offsetNode);
let customUV = uv().mul(20).add(offsetNode);
1 Like
5

Thanks. That did the trick - once I remembered to add uv to the node imports.