javascript - Updating ShaderMaterial attribute in three.js - Stack Overflow

admin管理员组

文章数量:1254587

From the three.js tutorial on shaders, we learn we can update uniform values of a 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);
}

What isn't mentioned is whether this same behavior extends to attributes. From my own experimenting, I tried making vertices from the sphere demo jitter about by assigning random displacements every frame, e.g.:

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

However the result is a static misshapen ball. It appears that attributes only take on the first value to which they are assigned. After that, they cannot be updated. However, is this a behavior expected of glsl attributes or is there an additional step I need to take to update attributes? If the latter, is there a workaround available to achieve the desired besides setting vertex positions in javascript?

From the three.js tutorial on shaders, we learn we can update uniform values of a 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);
}

What isn't mentioned is whether this same behavior extends to attributes. From my own experimenting, I tried making vertices from the sphere demo jitter about by assigning random displacements every frame, e.g.:

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

However the result is a static misshapen ball. It appears that attributes only take on the first value to which they are assigned. After that, they cannot be updated. However, is this a behavior expected of glsl attributes or is there an additional step I need to take to update attributes? If the latter, is there a workaround available to achieve the desired besides setting vertex positions in javascript?

• javascript
• three.js
• glsl
• webgl
• vertex-shader

Share Improve this question Follow edited Nov 29, 2013 at 14:58 16807 asked Nov 28, 2013 at 19:17 1680716807 1,52522 gold badges2020 silver badges3333 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 17

Turns out it is possible to update attributes like uniforms. In my case, I was missing one all important line of code:

attributes.displacement.needsUpdate = true;

The line was omitted from the tutorial and upon adding it I get the exact behavior I was hoping for.

本文标签： javascriptUpdating ShaderMaterial attribute in threejsStack Overflow