在 three.js 中更新 ShaderMaterial 属性答案

【问题标题】：Updating ShaderMaterial attribute in three.js在 three.js 中更新 ShaderMaterial 属性
【发布时间】：2013-12-14 22:07:20
【问题描述】：

从three.js tutorial on shaders，我们了解到我们可以更新 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);
}

没有提到的是这种相同的行为是否扩展到属性。根据我自己的实验，我尝试通过在每帧分配随机位移来使球体演示中的顶点抖动，例如：

  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);
  }

但是结果是一个静态的畸形球。似乎属性只采用它们被分配的第一个值。之后，它们将无法更新。但是，这是 glsl 属性的预期行为，还是我需要采取额外的步骤来更新属性？如果是后者，除了在 javascript 中设置顶点位置之外，是否还有其他解决方法可以实现所需？

【问题讨论】：

标签： javascript three.js glsl webgl vertex-shader

【解决方案1】：

事实证明可以更新制服等属性。就我而言，我遗漏了一行非常重要的代码：

attributes.displacement.needsUpdate = true;

教程中省略了该行，添加后我得到了我希望的确切行为。

【讨论】：