javascript - shaders - shader programming

Actualización del atributo ShaderMaterial en three.js

Question

Desde el tutorial three.js sobre sombreadores , aprendemos que podemos actualizar valores uniformes de un ShaderMaterial:

var attributes = {
displacement: {
type: ''f'', // a float
value: [] // an empty array
}
};
var uniforms = {
amplitude: {
type: ''f'', // a float
value: 1
}
};
var vShader = $(''#vertexshader'');
var fShader = $(''#fragmentshader'');
// create the final material
var shaderMaterial =
new THREE.MeshShaderMaterial({
uniforms: uniforms,
attributes: attributes,
vertexShader: vShader.text(),
fragmentShader: fShader.text()
});
...
var frame = 0;
function update() {
// update the amplitude based on
// the frame value.
uniforms.amplitude.value =
Math.cos(frame);
// update the frame counter
frame += 0.1;
renderer.render(scene, camera);
// set up the next call
requestAnimFrame(update);
}

Lo que no se menciona es si este mismo comportamiento se extiende a los atributos. Desde mi propia experimentación, intenté hacer vértices a partir de la demo de jitter de la esfera al asignar desplazamientos aleatorios en cada cuadro, por ejemplo:

 function update() {
// update the amplitude based on
// the frame value.
values = attributes.displacement.value
for(var v = 0; v < vertCount; v++) {
values[v] = (Math.random() * 30);
}
renderer.render(scene, camera);
// set up the next call
requestAnimFrame(update);
}

Sin embargo, el resultado es una bola deformada estática. Parece que los atributos solo toman el primer valor al que están asignados. Después de eso, no pueden ser actualizados. Sin embargo, ¿se espera esto un comportamiento de los atributos de GLSL o hay un paso adicional que debo seguir para actualizar los atributos? Si es este último, ¿hay una solución disponible para lograr lo deseado además de establecer las posiciones de los vértices en javascript?

Answer 1

Resulta que es posible actualizar atributos como uniformes. En mi caso, me faltaba una línea importante de código:

attributes.displacement.needsUpdate = true;

La línea se omitió en el tutorial y al agregarlo obtengo el comportamiento exacto que estaba esperando.