将一个vec2数组以3j的形式传递给shader

时间:2022-06-01 12:49:03

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.

我已经在网上搜索了一段时间,但是还没有找到正确的答案。我找到了三种制服的清单。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: [] },
},

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

在我的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 );

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

我现在的问题是,如何从fragmentshader中访问这个统一变量(本例中的pointList) ?

2 个解决方案

#1


4  

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 you would init:

在myVertexShader中你会init:

uniform vec2 _myVec2UniformArray[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.

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

#2


1  

I would initialise it with some vectors just in case:

我会用一些向量初始化,以防:

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

I think this is what you need to add to your shader:

我认为这是你需要添加到你的阴影:

uniform vec2 pointList[2];

Also, if you want to avoid Vector2s you can use 2fv as uniform type:

另外,如果您想避免Vector2s,可以使用2fv作为制服类型:

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

#1


4  

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 you would init:

在myVertexShader中你会init:

uniform vec2 _myVec2UniformArray[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.

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

#2


1  

I would initialise it with some vectors just in case:

我会用一些向量初始化,以防:

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

I think this is what you need to add to your shader:

我认为这是你需要添加到你的阴影:

uniform vec2 pointList[2];

Also, if you want to avoid Vector2s you can use 2fv as uniform type:

另外,如果您想避免Vector2s,可以使用2fv作为制服类型:

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