更新ShaderMaterial在three.js所

屬性從three.js tutorial on shaders，我們知道我們可以更新ShaderMaterial的均勻值：更新ShaderMaterial在three.js所

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中設置頂點位置？

來源

2013-11-28 16807

原來，可以更新統一屬性。就我而言，我缺少一個代碼的所有重要防線：

attributes.displacement.needsUpdate = true;

線從教程省略了在添加它，我得到確切的行爲我所期待的。

來源

2013-11-28 21:41:11 16807

更新ShaderMaterial在three.js所

回答

相關問題