Javascript 将顶点保存到纹理并传递到着色器

终于有时间玩着色器了，但有一刻被卡住了。我想将顶点传递给着色器，并在其上制作一些gpgpu

Gpgpu工作得很好，我想是因为当我输入代码进行测试时，我看到几个像素和中间的一个像素被推到了一边

现在我要传递球体顶点。以下是我正在采取的步骤。请指出错误：-）

编辑：添加小提琴-

1） 创建几何图形，并将其传递给数据数组

geometry = new THREE.SphereGeometry( 0.2, 15, 15 );
console.log(geometry.vertices.length);
var a = new Float32Array(geometry.vertices.length * 4);
for(var k=0; k<geometry.vertices.length; k++) {
                a[ k*4 + 0 ] = geometry.vertices[k].x;
                a[ k*4 + 1 ] = geometry.vertices[k].y;
                a[ k*4 + 2 ] = geometry.vertices[k].z;
                a[ k*4 + 3 ] = 1;   
}

3） 设置“设置场景”（应将datatexture传递给它一次） 设置制服={ posTexture:{type:“t”，值：posTexture[2]} };

4） 设置着色器

<script type="x-shader/x-vertex" id="setVert">

    // switch on high precision floats
    #ifdef GL_ES
    precision highp float;
    #endif
    varying vec2 vUv;
    uniform sampler2D posTexture;

    void main(){
        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
    }

</script>
<script type="x-shader/x-fragment" id="setFrag">

    #ifdef GL_ES
    precision highp float;
    #endif
    uniform sampler2D posTexture;
    varying vec2 vUv;

    void main(){
        vec3 color = texture2D( posTexture, vUv ).xyz;

        gl_FragColor = vec4(col, 1.0);
    }
</script>

---

我不得不稍微润色着色器代码，它对我来说有点凌乱^

好吧，你正在尝试将球体顶点向下推到gpu。您想要这样做的事实表明您可能还没有完全理解GPU的概念。它是用来计算GPU上的东西（算法、数学）。使用GPU而不做/显示3D相关的东西是一个概念

将球体顶点传递到纹理中，然后使用该纹理执行某些操作对我来说毫无意义——但也许我只是不太明白您要做什么。那么，您是否可以详细说明使用gpgpu方法的最终目标

在演示中，使用纹理的原因如下：您可以轻松地将数据从CPU（JavaScript）移动到GPU（如制服、属性），但反之则更难。一种可能性是为您的GPU提供一个单独的渲染目标，这样在渲染周期完成后，您将保存为纹理。然后你就可以“存储你的数据”

包括对这个答案的评论，我想说的是：我建议学习更多关于着色器和three.js的知识，因为大多数情况下，事情可以做得更简单更好。如果这个演示案例很重要，那么试着实现我和Andon M.Coleman给你的修复，想想你的sphere逻辑以及你想如何实现它，因为你现在的方式没有太多意义

如果你确定没有比在每帧纹理上创建和重新分配位置更好的方法了，那就这样吧：）我又玩了一个小时，添加了评论，更改了一些内容，修复了最糟糕的部分，现在你看到一个红点在屏幕上移动：我不会再投入更多的时间了，因为我认为stackoverflow并不意味着你的项目被编码了^^^我希望我能提供一些帮助，并且你又有了一个起点，因为现在有些东西正在“工作和移动”。祝你好运，玩得开心

（Stackoverflow告诉我要包含一些代码。因此底部有一些经过抛光的着色器代码。）

高精度浮点；
可变vec2 vUv；
统一的二维后置；
void main（）
{
vec3颜色=纹理2D（后期，vUv）.rgb；
颜色x+=0.01；
gl_FragColor=vec4（颜色，1.0）；
}

首先，片段着色器甚至不应编译（

col

未定义）。另一方面，RGBA纹理是无符号归一化的；通常不希望将顶点位置直接吐入此类纹理中，因为这样会丢失<0的任何坐标。假设它存储剪辑空间顶点位置，其中w=1.0，那么在将位置写入

gl\u FragColor

以输出到纹理之前，您希望乘以0.5并加上0.5。那么在这个位置中如何保存位置呢？我想用一些函数对球体进行变形和动画制作，所以我认为gpgpu将是这方面的完美之选？你如何才能获得以前的职位？我试图在这里这样做，但显然我失败了…所以你们想做的就是在屏幕上显示一堆像素。。？你不需要gpgpu，算了吧。有几种方法可以解决这个问题，最明显、最灵活的方法（也是最简单的方法，因为它是由THREE.js预编码的）是THREE.ParticleSystem。然后创建一个自定义顶点和碎片着色器（每个只有一个），其中包含一些逻辑。如果你不知道什么是片段/顶点着色器，或者不知道如何创建一个，我建议你阅读一些教程，比如。因此，在THREE.js的意义上，你应该创建一个带有“position”属性的缓冲几何体（有很多这样的例子），并可能用100k的位置填充它。首先尝试使用“ParticleSystemMaterial”，当它运行良好时，您可以创建一个自定义着色器，如上面的教程所示，并使用该着色器而不是3.ParticleSystemMaterial。在这些着色器中，您可以拥有自己的逻辑：在顶点着色器中，您定义位置现在的位置，并在片段着色器中定义其外观。我希望计算着色器中的噪波，而不是将其作为属性传递。我需要有上一个位置，因为它会从给定的xyz坐标添加噪波值来移动粒子。这就是为什么我想把数据放到纹理中，以便能够在下一次迭代中读取粒子坐标并添加新的置换。是吗？圆点一开始并没有为我移动（现在它在移动）。并且不移动=着色器没有交互。这就是我解决的问题，我相信你现在走的路是对的。然而，正如前面提到的，我自己无法编写代码。如果你觉得自己编写代码太难，那么也许你应该暂时放弃它。。。如果您觉得有一些非常具体的事情您还不了解，或者有一行代码您无法开始工作，那么我仍然很乐意提供帮助。

var setMaterial = new THREE.ShaderMaterial({
    uniforms: setUniforms,
    vertexShader:   document.getElementById('setVert').textContent,
    fragmentShader: document.getElementById('setFrag').textContent,
    wireframe: true
});

var setPlane = new THREE.Mesh(new THREE.PlaneGeometry(16,16), setMaterial);
setScene.add(setPlane);

<script type="x-shader/x-vertex" id="setVert">

    // switch on high precision floats
    #ifdef GL_ES
    precision highp float;
    #endif
    varying vec2 vUv;
    uniform sampler2D posTexture;

    void main(){
        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
    }

</script>
<script type="x-shader/x-fragment" id="setFrag">

    #ifdef GL_ES
    precision highp float;
    #endif
    uniform sampler2D posTexture;
    varying vec2 vUv;

    void main(){
        vec3 color = texture2D( posTexture, vUv ).xyz;

        gl_FragColor = vec4(col, 1.0);
    }
</script>

function animate() {

    requestAnimationFrame(animate);
    renderer.setViewport(0,0,16, 16);
    if(buffer == 0) {
        buffer = 1;
        a = 0;
        b = 1;
    } else {
        buffer = 0;
        a = 1;
        b = 0;
    }

    if(start) {
        renderer.render(setScene, processCamera, posTexture[a]);
        start = false;
    }

    posUniforms.posTexture.value = posTexture[a];
    renderer.render(posScene, processCamera, posTexture[b])
    dispUniforms.posTexture.value = posTexture[b];
    renderer.setViewport(0,0,dispSize.x, dispSize.y);
    renderer.render(scene, camera);

}

   <script type="x-shader/x-fragment" id="fragmentshader">

        precision highp float;

        varying vec2 vUv;
        uniform sampler2D posTexture;

        void main()
        {
            vec3 color = texture2D(posTexture, vUv).rgb;
            color.x += 0.01;
            gl_FragColor = vec4(color, 1.0);

        }

    </script>