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）设置'设置场景'（它应该将datatexture传递给它一次） setUniforms = { posTexture：{type：“t”，value：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上计算内容（算法，数学）。这是一个与GPU协同工作而不进行/显示3D相关内容的概念。

将球体顶点传递到纹理然后使用该纹理做一些事情对我来说没有意义 - 但也许我只是不太明白你想要做什么。那么你可以用gpgpu方法详细说明你的最终目标吗？

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

包括对此答案的评论我想说的是：我建议学习更多关于着色器和three.js的知识，因为大部分时间都可以更轻松，更好地完成。如果那个演示案例很重要，那么尝试实现修复我和Andon M. Coleman给你的，并考虑你的领域逻辑以及你想如何实现它＆＃39;导致你现在这样做的方式并没有多大意义......

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

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

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

1 个答案: