在THREE.js中将vec2数组传递给着色器

问题描述

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

I've been searching the web for a while now and did not find the correct answer yet.I found the list of uniform types THREE.js uses, and I think the following code should be correct. At the last line I define an uniform array of 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脚本中，按以下方式传递此数组。我想这也应该起作用：

In my js script I pass this array as follows. This should work too, I guess:

// 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） ？

My question now is, how do I access this uniform variable (pointList in this case) from the fragmentshader?

推荐答案

您应该知道数组的最大大小是多少，所以说您有一个数组：

You should know what is the max size that your array should be, so say you have an array:

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

您初始化着色器时，可以按照以下步骤进行操作：

you can do something along these lines, when you initialize a shader:

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

In您将初始化myVertexShader：

In myVertexShader you would init:

uniform vec2 _myVec2UniformArray[ARRAYMAX];

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

You don't have to populate the array, but you can expose ARRAYMAX in js, and use it to manage the array on both ends.

这篇关于在THREE.js中将vec2数组传递给着色器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！