Question

我在THREE.js中有数千个点的动画，可以及时改变他们的位置。我想使用着色器来加快动画效果。由于我对着色器完全不熟悉，所以我想从动画开始只有一点。在每个时间步骤中，我想指定保存在向量数组中的点预定义位置（位置）。因此，如果time = 1，则该点的位置将等于positions [1]

我尝试将位置保存为制服并将其传递给顶点着色器，但它无法正常工作。

我应该做些什么？这是正确的做法吗？

点声明

//example array with only three vectors but I would like to use arrays which thousands of vectors
var positions = [
    new THREE.Vector3(1.6, 2.5, 4.0),
    new THREE.Vector3(1.8, 2.5, 3.8),
    new THREE.Vector3(1.2, 2.0, 3.0)
]

var geometry = new THREE.BufferGeometry();    
geometry.addAttribute("position", new THREE.Float32BufferAttribute([1.6, 2.5, 4.0],3))

var material = new THREE.ShaderMaterial({
    vertexShader: document.getElementById( 'vertexShader' ).textContent,
    fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
    uniforms: {
        time: { type: 'f', value: 0 },
        positionArray: {type: "v3v", value: positions} 
    }
})
var point = new THREE.Points(geometry, material);
scene.add(point)

动画

function animate() {
    requestAnimationFrame(animate);

    time = time + 1
    material.uniforms.time.value = time;

    controls.update();
    renderer.render(scene, camera);
    stats.update();
}

顶点着色器

uniform vec3 positionArray[3];      
uniform float time;

void main () {

    vec3 newPosition;
    newPosition= positionArray[time];
    gl_PointSize = 10.0;

    gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
    }

基于THREE.js中着色器的位置数组动画点的位置

0 个答案: