I got stuck trying to update a colorNode on a webgpu material. Colors weren’t changing. It requires the needsUpdate property like geometry attributes do.
createGeometry() {
return new TextGeometry(this.config);
}
/**
* Setter to set an updated color on the colorNode
*/
set color(val) {
const colorNode = WebGPUtils.createWebGPUColorShader();
this.material.colorNode = colorNode({ color: val });
this.material.needsUpdate = true;
}
init(config) {
const texture = config.texture;
this.initTexture(texture, config.maxAnisotropy);
this.material = new MeshBasicNodeMaterial({ map: texture, color: new Color(config.color), opacity: 1.0, transparent: true, depthTest: false, side: DoubleSide, alphaTest: 0.0001 });
this.color = this.material.color;
Oxyn
May 22, 2025, 12:32pm
2
Yup! when you redefine any material nodes an update is necessary..MyNode = something
But you can also use uniforms and pass your new color to the node instead, no recompilation needed in this case.
1 Like
It’s not well documented for webgpurender. I also tried the uniform function and didn’t update. I’m using the color tsl method.
import { texture, color, min, max, Fn, uniform, clamp, fwidth } from 'three/tsl';
export default class WebGPUtils {
static createWebGPUColorShader() {
return Fn((input) => {
//const color = uniform(input.color);
return color(input.color);
});
}
static createWebGPUOpacityShader() {
return Fn((input) => {
const tex = texture(input.texture);
const opacity = uniform(input.opacity);
Geometries needed modifying the original buffer, setting a range and then calling needsUpdate to properly update.
this.attributes.position.updateRanges = [{ start: 0, count: this.layout.drawRange }];
this.attributes.uv.updateRanges = [{ start: 0, count: this.layout.uvOffset}];
this.index.updateRanges = [{ start: 0, count: this.layout.indexOffset}];
this.index.needsUpdate = true;
this.attributes.position.needsUpdate = true;
this.attributes.uv.needsUpdate = true;
//multipage support if enabled
if (opt.multipage) {
const page = new BufferAttribute(this.layout.pages, 1);
if (this.attributes.page) {
this.attributes.page = page;
this.attributes.page.needsUpdate = true;
} else {
I’m trying to create an XR controller hover effect on intersections. To determine an intersection. Unfortunately the marker gets hidden under the mesh material with the colorNode change. Not sure what is going on there yet a renderOrder requirement ?