Question

我已经在网上搜索了一段时间，但还没有找到正确的答案。我找到了THREE.js使用的统一类型列表，我认为以下代码应该是正确的。在最后一行，我定义了一个Vector2的统一数组。

uniforms: {
    "center":   { type: "v2", value: new THREE.Vector2( 0.5, 0.5 ) },
    "aspectRatio": { type: "f", value: null },
    "radius": { type: "f", value: 0.1 },
    "pointList":  { type: "v2v", value: [] },
},

在我的js脚本中，我按如下方式传递此数组。这也应该有用，我想：

// Add effects
effect = new THREE.ShaderPass( THREE.MetaBalls2D );
effect.renderToScreen = true;
effect.uniforms[ 'aspectRatio' ].value = window.innerWidth/window.innerHeight;
effect.uniforms[ 'pointList' ].value = pointList //is an array of THREE.Vector2;
composer.addPass( effect );

我现在的问题是，如何从fragmenthader访问这个统一变量（在本例中为pointList）？

Answer 1

您应该知道阵列的最大大小是什么，所以假设你有一个数组：

var myVec2Array = [
    new THREE.Vector2(),
    new THREE.Vector2(),
    new THREE.Vector2(),
    ...
]

初始化着色器时，您可以沿着这些方向执行某些操作：

var myShader = new THREE.ShaderMaterial({
    uniforms:{
        _myVec2UniformArray:{
            type:'v2v',
            value:myVec2Array
        }
    },
    vertexShader: 
        '#define ARRAYMAX '+ myVec2Array.length +'\n' + myVertexShader
}

在myVertexShader中你会初始化：

uniform vec2 _myVec2UniformArray[ARRAYMAX];

您不必填充数组，但可以在js中公开ARRAYMAX，并使用它来管理两端的数组。

Answer 2

我会用一些向量初始化它以防万一：

"pointList":  { type: "v2v", value: [ new THREE.Vector2(), new THREE.Vector2() ] },

我认为这是您需要添加到着色器中的内容：

uniform vec2 pointList[2];

此外，如果您想避免使用Vector2，可以使用2fv作为统一类型：

"pointList":  { type: "2fv", value: [ 1, 0,  0, 1 ] }

将一组vec2传递给THREE.js中的着色器

2 个答案: