是否可以在多个网格中共享几何图形并为每个网格应用不同的shaderMaterial?

时间:2014-01-30 09:56:45

标签: javascript three.js webgl

我实例化了一个PlaneGeometry,然后我实现了200个网格共享这个几何体以及它们自己的给定shaderMaterial实例。以下是代码的简化版本:

...
var geom = new THREE.PlaneGeometry(10,10,2,2);
var meshes = [];
var material=null;

for (var i=0 ; i<200 ; i++)
{
   var elevations = getElevations(i); //return an array of 9 values, values are different for each mesh
   var mat = new THREE.ShaderMaterial({
               vertexShader : vsAlti, //process displacement on y coordinate of the vertex
               fragmentShader : fsAlti,
               attributes : { elevation :  { type : 'f',value : elevations }}
            };
   meshes.push(new THREE.Mesh(geometry , mat));
}
...

虽然,每个网格的高程属性的数组值不同,但只有一个应用于所有网格。看起来只有一个shaderMaterial实例应用于所有网格。我宁愿期望对于每个网格物体,将应用具有匹配属性高程值的着色器。

修改:

这是jsfiddle:http://jsfiddle.net/McNulty/L584j/119/

2 个答案:

答案 0 :(得分:0)

尝试此代码..让我知道,它是如何工作的..

var geom = new THREE.PlaneGeometry(10,10,2,2);
var meshes = [];
var material=null;
var attrib = {
     elevations: {
        type: 'f',
        value: []
     }};
for (var i=0 ; i<20 ; i++){

    attrib.elevations.value[i] = (10*i) + 0.25 ; // for example
}
var mat = new THREE.ShaderMaterial({ vertexShader : vsAlti, 
           fragmentShader : fsAlti,
           attributes : attrib });
var mesh = new THREE.Mesh(geometry , mat);
scene.add(mesh)

答案 1 :(得分:0)

绝对可以共享几何体并同时为每个网格物体提供不同的材质。你的代码似乎是正确的。你确定你的着色器对不同的高程值有正确的反应吗?

当您使用两个不同的几何图形和两个不同的着色器材质创建两个网格时,它是否有效?