使用 sample2D 作为顶点着色器中的位置答案

【问题标题】：Using sample2D as position in vertex shader使用 sample2D 作为顶点着色器中的位置
【发布时间】：2013-08-15 14:53:22
【问题描述】：

我正在学习如何在 webGL 中使用 FBO 操作粒子，我尝试使用纹理存储位置并将其用作位置参考，但舞台上什么也没有出现。

片段着色器

precision mediump float;

void main() {

gl_FragColor = vec4(vec3(1.0), 1.0);

}

</script>

顶点渲染着色器脚本

attribute vec2 aTextureUV;
uniform sampler2D uTexture;

void main() {
vec4 texture = texture2D( uTexture, aTextureUV );
gl_Position = vec4( texture.rgb, 1.0 );
gl_PointSize = 3;
}

</script>

JS 脚本

// Determine the UVs
var uvs = new Float32Array([
0.0, 0.0,
1.0, 0.0,
0.0, 1.0,
1.0, 1.0
])

var uvBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, uvBuffer );
gl.bufferData( gl.ARRAY_BUFFER, uvs, gl.STATIC_DRAW );
gl.enableVertexAttribArray( defaultProgram.aTextureUVLoc );
gl.vertexAttribPointer( defaultProgram.aTextureUVLoc, 2, gl.FLOAT, false, 0, 0);

// Texture initialization
for(var i = 0; i < particleCount; i++) {
            initialData.push(
                Math.random(),
                Math.random(),
                Math.random(),
                0
            );
        }

var texture = gl.createTexture();
gl.activeTexture( gl.TEXTURE0 );
gl.bindTexture( gl.TEXTURE_2D, texture );
gl.pixelStorei( gl.UNPACK_ALIGNMENT, 1 );

gl.texImage2D(
gl.TEXTURE_2D, 0, gl.RGBA, fboWidth, fboWidth, 0,
gl.RGBA, gl.FLOAT, new Float32Array(initialData)
);

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

.....


function draw() {

   requestAnimationFrame( draw );

   gl.viewport( 0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight );
   gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
   gl.drawArrays( gl.POINTS, 0, particleCount );
}

【问题讨论】：

为什么不在缓冲区中？
你说的是纹理吗？当您使用 gl.bindTexture 时，它会自动附加到上下文吗？因为当我在片段着色器中调用 texture2D 时，此代码有效（没有缓冲区）。但是如果我错了请纠正我，我对整个系统的理解仍然很薄弱。

标签： webgl

【解决方案1】：

尚不能发表评论，但就像 desktop GL 评论一样，我可以看到 1）您的脚本中没有实际的绘图调用，即 glDrawElements/glDrawArrays（除非您'已经遗漏了一些部分），以及2）你缺少一个片段着色器。请参阅例如this。

【讨论】：

好的，我已经添加了我的片段着色器和绘图功能来发布，剩下的我已经忽略了。无论如何，我没有做任何复杂的事情，当我在片段着色器中移动 texture2D 时，代码起作用了。但我不明白为什么。