问

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

海纳百川2602902033 发布于 2022-12-28 18:18

我已经在网上搜索了一段时间，但尚未找到正确的答案。我找到了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）？



        
        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，并使用它来管理两端的数组。 

        
                
                    2022-12-28 18:22  回答
                       时间证明一2602891163
                
            
                    
    
    
    
        撰写答案
        
            
                
                    回答问题...



    
    
        今天，你开发时遇到什么问题呢？
        立即提问
    

    
        热门标签