Using sample2D as position in vertex shader - webgl

Question

I'm learning how to manipulate particles with FBO in webGL, I tried to store the position with a texture and use it a position reference, but nothing came up on the stage.
Fragment Shaders
precision mediump float;
void main() {
gl_FragColor = vec4(vec3(1.0), 1.0);
}
</script>
Vertex Render Shader 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 Script
// 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 );
}

Answer 1

Can't comment yet, but just as a desktop GL remark, I can see that 1) there are no actual draw calls in your script i.e. glDrawElements/glDrawArrays (unless you've left some parts of it out), and 2) you're missing a fragment shader. Refer to e.g. this.