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

Question

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

Gpgpu 工作正常，我猜是因为我看到几个像素和一个在中心的像素被推到一边，因为我输入代码只是为了测试。

现在我想传递球体顶点。这是我正在采取的步骤。请指出错误:-)

编辑：添加小提琴 - click here

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;   
}

2) 保存在数据纹理中

posTexture[2] = new THREE.DataTexture(a, 16, 16, THREE.RGBAFormat, THREE.FloatType);

3) 设置“设置场景”（它应该将数据纹理传递给它一次） setUniforms = { posTexture：{类型：“t”，值：posTexture [2]} };

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);

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>

5) 动画它！！！ start 设置 SetShader 以保存数据并将 WebGLRenderTarget 输出到下一个着色器：一个负责计算并返回带有坐标的纹理，下一个用于显示

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);

}

Answer 1

我不得不稍微润色一下着色器代码，我觉得有点乱^^http://jsfiddle.net/ec5zU/1/

嗯，您正在尝试将球体顶点向下推到 gpu。您想要这样做的事实表明您可能不太了解 gpgpu 的概念。它可以在 GPU 上计算东西（算法、数学）。这是一个在不执行/显示 3D 相关内容的情况下使用 GPU 的概念。

将球体顶点传递给纹理，然后用该纹理做一些事情对我来说毫无意义——但也许我只是不太明白你想要做什么。那么您能否详细说明您使用 gpgpu 方法的最终目标？

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

将 cmets 包括在这个答案中我想说的是：我建议学习更多关于着色器和 three.js 的知识，因为大多数时候事情可以做得更容易和更好。如果那个演示案例很重要，那么尝试实现我和 Andon M. Coleman 给你的修复，想想你的球体逻辑以及你想如何实现它，因为你现在做的方式也不行很有道理……

如果您确定没有比每帧在纹理上创建和重新分配位置更好的方法，那就这样吧:) 我又玩了一个小时，添加了 cmets，更改了一些东西，修复了最糟糕的部分，然后现在你看到一个红点在屏幕上移动：http://jsfiddle.net/ec5zU/2/ 我不会再投入任何时间了，因为我认为 stackoverflow 并不是要对你的项目进行编码^^ 我希望我能提供一些帮助，并且你有一个再次开始，因为现在有些东西实际上正在“工作和移动”。祝你好运，玩得开心！

（Stackoverflow 告诉我要包含一些代码。所以底部有一些经过优化的着色器代码。）

   <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>